/* Hero — full-bleed animation stage on the right, big headline left. */
const { useState: useStateH, useEffect: useEffectH } = React;

function HeroStage() {
  // Composite: WA chat on one side, metrics on the other, both lively
  return (
    <div className="hero-stage">
      <div className="hero-stage-inner">
        <div className="hs-chat"><WAChatStage compact={true} /></div>
        <div className="hs-side">
          <div className="hs-metric hs-sales">
            <div className="hs-metric-top">
              <span className="eyebrow">Sales today</span>
              <span className="hs-pill">● live</span>
            </div>
            <div className="hs-big">₹1,84,200</div>
            <div className="hs-delta">▲ 41% vs last week</div>
            <div className="hs-spark">
              <svg viewBox="0 0 100 30" preserveAspectRatio="none">
                <path d="M0 22 L15 18 L30 20 L45 12 L60 14 L75 8 L90 5 L100 2"
                  fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"
                  strokeDasharray="200" strokeDashoffset="200"
                  style={{ animation: 'sparkdraw 2.6s cubic-bezier(.3,.7,.2,1) infinite' }} />
                <circle cx="100" cy="2" r="2.5" fill="var(--accent)" />
              </svg>
            </div>
          </div>
          <div className="hs-metric hs-orders">
            <span className="eyebrow">New orders</span>
            <div className="hs-orderlist">
              <div className="hs-order in"><span className="hs-avatar">K</span><span className="hs-text">Kavya · ₹12,400</span><span className="hs-time">now</span></div>
              <div className="hs-order in" style={{animationDelay: '.3s'}}><span className="hs-avatar">R</span><span className="hs-text">Rohit · ₹8,200</span><span className="hs-time">2m</span></div>
              <div className="hs-order in" style={{animationDelay: '.6s'}}><span className="hs-avatar">A</span><span className="hs-text">Anand · ₹24,000</span><span className="hs-time">4m</span></div>
            </div>
          </div>
          <div className="hs-metric hs-tag">
            <div className="hs-tag-line">
              <span className="dot" /> Reply rate
              <b>98%</b>
            </div>
            <div className="hs-tag-line">
              <span className="dot" /> Avg response
              <b>11s</b>
            </div>
          </div>
        </div>
      </div>
      <div className="hs-floating hs-fl-1">
        <div className="fl-icon"><Ic.bot size={16} /></div>
        <div><div className="fl-title">Bot answered</div><div className="fl-sub">12 questions · no human</div></div>
      </div>
      <div className="hs-floating hs-fl-2">
        <div className="fl-icon accent"><Ic.check size={14} /></div>
        <div><div className="fl-title">Order confirmed</div><div className="fl-sub">Auto-sent to 3 channels</div></div>
      </div>
      <style>{`
        .hero-stage-inner { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 22px; }
        .hs-chat { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #0b3621; border: 1px solid rgba(0,0,0,.2); }
        .hs-side { display: flex; flex-direction: column; gap: 12px; }
        .hs-metric { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px; flex: 1; display: flex; flex-direction: column; }
        html.dark .hs-metric { background: var(--paper-3); }
        .hs-metric.hs-sales { background: var(--ink); color: var(--paper); border-color: transparent; }
        .hs-metric.hs-sales .eyebrow { color: color-mix(in oklab, var(--paper) 60%, var(--ink)); }
        .hs-metric-top { display: flex; justify-content: space-between; align-items: center; }
        .hs-pill { font: 500 10px/1 var(--f-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }
        .hs-big { font-family: var(--f-serif); font-style: italic; font-size: 38px; letter-spacing: -0.02em; margin-top: 8px; line-height: 1; }
        .hs-delta { font-size: 12px; color: var(--accent); margin-top: 6px; }
        .hs-spark { margin-top: auto; height: 44px; }
        .hs-spark svg { width: 100%; height: 100%; display: block; }
        @keyframes sparkdraw { 0% { stroke-dashoffset: 200; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }

        .hs-orderlist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
        .hs-order { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--paper-2); border-radius: 10px; font-size: 12px; animation: slidein .4s cubic-bezier(.2,.7,.2,1) both; }
        html.dark .hs-order { background: var(--paper); }
        .hs-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 600; font-size: 11px; }
        .hs-text { flex: 1; font-weight: 500; }
        .hs-time { font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
        @keyframes slidein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

        .hs-tag { flex: 0; padding: 14px 18px; }
        .hs-tag-line { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); padding: 3px 0; }
        .hs-tag-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
        .hs-tag-line b { margin-left: auto; color: var(--ink); font-family: var(--f-mono); font-weight: 500; }

        .hs-floating { position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow); animation: drift 3.5s ease-in-out infinite; will-change: transform; }
        html.dark .hs-floating { background: var(--paper-3); }
        .hs-fl-1 { bottom: 18%; left: -12px; animation-delay: .3s; }
        .hs-fl-2 { top: 18px; right: 16px; animation-delay: 1s; }
        .fl-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); }
        .fl-icon.accent { background: var(--accent); color: var(--accent-ink); }
        .fl-title { font-size: 12px; font-weight: 500; }
        .fl-sub { font-size: 11px; color: var(--muted); }
      `}</style>
    </div>
  );
}

function Hero({ headline, sub }) {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            <span className="dot" style={{display:'inline-block', width:6, height:6, borderRadius:'50%', background:'var(--accent)', marginRight:8, verticalAlign:'middle'}}></span>
            Meta Business Partner · WhatsApp Cloud API
          </div>
          <h1>
            {headline.split('—').map((part, i, arr) => (
              <React.Fragment key={i}>
                {i === 1 ? <><br /><span className="serif">{part.trim()}</span></> : part.trim()}
                {i < arr.length - 1 ? ' ' : ''}
              </React.Fragment>
            ))}
          </h1>
          <p className="hero-sub">{sub}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn primary">Book a free consultation <Ic.arrow size={14} /></a>
            <a href="#services" className="btn ghost">See what we do</a>
          </div>
          <div className="hero-meta">
            <div className="stat"><b>120+</b><span>Local businesses onboarded</span></div>
            <div className="stat"><b>9</b><span>Services, end-to-end</span></div>
            <div className="stat"><b>11s</b><span>Avg bot response time</span></div>
          </div>
        </div>
        <HeroStage />
      </div>
    </section>
  );
}

window.Hero = Hero;