/* SERVICE DETAIL BLOCKS — long-form per service */

function SvcDetails() {
  const services = [
    {
      id: 'perf',
      num: '01',
      title: 'Performance Marketing',
      sub: 'Full-funnel paid media that compounds',
      lead: 'We run paid acquisition like an engineering team: hypothesis, build, ship, measure, iterate. Senior media buyers + creative strategists + analytics — under one roof.',
      includes: [
        'Channel strategy & media plan',
        'Creative testing framework (4× variants weekly)',
        'Account structure & audience architecture',
        'Server-side tracking & attribution setup',
        'Weekly reporting + monthly QBR',
        'Lifecycle integration (email + SMS)',
      ],
      stack: ['Meta Ads', 'Google Ads', 'TikTok Ads', 'YouTube', 'Klaviyo', 'Postscript', 'Northbeam'],
      kpis: [
        { l: 'Blended ROAS',  v: '3.8×',  d: '+148%' },
        { l: 'CAC reduction', v: '−42%',  d: 'avg 90d' },
        { l: 'Test velocity', v: '12/wk', d: 'creatives' },
      ],
      chart: 'roas',
      starting: '$9k / month',
    },
    {
      id: 'web',
      num: '02',
      title: 'Websites & Landing Pages',
      sub: 'Storefronts engineered to convert',
      lead: 'We don\'t design pretty sites — we engineer growth engines. PDPs, PLPs, checkout flows and landing pages built on conversion data, not vibes.',
      includes: [
        'Conversion audit & strategy doc',
        'Information architecture & wireframes',
        'High-fidelity design system',
        'Shopify or headless build',
        'Page speed optimization (LCP < 1.8s)',
        'Analytics & event tracking setup',
      ],
      stack: ['Shopify Plus', 'Hydrogen', 'Next.js', 'Framer', 'Webflow', 'Sanity', 'Contentful'],
      kpis: [
        { l: 'CVR uplift',   v: '+186%', d: 'avg post-launch' },
        { l: 'LCP score',    v: '1.6s',  d: '−68% vs before' },
        { l: 'Launch time',  v: '8–12w', d: 'full storefront' },
      ],
      chart: 'cvr',
      starting: '$15k / project',
    },
    {
      id: 'cro',
      num: '03',
      title: 'CRO & Experimentation',
      sub: 'Weekly experiments. Compounding wins.',
      lead: 'A dedicated experimentation squad: research, hypothesis, build, ship, measure. We don\'t guess — every test is statistically powered and properly attributed.',
      includes: [
        'Heuristic + quantitative funnel audit',
        'Hypothesis backlog (prioritized by impact × confidence × ease)',
        'A/B test build + QA + launch',
        'Statistical significance monitoring',
        'Winning variant rollout & documentation',
        'Monthly experimentation report',
      ],
      stack: ['VWO', 'Convert', 'PostHog', 'Hotjar', 'Mixpanel', 'Triple Whale'],
      kpis: [
        { l: 'Test win rate',   v: '71%',   d: 'industry avg 28%' },
        { l: 'Tests / quarter', v: '24',    d: 'avg client' },
        { l: 'Lift per win',    v: '+8.2%', d: 'on primary KPI' },
      ],
      chart: 'cvr',
      starting: '$12k / month',
    },
    {
      id: 'mvp',
      num: '04',
      title: 'MVP & Product Design',
      sub: 'Validate fast. Ship faster.',
      lead: 'For founders launching new products or DTC brands spinning up companion apps — we ship MVPs in 4–8 weeks with a real design system that scales past the prototype.',
      includes: [
        'Discovery & user research sprint',
        'Product strategy & feature scoping',
        'Design system + component library',
        'Functional MVP build (web or mobile)',
        'Onboarding flows + key user journeys',
        'Handoff docs for in-house team',
      ],
      stack: ['Next.js', 'React Native', 'Supabase', 'Vercel', 'Framer Motion', 'Linear'],
      kpis: [
        { l: 'Time to launch',  v: '4–8w', d: 'mvp scope' },
        { l: 'Design system',   v: '40+',  d: 'shipped components' },
        { l: 'Founders served', v: '23',   d: 'last 24 months' },
      ],
      chart: 'rev',
      starting: '$22k / project',
    },
  ];

  return (
    <>
      {services.map((s, i) => (
        <ServiceDetailBlock key={s.id} svc={s} flip={i % 2 === 1} />
      ))}
    </>
  );
}

function ServiceDetailBlock({ svc, flip }) {
  const isMobile = useWindowWidth() < 768;

  return (
    <section
      id={svc.id}
      data-screen-label={`Svc ${svc.num}`}
      style={{
        paddingTop: isMobile ? 40 : 56,
        paddingBottom: isMobile ? 40 : 56,
        borderTop: '1px solid var(--hairline)',
      }}
    >
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 56,
          alignItems: 'start',
          direction: (!isMobile && flip) ? 'rtl' : 'ltr',
        }}>
          {/* Text side */}
          <div style={{ direction: 'ltr' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 12, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--green-deep)', letterSpacing: '0.06em' }}>{svc.num} / SERVICE</span>
              <span style={{ flex: 1, minWidth: 20, height: 1, background: 'var(--hairline)' }}></span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>from {svc.starting}</span>
            </div>

            <Reveal>
              <h2 className="h2" style={{ marginBottom: 12, maxWidth: '14ch' }}>{svc.title}</h2>
            </Reveal>
            <Reveal delay={80}>
              <p style={{ fontSize: 18, color: 'var(--green-deep)', margin: '0 0 14px 0', fontWeight: 500 }}>{svc.sub}</p>
            </Reveal>
            <Reveal delay={120}>
              <p className="lead">{svc.lead}</p>
            </Reveal>

            {/* What's included */}
            <Reveal delay={180} style={{ marginTop: 28 }}>
              <div className="mono-label" style={{ marginBottom: 14 }}>What's included</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 8 }}>
                {svc.includes.map(it => (
                  <li key={it} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '8px 0' }}>
                    <span style={{ flexShrink: 0, marginTop: 4, width: 14, height: 14, borderRadius: '50%', background: 'var(--green-soft)', color: 'var(--green-deep)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon.Check size={9} />
                    </span>
                    <span style={{ fontSize: 14 }}>{it}</span>
                  </li>
                ))}
              </ul>
            </Reveal>

            {/* Stack */}
            <Reveal delay={240} style={{ marginTop: 24 }}>
              <div className="mono-label" style={{ marginBottom: 10 }}>Stack we run on</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {svc.stack.map(t => (
                  <span key={t} className="tag" style={{ fontSize: 12 }}>{t}</span>
                ))}
              </div>
            </Reveal>

            <Reveal delay={280} style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <BtnDark onClick={() => window.open('https://wa.me/917982069421', '_blank')}>Get a tailored quote</BtnDark>
              <BtnGhost onClick={() => window.open('https://calendly.com/ecomlifters/30min', '_blank')}>Book a call</BtnGhost>
            </Reveal>
          </div>

          {/* Visual side */}
          <div style={{ direction: 'ltr' }}>
            <Reveal>
              <SvcVisual svc={svc} />
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function SvcVisual({ svc }) {
  const isMobile = useWindowWidth() < 768;
  const data = {
    roas: [2.1, 2.4, 2.8, 3.0, 3.4, 3.7, 4.1, 4.5, 4.8, 5.2, 5.8, 6.1],
    cvr:  [1.2, 1.4, 1.7, 2.1, 2.5, 2.9, 3.2, 3.6, 4.0, 4.2, 4.6, 5.0],
    rev:  [10, 15, 20, 26, 34, 42, 50, 60, 70, 82, 96, 108],
  };
  return (
    <div style={{
      background: 'var(--dark)',
      borderRadius: 22, padding: 4,
      boxShadow: '0 50px 100px -50px rgba(10,15,12,.4)',
      border: '1px solid rgba(255,255,255,.06)',
      overflow: 'hidden',
    }}>
      {/* chrome bar */}
      <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: 9, height: 9, borderRadius: '50%', background: '#3a3f3c' }}></span>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#3a3f3c' }}></span>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#3a3f3c' }}></span>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, marginLeft: 8 }}>
          {svc.id}.ecomlifters.console
        </span>
        <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
          <span className="pulse-dot"></span> live
        </span>
      </div>

      <div style={{ background: 'var(--dark-2)', borderRadius: 18, padding: isMobile ? 14 : 22, color: 'white' }}>
        {/* KPI row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: isMobile ? 8 : 10, marginBottom: 18 }}>
          {svc.kpis.map(k => (
            <div key={k.l} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.06)', borderRadius: 10, padding: isMobile ? 10 : 12 }}>
              <div className="mono-label" style={{ color: 'rgba(255,255,255,.5)', fontSize: 9 }}>{k.l}</div>
              <div className="num" style={{ fontSize: isMobile ? 18 : 22, fontWeight: 500, marginTop: 4, letterSpacing: '-0.02em' }}>{k.v}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--green-bright)', marginTop: 2 }}>↑ {k.d}</div>
            </div>
          ))}
        </div>

        {/* Chart */}
        <div style={{ background: 'rgba(255,255,255,.02)', borderRadius: 10, padding: 14, overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <span className="mono-label" style={{ color: 'rgba(255,255,255,.5)', fontSize: 10 }}>Last 12 weeks</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--green-bright)' }}>SHIPPING</span>
          </div>
          <div style={{ overflow: 'hidden' }}>
            <Sparkline values={data[svc.chart] || data.roas} width={isMobile ? 260 : 480} height={88} color="var(--green-bright)" strokeWidth={2} />
          </div>
        </div>

        {/* Milestones */}
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { t: '00:00', label: 'Discovery + audit kickoff' },
            { t: '02:00', label: 'First experiments live' },
            { t: '06:00', label: 'First measurable lift' },
            { t: '12:00', label: 'Compounding gains' },
          ].map((m, i) => (
            <div key={m.t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
              <span style={{ color: 'rgba(255,255,255,.4)', minWidth: 50 }}>WK {m.t}</span>
              <span style={{ width: i === 3 ? 8 : 6, height: i === 3 ? 8 : 6, borderRadius: '50%', background: i <= 2 ? 'var(--green-bright)' : 'rgba(255,255,255,.2)', flexShrink: 0 }}></span>
              <span style={{ flex: 1, color: i === 3 ? 'rgba(255,255,255,.4)' : 'rgba(255,255,255,.85)', whiteSpace: isMobile ? 'nowrap' : 'normal', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.label}</span>
              {i <= 2 && <span style={{ color: 'var(--green-bright)' }}>✓</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.SvcDetails = SvcDetails;