/* ============================================================
   Gaung AI — Shared Components
   ============================================================ */

const { useState, useEffect, useLayoutEffect, useMemo, useRef } = React;

// ---- Language context ------------------------------------
const LangCtx = React.createContext({ lang: 'id', setLang: () => {} });

function t(entry, lang) {
  if (!entry) return '';
  if (typeof entry === 'string') return entry;
  return entry[lang] || entry.id || '';
}

// ---- Logo ------------------------------------------------
function Logo() {
  return (
    <a href="#home" className="logo" aria-label="Gaung.ai" style={{display:'flex',alignItems:'center'}}>
      <img src="assets/logo-wordmark.png" alt="Gaung.ai" style={{height:32,width:'auto',objectFit:'contain'}}/>
    </a>
  );
}

// ---- Nav -------------------------------------------------
function Nav({ route, setRoute }) {
  const { lang, setLang } = React.useContext(LangCtx);
  const C = window.GAUNG_CONTENT.nav;
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['home', C.home],
    ['services', C.services],
    ['cases', C.cases],
    ['pricing', C.pricing],
  ];

  useEffect(() => { setMobileOpen(false); }, [route]);

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <Logo />
        <div className="nav-links">
          {links.map(([k, entry]) => (
            <a
              key={k}
              href={`#${k}`}
              className={`nav-link ${route === k ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); setRoute(k); }}
            >
              {t(entry, lang)}
            </a>
          ))}
        </div>
        <div className="nav-right">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === 'id' ? 'active' : ''} onClick={() => setLang('id')}>ID</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <a href="https://dashboard.gaung.app" className="nav-link nav-login-desktop" style={{padding:'8px 14px'}}>
            {t(C.login, lang)}
          </a>
          <a href="https://dashboard.gaung.app/signup" className="btn btn-primary nav-cta-desktop">
            {t(C.demo, lang)}
          </a>
          <button
            className="nav-hamburger"
            aria-label="Menu"
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(o => !o)}
          >
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="nav-mobile-drawer">
          {links.map(([k, entry]) => (
            <a
              key={k}
              href={`#${k}`}
              className={`nav-mobile-link ${route === k ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); setRoute(k); }}
            >
              {t(entry, lang)}
            </a>
          ))}
          <div className="nav-mobile-divider"/>
          <a href="https://dashboard.gaung.app" className="nav-mobile-link">{t(C.login, lang)}</a>
          <a href="https://dashboard.gaung.app/signup" className="btn btn-primary" style={{marginTop:8,textAlign:'center'}}>
            {t(C.demo, lang)}
          </a>
        </div>
      )}
    </nav>
  );
}

// ---- Footer ----------------------------------------------
function Footer({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const F = window.GAUNG_CONTENT.footer;
  const N = window.GAUNG_CONTENT.nav;

  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-cols">
          <div>
            <div style={{marginBottom:14}}>
              <img src="assets/logo-wordmark.png" alt="Gaung.ai" style={{height:32,width:'auto',objectFit:'contain',filter:'brightness(0) invert(1)'}}/>
            </div>
            <p style={{fontSize:14,color:'oklch(70% 0.008 70)',maxWidth:280,lineHeight:1.5}}>{t(F.tag, lang)}</p>
            <p style={{fontSize:13,color:'oklch(55% 0.008 70)',marginTop:24}}>gaungelevasidigital@gmail.com</p>
            <p style={{fontSize:13,color:'oklch(55% 0.008 70)',marginTop:4}}>{t({id:'BSD, Tangerang Selatan',en:'BSD, South Tangerang'}, lang)}</p>
          </div>
          <div>
            <h5>{t(F.product, lang)}</h5>
            <ul>
              <li><a href="#services" onClick={(e)=>{e.preventDefault();setRoute('services')}}>{t(N.services, lang)}</a></li>
              <li><a href="#pricing" onClick={(e)=>{e.preventDefault();setRoute('pricing')}}>{t(N.pricing, lang)}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t(F.company, lang)}</h5>
            <ul>
              <li><a href="#cases" onClick={(e)=>{e.preventDefault();setRoute('cases')}}>{t(N.cases, lang)}</a></li>
              <li><a href="#contact" onClick={(e)=>{e.preventDefault();setRoute('contact')}}>{t(N.contact, lang)}</a></li>
              <li><a href="#">{t({id:'Karir',en:'Careers'}, lang)}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t(F.resources, lang)}</h5>
            <ul>
              <li><a href="#blog" onClick={(e)=>{e.preventDefault();setRoute('blog')}}>{t(N.blog, lang)}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t(F.legal, lang)}</h5>
            <ul>
              <li><a href="#privacy" onClick={(e)=>{e.preventDefault();setRoute('privacy');}}>{t({id:'Kebijakan Privasi',en:'Privacy Policy'}, lang)}</a></li>
              <li><a href="#terms" onClick={(e)=>{e.preventDefault();setRoute('terms');}}>{t({id:'Syarat Layanan',en:'Terms of Service'}, lang)}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t(F.rights, lang)}</div>
          <a href="https://dashboard.gaung.app" style={{color:'inherit',borderBottom:'1px solid currentColor',paddingBottom:1}}>dashboard.gaung.app ↗</a>
        </div>
      </div>
    </footer>
  );
}

// ---- Placeholder image -----------------------------------
function Placeholder({ label, ratio = '4 / 3', style }) {
  return (
    <div className="placeholder" style={{aspectRatio: ratio, ...style}}>
      <span>{label}</span>
    </div>
  );
}

// ---- Hero (with variants) --------------------------------
function Hero({ variant, setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const H = window.GAUNG_CONTENT.home;

  const headlines = {
    A: (
      <h1 className="h-display reveal">
        {t(H.heroA1, lang)}<br/>
        <span className="grad">{t(H.heroA2, lang)}</span>{' '}
        <span className="serif">{t(H.heroA3, lang)}</span>
      </h1>
    ),
    B: (
      <h1 className="h-display reveal">
        {t(H.heroB1, lang)}<br/>
        <span className="serif">{t(H.heroB2, lang)}</span>{' '}
        {t(H.heroB3, lang)}
      </h1>
    ),
    C: (
      <h1 className="h-display reveal">
        <span className="serif">{t(H.heroC1, lang)}</span>{' '}
        {t(H.heroC2, lang)}<br/>
        <span className="grad">{t(H.heroC3, lang)}</span>
      </h1>
    ),
  };

  return (
    <section className="hero" style={{minHeight:'100svh', display:'flex', alignItems:'center', paddingBlock:'clamp(80px,10vw,120px)'}}>
      <div className="wrap" style={{width:'100%'}}>
        <div style={{maxWidth:720}}>
          <div className="hero-badge reveal">
            <span className="hero-badge-pill">{t({id:'BARU',en:'NEW'}, lang)}</span>
            <span>{t(H.badge, lang)}</span>
          </div>
          <div>
            {headlines[variant] || headlines.A}
          </div>
          <p className="lead mt-6 reveal reveal-1">{t(H.heroSub, lang)}</p>
          <div className="reveal reveal-2" style={{marginTop:36}}>
            <WizardInput setRoute={setRoute} autoFocus={true}/>
          </div>
          <div className="hero-sub-row reveal reveal-3">
            <span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="#ea008c" strokeWidth="1.2"/><path d="M4 7l2 2 4-4" stroke="#ea008c" strokeWidth="1.4" fill="none"/></svg>
              {t(H.subHero1, lang)}
            </span>
            <span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="#ea008c" strokeWidth="1.2"/><path d="M4 7l2 2 4-4" stroke="#ea008c" strokeWidth="1.4" fill="none"/></svg>
              {t(H.subHero2, lang)}
            </span>
            <span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="#ea008c" strokeWidth="1.2"/><path d="M4 7l2 2 4-4" stroke="#ea008c" strokeWidth="1.4" fill="none"/></svg>
              {t(H.subHero3, lang)}
            </span>
          </div>
        </div>

        <div className="reveal reveal-4" style={{marginTop:72}}>
          <HeroDashMock />
        </div>
      </div>
    </section>
  );
}

// ---- Wizard input (paste URL → AI generates ICP + 3 campaigns) ----
const ORCH_URL = window.GAUNG_ORCH_URL || 'https://gaung-orchestrator.fly.dev';

function WizardInput({ setRoute, autoFocus = false }) {
  const { lang } = React.useContext(LangCtx);
  const [url, setUrl] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);

  async function submit() {
    setError(null);
    if (!isValidUrl(url)) {
      setError(t({id:'URL tidak valid. Contoh: https://websitebisnis.com', en:'Invalid URL. Example: https://yourbusiness.com'}, lang));
      return;
    }
    setSubmitting(true);
    try {
      const res = await fetch(`${ORCH_URL}/v1/public/wizard`, {
        method: 'POST',
        headers: {'content-type':'application/json'},
        body: JSON.stringify({ url: normalize(url) }),
      });
      if (!res.ok) {
        if (res.status === 429) {
          setError(t({id:'Terlalu banyak percobaan dari IP ini. Coba lagi besok.', en:'Too many requests from this IP. Try tomorrow.'}, lang));
        } else {
          setError(`${res.status}: ${await res.text().catch(()=>'')}`);
        }
        setSubmitting(false);
        return;
      }
      const body = await res.json();
      window.location.hash = `r/${body.session_id}`;
      setRoute(`r/${body.session_id}`);
    } catch (e) {
      setError(e.message);
      setSubmitting(false);
    }
  }

  return (
    <div className="wizard-input">
      <input
        type="url"
        value={url}
        onChange={(e)=>setUrl(e.target.value)}
        onKeyDown={(e)=>{if(e.key==='Enter')submit();}}
        placeholder="https://websitebisnis.com"
        disabled={submitting}
        autoFocus={autoFocus}
        spellCheck={false}
        className="wizard-input-field"
      />
      <button
        onClick={submit}
        disabled={submitting || !url.trim()}
        className="btn btn-grad wizard-input-btn"
      >
        {submitting ? t({id:'Menganalisis…', en:'Analyzing…'}, lang) : <>{t({id:'Bedah strategi saya', en:'Generate my strategy'}, lang)} <span aria-hidden>→</span></>}
      </button>
      {error && <div className="wizard-input-error">{error}</div>}
      <div className="wizard-input-help">
        {t({
          id:'Gratis. Tanpa daftar. AI Gaung baca website kamu dan generate ICP + 3 strategi kampanye dalam',
          en:'Free. No signup. Gaung AI reads your site and generates ICP + 3 campaign strategies in'
        }, lang)} <span style={{whiteSpace:'nowrap'}}>~30 {t({id:'detik', en:'seconds'}, lang)}.</span>
      </div>
    </div>
  );
}

function isValidUrl(s) {
  try {
    const u = new URL(s.startsWith('http') ? s : `https://${s}`);
    return u.protocol === 'http:' || u.protocol === 'https:';
  } catch { return false; }
}

function normalize(s) {
  return s.startsWith('http') ? s : `https://${s}`;
}

// ---- Wizard result page (polls orchestrator until ICP + campaigns ready) ----
const TERMINAL_STATUSES = new Set(['ready', 'error']);

function WizardResultPage({ sessionId, setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const [session, setSession] = useState(null);
  const [error, setError] = useState(null);
  // Inline signup state — campaign card click selects + scrolls to form
  // below. Eliminates the old wizard→signup tab-switch (where stale wizard
  // ID could leak from old browser tabs).
  const [selectedCampaign, setSelectedCampaign] = useState(null);

  // Audio lives here so it starts immediately on mount — user gesture (the click
  // that triggered navigation) is still valid. By the time results load (20-40 s),
  // gesture context has expired and play() would be blocked.
  const audioRef = useRef(null);
  const [soundPlaying, setSoundPlaying] = useState(false);

  useEffect(() => {
    const a = audioRef.current;
    if (!a) return;
    a.volume = 0.35;
    const tryPlay = () => {
      a.play().then(() => setSoundPlaying(true)).catch(() => setSoundPlaying(false));
    };
    tryPlay();
    const onFirstClick = () => { if (a.paused) tryPlay(); };
    window.addEventListener('click', onFirstClick, { once: true });
    return () => {
      window.removeEventListener('click', onFirstClick);
      a.pause();
    };
  }, []);

  function toggleSound() {
    const a = audioRef.current;
    if (!a) return;
    if (a.paused) {
      a.play().then(() => setSoundPlaying(true)).catch(() => setSoundPlaying(false));
    } else {
      a.pause();
      setSoundPlaying(false);
    }
  }

  useEffect(() => {
    let stopped = false;
    async function poll() {
      try {
        const res = await fetch(`${ORCH_URL}/v1/public/wizard/${sessionId}`);
        if (!res.ok) {
          setError(`${res.status}`);
          return;
        }
        const body = await res.json();
        if (stopped) return;
        setSession(body.session);
        if (!TERMINAL_STATUSES.has(body.session.status)) {
          setTimeout(poll, 1500);
        }
      } catch (e) {
        if (!stopped) setError(e.message);
      }
    }
    poll();
    return () => { stopped = true; };
  }, [sessionId]);

  // Always-mounted audio element — must stay outside conditional renders.
  const audioEl = (
    <audio ref={audioRef} loop preload="auto" style={{display:'none'}}>
      <source src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Mozart_-_The_Marriage_of_Figaro_-_K_492_-_Overture.ogg" type="audio/ogg"/>
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c7/Mozart_-_The_Marriage_of_Figaro_-_K_492_-_Overture.ogg/Mozart_-_The_Marriage_of_Figaro_-_K_492_-_Overture.ogg.mp3" type="audio/mpeg"/>
    </audio>
  );

  if (error) {
    return (
      <>
        {audioEl}
        <section className="section">
          <div className="wrap" style={{textAlign:'center', paddingBlock:80}}>
            <h2 className="h-section">{t({id:'Sesi tidak ditemukan', en:'Session not found'}, lang)}</h2>
            <p className="lead mt-4">{error}</p>
            <a href="#home" className="btn btn-grad mt-6" onClick={(e)=>{e.preventDefault();setRoute('home');}} style={{display:'inline-block', marginTop:24}}>
              {t({id:'← Mulai analisis baru', en:'← Start new analysis'}, lang)}
            </a>
          </div>
        </section>
        <WizardSoundtrack playing={soundPlaying} onToggle={toggleSound} lang={lang}/>
      </>
    );
  }
  if (!session) {
    return (
      <>
        {audioEl}
        <WizardLoading url=""/>
        <WizardSoundtrack playing={soundPlaying} onToggle={toggleSound} lang={lang}/>
      </>
    );
  }
  if (!TERMINAL_STATUSES.has(session.status)) {
    return (
      <>
        {audioEl}
        <WizardLoading url={session.url} status={session.status}/>
        <WizardSoundtrack playing={soundPlaying} onToggle={toggleSound} lang={lang}/>
      </>
    );
  }
  if (session.status === 'error') {
    return (
      <>
        {audioEl}
        <section className="section">
          <div className="wrap" style={{textAlign:'center', paddingBlock:80}}>
            <h2 className="h-section">{t({id:'Analisis gagal', en:'Analysis failed'}, lang)}</h2>
            <p className="lead mt-4">{session.error || t({id:'Coba URL lain.', en:'Try a different URL.'}, lang)}</p>
            <a href="#home" className="btn btn-grad" onClick={(e)=>{e.preventDefault();setRoute('home');}} style={{display:'inline-block', marginTop:24}}>
              {t({id:'← Coba URL lain', en:'← Try a different URL'}, lang)}
            </a>
          </div>
        </section>
        <WizardSoundtrack playing={soundPlaying} onToggle={toggleSound} lang={lang}/>
      </>
    );
  }

  const icp = session.icp || {};
  const campaigns = (session.campaigns && session.campaigns.campaigns) || [];
  const mi = getMarketInsights(icp);
  const hostname = (() => { try { return new URL(session.url).hostname; } catch(e) { return session.url; } })();

  return (
    <>
      {audioEl}
      <section className="section" style={{paddingTop:60}}>
        <div className="wrap">

          {/* Page header */}
          <div style={{textAlign:'center', marginBottom:40}}>
            <div className="hero-badge" style={{justifyContent:'center'}}>
              <span className="hero-badge-pill">AI</span>
              <span>{t({id:'Hasil Analisis Gaung', en:'Gaung Analysis'}, lang)}</span>
            </div>
            <h1 className="h-display" style={{marginTop:24}}>
              {t({id:'Strategi sales buat', en:'Sales strategy for'}, lang)}{' '}
              <span className="grad">{icp.business_name || hostname}</span>
            </h1>
            <p className="lead mt-4" style={{maxWidth:520, margin:'16px auto 0'}}>
              {t({id:'AI Gaung sudah baca website kamu. Berikut potensi pasar + ICP + 3 strategi kampanye siap diaktifkan.', en:'Gaung AI has read your site. Here is your market potential + ICP + 3 campaign strategies, ready to activate.'}, lang)}
            </p>
          </div>

          {/* Market Intelligence metrics */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:40}}>
            {[
              { label: t({id:'Potensi Leads', en:'Lead Potential'}, lang),          value: mi.leads,  sub: t({id:'tersedia di pasar', en:'in-market available'}, lang),    color:'#ea008c', bg:'oklch(99% 0.008 330)' },
              { label: t({id:'Addressable Market', en:'Addressable Market'}, lang),  value: mi.market, sub: t({id:'est. market size', en:'est. market size'}, lang),       color:'#ea6000', bg:'oklch(99% 0.008 55)'  },
              { label: t({id:'Avg. Deal Size', en:'Avg. Deal Size'}, lang),          value: mi.deal,   sub: t({id:'per transaksi B2B', en:'per B2B transaction'}, lang),   color:'#16a34a', bg:'oklch(99% 0.01 145)'  },
              { label: t({id:'Cakupan Regional', en:'Regional Coverage'}, lang),     value: mi.region, sub: t({id:'target utama', en:'primary target area'}, lang),        color:'#4f46e5', bg:'oklch(99% 0.01 275)'  },
            ].map((m, i) => (
              <div key={i} style={{
                background: m.bg, border:'1px solid var(--border)', borderRadius:14,
                padding:'20px 16px', textAlign:'center',
                borderTop: '3px solid ' + m.color
              }}>
                <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em', color:m.color, marginBottom:6}}>{m.value}</div>
                <div style={{fontSize:10, color:'var(--ink)', textTransform:'uppercase', letterSpacing:'.08em', fontWeight:600, marginBottom:3}}>{m.label}</div>
                <div style={{fontSize:10, color:'var(--muted)'}}>{m.sub}</div>
              </div>
            ))}
          </div>

          {/* Business DNA card */}
          <div style={{marginBottom:48, border:'1px solid var(--dark-line)', borderRadius:16, overflow:'hidden'}}>

            {/* Card header strip */}
            <div style={{
              background:'linear-gradient(135deg, oklch(18% 0.025 310) 0%, oklch(15% 0.02 340) 100%)',
              padding:'18px 28px', display:'flex', alignItems:'center', justifyContent:'space-between'
            }}>
              <div>
                <div style={{fontSize:10, color:'var(--gm)', fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:4}}>
                  Business DNA
                </div>
                <div style={{fontSize:12, color:'oklch(60% 0.008 70)'}}>
                  {t({id:'Diekstrak otomatis dari website kamu', en:'Auto-extracted from your website'}, lang)}
                </div>
              </div>
              <div style={{
                background:'var(--grad)', padding:'5px 14px', borderRadius:99,
                fontSize:10, fontWeight:700, color:'#fff', letterSpacing:'.07em'
              }}>AI VERIFIED</div>
            </div>

            {/* Business summary */}
            {icp.business_summary && (
              <div style={{padding:'20px 28px', borderBottom:'1px solid var(--border)', background:'#fff'}}>
                <p style={{margin:0, fontSize:15, lineHeight:1.65, color:'var(--ink)'}}>{icp.business_summary}</p>
              </div>
            )}

            {/* DNA tag grid */}
            <div style={{padding:'20px 28px', background:'#fff'}}>
              <div className="dna-grid">
                {icp.industry && (
                  <div>
                    <div className="eyebrow" style={{marginBottom:8}}>{t({id:'Industri', en:'Industry'}, lang)}</div>
                    <span style={{
                      display:'inline-flex', alignItems:'center',
                      background:'oklch(97% 0.01 310)', border:'1px solid oklch(90% 0.02 310)',
                      borderRadius:8, padding:'6px 14px', fontSize:13, fontWeight:500, color:'oklch(35% 0.05 310)'
                    }}>{icp.industry}</span>
                  </div>
                )}
                {icp.target_market && icp.target_market.length > 0 && (
                  <div>
                    <div className="eyebrow" style={{marginBottom:8}}>{t({id:'Target Market', en:'Target Market'}, lang)}</div>
                    <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
                      {icp.target_market.slice(0,4).map((it,i) => (
                        <span key={i} style={{
                          background:'oklch(96% 0.015 240)', border:'1px solid oklch(88% 0.025 240)',
                          borderRadius:6, padding:'4px 10px', fontSize:12, color:'oklch(35% 0.06 240)'
                        }}>{it}</span>
                      ))}
                    </div>
                  </div>
                )}
                {icp.pain_points && icp.pain_points.length > 0 && (
                  <div>
                    <div className="eyebrow" style={{marginBottom:8}}>{t({id:'Pain Points', en:'Pain Points'}, lang)}</div>
                    <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
                      {icp.pain_points.slice(0,4).map((it,i) => (
                        <span key={i} style={{
                          background:'oklch(97% 0.01 20)', border:'1px solid oklch(88% 0.03 20)',
                          borderRadius:6, padding:'4px 10px', fontSize:12, color:'oklch(40% 0.08 20)'
                        }}>{it}</span>
                      ))}
                    </div>
                  </div>
                )}
                {icp.value_props && icp.value_props.length > 0 && (
                  <div>
                    <div className="eyebrow" style={{marginBottom:8}}>{t({id:'Value Props', en:'Value Props'}, lang)}</div>
                    <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
                      {icp.value_props.slice(0,4).map((it,i) => (
                        <span key={i} style={{
                          background:'oklch(96% 0.015 145)', border:'1px solid oklch(86% 0.04 145)',
                          borderRadius:6, padding:'4px 10px', fontSize:12, color:'oklch(35% 0.1 145)'
                        }}>{it}</span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* ICP Persona quote */}
            {icp.example_customer_persona && (
              <div style={{padding:'0 28px 24px', background:'#fff'}}>
                <div style={{
                  background:'oklch(97.5% 0.008 300)', border:'1px solid oklch(90% 0.015 300)',
                  borderLeft:'3px solid var(--gm)', borderRadius:10, padding:'16px 20px'
                }}>
                  <div style={{fontSize:9, color:'var(--gm)', fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:8}}>
                    {t({id:'ICP Persona', en:'ICP Persona'}, lang)}
                  </div>
                  <p style={{margin:0, fontSize:13, fontStyle:'italic', lineHeight:1.65, color:'var(--ink)'}}>{icp.example_customer_persona}</p>
                </div>
              </div>
            )}
          </div>

          {/* Campaign strategies heading */}
          <div style={{marginBottom:24, textAlign:'center'}}>
            <h2 className="h-section">{t({id:'3 strategi yang paling cocok', en:'3 best-fit strategies'}, lang)}</h2>
            <p className="lead mt-4" style={{maxWidth:480, margin:'16px auto 0'}}>
              {t({id:'Pilih satu — daftar + aktivasi engine dalam ~60 detik, langsung live.', en:'Pick one — sign up + activate in ~60 seconds, go live immediately.'}, lang)}
            </p>
          </div>
          <div className="campaign-grid">
            {campaigns.map((c) => (
              <CampaignCard
                key={c.id}
                campaign={c}
                selected={selectedCampaign?.id === c.id}
                onSelect={() => {
                  setSelectedCampaign(c);
                  // Scroll signup form into view smoothly so user knows
                  // their click did something (form is below the fold).
                  setTimeout(() => {
                    const el = document.getElementById('inline-signup-form');
                    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }, 50);
                }}
              />
            ))}
          </div>

          {selectedCampaign && (
            <InlineSignupForm
              sessionId={sessionId}
              campaign={selectedCampaign}
              websiteUrl={session.url}
            />
          )}
        </div>
      </section>
      <WizardSoundtrack playing={soundPlaying} onToggle={toggleSound} lang={lang}/>
    </>
  );
}

/**
 * Phase-driven loading. Reads `status` from the session row and maps it
 * to one of four pipeline stages. Each stage has its own microcopy +
 * detailed substep so the user sees what the AI is actually doing,
 * not a fake timer.
 *
 * Phase rotation also runs independently so the substep label cycles
 * every 2s while the backend is on the same phase — gives the
 * impression of continuous work even when one LLM call is slow.
 */
const PHASE_INDEX = {
  pending: 0,
  scraping: 0,
  extracting_icp: 1,
  drafting_campaigns: 2,
};

function WizardLoading({ url, status }) {
  const { lang } = React.useContext(LangCtx);
  const phase = PHASE_INDEX[status] !== undefined ? PHASE_INDEX[status] : 0;

  const stages = [
    {
      label: t({id:'Mengakses & membaca website', en:'Reading website'}, lang),
      detail: [
        t({id:'Mendownload halaman utama…', en:'Downloading homepage…'}, lang),
        t({id:'Membersihkan konten HTML…', en:'Cleaning HTML…'}, lang),
        t({id:'Menyimpan teks bersih…', en:'Storing clean text…'}, lang),
      ],
    },
    {
      label: t({id:'Mengekstrak Business DNA + ICP', en:'Extracting Business DNA + ICP'}, lang),
      detail: [
        t({id:'Mengidentifikasi industri…', en:'Identifying industry…'}, lang),
        t({id:'Menentukan target market…', en:'Mapping target market…'}, lang),
        t({id:'Mendeteksi pain points & value props…', en:'Detecting pain points & value props…'}, lang),
        t({id:'Menyusun ICP persona…', en:'Drafting ICP persona…'}, lang),
      ],
    },
    {
      label: t({id:'Merancang 3 strategi kampanye', en:'Designing 3 campaign strategies'}, lang),
      detail: [
        t({id:'Strategi 1: Lead-Gen + Outreach…', en:'Strategy 1: Lead-Gen + Outreach…'}, lang),
        t({id:'Strategi 2: Inbound AI Agent…', en:'Strategy 2: Inbound AI Agent…'}, lang),
        t({id:'Strategi 3: Re-aktivasi Broadcast…', en:'Strategy 3: Re-activation Broadcast…'}, lang),
        t({id:'Menulis sample WhatsApp message…', en:'Writing sample WA message…'}, lang),
      ],
    },
    {
      label: t({id:'Menyiapkan hasil', en:'Preparing results'}, lang),
      detail: [t({id:'Hampir selesai…', en:'Almost there…'}, lang)],
    },
  ];

  // Rotate the detail line every 2s so the substep keeps changing even
  // when the LLM call hasn't returned yet — perceived activity matters.
  const [detailIdx, setDetailIdx] = useState(0);
  useEffect(() => {
    setDetailIdx(0);
    const itv = setInterval(() => {
      setDetailIdx((i) => (i + 1) % (stages[phase]?.detail.length || 1));
    }, 2000);
    return () => clearInterval(itv);
  }, [phase]);

  // Progress bar % approximation: each phase = 25%, plus partial fill
  // based on detailIdx within the phase.
  const phaseStart = phase * 25;
  const detailWeight = (detailIdx + 1) / ((stages[phase]?.detail.length || 1) + 1);
  const progress = Math.min(phaseStart + detailWeight * 25, 95);

  const agents = [
    { icon:'🔍', name:'Scout', role: t({id:'Membaca website', en:'Website reader'}, lang) },
    { icon:'🧬', name:'Analyst', role: t({id:'Ekstrak Business DNA', en:'Business DNA extractor'}, lang) },
    { icon:'🗺️', name:'Architect', role: t({id:'Rancang strategi', en:'Strategy designer'}, lang) },
    { icon:'✨', name:'Compiler', role: t({id:'Siapkan hasil', en:'Result compiler'}, lang) },
  ];

  return (
    <section className="section wizard-loading-section" style={{background:'var(--paper)'}}>
      <div className="wrap" style={{maxWidth:680}}>

        {/* Header */}
        <div style={{textAlign:'center', marginBottom:40}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:8, marginBottom:16,
            background:'#fff', border:'1px solid var(--border)', borderRadius:99,
            padding:'6px 16px 6px 10px', fontSize:12, fontWeight:600
          }}>
            <span style={{
              width:8, height:8, borderRadius:99, background:'var(--gm)',
              display:'inline-block', animation:'wizard-pulse 1.2s ease-in-out infinite'
            }}/>
            <span style={{color:'var(--gm)', letterSpacing:'.06em'}}>
              {t({id:'LIVE · MENGANALISIS', en:'LIVE · ANALYZING'}, lang)}
            </span>
          </div>
          {url && (
            <div style={{
              fontFamily:'var(--mono)', fontSize:13, color:'var(--muted)',
              background:'#fff', border:'1px solid var(--border)',
              borderRadius:8, padding:'8px 16px', display:'inline-block',
              maxWidth:'100%', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'
            }}>
              {url}
            </div>
          )}
        </div>

        {/* Agent cards */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:32}}>
          {agents.map((a, i) => {
            const isDone = i < phase;
            const isActive = i === phase;
            return (
              <div key={i} style={{
                background:'#fff',
                border: isActive ? '2px solid var(--gm)' : isDone ? '1px solid #d1fae5' : '1px solid var(--border)',
                borderRadius:14, padding:'20px 12px', textAlign:'center',
                boxShadow: isActive ? '0 0 28px rgba(234,0,140,0.12)' : isDone ? '0 2px 8px rgba(34,197,94,0.08)' : 'none',
                transition:'all 0.4s ease', position:'relative', overflow:'hidden'
              }}>
                {isDone && (
                  <div style={{
                    position:'absolute', top:8, right:8,
                    width:18, height:18, borderRadius:99,
                    background:'#22c55e', color:'#fff',
                    fontSize:10, fontWeight:700,
                    display:'flex', alignItems:'center', justifyContent:'center'
                  }}>✓</div>
                )}
                <div style={{fontSize:26, marginBottom:10}}>{a.icon}</div>
                <div style={{
                  fontSize:12, fontWeight:700, letterSpacing:'.04em',
                  color: isActive ? 'var(--gm)' : isDone ? '#16a34a' : 'var(--muted)',
                  marginBottom:4
                }}>{a.name}</div>
                <div style={{fontSize:10, color:'var(--muted)', lineHeight:1.4, marginBottom: isActive ? 8 : 0}}>{a.role}</div>
                {isActive && (
                  <div style={{
                    fontSize:10, color:'var(--gm)', fontFamily:'var(--mono)',
                    background:'oklch(98% 0.01 330)', borderRadius:6, padding:'4px 8px',
                    lineHeight:1.5, wordBreak:'break-word'
                  }} key={detailIdx}>
                    {stages[phase].detail[detailIdx % stages[phase].detail.length]}
                  </div>
                )}
                {isActive && (
                  <div style={{
                    position:'absolute', bottom:0, left:0, right:0, height:3,
                    background:'var(--grad)', borderRadius:'0 0 2px 2px',
                    animation:'wizard-progress-anim 2s ease-in-out infinite'
                  }}/>
                )}
              </div>
            );
          })}
        </div>

        {/* Progress bar */}
        <div className="wizard-progress" aria-hidden>
          <div className="wizard-progress-fill" style={{width: `${progress}%`}}/>
          <div className="wizard-progress-shimmer"/>
        </div>

        <div className="wizard-loading-foot">
          {t({id:'Gaung AI memproses website kamu secara real-time — biasanya selesai dalam 20–40 detik.', en:'Gaung AI processes your website in real-time — typically done in 20–40 seconds.'}, lang)}
        </div>
      </div>
    </section>
  );
}

function DnaField({ label, value }) {
  return (
    <div>
      <div className="eyebrow" style={{marginBottom:6}}>{label}</div>
      <div style={{fontSize:14}}>{value}</div>
    </div>
  );
}

function DnaList({ label, items }) {
  return (
    <div>
      <div className="eyebrow" style={{marginBottom:6}}>{label}</div>
      <ul style={{margin:0, paddingLeft:18, fontSize:13.5, lineHeight:1.55, color:'var(--ink)'}}>
        {items.slice(0,4).map((it, i) => <li key={i}>{it}</li>)}
      </ul>
    </div>
  );
}

function CampaignCard({ campaign, selected, onSelect }) {
  const { lang } = React.useContext(LangCtx);
  const badge = strategyLabel(campaign.strategy, lang);
  return (
    <button
      type="button"
      onClick={onSelect}
      className="campaign-card"
      style={{
        textAlign: 'left',
        background: 'transparent',
        border: selected ? '2px solid var(--gm)' : undefined,
        boxShadow: selected ? '0 0 0 4px rgba(234,0,140,0.12)' : undefined,
        cursor: 'pointer',
        font: 'inherit',
        color: 'inherit',
      }}
    >
      <div className="campaign-card-head">
        <span className="campaign-card-badge">{badge}</span>
        <span style={{fontSize:12, color:'var(--muted)', fontFamily:'var(--mono)'}}>0{campaign.id}</span>
      </div>
      <div className="campaign-card-title">{campaign.title}</div>
      <p className="campaign-card-why">{campaign.why}</p>
      <div className="campaign-card-meta">
        <div className="eyebrow" style={{marginBottom:4}}>{t({id:'Audience', en:'Audience'}, lang)}</div>
        <div style={{fontSize:13}}>{campaign.audience}</div>
      </div>
      <div style={{fontSize:12, color:'var(--muted)', marginBottom:14}}>{campaign.expected_outcome}</div>
      <div className="campaign-card-cta">
        <span style={{color:'var(--gm)', fontWeight:600, fontSize:13}}>
          {selected
            ? t({id:'✓ Dipilih — isi form di bawah', en:'✓ Selected — fill form below'}, lang)
            : t({id:'Pilih kampanye ini', en:'Pick this campaign'}, lang)}
        </span>
        <span style={{color:'var(--gm)', fontSize:18}}>{selected ? '↓' : '→'}</span>
      </div>
    </button>
  );
}

function InlineSignupForm({ sessionId, campaign, websiteUrl }) {
  const { lang } = React.useContext(LangCtx);
  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [showPwd, setShowPwd] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [done, setDone] = useState(false);

  async function submit(e) {
    e.preventDefault();
    setError(null);
    if (password.length < 8) {
      setError(t({id:'Password minimal 8 karakter.', en:'Password must be at least 8 chars.'}, lang));
      return;
    }
    setSubmitting(true);
    try {
      const res = await fetch(`${ORCH_URL}/v1/signup`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({
          full_name: fullName,
          email: email.toLowerCase(),
          phone,
          password,
          ...(websiteUrl ? { website_url: websiteUrl } : {}),
          // Always pass the wizard_session_id from THIS active result page.
          // No risk of stale tab leaking a different session — the form
          // lives inside the wizard result, bound to its own sessionId.
          wizard_session_id: sessionId,
        }),
      });
      const body = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(body?.message ?? body?.error ?? `Gagal mendaftar (${res.status}).`);
        setSubmitting(false);
        return;
      }
      setDone(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  }

  if (done) {
    return (
      <div id="inline-signup-form" style={{ marginTop: 36, padding: '32px 28px', background: '#fff', borderRadius: 16, border: '1px solid #ebe7e0', maxWidth: 560, marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' }}>
        <div style={{ fontSize: 44, marginBottom: 12 }}>📧</div>
        <h3 style={{ fontSize: 22, fontWeight: 600, margin: '0 0 8px' }}>{t({id:'Cek email Anda', en:'Check your email'}, lang)}</h3>
        <p style={{ color: '#666', fontSize: 14, lineHeight: 1.6, margin: '0 0 18px' }}>
          {t({
            id: <>Link verifikasi dikirim ke <strong style={{color:'#111'}}>{email}</strong>. Klik untuk aktifkan akun.</>,
            en: <>Verification link sent to <strong style={{color:'#111'}}>{email}</strong>. Click to activate your account.</>,
          }, lang)}
        </p>
        <div style={{ display:'flex', gap:8, justifyContent:'center', flexWrap:'wrap', marginBottom:16 }}>
          <a href="https://mail.google.com" target="_blank" rel="noopener noreferrer" style={mailBtnStyle}>📬 Gmail</a>
          <a href="https://outlook.live.com" target="_blank" rel="noopener noreferrer" style={mailBtnStyle}>📮 Outlook</a>
          <a href="https://mail.yahoo.com" target="_blank" rel="noopener noreferrer" style={mailBtnStyle}>📭 Yahoo</a>
        </div>
        <p style={{ fontSize:12, color:'#999', margin:0 }}>
          {t({id:'Email tidak masuk? Cek folder spam.', en:'No email? Check spam folder.'}, lang)}
        </p>
      </div>
    );
  }

  return (
    <div id="inline-signup-form" style={{ marginTop: 36, padding: '28px 28px 32px', background: '#fff', borderRadius: 16, border: '1px solid #ebe7e0', maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
      <div style={{ marginBottom: 18 }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>
          {t({id:'Kampanye terpilih', en:'Selected campaign'}, lang)}
        </div>
        <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{campaign.title}</div>
        <div style={{ fontSize: 12.5, color: '#666' }}>{strategyLabel(campaign.strategy, lang)}</div>
      </div>
      <h3 style={{ fontSize: 20, fontWeight: 600, margin: '0 0 6px' }}>
        {t({id:'Daftar untuk aktifkan', en:'Sign up to activate'}, lang)}
      </h3>
      <p style={{ color: '#666', fontSize: 13, margin: '0 0 18px' }}>
        {t({id:'Akun aktif setelah verifikasi email. Gratis untuk mulai.', en:'Account active after email verification. Free to start.'}, lang)}
      </p>
      <form onSubmit={submit} style={{ display: 'grid', gap: 12 }}>
        <FormInput id="su-name" label={t({id:'Nama lengkap', en:'Full name'}, lang)} type="text" value={fullName} onChange={setFullName} placeholder="Budi Santoso" required minLength={2} maxLength={120}/>
        <FormInput id="su-email" label={t({id:'Email', en:'Email'}, lang)} type="email" value={email} onChange={setEmail} placeholder="nama@perusahaan.com" required/>
        <FormInput id="su-phone" label={t({id:'WhatsApp', en:'WhatsApp'}, lang)} type="tel" value={phone} onChange={setPhone} placeholder="+62 812 3456 7890" required minLength={8} maxLength={20}/>
        <div>
          <label htmlFor="su-pwd" style={inlineLabel}>Password</label>
          <div style={{ position: 'relative' }}>
            <input id="su-pwd" type={showPwd ? 'text' : 'password'} required minLength={8} maxLength={128} value={password} onChange={(e)=>setPassword(e.target.value)} placeholder={t({id:'Min. 8 karakter', en:'Min. 8 chars'}, lang)} style={{...inlineInput, paddingRight:36}}/>
            <button type="button" onClick={()=>setShowPwd(v=>!v)} tabIndex={-1} style={inlineEyeBtn} aria-label={showPwd?'Sembunyikan':'Tampilkan'}>{showPwd?'🙈':'👁️'}</button>
          </div>
        </div>
        {error && <div style={{ color:'#c00', fontSize:12 }}>{error}</div>}
        <button type="submit" disabled={submitting} style={inlineSubmitBtn}>
          {submitting ? t({id:'Memproses…', en:'Processing…'}, lang) : t({id:'Buat akun & aktifkan', en:'Create account & activate'}, lang)}
        </button>
      </form>
      <p style={{ fontSize: 10.5, color: '#aaa', margin: '14px 0 0', textAlign: 'center', lineHeight: 1.5 }}>
        {t({id:'Dengan mendaftar, Anda setuju ', en:'By signing up, you agree to '}, lang)}
        <a href="#terms" style={{color:'#999'}}>{t({id:'Syarat Layanan', en:'Terms'}, lang)}</a>
        {t({id:' dan ', en:' and '}, lang)}
        <a href="#privacy" style={{color:'#999'}}>{t({id:'Kebijakan Privasi', en:'Privacy'}, lang)}</a>.
      </p>
    </div>
  );
}

function FormInput({ id, label, type, value, onChange, placeholder, minLength, maxLength, required }) {
  return (
    <div>
      <label htmlFor={id} style={inlineLabel}>{label}</label>
      <input id={id} type={type} value={value} onChange={(e)=>onChange(e.target.value)} placeholder={placeholder} required={required} minLength={minLength} maxLength={maxLength} style={inlineInput}/>
    </div>
  );
}

const inlineLabel = { display:'block', fontSize:11, fontWeight:600, color:'#666', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:6 };
const inlineInput = { width:'100%', padding:'10px 12px', fontSize:14, border:'1px solid #ddd', borderRadius:8, fontFamily:'inherit', boxSizing:'border-box', background:'#fff', color:'#111' };
const inlineEyeBtn = { position:'absolute', right:6, top:'50%', transform:'translateY(-50%)', background:'none', border:0, cursor:'pointer', padding:6, fontSize:16 };
const inlineSubmitBtn = { padding:'12px 20px', fontSize:14, fontWeight:600, borderRadius:99, background:'linear-gradient(90deg,#ea008c,#ff8a10)', color:'#fff', border:0, cursor:'pointer', marginTop:4 };
const mailBtnStyle = { display:'inline-flex', alignItems:'center', gap:6, padding:'10px 16px', border:'1px solid #e5e5e5', borderRadius:8, textDecoration:'none', color:'#111', fontSize:13, fontWeight:500, background:'#fafafa' };

function strategyLabel(s, lang) {
  if (s === 'lead_gen_outbound') return t({id:'Lead-Gen + Outreach', en:'Lead-Gen + Outreach'}, lang);
  if (s === 'inbound_ai_agent') return t({id:'Inbound AI Agent', en:'Inbound AI Agent'}, lang);
  if (s === 'reactivation_broadcast') return t({id:'Re-aktivasi Broadcast', en:'Re-activation Broadcast'}, lang);
  return s;
}

function truncate(s, n) { return s.length > n ? s.slice(0, n-1) + '…' : s; }

function getMarketInsights(icp) {
  const ind = ((icp && icp.industry) || '').toLowerCase();
  if (ind.includes('properti') || ind.includes('real estat') || ind.includes('property')) {
    return { leads:'14.200+', market:'Rp 8,7T', deal:'Rp 920jt', region:'Seluruh Indonesia' };
  }
  if (ind.includes('teknologi') || ind.includes('software') || ind.includes('saas')) {
    return { leads:'11.800+', market:'Rp 4,1T', deal:'Rp 130jt', region:'Asia Tenggara' };
  }
  if (ind.includes('pendidikan') || ind.includes('edukasi') || ind.includes('education') || ind.includes('kursus')) {
    return { leads:'28.000+', market:'Rp 2,1T', deal:'Rp 22jt', region:'Jawa–Bali' };
  }
  if (ind.includes('klinik') || ind.includes('kesehatan') || ind.includes('health') || ind.includes('medis')) {
    return { leads:'9.500+', market:'Rp 1,6T', deal:'Rp 28jt', region:'Urban Besar' };
  }
  if (ind.includes('manufaktur') || ind.includes('manufacturing') || ind.includes('pabrik')) {
    return { leads:'4.800+', market:'Rp 7,2T', deal:'Rp 340jt', region:'Jawa–Sulawesi' };
  }
  if (ind.includes('retail') || ind.includes('ritel') || ind.includes('distributor')) {
    return { leads:'18.500+', market:'Rp 3,8T', deal:'Rp 45jt', region:'Seluruh Indonesia' };
  }
  if (ind.includes('hotel') || ind.includes('hospitality') || ind.includes('restoran') || ind.includes('wisata')) {
    return { leads:'12.000+', market:'Rp 1,9T', deal:'Rp 52jt', region:'Destinasi Utama' };
  }
  if (ind.includes('keuangan') || ind.includes('finance') || ind.includes('fintech') || ind.includes('asuransi')) {
    return { leads:'21.000+', market:'Rp 12,4T', deal:'Rp 180jt', region:'Seluruh Indonesia' };
  }
  return { leads:'8.500+', market:'Rp 2,4T', deal:'Rp 68jt', region:'Jawa–Bali' };
}

// Mozart floating button — fixed bottom-right, small round.
// Safari blocks useEffect-initiated play(); the button is the primary trigger there.
// Shows a tooltip on hover so users know what it is.
function WizardSoundtrack({ playing, onToggle, lang }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{position:'fixed', bottom:24, right:24, zIndex:300, display:'flex', flexDirection:'column', alignItems:'center', gap:6}}
    >
      {hovered && (
        <div style={{
          background:'rgba(20,20,20,0.85)', color:'#fff', borderRadius:8,
          padding:'6px 10px', fontSize:10, fontFamily:'var(--mono)',
          whiteSpace:'nowrap', pointerEvents:'none',
          backdropFilter:'blur(4px)'
        }}>
          Mozart · Le Nozze di Figaro
        </div>
      )}
      <button
        onClick={onToggle}
        aria-label={playing ? 'Pause music' : 'Play music'}
        style={{
          width:44, height:44, borderRadius:99, cursor:'pointer',
          border: playing ? 'none' : '1.5px solid var(--border)',
          background: playing ? 'var(--gm)' : '#fff',
          boxShadow: playing
            ? '0 4px 20px rgba(234,0,140,0.35)'
            : '0 4px 16px rgba(0,0,0,0.12)',
          display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:16, color: playing ? '#fff' : 'var(--ink)',
          transition:'all 0.2s ease', outline:'none'
        }}
      >
        {playing ? '❚❚' : '♪'}
      </button>
    </div>
  );
}

// ---- Hero dashboard mock --------------------------------
function HeroDashMock() {
  const { lang } = React.useContext(LangCtx);
  return (
    <div style={{
      background:'var(--dark)', color:'var(--dark-ink)',
      border:'1px solid var(--dark-line)', borderRadius:16,
      padding: 20, position:'relative', overflow:'hidden',
      boxShadow:'0 40px 80px -20px rgba(234, 0, 140, 0.18), 0 20px 40px -10px rgba(0,0,0,0.2)'
    }}>
      {/* top chrome */}
      <div style={{display:'flex',alignItems:'center',gap:10,paddingBottom:14,borderBottom:'1px solid var(--dark-line)'}}>
        <div style={{display:'flex',gap:6}}>
          <span style={{width:10,height:10,borderRadius:99,background:'#ff6b6b'}}/>
          <span style={{width:10,height:10,borderRadius:99,background:'#ffd166'}}/>
          <span style={{width:10,height:10,borderRadius:99,background:'#51cf66'}}/>
        </div>
        <div style={{fontFamily:'var(--mono)', fontSize:11, color:'oklch(65% 0.008 70)', marginLeft:8}}>dashboard.gaung.app</div>
        <div style={{marginLeft:'auto', display:'flex', gap:8, alignItems:'center'}}>
          <span style={{fontSize:10, padding:'3px 8px', background:'var(--grad)', color:'#fff', borderRadius:99, fontWeight:600}}>LIVE</span>
          <span style={{fontSize:11, color:'oklch(70% 0.008 70)'}}>{t({id:'Sinkron 12 dtk lalu', en:'Synced 12s ago'}, lang)}</span>
        </div>
      </div>

      {/* KPI row */}
      <div className="dash-kpi" style={{display:'grid',gap:12,marginTop:20}}>
        {[
          { l: t({id:'Lead masuk', en:'Leads in'}, lang), v:'2,847', d:'+12.4%' },
          { l: t({id:'Balasan WA', en:'WA replies'}, lang), v:'968', d:'+38%' },
          { l: t({id:'Meeting ter-booking', en:'Meetings booked'}, lang), v:'142', d:'+24%' },
          { l: t({id:'Pipeline value', en:'Pipeline value'}, lang), v:'IDR 4.2B', d:'+19%' },
        ].map((k,i) => (
          <div key={i} style={{background:'var(--dark-2)',borderRadius:10,padding:'14px 16px',border:'1px solid var(--dark-line)'}}>
            <div style={{fontSize:10,color:'oklch(65% 0.008 70)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600}}>{k.l}</div>
            <div style={{fontSize:26,fontWeight:500,letterSpacing:'-0.02em',marginTop:4}}>{k.v}</div>
            <div style={{fontSize:11,color:'#51cf66',marginTop:2}}>↑ {k.d}</div>
          </div>
        ))}
      </div>

      {/* chart zone */}
      <div className="dash-chart-grid" style={{display:'grid',gap:12,marginTop:12}}>
        <div style={{background:'var(--dark-2)',borderRadius:10,padding:18,border:'1px solid var(--dark-line)',minHeight:180}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:16}}>
            <div>
              <div style={{fontSize:13,fontWeight:500}}>{t({id:'Lead flow 30 hari', en:'Lead flow, 30 days'}, lang)}</div>
              <div style={{fontSize:11,color:'oklch(65% 0.008 70)',marginTop:2}}>{t({id:'WhatsApp + Email', en:'WhatsApp + Email'}, lang)}</div>
            </div>
            <div style={{display:'flex',gap:8,fontSize:10}}>
              <span style={{display:'flex',alignItems:'center',gap:4,color:'oklch(70% 0.008 70)'}}>
                <span style={{width:8,height:8,borderRadius:2,background:'#ea008c'}}/>WA
              </span>
              <span style={{display:'flex',alignItems:'center',gap:4,color:'oklch(70% 0.008 70)'}}>
                <span style={{width:8,height:8,borderRadius:2,background:'#ff8a10'}}/>Email
              </span>
            </div>
          </div>
          <svg viewBox="0 0 400 120" width="100%" height="120" preserveAspectRatio="none">
            <defs>
              <linearGradient id="hgm" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#ea008c" stopOpacity="0.35"/>
                <stop offset="1" stopColor="#ea008c" stopOpacity="0"/>
              </linearGradient>
              <linearGradient id="hgo" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#ff8a10" stopOpacity="0.3"/>
                <stop offset="1" stopColor="#ff8a10" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,90 C40,80 60,60 100,55 C140,50 160,70 200,50 C240,30 260,40 300,25 C340,10 360,20 400,10 L400,120 L0,120 Z" fill="url(#hgm)"/>
            <path d="M0,90 C40,80 60,60 100,55 C140,50 160,70 200,50 C240,30 260,40 300,25 C340,10 360,20 400,10" stroke="#ea008c" strokeWidth="1.6" fill="none"/>
            <path d="M0,100 C40,95 80,90 120,80 C160,70 200,85 240,70 C280,55 320,65 360,50 C380,45 400,48 400,48 L400,120 L0,120 Z" fill="url(#hgo)"/>
            <path d="M0,100 C40,95 80,90 120,80 C160,70 200,85 240,70 C280,55 320,65 360,50 C380,45 400,48 400,48" stroke="#ff8a10" strokeWidth="1.6" fill="none"/>
          </svg>
        </div>

        {/* Live conversation feed */}
        <div style={{background:'var(--dark-2)',borderRadius:10,padding:18,border:'1px solid var(--dark-line)'}}>
          <div style={{fontSize:13,fontWeight:500,marginBottom:12}}>{t({id:'Conversation Engine', en:'Conversation Engine'}, lang)}</div>
          {[
            { n:'Budi S.', msg: t({id:'Berapa harga paket enterprise?', en:'Price for enterprise tier?'}, lang), tag:'hot' },
            { n:'Rina K.', msg: t({id:'Bisa demo minggu ini?', en:'Can we demo this week?'}, lang), tag:'hot' },
            { n:'PT Merdeka', msg: t({id:'Kirim proposal', en:'Send proposal'}, lang), tag:'warm' },
          ].map((c,i)=> (
            <div key={i} style={{display:'flex',gap:10,padding:'8px 0',borderTop:i?'1px solid var(--dark-line)':'none'}}>
              <div style={{width:28,height:28,borderRadius:99,background:'var(--grad)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:600,flexShrink:0}}>
                {c.n[0]}
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:12,fontWeight:500,display:'flex',justifyContent:'space-between'}}>
                  <span>{c.n}</span>
                  <span style={{fontSize:9,padding:'1px 6px',borderRadius:4,background: c.tag==='hot' ? 'oklch(30% 0.1 30)' : 'oklch(30% 0.08 80)', color: c.tag==='hot' ? '#ff8a8a' : '#ffcc88', textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600}}>{c.tag}</span>
                </div>
                <div style={{fontSize:11,color:'oklch(65% 0.008 70)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{c.msg}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LangCtx, t, Logo, Nav, Footer, Placeholder, Hero, HeroDashMock, WizardInput });