/* ============================================================
   Gaung AI — Home page sections (below hero)
   ============================================================ */

function OfficeSection() {
  const { lang } = React.useContext(LangCtx);
  return (
    <section className="section" id="office" style={{paddingBlock:'clamp(60px, 8vw, 120px)'}}>
      <div className="wrap">
        <div className="split-1-2" style={{marginBottom:56}}>
          <div>
            <div className="eyebrow mb-4">{t({id:'Di balik layar', en:'Behind the scenes'}, lang)}</div>
            <h2 className="h-section">
              {t({id:'Enam engine, satu', en:'Six engines, one'}, lang)}<br/>
              <span className="serif">{t({id:'ruang kendali.', en:'control room.'}, lang)}</span>
            </h2>
          </div>
          <p className="lead">
            {t({
              id:'Tim Gaung.ai bekerja bersebelahan dengan AI engine. Lead Gen menyisir sumber data, Conversation Engine membalas leads di WhatsApp, Analytics menilai pipeline — semua dalam satu ruang, semua terhubung.',
              en:'The Gaung.ai team works elbow-to-elbow with the AI engines. Lead Gen sweeps sources, Conversation Engine replies on WhatsApp, Analytics scores the pipeline — one room, one system.'
            }, lang)}
          </p>
        </div>
        <OfficeScene/>
      </div>
    </section>
  );
}

function MarqueeStrip() {
  const { lang } = React.useContext(LangCtx);
  const items = [
    t({id:'Dipercaya oleh tim pertumbuhan di Indonesia',en:'Trusted by growth teams across Indonesia'}, lang),
    'PT Graha Merdeka',
    'Nusa Manufaktur',
    'Sekawan Logistik',
    'Bintang SaaS',
    'Arta Konstruksi',
    'Duta Pharma',
    'Harmoni FinTech',
    'Mitra Industri',
  ];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((x, i) => <span key={i} className="marquee-item">{x}</span>)}
      </div>
    </div>
  );
}

function ProblemSection() {
  const { lang } = React.useContext(LangCtx);
  const H = window.GAUNG_CONTENT.home;
  return (
    <section className="section" id="problem">
      <div className="wrap">
        <div className="split-1-1-4" style={{alignItems:'start'}}>
          <div style={{position:'sticky',top:100}} className="sticky-top">
            <div className="eyebrow mb-4">{t(H.problemEyebrow, lang)}</div>
            <h2 className="h-section">
              {t(H.problemH, lang).split('.')[0]}.<br/>
              <span className="serif" style={{color:'var(--muted)'}}>
                {(t(H.problemH, lang).split('.')[1] || '').trim()}
              </span>
            </h2>
            <p className="lead mt-6">{t(H.problemLead, lang)}</p>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:16}}>
            {[
              { t: H.prob1T, d: H.prob1D, k: '01' },
              { t: H.prob2T, d: H.prob2D, k: '02' },
              { t: H.prob3T, d: H.prob3D, k: '03' },
            ].map((p, i) => (
              <div key={i} className="card" style={{padding:'28px 32px'}}>
                <div style={{display:'flex',gap:20,alignItems:'flex-start'}}>
                  <div className="engine-num" style={{fontFamily:'var(--serif)',fontSize:32,fontStyle:'italic',color:'var(--gm)',minWidth:48}}>{p.k}</div>
                  <div style={{flex:1}}>
                    <h3 className="h-card">{t(p.t, lang)}</h3>
                    <p className="body-s mt-4" style={{color:'var(--ink-2)',fontSize:15}}>{t(p.d, lang)}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function EnginesSection() {
  const { lang } = React.useContext(LangCtx);
  const H = window.GAUNG_CONTENT.home;
  const engines = [
    { n:'01', t:H.e1t, d:H.e1d, icon:'dna' },
    { n:'02', t:H.e2t, d:H.e2d, icon:'radar' },
    { n:'03', t:H.e3t, d:H.e3d, icon:'flow' },
    { n:'04', t:H.e4t, d:H.e4d, icon:'chat' },
    { n:'05', t:H.e5t, d:H.e5d, icon:'seed' },
    { n:'06', t:H.e6t, d:H.e6d, icon:'bars' },
  ];

  return (
    <section className="section" id="engines" style={{background:'var(--bg-2)'}}>
      <div className="wrap">
        <div style={{textAlign:'center',maxWidth:720,margin:'0 auto 72px'}}>
          <div className="eyebrow mb-4" style={{justifyContent:'center'}}>{t(H.enginesEyebrow, lang)}</div>
          <h2 className="h-section">
            {t(H.enginesH, lang).split(',')[0]},<br/>
            <span className="serif">{(t(H.enginesH, lang).split(',')[1] || '').trim()}</span>
          </h2>
          <p className="lead mt-6" style={{margin:'24px auto 0'}}>{t(H.enginesLead, lang)}</p>
        </div>

        <div className="grid grid-3">
          {engines.map((e, i) => (
            <div key={i} className="engine-card">
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <EngineIcon type={e.icon}/>
                <span className="engine-num">{e.n}</span>
              </div>
              <div>
                <h3 className="engine-title">{t(e.t, lang)}</h3>
                <p className="body-s mt-4" style={{color:'var(--ink-2)',fontSize:14.5,lineHeight:1.6}}>{t(e.d, lang)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EngineIcon({ type }) {
  // Simple geometric glyphs — squares, circles, lines. No figurative SVG.
  const s = { width: 40, height: 40 };
  const stroke = 'var(--ink)';
  const common = { fill: 'none', stroke, strokeWidth: 1.4 };
  if (type === 'dna') return (
    <svg {...s} viewBox="0 0 40 40">
      <circle cx="12" cy="12" r="6" {...common}/>
      <circle cx="28" cy="28" r="6" {...common}/>
      <line x1="17" y1="17" x2="23" y2="23" {...common}/>
    </svg>
  );
  if (type === 'radar') return (
    <svg {...s} viewBox="0 0 40 40">
      <circle cx="20" cy="20" r="14" {...common}/>
      <circle cx="20" cy="20" r="8" {...common}/>
      <circle cx="20" cy="20" r="2.5" fill={stroke}/>
    </svg>
  );
  if (type === 'flow') return (
    <svg {...s} viewBox="0 0 40 40">
      <rect x="4" y="8" width="12" height="8" {...common}/>
      <rect x="24" y="8" width="12" height="8" {...common}/>
      <rect x="14" y="24" width="12" height="8" {...common}/>
      <path d="M10 16 L20 24 M30 16 L20 24" {...common}/>
    </svg>
  );
  if (type === 'chat') return (
    <svg {...s} viewBox="0 0 40 40">
      <rect x="5" y="8" width="22" height="16" rx="2" {...common}/>
      <rect x="13" y="18" width="22" height="14" rx="2" {...common}/>
    </svg>
  );
  if (type === 'seed') return (
    <svg {...s} viewBox="0 0 40 40">
      <path d="M20 6 L20 34" {...common}/>
      <path d="M20 18 Q10 14 8 22" {...common}/>
      <path d="M20 22 Q30 18 32 26" {...common}/>
    </svg>
  );
  if (type === 'bars') return (
    <svg {...s} viewBox="0 0 40 40">
      <line x1="8" y1="32" x2="8" y2="20" {...common}/>
      <line x1="16" y1="32" x2="16" y2="12" {...common}/>
      <line x1="24" y1="32" x2="24" y2="24" {...common}/>
      <line x1="32" y1="32" x2="32" y2="16" {...common}/>
    </svg>
  );
  return null;
}

function NumbersSection() {
  const { lang } = React.useContext(LangCtx);
  const H = window.GAUNG_CONTENT.home;
  const nums = [
    { v: H.n1, l: H.n1l },
    { v: H.n2, l: H.n2l },
    { v: H.n3, l: H.n3l },
    { v: H.n4, l: H.n4l },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{maxWidth:640, marginBottom: 56}}>
          <div className="eyebrow mb-4">{t(H.numEyebrow, lang)}</div>
          <h2 className="h-section">
            {t(H.numH, lang).split(',')[0]},<br/>
            <span className="serif">{(t(H.numH, lang).split(',')[1] || '').trim()}</span>
          </h2>
        </div>
        <div className="kpi-4" style={{background:'var(--line)',border:'1px solid var(--line)',borderRadius:14,overflow:'hidden'}}>
          {nums.map((n, i) => (
            <div key={i} style={{background:'var(--bg)',padding:'36px 32px',minHeight:200,display:'flex',flexDirection:'column',justifyContent:'space-between'}}>
              <div className="stat-n">{t(n.v, lang)}</div>
              <div style={{color:'var(--muted)',fontSize:13,marginTop:24,maxWidth:180}}>{t(n.l, lang)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const H = window.GAUNG_CONTENT.home;
  return (
    <section className="section">
      <div className="wrap">
        <div style={{
          background:'var(--dark)',
          borderRadius: 20,
          padding: 'clamp(40px, 6vw, 80px)',
          color: 'var(--dark-ink)',
          position:'relative',
          overflow:'hidden',
        }}>
          <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse at 80% 20%, rgba(234,0,140,0.25), transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(255,138,16,0.2), transparent 55%)',pointerEvents:'none'}}/>
          <div style={{position:'relative',maxWidth:720}}>
            <div className="eyebrow mb-4" style={{color:'oklch(70% 0.008 70)'}}>{t(H.ctaEyebrow, lang)}</div>
            <h2 className="h-section" style={{color:'#fff'}}>
              {t(H.ctaH, lang).split(' dengan').length > 1
                ? <>{t(H.ctaH, lang).split(' dengan')[0]} <span className="serif">dengan{t(H.ctaH, lang).split(' dengan')[1]}</span></>
                : t(H.ctaH, lang).split(' on ').length > 1
                  ? <>{t(H.ctaH, lang).split(' on ')[0]} <span className="serif">on{t(H.ctaH, lang).split(' on ')[1]}</span></>
                  : t(H.ctaH, lang)}
            </h2>
            <p className="lead mt-6" style={{color:'oklch(75% 0.008 70)'}}>{t(H.ctaD, lang)}</p>
            <div className="hero-cta-row mt-8">
              <a href="#contact" className="btn btn-grad" onClick={(e)=>{e.preventDefault();setRoute('contact')}}>
                {t(H.ctaPrimary, lang)} <span aria-hidden>→</span>
              </a>
              <a href="#pricing" className="btn btn-ghost" style={{color:'#fff',borderColor:'var(--dark-line)'}} onClick={(e)=>{e.preventDefault();setRoute('pricing')}}>
                {t({id:'Lihat harga',en:'See pricing'}, lang)}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- HOW IT WORKS page ----
function HowPage({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const C = window.GAUNG_CONTENT.how;
  const phases = [
    { n:C.p1n, t:C.p1t, l:C.p1l, d:C.p1d },
    { n:C.p2n, t:C.p2t, l:C.p2l, d:C.p2d },
    { n:C.p3n, t:C.p3t, l:C.p3l, d:C.p3d },
    { n:C.p4n, t:C.p4t, l:C.p4l, d:C.p4d },
  ];
  return (
    <>
      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow mb-4">{t(C.eyebrow, lang)}</div>
          <h1 className="h-section" style={{maxWidth:960}}>
            {t(C.h, lang).split(',')[0]},<br/>
            <span className="serif">{(t(C.h, lang).split(',')[1] || '').trim()}</span>
          </h1>
          <p className="lead mt-6">{t(C.lead, lang)}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div className="split-220-1">
            {/* Vertical phase map */}
            <div style={{position:'sticky',top:100,height:'fit-content'}} className="sticky-top">
              {phases.map((p,i)=>(
                <div key={i} style={{display:'flex',gap:12,paddingBlock:12,borderBottom:'1px solid var(--line)',alignItems:'flex-start'}}>
                  <span style={{width:6,height:6,borderRadius:99,background:'var(--gm)',marginTop:8,flexShrink:0}}/>
                  <div>
                    <div style={{fontFamily:'var(--mono)',fontSize:10,color:'var(--muted)',letterSpacing:'.08em',textTransform:'uppercase'}}>{t(p.n, lang)}</div>
                    <div style={{fontSize:13,fontWeight:500,marginTop:2}}>{t(p.t, lang)}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{display:'flex',flexDirection:'column',gap:48}}>
              {phases.map((p,i)=>(
                <div key={i} style={{paddingBottom:48,borderBottom: i<phases.length-1 ? '1px solid var(--line)' : 'none'}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:24}}>
                    <div style={{flex:1}}>
                      <div className="eyebrow mb-4">{t(p.n, lang)} · {t(p.l, lang)}</div>
                      <h2 className="h-section" style={{fontSize:'clamp(28px, 3.4vw, 44px)'}}>{t(p.t, lang)}</h2>
                      <p className="lead mt-6" style={{maxWidth:560}}>{t(p.d, lang)}</p>
                    </div>
                    <div style={{width:200,flexShrink:0}}>
                      <Placeholder label={`${t(p.n, lang).toLowerCase()} visual`} ratio="1 / 1"/>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <FinalCTA setRoute={setRoute}/>
    </>
  );
}

Object.assign(window, { OfficeSection, MarqueeStrip, ProblemSection, EnginesSection, NumbersSection, FinalCTA, HowPage, EngineIcon });