// HomeSections.jsx — All homepage section components

// ── Shared helpers ────────────────────────────────────────────────────────────
const darkSection = { background: 'var(--color-neutral-darkest)', color: '#fff', padding: '80px 5%' };
const container   = { maxWidth: '1280px', margin: '0 auto' };
const centerMd    = { maxWidth: '576px', margin: '0 auto', textAlign: 'center' };
const eyebrow     = { fontSize: '11px', fontWeight: 600, marginBottom: '14px', color: 'rgba(255,255,255,0.5)', letterSpacing: '0.18em', textTransform: 'uppercase' };
const h2Style     = { fontFamily: 'var(--font-heading)', fontSize: 'clamp(2rem,4vw,3.75rem)', lineHeight: 1.15, fontWeight: 400, color: '#fff', marginBottom: '20px', letterSpacing: '0.01em' };
const bodyMd      = { fontSize: 'clamp(14px,1.5vw,17px)', lineHeight: 1.7, color: 'rgba(255,255,255,0.62)', marginBottom: '0' };
const btnFill     = { display:'inline-flex', alignItems:'center', gap:'8px', padding:'11px 22px', background:'linear-gradient(135deg,#2563EB 20%,#D94F4F)', color:'#fff', border:'none', borderRadius:0, fontSize:'14px', fontWeight:500, fontFamily:'var(--font-body)', cursor:'pointer', letterSpacing:'0.02em' };
const btnOutline  = { display:'inline-flex', alignItems:'center', gap:'8px', padding:'11px 22px', background:'transparent', border:'2px solid rgba(255,255,255,0.35)', color:'#fff', borderRadius:0, fontSize:'14px', fontWeight:500, fontFamily:'var(--font-body)', cursor:'pointer' };
const btnLink     = { display:'inline-flex', alignItems:'center', gap:'6px', background:'none', border:'none', padding:0, color:'rgba(255,255,255,0.6)', fontSize:'14px', fontFamily:'var(--font-body)', cursor:'pointer' };

// ── 1. Hero Header ────────────────────────────────────────────────────────────
function HeroHeader({ onNavigate }) {
  return (
    <section data-hero style={{ position:'relative', minHeight:'92vh', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden', background:'var(--color-neutral-darkest)' }}>
      {/* Full-bleed background image with Ken Burns loop */}
      <div data-hero-imgwrap style={{ position:'absolute', inset:0, zIndex:0, overflow:'hidden' }}>
        <img
          src="./assets/images/home-hero-header-section.png"
          alt="" aria-hidden="true"
          style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center top', display:'block', animation:'ken-burns 12s ease-in-out infinite', transformOrigin:'center center' }}
        />
      </div>
      {/* Gradient overlay — stronger left for text legibility */}
      <div style={{ position:'absolute', inset:0, zIndex:1, background:'linear-gradient(to right, rgba(5,3,11,0.93) 0%, rgba(5,3,11,0.72) 50%, rgba(5,3,11,0.2) 100%)' }} />
      {/* Content — left */}
      <div data-hero-content style={{ position:'relative', zIndex:2, padding:'120px 5% 100px', textAlign:'left', width:'100%' }}>
        <div style={{ maxWidth:'640px' }}>
          <p style={{ fontSize:'11px', fontWeight:600, marginBottom:'20px', color:'rgba(255,255,255,0.4)', letterSpacing:'0.22em', textTransform:'uppercase' }}>AUTHORITY STRATEGY OFFICE</p>
          <h1 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(2.8rem,6.5vw,5.25rem)', lineHeight:1.05, fontWeight:400, color:'#fff', marginBottom:'28px', letterSpacing:'0.01em', textWrap:'balance' }}>
            Your patients decide before they walk in
          </h1>
          <p style={{ ...bodyMd, fontSize:'clamp(15px,1.8vw,20px)', maxWidth:'480px', marginBottom:'40px' }}>
            We build the authority that earns trust before the first consultation.
          </p>
          <div style={{ display:'flex', gap:'14px', flexWrap:'wrap' }}>
            <button style={{ ...btnFill, padding:'13px 28px', letterSpacing:'0.06em' }} className="aso-btn-fill" onClick={() => onNavigate('contact')}>BOOK A STRATEGY CALL</button>
            <button style={{ ...btnOutline, padding:'13px 28px' }} className="aso-btn-out" onClick={() => onNavigate('work')}>Explore our work</button>
          </div>
        </div>
      </div>
      {/* Bottom fade */}
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:'120px', zIndex:2, background:'linear-gradient(to bottom, transparent, var(--color-neutral-darkest))', pointerEvents:'none' }} />
    </section>
  );
}

// ── 2. Quote / Authority section ─────────────────────────────────────────────
function QuoteSection() {
  return (
    <section style={{ ...darkSection, padding:'96px 5%' }}>
      <div style={{ ...container, ...centerMd }}>
        <p style={eyebrow} data-anim>Authority</p>
        <h2 style={h2Style} data-anim data-delay="1">Trust is built before the consultation begins</h2>
        <p style={bodyMd} data-anim data-delay="2">Patients research. They compare. They decide. By the time they contact you, their perception is already formed. We engineer that perception through strategic authority positioning.</p>
      </div>
    </section>
  );
}

// ── 3. Ticker / Marquee ───────────────────────────────────────────────────────
function TickerSection() {
  const phrases = ['Authority Strategy','Patient Trust','Cinematic Branding','Premium Perception','Healthcare Founders','Invisible to Unmissable','Identity Architecture','Content Presence','Doctor Visibility','Trust Before Consultation'];
  const track = [...phrases, ...phrases];
  return (
    <section style={{ background:'var(--color-neutral-darkest)', padding:'36px 0', borderTop:'1px solid rgba(255,255,255,0.08)', borderBottom:'1px solid rgba(255,255,255,0.08)', overflow:'hidden' }}>
      <div style={{ display:'flex', width:'max-content', animation:'aso-marquee 35s linear infinite' }}>
        {track.map((p, i) => (
          <span key={i} style={{ whiteSpace:'nowrap', padding:'0 40px', fontSize:'clamp(11px,1.3vw,14px)', fontWeight:500, color:'rgba(255,255,255,0.35)', letterSpacing:'0.12em', textTransform:'uppercase' }}>
            {p} <span style={{ color:'rgba(255,255,255,0.15)', marginLeft:'40px' }}>—</span>
          </span>
        ))}
      </div>
    </section>
  );
}

// ── 4. Problem section ────────────────────────────────────────────────────────
function ProblemSection() {
  return (
    <section style={{ ...darkSection, padding:'96px 5%' }}>
      <div style={{ ...container, ...centerMd }}>
        <p style={eyebrow} data-anim>Problem</p>
        <h2 style={h2Style} data-anim data-delay="1">The invisible doctor loses before they start</h2>
        <p style={bodyMd} data-anim data-delay="2">Most doctors compete on credentials alone. Patients never see them. The ones who win are building perception online first, then converting that trust into consultations.</p>
      </div>
    </section>
  );
}

// ── 5. Three services ─────────────────────────────────────────────────────────
function ServicesGrid({ onNavigate }) {
  const services = [
    { icon:'https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@latest/rounded/architecture.svg',     title:'Identity architecture', body:'Your visual language, positioning, and brand narrative that commands premium perception.' },
    { icon:'https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@latest/rounded/strategy.svg',          title:'Content presence',      body:'Strategic editorial content that demonstrates expertise and builds trust before the first conversation.' },
    { icon:'https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@latest/rounded/identity_platform.svg', title:'Authority systems',      body:'Frameworks that keep your authority visible, consistent, and working across every platform.' },
  ];
  return (
    <section style={{ ...darkSection, padding:'96px 5%', borderTop:'1px solid rgba(255,255,255,0.08)' }}>
      <div style={container}>
        <div style={{ ...centerMd, marginBottom:'64px' }}>
          <p style={eyebrow} data-anim>Systems</p>
          <h2 style={h2Style} data-anim data-delay="1">Three systems. One authority.</h2>
          <p style={bodyMd} data-anim data-delay="2">Authority isn't built in one place. It's engineered across identity, content, and systems that work together to position you as the obvious choice.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))', gap:'32px' }}>
          {services.map(({ icon, title, body }, i) => (
            <div key={title} className="aso-service-card" data-anim data-delay={String(i+1)}
              style={{ textAlign:'center', padding:'36px 28px', border:'1px solid rgba(255,255,255,0.08)', borderRadius:'8px' }}>
              <div style={{ marginBottom:'24px' }}>
                <img src={icon} alt="" className="aso-svc-icon"
                  style={{ width:'44px', height:'44px', filter:'invert(1)', opacity:0.75 }}
                  onError={e => { e.target.style.display='none'; }} />
              </div>
              <h3 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(1.2rem,2vw,1.75rem)', fontWeight:400, color:'#fff', marginBottom:'12px', lineHeight:1.2, letterSpacing:'0.01em' }}>{title}</h3>
              <p style={{ ...bodyMd, fontSize:'14px' }}>{body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop:'48px', display:'flex', gap:'16px', justifyContent:'center', flexWrap:'wrap' }}>
          <button style={btnOutline} className="aso-btn-out" onClick={() => onNavigate('services')}>Explore services</button>
        </div>
      </div>
    </section>
  );
}

// ── 6. Portfolio grid ─────────────────────────────────────────────────────────
function PortfolioGrid({ onNavigate }) {
  const cases = [
    { img:'./assets/images/home-portfolio-list-section-0.png', title:'Cosmetic surgeon positioning', body:'From commodity pricing to premium authority through visual identity and content strategy', tags:['Branding','Positioning','Content'] },
    { img:'./assets/images/home-portfolio-list-section-1.png', title:'Dental practice authority',    body:'Building trust through founder-led content and editorial brand presence', tags:['Authority','Content','Strategy'] },
    { img:'./assets/images/home-portfolio-list-section-2.png', title:'Wellness founder branding',    body:'Premium perception through cinematic visual identity and strategic positioning', tags:['Identity','Branding','Positioning'] },
  ];
  return (
    <section style={{ ...darkSection, padding:'96px 5%', position:'relative', overflow:'hidden', borderTop:'1px solid rgba(255,255,255,0.08)' }}>
      {/* Ambient glow blobs */}
      <div aria-hidden="true" style={{ position:'absolute', inset:0, zIndex:0, pointerEvents:'none' }}>
        <div style={{ position:'absolute', width:'600px', height:'600px', borderRadius:'50%', background:'radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%)', top:'5%', left:'-8%', filter:'blur(60px)', animation:'blob-drift 10s ease-in-out infinite' }} />
        <div style={{ position:'absolute', width:'500px', height:'500px', borderRadius:'50%', background:'radial-gradient(circle, rgba(109,59,214,0.07) 0%, transparent 70%)', top:'25%', right:'-6%', filter:'blur(70px)', animation:'blob-drift 14s ease-in-out infinite reverse' }} />
        <div style={{ position:'absolute', width:'400px', height:'400px', borderRadius:'50%', background:'radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 70%)', bottom:'0%', left:'35%', filter:'blur(50px)', animation:'blob-drift 18s ease-in-out infinite 3s' }} />
      </div>
      <div style={{ ...container, position:'relative', zIndex:1 }}>
        <div style={{ ...centerMd, marginBottom:'56px' }}>
          <p style={eyebrow} data-anim>Work</p>
          <h2 style={h2Style} data-anim data-delay="1">The work speaks</h2>
          <p style={bodyMd} data-anim data-delay="2">Strategic positioning studies and authority transformations</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:'32px' }}>
          {cases.map(({ img, title, body, tags }, i) => (
            <article key={title} className="aso-card-3d" data-anim data-delay={String(i+1)}
              style={{ borderRadius:'8px', overflow:'hidden', border:'1px solid rgba(255,255,255,0.1)', background:'rgba(255,255,255,0.02)' }}>
              <div style={{ overflow:'hidden' }}>
                <img src={img} alt={title} style={{ width:'100%', aspectRatio:'3/2', objectFit:'cover', display:'block', transition:'transform 0.5s ease' }}
                  onMouseEnter={e => e.target.style.transform='scale(1.04)'}
                  onMouseLeave={e => e.target.style.transform=''}
                  onError={e => { e.target.style.background='#1E1C23'; e.target.style.minHeight='160px'; }} />
              </div>
              <div style={{ padding:'20px 22px 24px' }}>
                <h3 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(1rem,1.8vw,1.4rem)', fontWeight:400, color:'#fff', marginBottom:'10px', lineHeight:1.3, letterSpacing:'0.01em', cursor:'pointer' }}
                  onClick={() => onNavigate('work')}>{title}</h3>
                <p style={{ ...bodyMd, fontSize:'13px', marginBottom:'14px' }}>{body}</p>
                <div style={{ display:'flex', gap:'8px', flexWrap:'wrap', marginBottom:'16px' }}>
                  {tags.map(t => <span key={t} style={{ fontSize:'11px', fontWeight:500, padding:'3px 8px', border:'1.5px solid rgba(255,255,255,0.25)', color:'rgba(255,255,255,0.55)', borderRadius:0 }}>{t}</span>)}
                </div>
                <button style={btnLink} onClick={() => onNavigate('work')}>View case →</button>
              </div>
            </article>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop:'48px' }}>
          <button style={btnOutline} className="aso-btn-out" onClick={() => onNavigate('work')}>View all work</button>
        </div>
      </div>
    </section>
  );
}

// ── 7. Process steps ──────────────────────────────────────────────────────────
function ProcessSection({ onNavigate }) {
  const steps = [
    { n:'01', title:'Strategy and positioning',      body:'We audit your current perception, identify your unique authority angle, and position you against the market.' },
    { n:'02', title:'Identity and visual language',  body:'We build a cinematic visual identity that communicates premium positioning before a single word is read.' },
    { n:'03', title:'Content and editorial systems', body:'We create strategic content frameworks that demonstrate expertise and build trust across your platforms.' },
    { n:'04', title:'Launch and optimisation',       body:'We launch your authority presence and optimise based on real patient perception and engagement data.' },
  ];
  return (
    <section style={{ ...darkSection, padding:'96px 5%', borderTop:'1px solid rgba(255,255,255,0.08)' }}>
      <div style={container}>
        <div style={{ ...centerMd, marginBottom:'64px' }}>
          <p style={eyebrow} data-anim>Process</p>
          <h2 style={h2Style} data-anim data-delay="1">How authority gets built</h2>
          <p style={bodyMd} data-anim data-delay="2">Authority isn't luck. It's a system. We follow a proven process that positions you strategically, builds your presence, and creates systems that sustain it.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))', gap:'48px 32px' }}>
          {steps.map(({ n, title, body }, i) => (
            <div key={n} data-anim data-delay={String(i+1)}>
              <div style={{ fontSize:'clamp(3.5rem,7vw,5.5rem)', fontFamily:'var(--font-heading)', color:'#2563EB', lineHeight:1, marginBottom:'20px', fontWeight:400, opacity:0.85 }}>{n}</div>
              <h3 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(1rem,1.7vw,1.4rem)', fontWeight:400, color:'#fff', marginBottom:'10px', lineHeight:1.25, letterSpacing:'0.01em' }}>{title}</h3>
              <p style={{ ...bodyMd, fontSize:'13px' }}>{body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop:'56px' }}>
          <button style={btnOutline} className="aso-btn-out" onClick={() => onNavigate('services')}>See the process</button>
        </div>
      </div>
    </section>
  );
}

// ── 8. Thinking / editorial stack ─────────────────────────────────────────────
function ThinkingSection() {
  const insights = [
    { n:'01', title:'Authority is perception, not credentials',        body:'Patients choose based on how you make them feel before they ever meet you. Credentials open the door. Authority makes them walk through it.' },
    { n:'02', title:'Trust is built through consistency',              body:'Your visual identity, messaging, and content must align. Inconsistency kills authority faster than silence ever could.' },
    { n:'03', title:'Founder-led brands win in healthcare',            body:'Patients connect with people, not institutions. Your personal brand is your single greatest competitive advantage.' },
    { n:'04', title:'Visibility without strategy is noise',            body:'Showing up online means nothing without the right positioning. Authority is intentional — not accidental.' },
    { n:'05', title:'Premium perception precedes premium pricing',     body:'The doctors who command the highest fees have engineered how they are seen — long before the first consultation.' },
    { n:'06', title:'Instagram is the new waiting room',               body:'Patients make decisions while scrolling. Your content is your first impression, your waiting room, and your referral letter.' },
  ];
  return (
    <section style={{ background:'var(--color-neutral-darkest)', padding:'96px 5%', borderTop:'1px solid rgba(255,255,255,0.08)' }}>
      <div style={{ maxWidth:'1280px', margin:'0 auto' }}>
        <div className="aso-thinking-header" style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:'64px', flexWrap:'wrap', gap:'16px' }}>
          <div data-anim="left">
            <p style={{ ...eyebrow, marginBottom:'12px' }}>Thinking</p>
            <h2 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(1.8rem,3.5vw,3rem)', fontWeight:400, color:'#fff', lineHeight:1.15, letterSpacing:'0.01em', margin:0 }}>What we know about authority</h2>
          </div>
          <p style={{ fontSize:'14px', color:'rgba(255,255,255,0.4)', maxWidth:'320px', lineHeight:1.65, margin:0 }} data-anim="right">
            Strategic insights on how doctors build trust, visibility, and premium perception.
          </p>
        </div>
        <div style={{ height:'1px', background:'rgba(255,255,255,0.12)' }} />
        {insights.map(({ n, title, body }) => (
          <div key={n} className="aso-insight-row" data-anim style={{ display:'grid', gridTemplateColumns:'56px 1fr auto', gap:'0 40px', padding:'44px 12px', borderBottom:'1px solid rgba(255,255,255,0.07)', alignItems:'start' }}>
            <div style={{ fontFamily:'var(--font-body)', fontSize:'11px', fontWeight:700, color:'#2563EB', letterSpacing:'0.1em', paddingTop:'5px' }}>{n}</div>
            <div>
              <h3 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(1.2rem,2.2vw,1.85rem)', fontWeight:400, color:'#fff', lineHeight:1.2, letterSpacing:'0.01em', marginBottom:'14px' }}>{title}</h3>
              <p style={{ fontSize:'14px', lineHeight:1.7, color:'rgba(255,255,255,0.5)', maxWidth:'580px', margin:0 }}>{body}</p>
            </div>
            <div className="aso-insight-arrow" style={{ fontSize:'18px', color:'rgba(255,255,255,0.18)', paddingTop:'4px' }}>→</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── 9. Specialties ────────────────────────────────────────────────────────────
function SpecialtiesSection() {
  const specs = [
    { key:'surgical',    title:'Surgical & Orthopedic', body:'Authority for specialists who need premium positioning and patient trust before the first referral.' },
    { key:'aesthetic',   title:'Aesthetic & Cosmetic',   body:'Cinematic brands for practitioners competing on perception and visual identity.' },
    { key:'dental',      title:'Dental & Orthodontic',   body:'Positioning dental practices as premium destinations, not commodity providers.' },
    { key:'wellness',    title:'Wellness & Preventive',  body:'Positioning founders who are changing how people think about health and longevity.' },
    { key:'dermatology', title:'Dermatology & Skin',     body:'Trust-first brands for doctors where patient decisions are deeply personal.' },
    { key:'oncology',    title:'Oncology & Internal',    body:'Communicating clinical depth and warmth to patients navigating life-changing decisions.' },
  ];
  return (
    <section style={{ background:'var(--color-neutral-darkest)', padding:'96px 5%', borderTop:'1px solid rgba(255,255,255,0.08)' }}>
      <div style={{ maxWidth:'1280px', margin:'0 auto' }}>
        <div style={{ ...centerMd, marginBottom:'64px' }}>
          <p style={eyebrow} data-anim>Specialties</p>
          <h2 style={h2Style} data-anim data-delay="1">We work across healthcare</h2>
          <p style={bodyMd} data-anim data-delay="2">From surgical specialists to aesthetic practitioners, we build authority for doctors across every niche.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:'28px' }}>
          {specs.map(({ key, title, body }, i) => (
            <div key={key} className="aso-specialty-card aso-card-3d" data-anim data-delay={String((i%3)+1)}
              style={{ borderRadius:'8px', overflow:'hidden', border:'1px solid rgba(255,255,255,0.1)', background:'rgba(255,255,255,0.02)' }}>
              <div style={{ position:'relative', overflow:'hidden', aspectRatio:'4/3', background:'#0e0c14' }}>
                <img src={`./assets/images/specialty-${key}.jpg`} alt={title}
                  className="aso-spec-img"
                  style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}
                  onError={e => { e.target.style.display='none'; }} />
                <div style={{ position:'absolute', bottom:0, left:0, right:0, height:'55%', background:'linear-gradient(to bottom, transparent, rgba(5,3,11,0.88))', pointerEvents:'none' }} />
              </div>
              <div style={{ padding:'18px 20px 22px' }}>
                <h3 style={{ fontFamily:'var(--font-heading)', fontSize:'clamp(1rem,1.7vw,1.25rem)', fontWeight:400, color:'#fff', marginBottom:'7px', lineHeight:1.25, letterSpacing:'0.01em' }}>{title}</h3>
                <p style={{ fontSize:'13px', lineHeight:1.65, color:'rgba(255,255,255,0.48)', margin:0 }}>{body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 10. CTA section ───────────────────────────────────────────────────────────
function CTASection({ onNavigate }) {
  return (
    <section style={{ ...darkSection, padding:'112px 5%', borderTop:'1px solid rgba(255,255,255,0.08)', textAlign:'center' }}>
      <div style={{ ...container, ...centerMd }}>
        <p style={eyebrow} data-anim>Ready?</p>
        <h2 style={{ ...h2Style, fontSize:'clamp(2rem,4.5vw,3.75rem)', marginBottom:'24px' }} data-anim data-delay="1">Book your strategy call</h2>
        <p style={{ ...bodyMd, marginBottom:'40px' }} data-anim data-delay="2">
          Work with a limited number of doctors each year. Private, strategic, and designed for those ready to build lasting authority.
        </p>
        <div data-anim data-delay="3">
          <button style={{ ...btnFill, padding:'14px 32px', fontSize:'14px', letterSpacing:'0.08em' }} className="aso-btn-fill" onClick={() => onNavigate('contact')}>
            BOOK A STRATEGY CALL
          </button>
        </div>
      </div>
    </section>
  );
}

// ── HomePage assembler ────────────────────────────────────────────────────────
function HomePage({ onNavigate }) {
  return (
    <main>
      <HeroHeader onNavigate={onNavigate} />
      <QuoteSection />
      <TickerSection />
      <ProblemSection />
      <ServicesGrid onNavigate={onNavigate} />
      <PortfolioGrid onNavigate={onNavigate} />
      <ProcessSection onNavigate={onNavigate} />
      <ThinkingSection />
      <SpecialtiesSection />
      <CTASection onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { HomePage, CTASection });