/* HERO — bold statement + live performance ticker on the right */

function Hero() {
  const isMobile = useWindowWidth() < 768;

  return (
    <section
      data-screen-label="01 Hero"
      style={{
        paddingTop: isMobile ? 100 : 130, paddingBottom: 56, position: 'relative', overflow: 'hidden',
      }}
    >
      {/* Background subtle grid */}
      <div
        aria-hidden
        style={{
          position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
          maskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
          WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
        }}
        className="grid-bg"
      />

      <div className="container" style={{ position: 'relative' }}>
        {/* Top tag row */}
        <Reveal style={{ display: 'flex', justifyContent: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 36 }}>
          <span className="tag"><span className="swatch" style={{ background: 'var(--red)' }}></span>Limited Spots This Month</span>
          <span className="tag"><span className="swatch"></span>85+ Global DTC brands</span>
          <span className="tag"><span className="swatch" style={{ background: 'var(--green-deep)' }}></span>$10M+ Revenue generated</span>
          <span className="tag"><span className="swatch" style={{ background: 'var(--warn)' }}></span>Avg 4.2× ROAS</span>
        </Reveal>

        {/* Headline */}
        <Reveal delay={80} style={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}>
          <h1 className="display" style={{ maxWidth: 1100, textAlign: 'center' }}>
            Most DTC <InlineLogoLockup /> stores don't have a<br />
            traffic problem. They have a <span className="accent">conversion ∞ problem.</span>
          </h1>
        </Reveal>

        <Reveal delay={160} style={{ display: 'flex', justifyContent: 'center', marginTop: 26 }}>
          <p className="lead" style={{ textAlign: 'center' }}>
            Not an agency. An architecture layer for DTC brands that need their site, ads, analytics
            and CRO to <em>actually work together</em>. We pair senior performance designers with growth engineers, run experiments weekly, and ship measurable lift — not decks.
          </p>
        </Reveal>

        {/* CTAs */}
        <Reveal delay={220} style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 32, flexWrap: 'wrap' }}>
          <BtnDark icon={!isMobile} style={isMobile ? { fontSize: 13, height: 42, padding: '0 18px' } : undefined} onClick={() => window.open('https://calendly.com/ecomlifters/30min', '_blank')}>Book a strategy call</BtnDark>
          <BtnGreen icon={!isMobile} style={isMobile ? { fontSize: 13, height: 42, padding: '0 18px' } : undefined} onClick={() => window.open('https://wa.me/917982069421', '_blank')}>See live results</BtnGreen>
        </Reveal>

        {/* Social proof row */}
        <Reveal delay={300} style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 28, alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex' }}>
            {['Sarah M', 'Tom B', 'Danielle R', 'David C', 'Vishal C'].map((n, i) => (
              <div key={n} style={{ marginLeft: i ? -10 : 0, zIndex: 5 - i }}>
                <Avatar name={n} size={32} hue={120 + i * 30} />
              </div>
            ))}
            <span style={{ marginLeft: -10, width: 32, height: 32, borderRadius: '50%', background: 'var(--ink)', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, border: '2px solid white' }}>+85</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ display: 'flex', gap: 2, color: 'var(--warn)' }}>
              {[1,2,3,4,5].map(i => <Icon.Star key={i} size={14} />)}
            </div>
            <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>
              <strong style={{ color: 'var(--ink)' }}>4.9</strong> from 85+ reviews
            </span>
          </div>
        </Reveal>

        {/* The live performance dashboard hero asset */}
        <Reveal delay={360} style={{ marginTop: 72 }}>
          <HeroDashboard />
        </Reveal>
      </div>

      {/* Decorative testimonial stickers (desktop only) */}
      {!isMobile && (
        <Sticker
          rotate={-6}
          style={{ top: 240, left: 36, width: 200 }}
          src="Kash, GYM Generation"
        >
          "We replaced 3 vendors with one ecomlifters squad. Cut CAC by 38% in Q1."
        </Sticker>
      )}
      {!isMobile && (
        <Sticker
          rotate={5}
          style={{ top: 220, right: 36, width: 210 }}
          src="Alex K., Global Seed & Hydrate"
        >
          "Their experimentation cadence is unreal — 12 winning tests in 90 days, all instrumented properly."
        </Sticker>
      )}
    </section>
  );
}

function InlineLogoLockup() {
  // little inline visual: small Shopify-ish badge between words
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, verticalAlign: 'baseline' }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: '0.85em', height: '0.85em', borderRadius: '50%',
        background: 'var(--green)', color: 'white',
        fontSize: '0.45em', fontWeight: 700,
        verticalAlign: '-0.05em',
      }}>S</span>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: '0.85em', height: '0.85em', borderRadius: '50%',
        background: 'var(--ink)', color: 'white',
        fontSize: '0.4em', fontWeight: 700,
        verticalAlign: '-0.05em',
      }}>∞</span>
    </span>
  );
}

/* The hero dashboard: an animated "campaign console" snapshot */
function HeroDashboard() {
  const isMobile = useWindowWidth() < 768;
  const [tab, setTab] = useState('roas');
  const data = {
    roas:  [2.1, 2.3, 2.4, 2.8, 3.1, 3.0, 3.5, 3.9, 4.1, 4.3, 4.7, 4.6, 5.1, 5.4, 5.2, 5.8],
    cvr:   [1.2, 1.4, 1.3, 1.6, 1.9, 2.1, 2.0, 2.4, 2.6, 2.8, 3.2, 3.1, 3.6, 3.8, 4.0, 4.2],
    cac:   [62, 60, 58, 55, 52, 50, 48, 46, 45, 42, 41, 39, 37, 36, 34, 33].map(v => 80 - v),
    rev:   [12, 14, 13, 16, 19, 22, 25, 27, 32, 35, 38, 42, 45, 49, 56, 62],
  };

  if (isMobile) {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {[
          { label: 'ROAS', value: '4.8×', delta: '+34% wow', color: 'var(--green)' },
          { label: 'CVR', value: '4.2%', delta: '+186%', color: 'var(--green)' },
          { label: 'CAC saved', value: '$33', delta: '-47%', color: 'var(--warn)' },
          { label: 'Revenue', value: '$1.24M', delta: '+212% qoq', color: 'var(--green)' },
        ].map(s => (
          <div key={s.label} style={{ background: 'var(--dark)', borderRadius: 16, padding: '20px 16px', color: 'white', border: '1px solid rgba(255,255,255,.06)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,.5)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>{s.label}</div>
            <div className="num" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.03em' }}>{s.value}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: s.color, marginTop: 4 }}>↑ {s.delta}</div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div style={{
      background: 'var(--dark)',
      borderRadius: 26,
      padding: 4,
      boxShadow: '0 60px 120px -50px rgba(10,15,12,.5), 0 22px 50px -30px rgba(15,191,97,.18)',
      border: '1px solid rgba(255,255,255,.06)',
      overflow: 'hidden',
    }}>
      {/* Window chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', color: 'rgba(255,255,255,.5)' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#3a3f3c' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#3a3f3c' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#3a3f3c' }}></span>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, marginLeft: 12 }}>
          ecomlifters.console / clients / global-seed-co / live
        </span>
        <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
          <span className="pulse-dot"></span> Live · synced 0.4s ago
        </span>
      </div>

      <div style={{
        background: 'var(--dark-2)',
        borderRadius: 20, padding: 24,
        display: 'grid',
        gridTemplateColumns: '1.5fr 1fr',
        gap: 24,
        color: 'rgba(255,255,255,.92)',
      }}>
        {/* Left — Big chart */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', gap: 4, background: 'rgba(255,255,255,.04)', padding: 4, borderRadius: 999, border: '1px solid rgba(255,255,255,.06)' }}>
              {[
                ['roas','ROAS','4.8×','+34%'],
                ['cvr','CVR','4.2%','+186%'],
                ['cac','CAC saved','$33','-47%'],
                ['rev','Revenue','$1.24M','+212%'],
              ].map(([k, label]) => (
                <button key={k} onClick={() => setTab(k)} style={{
                  padding: '8px 14px', borderRadius: 999,
                  fontSize: 12, color: tab === k ? 'var(--ink)' : 'rgba(255,255,255,.65)',
                  background: tab === k ? 'var(--green-bright)' : 'transparent',
                  fontWeight: 500, letterSpacing: '-0.005em',
                  transition: 'all .25s var(--ease)',
                }}>{label}</button>
              ))}
            </div>
            <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,.5)' }}>
              LAST 16 WEEKS  ·  EXP. ID #2412-CRO-LP
            </span>
          </div>

          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 6 }}>
            <span className="num" style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em' }}>
              {tab === 'roas' && '4.8×'}
              {tab === 'cvr'  && '4.2%'}
              {tab === 'cac'  && '$33'}
              {tab === 'rev'  && '$1.24M'}
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--green-bright)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
              <Icon.TrendUp size={14} />
              {tab === 'roas' && '+34% wow'}
              {tab === 'cvr'  && '+186% vs baseline'}
              {tab === 'cac'  && '-47% vs baseline'}
              {tab === 'rev'  && '+212% qoq'}
            </span>
          </div>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,.55)', margin: '0 0 18px 0' }}>
            {tab === 'roas' && 'Meta + Google blended return on ad spend, attributed.'}
            {tab === 'cvr'  && 'Site-wide conversion rate after PDP redesign + checkout fixes.'}
            {tab === 'cac'  && 'Customer acquisition cost across 4 channels (blended).'}
            {tab === 'rev'  && 'Net new revenue attributable to ecomlifters work.'}
          </p>

          <BigChart values={data[tab]} />
        </div>

        {/* Right — sub-stats */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <MiniStat label="Tests shipped (Q)" value="24" delta="+8" sparkline={[2,3,4,5,4,6,7,8,9,10,11,12]} />
          <MiniStat label="Winning variants" value="17" delta="71% win rate" sparkline={[1,2,2,3,4,4,5,6,7,8,9,10]} />
          <MiniStat label="Avg. session value" value="$8.42" delta="+$3.18" sparkline={[5,5.2,5.6,6,6.3,6.5,7,7.4,7.8,8.0,8.3,8.4]} />
          <MiniStat label="Pages live" value="42" delta="+19 this Q" sparkline={[20,22,24,25,28,30,32,34,36,38,40,42]} />
        </div>
      </div>
    </div>
  );
}

function MiniStat({ label, value, delta, sparkline }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,.025)',
      border: '1px solid rgba(255,255,255,.05)',
      borderRadius: 16, padding: 14,
      display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 10,
    }}>
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)' }}>{label}</div>
        <div className="num" style={{ fontSize: 22, fontWeight: 500, marginTop: 4, letterSpacing: '-0.02em' }}>{value}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--green-bright)', marginTop: 2 }}>↑ {delta}</div>
      </div>
      <Sparkline values={sparkline} width={70} height={36} color="var(--green-bright)" />
    </div>
  );
}

function BigChart({ values }) {
  // Animated path on data change
  const W = 720, H = 220;
  const min = Math.min(...values), max = Math.max(...values);
  const range = max - min || 1;
  const stepX = W / (values.length - 1);
  const pts = values.map((v, i) => [i * stepX, H - 12 - ((v - min) / range) * (H - 24)]);
  const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = `${d} L${W},${H} L0,${H} Z`;
  return (
    <div style={{ position: 'relative' }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 220, display: 'block' }}>
        <defs>
          <linearGradient id="heroChartGrad" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#0FBF61" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#0FBF61" stopOpacity="0" />
          </linearGradient>
          <pattern id="heroGrid" width="60" height="44" patternUnits="userSpaceOnUse">
            <path d="M 60 0 L 0 0 0 44" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width={W} height={H} fill="url(#heroGrid)" />
        <path d={area} fill="url(#heroChartGrad)" style={{ transition: 'all .8s var(--ease)' }} />
        <path d={d} fill="none" stroke="#19D973" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" style={{ transition: 'all .8s var(--ease)' }} />
        {pts.map((p, i) => (
          <circle key={i} cx={p[0]} cy={p[1]} r={i === pts.length - 1 ? 4 : 2} fill="#19D973" />
        ))}
      </svg>
      {/* x-axis labels */}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,.4)' }}>
        <span>W1</span><span>W4</span><span>W8</span><span>W12</span><span>NOW</span>
      </div>
    </div>
  );
}

window.Hero = Hero;