// Hero — split: headline left, animated WhatsApp chat right
const ChatDemo = () => {
  const [step, setStep] = React.useState(0);
  const script = [
    {side:'me', body:'Trebam 40 vreća ljepila Ceresit CM11, isporuka Zagreb, Dubrava, sutra poslije podne.'},
    {side:'bot-typing'},
    {side:'bot', body:'Imam te. Tražim najbolje cijene kod 3 provjerena dobavljača...'},
    {side:'bot', body:'✅ Gotovo. 3 ponude spremne:', attach:'ponuda_ceresit_cm11.pdf · 148 KB'},
    {side:'me', body:'Idem s najjeftinijom. 👍'},
    {side:'bot', body:'Super. Nakon preuzimanja, pošalji fotografiju R1 računa — to ti otključava idući besplatni upit.'}
  ];

  React.useEffect(() => {
    const delays = [900, 1100, 1400, 1300, 1100, 1500];
    let t;
    const tick = () => {
      setStep(s => {
        const next = (s + 1) % (script.length + 2);
        t = setTimeout(tick, delays[next % delays.length]);
        return next;
      });
    };
    t = setTimeout(tick, 900);
    return () => clearTimeout(t);
  }, []);

  const visible = script.slice(0, Math.min(step + 1, script.length));

  return (
    <div className="wa-screen">
      <div className="wa-inner">
        <div className="wa-top">
          <div className="wa-avatar">A</div>
          <div>
            <div style={{fontWeight:600}}>Almo.chat</div>
            <div style={{fontSize:11, opacity:0.75}}>AI nabavljač · online</div>
          </div>
          <div style={{marginLeft:'auto', display:'flex', gap:14, opacity:0.9}}>
            <Ico name="phone" size={18} stroke={2}/>
          </div>
        </div>
        <div className="wa-body">
          {visible.map((m, i) => {
            if (m.side === 'bot-typing') return <div key={i} className="wa-typing fadein"><span></span><span></span><span></span></div>;
            return (
              <div key={i} className={`wa-msg ${m.side} fadein`}>
                {m.body}
                {m.attach && (
                  <div className="wa-attach">
                    <Ico name="doc" size={14} stroke={1.8}/>
                    {m.attach}
                  </div>
                )}
                <span className="wa-time">{m.side === 'me' ? '14:3' + i + ' ✓✓' : '14:3' + i}</span>
              </div>
            );
          })}
        </div>
        <div className="wa-bottom">
          <div className="wa-input">Napiši poruku…</div>
          <div style={{width:32,height:32,background:'#075e54',borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff'}}>
            <Ico name="send" size={14} stroke={2}/>
          </div>
        </div>
      </div>
    </div>
  );
};

const PDFDemo = () => (
  <div style={{background:'#fff', border:'1.5px solid var(--navy-900)', boxShadow:'12px 12px 0 var(--navy-900)', padding:'28px 32px', fontFamily:'var(--sans)', height:560, overflow:'hidden', borderRadius:2}}>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start', borderBottom:'2px solid var(--navy-900)', paddingBottom:14, marginBottom:18}}>
      <div>
        <div className="mono" style={{fontSize:10, color:'var(--muted)', letterSpacing:'0.1em'}}>PONUDA · P-2026-0481</div>
        <div className="display" style={{fontSize:22, fontWeight:700, marginTop:6}}>Keramičarski materijal</div>
      </div>
      <div style={{textAlign:'right'}}>
        <div className="logo" style={{fontSize:16}}>Almo<span className="dot" style={{width:6,height:6}}></span>chat</div>
        <div className="mono" style={{fontSize:10, color:'var(--muted)', marginTop:4}}>21.04.2026</div>
      </div>
    </div>

    <div className="mono" style={{fontSize:10, letterSpacing:'0.12em', color:'var(--muted)', marginBottom:8}}>3 USPOREĐENE PONUDE</div>

    {[
      {name:'Mat-Centar Dubrava', price:'428,40 €', note:'Najjeftinije · Verified live feed', recommended:true, distance:'4 km'},
      {name:'Gradinar Zagreb', price:'454,90 €', note:'Merchant reply', distance:'7 km'},
      {name:'Pevec B2B', price:'468,00 €', note:'Public catalog', distance:'12 km'}
    ].map((r, i) => (
      <div key={i} style={{display:'grid', gridTemplateColumns:'24px 1fr auto', gap:14, padding:'14px 12px', borderTop: i===0 ? '1px solid var(--line)' : '1px dashed var(--line-soft)', background: r.recommended ? 'rgba(255,199,0,0.12)' : 'transparent', alignItems:'center'}}>
        <div style={{fontFamily:'var(--mono)', fontWeight:600, color:'var(--muted)'}}>0{i+1}</div>
        <div>
          <div style={{fontWeight:600, fontSize:14}}>{r.name}</div>
          <div className="mono" style={{fontSize:10, color:'var(--muted)', marginTop:2}}>{r.note} · {r.distance}</div>
        </div>
        <div style={{fontFamily:'var(--display)', fontSize:18, fontWeight:700}}>{r.price}</div>
      </div>
    ))}

    <div style={{marginTop:22, padding:'14px 16px', background:'var(--navy-800)', color:'#fff', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
      <div>
        <div style={{fontSize:11, opacity:0.7, fontFamily:'var(--mono)', letterSpacing:'0.1em'}}>UŠTEDA VS. PROSJEK</div>
        <div className="display" style={{fontSize:22, fontWeight:700}}>39,60 €</div>
      </div>
      <div style={{background:'var(--yellow)', color:'var(--navy-900)', padding:'8px 14px', fontSize:12, fontWeight:700, border:'1.5px solid #000', fontFamily:'var(--mono)'}}>0 € ZA MAJSTORA</div>
    </div>
  </div>
);

const Hero = () => {
  const [mode, setMode] = React.useState(window.TWEAKS?.heroMode || 'chat');
  React.useEffect(() => {
    const h = (e) => { if (e.detail?.heroMode) setMode(e.detail.heroMode); };
    window.addEventListener('tweaks', h);
    return () => window.removeEventListener('tweaks', h);
  }, []);

  return (
    <section className="bp-grid" style={{padding:'72px 0 120px', position:'relative', overflow:'hidden'}}>
      {/* corner stamp */}
      <div className="stamp-deco" style={{position:'absolute', top:24, right:32, display:'flex', gap:8}}>
        <Stamp variant="yellow">BLUEPRINT 001</Stamp>
        <Stamp>REV.3 · 04.26</Stamp>
      </div>

      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:72, alignItems:'center'}} className="hero-grid">
          <div>
            <div style={{display:'flex', gap:10, marginBottom:28}}>
              <Stamp variant="navy">HR · BETA 2026</Stamp>
              <Stamp>AI · WhatsApp-first</Stamp>
            </div>
            <h1>
              Tvoj AI<br/>
              <span style={{position:'relative', display:'inline-block'}}>
                nabavljač
                <svg viewBox="0 0 300 14" preserveAspectRatio="none" style={{position:'absolute', left:0, right:0, bottom:-6, width:'100%', height:12}}>
                  <path d="M2 8 Q 80 2, 160 7 T 298 6" fill="none" stroke="var(--accent)" strokeWidth="6"/>
                </svg>
              </span><br/>
              za gradilište.
            </h1>
            <p style={{fontSize:20, marginTop:28, color:'var(--ink-soft)', maxWidth:520, lineHeight:1.45}}>
              Pošalji upit na WhatsApp. Dobij <b>3 usporedne ponude</b> od provjerenih trgovaca i uredan PDF. Bez poziva, bez obilazaka. Za majstora — <b>0 €</b>.
            </p>

            <div style={{display:'flex', gap:12, marginTop:36, flexWrap:'wrap'}}>
              <a href="https://buychat.hr/rotator?projectId=22" className="btn btn-accent">
                <Ico name="whatsapp" size={18} stroke={0}/>
                Pokreni prvi upit
              </a>
              <a href="#za-trgovce" className="btn btn-ghost">
                Prijavi trgovinu
                <Ico name="arrow" size={16}/>
              </a>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20, marginTop:56, maxWidth:520}}>
              {[
                {kpi:'0 €', label:'Ulazna barijera za majstora'},
                {kpi:'~90s', label:'Od upita do PDF ponude'},
                {kpi:'3×', label:'Izvora provjerenih cijena'}
              ].map((k, i) => (
                <div key={i} style={{borderTop:'1.5px solid var(--navy-900)', paddingTop:12}}>
                  <div className="display" style={{fontSize:28, fontWeight:700}}>{k.kpi}</div>
                  <div style={{fontSize:12, color:'var(--muted)', marginTop:4, lineHeight:1.3}}>{k.label}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{position:'relative'}}>
            {/* blueprint annotations around the phone */}
            <div className="mono stamp-deco" style={{position:'absolute', top:-26, left:0, fontSize:10, color:'var(--muted)', letterSpacing:'0.12em'}}>FIG.01 — WHATSAPP CHANNEL</div>
            <div className="mono stamp-deco" style={{position:'absolute', top:40, right:-8, fontSize:10, color:'var(--muted)', letterSpacing:'0.12em', transform:'rotate(90deg)', transformOrigin:'right top'}}>H = 560mm</div>
            {mode === 'chat' && <ChatDemo/>}
            {mode === 'pdf' && <PDFDemo/>}
            {mode === 'split' && <ChatDemo/>}
          </div>
        </div>

        {/* trust row */}
        <div style={{marginTop:96, paddingTop:28, borderTop:'1px dashed var(--line)'}}>
          <div className="mono" style={{fontSize:10, letterSpacing:'0.18em', color:'var(--muted)', marginBottom:16}}>FAZA 1 · PILOT KATEGORIJE</div>
          <div style={{display:'flex', gap:40, flexWrap:'wrap', alignItems:'center'}}>
            {['Keramičari','Soboslikari','Knauferi','Fasaderi','Suha gradnja'].map(x => (
              <div key={x} className="display" style={{fontSize:22, fontWeight:600, color:'var(--ink-soft)'}}>{x}</div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, {Hero, ChatDemo, PDFDemo});