/* Hero v3 — Clean 2-column layout, simplified dashboard visual */

function HeroDash({ t }){
  const d = t.dash;
  return (
    <div className="hb-card hb-dash">
      <div className="top">
        <span className="dot r"></span>
        <span className="dot y"></span>
        <span className="dot g"></span>
        <span className="url">{d.url}</span>
        <span style={{marginInlineStart:'auto', color:'#5DEAE2', fontFamily:'JetBrains Mono,monospace', fontSize:10, fontWeight:700, display:'inline-flex', alignItems:'center', gap:6}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'#3ad6c0', boxShadow:'0 0 0 4px rgba(58,214,192,.18)'}}></span>LIVE
        </span>
      </div>
      <div className="body">
        <div className="cards">
          {d.cards.map((c,i)=>(
            <div className="kpi" key={i}>
              <div className="t">{c.t}</div>
              <div className="v"><span className="cnt">{c.v}</span>{c.u && <span className="u">{c.u}</span>}</div>
              <div className="d">{I.trend()} {c.d}</div>
            </div>
          ))}
        </div>
        <div className="hb-chart">
          <div className="ct"><span>{d.chartTitle}</span><span className="lg">{d.chartLegend}</span></div>
          <svg viewBox="0 0 320 96" preserveAspectRatio="none">
            <defs>
              <linearGradient id="hbg" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#0FB5AE" stopOpacity="0.5"/>
                <stop offset="100%" stopColor="#0FB5AE" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,76 L20,64 L40,68 L60,52 L80,58 L100,40 L120,46 L140,28 L160,36 L180,20 L200,26 L220,16 L240,24 L260,10 L280,18 L300,6 L320,12 L320,96 L0,96 Z" fill="url(#hbg)"/>
            <path className="line" d="M0,76 L20,64 L40,68 L60,52 L80,58 L100,40 L120,46 L140,28 L160,36 L180,20 L200,26 L220,16 L240,24 L260,10 L280,18 L300,6 L320,12" fill="none" stroke="#0FB5AE" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

function HeroAlert({ t }){
  const a = t.alert;
  return (
    <div className="hb-card hb-alert">
      <span className="b">{I.alert()}</span>
      <div style={{flex:1, minWidth:0}}>
        <div className="t">{a.t}</div>
        <div className="s">{a.s}</div>
      </div>
      <span className="v">{a.v}</span>
    </div>
  );
}

function Hero({ t, lang, onCallback }){
  const h = t.hero;

  const scrollToFeatures = () => {
    const el = document.getElementById('features');
    if(el) el.scrollIntoView({behavior:'smooth', block:'start'});
  };

  return (
    <section className="hero" id="home">
      <div className="container">
        <div className="hero-grid">

          {/* ── Left: copy ── */}
          <div className="hero-copy reveal">
            <span className="eyebrow"><span className="dot"></span>{h.eyebrow}</span>
            <h1 style={{marginTop:16}}>
              <span>{h.title1}</span>{' '}
              <span className="accent">{h.title2}</span><br/>
              <span className="hl">{h.title3}</span>
            </h1>
            <p className="lead hero-sub">{h.sub}</p>

            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={onCallback}>
                {I.phone()} {t.cta.demo}
              </button>
              <button className="btn btn-secondary btn-lg" onClick={scrollToFeatures}>
                {t.cta.howItWorks}
              </button>
            </div>

            <div className="hero-microcopy">
              <span className="pulse"></span>{h.microStatus}
            </div>

            <div className="hero-bstrip">
              {h.benefits.map((b,i)=>(
                <div className="bstrip-item" key={i}>
                  <span className="n">0{i+1}</span>
                  <span className="t">{b.t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* ── Right: visual ── */}
          <div className="hero-visual reveal" style={{transitionDelay:'.12s'}}>
            <div className="hero-ref-1">
              <span className="dot"></span>
              <span dir="ltr">{t.ref1.code}</span>
              <span style={{color:'var(--slate)'}}>·</span>
              <span>{t.ref1.label}</span>
            </div>
            <div className="hero-ref-2">
              <span className="dot"></span>
              <span dir="ltr">{t.ref2.code}</span>
              <span style={{color:'var(--slate)'}}>·</span>
              <span>{t.ref2.label}</span>
            </div>
            <div className="hero-cards">
              <HeroDash t={t}/>
              <HeroAlert t={t}/>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;