// Design B — Tech / Data-Forward
// Philosophy: sharper, more engineered feel. Dual-accent blue+orange.
// Grid-based layout, numerical & monospace accents, live data visuals.

const SiteB = () => {
  const [navSolid, setNavSolid] = React.useState(false);

  React.useEffect(() => {
    const el = document.getElementById('site-b-scroll');
    if (!el) return;
    const onScroll = () => setNavSolid(el.scrollTop > 40);
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div id="site-b-scroll" style={{
      width: '100%', height: '100%', overflow: 'auto',
      background: '#ffffff', color: '#0b0f1a',
      fontFamily: '"Space Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
    }}>
      {/* ————— NAV ————— */}
      <nav style={{
        position: 'sticky', top: 0, zIndex: 40,
        background: navSolid ? 'rgba(255,255,255,0.94)' : 'rgba(255,255,255,0.94)',
        backdropFilter: 'blur(12px)',
        borderBottom: '1px solid #e8eaf0',
      }}>
        <div style={{
          maxWidth: 1320, margin: '0 auto', padding: '16px 40px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <img src="1209-digital-logo.svg" alt="1209 Digital" style={{ height: 32, display: 'block' }} />
          </div>
        </div>
      </nav>

      {/* ————— HERO ————— */}
      <section style={{ position: 'relative', padding: '80px 40px 100px', overflow: 'hidden', background: '#fff' }}>
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
          {/* Status ticker */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '6px 14px 6px 10px', borderRadius: 999,
            background: '#fff', border: '1px solid #e0e4ee',
            fontSize: 12.5, fontWeight: 500, letterSpacing: '0.01em',
            boxShadow: '0 1px 2px rgba(11,15,26,.04)',
            marginBottom: 40,
            fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: '#10b981', boxShadow: '0 0 0 3px rgba(16,185,129,.18)' }} />
              LIVE
            </span>
            <span style={{ color: '#9ca3b8' }}>|</span>
            <span style={{ color: '#3a3f52' }}>8 platforms · AI-native reporting</span>
          </div>

          <div>
              <h1 style={{
                fontFamily: '"Space Grotesk", sans-serif',
                fontSize: 144, lineHeight: 0.92, letterSpacing: '-0.045em',
                fontWeight: 700, margin: 0, textWrap: 'balance',
                color: '#0b0f1a', maxWidth: 1200,
              }}>
                Growth at the<br/>
                speed of <span style={{
                  fontStyle: 'italic',
                  fontFamily: '"Instrument Serif", "Playfair Display", serif',
                  fontWeight: 400,
                  letterSpacing: '-0.02em',
                  color: '#1046E5',
                }}>intelligence.</span>
              </h1>

            <div style={{
              marginTop: 56, display: 'grid',
              gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'end',
            }}>
              <p style={{
                fontSize: 22, lineHeight: 1.45, color: '#3a3f52', margin: 0,
                maxWidth: 640, fontWeight: 400, textWrap: 'pretty',
              }}>
                Looking to grow your online sales and build an AI-first workflow? 1209 Digital
                works with early-stage brands to scale on digital marketplaces and build the
                workflows and dashboards that streamline their business.
              </p>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                <a href="mailto:hello@1209digital.com" style={{
                  background: '#0b0f1a', color: '#fff', border: 'none', textDecoration: 'none',
                  padding: '18px 26px', borderRadius: 10, fontSize: 15.5, fontWeight: 600,
                  cursor: 'pointer', fontFamily: 'inherit',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  Book an intro
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 22, height: 22, borderRadius: 5, background: '#F26D21', fontSize: 13,
                  }}>→</span>
                </a>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ————— PLATFORM MARQUEE ————— */}
      <section style={{ padding: '28px 40px', background: '#0b0f1a', color: '#fff' }}>
        <div style={{
          maxWidth: 1320, margin: '0 auto', display: 'flex',
          alignItems: 'center', gap: 40, fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          fontSize: 13, letterSpacing: '0.04em', fontWeight: 500,
        }}>
          <span style={{ color: '#F26D21' }}>◆ PLATFORMS</span>
          <div style={{ display: 'flex', gap: 32, flex: 1, justifyContent: 'space-between', opacity: 0.9 }}>
            {['AMAZON', 'SHOPIFY', 'WALMART', 'INSTACART', 'DOORDASH', 'ROUNDEL', 'CRITEO', 'META'].map(p => (
              <span key={p}>{p}</span>
            ))}
          </div>
        </div>
      </section>


      {/* ————— SERVICES GRID ————— */}
      <section style={{ padding: '120px 40px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64 }}>
            <div>
              <div style={{
                fontSize: 12, fontWeight: 600, color: '#F26D21', letterSpacing: '0.16em',
                textTransform: 'uppercase', marginBottom: 16,
                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              }}>
                [ 01 ] Services
              </div>
              <h2 style={{
                fontFamily: '"Space Grotesk", sans-serif',
                fontSize: 68, lineHeight: 0.95, letterSpacing: '-0.035em',
                fontWeight: 700, margin: 0, maxWidth: 820,
              }}>
                A fractional growth team, wired into your data.
              </h2>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            <ServiceCard
              idx="01" title="Account Management" accent="#1046E5"
              desc="Listings, shipments, business reports, account health — handled end-to-end so you can focus on the product."
              bullets={['Listing creation', 'Shipment creation', 'Business reports', 'Account health monitoring']}
              chart={<MiniBars color="#1046E5" />}
              badge="Amazon Service Provider Network"
            />
            <ServiceCard
              idx="02" title="Advertising" accent="#F26D21"
              desc="Paid media across every major retail platform — one plan, one P&L, every surface."
              bullets={['Sponsored SP / SB / SD', 'Retail shelf media', 'Paid social cross-over', 'Cross-platform strategy']}
              chart={<MiniArea />}
              badge="Amazon Ads · Verified Partner 2026"
            />
            <ServiceCard
              idx="03" title="Analytics & BI" accent="#0b0f1a"
              desc="Custom BI and HTML dashboards plus Python-native diagnostics. Traceable metrics, reproducible insights."
              bullets={['Custom BI dashboards', 'Custom HTML dashboards', 'Python notebooks', 'Weekly anomaly detection']}
              chart={<MiniLine />}
            />
          </div>
        </div>
      </section>

      {/* ————— AI ERA · DARK BAND ————— */}
      <section style={{
        background: '#0b0f1a', color: '#fff', padding: '140px 40px 100px',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* background grid */}
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.08,
          backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)',
          backgroundSize: '80px 80px',
          maskImage: 'radial-gradient(circle at 70% 50%, #000, transparent 70%)',
        }} />
        <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
          {/* section header */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'center' }}>
            <div>
              <div style={{
                fontSize: 12, fontWeight: 600, color: '#F26D21', letterSpacing: '0.16em',
                textTransform: 'uppercase', marginBottom: 20,
                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              }}>
                [ 02 ] Designed for the AI era
              </div>
              <h2 style={{
                fontFamily: '"Space Grotesk", sans-serif',
                fontSize: 76, lineHeight: 0.95, letterSpacing: '-0.04em',
                fontWeight: 700, margin: 0,
              }}>
                We don't<br/>read the reports.<br/>
                <span style={{ color: '#F26D21' }}>We write</span> them.
              </h2>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: '#b8bccc', maxWidth: 520, marginTop: 32 }}>
                Proprietary Python scripts and API integrations turn raw platform data
                into instant, actionable strategy. Data at the speed of AI — with a
                human team in the loop, every time.
              </p>

            </div>

            {/* terminal visual */}
            <div style={{
              background: '#141823', border: '1px solid #262b3a', borderRadius: 14,
              overflow: 'hidden', fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              boxShadow: '0 30px 60px -20px rgba(0,0,0,.5)',
            }}>
              <div style={{ padding: '12px 16px', borderBottom: '1px solid #262b3a', display: 'flex', gap: 7, alignItems: 'center' }}>
                <span style={{ width: 11, height: 11, borderRadius: 999, background: '#ff5f57' }} />
                <span style={{ width: 11, height: 11, borderRadius: 999, background: '#febc2e' }} />
                <span style={{ width: 11, height: 11, borderRadius: 999, background: '#28c840' }} />
                <span style={{ marginLeft: 12, fontSize: 12, color: '#888' }}>weekly_readout.py</span>
              </div>
              <div style={{ padding: 24, fontSize: 13.5, lineHeight: 1.7 }}>
                <div style={{ color: '#666' }}># 1209 Digital · Amazon readout</div>
                <div><span style={{ color: '#F26D21' }}>$</span> <span style={{ color: '#b8b8b8' }}>python</span> readout.py <span style={{ color: '#6FB3FF' }}>--brand</span> acme</div>
                <div style={{ color: '#6a6a6a', marginTop: 10 }}>→ pulling last 28d SP/SB/SD ...</div>
                <div style={{ color: '#6a6a6a' }}>→ joining retail inventory ...</div>
                <div style={{ color: '#6a6a6a' }}>→ running anomaly detection ...</div>
                <div style={{ marginTop: 14, padding: '10px 12px', background: 'rgba(242,109,33,.08)', borderLeft: '2px solid #F26D21', color: '#e8e8e8' }}>
                  <span style={{ color: '#F26D21' }}>insight</span> ACOS down 14% WoW on SP —<br/>reallocate $4.2k from SB → top 3 ASINs
                </div>
                <div style={{ color: '#6FB3FF', marginTop: 14 }}>✓ readout ready · 0.8s</div>
              </div>
            </div>
          </div>

          {/* ————— TWO-PART AI STORY ————— */}
          <div style={{ marginTop: 140, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {/* LEFT — we run on AI */}
            <div style={{
              border: '1px solid rgba(255,255,255,.10)', borderRadius: 18,
              padding: 40, background: 'rgba(255,255,255,.02)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 380,
            }}>
              <div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                  fontSize: 11, fontWeight: 600, color: '#F26D21', letterSpacing: '0.16em',
                  textTransform: 'uppercase', marginBottom: 18,
                  fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                }}>
                  <span style={{ width: 18, height: 18, borderRadius: 4, background: '#F26D21', color: '#0b0f1a', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11 }}>A</span>
                  We run on AI
                </div>
                <h3 style={{
                  fontFamily: '"Space Grotesk", sans-serif', fontSize: 36,
                  fontWeight: 700, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1,
                }}>
                  AI works <em style={{ fontStyle: 'italic', color: '#F26D21', fontWeight: 600 }}>inside</em> every engagement.
                </h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.55, color: '#b8bccc', marginTop: 20, marginBottom: 0 }}>
                  Under the hood, every readout, bid decision, and anomaly alert is produced by our own Python notebooks and LLM pipelines. You get faster decisions and cleaner data — without the overhead.
                </p>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '28px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'LLM-assisted weekly readouts',
                  'Automated anomaly & opportunity detection',
                  'Python-native data pipelines',
                  'Human-in-the-loop strategy review',
                ].map(t => (
                  <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#d8dceb', fontSize: 14 }}>
                    <span style={{ width: 5, height: 5, borderRadius: 999, background: '#F26D21' }} />
                    {t}
                  </li>
                ))}
              </ul>
            </div>

            {/* RIGHT — we build AI for you */}
            <div style={{
              border: '1px solid #F26D21', borderRadius: 18,
              padding: 40, position: 'relative', overflow: 'hidden',
              background: 'linear-gradient(135deg, rgba(242,109,33,.14), rgba(16,70,229,.08))',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 380,
            }}>
              <div style={{
                position: 'absolute', top: 16, right: 16,
                fontSize: 10, fontWeight: 700, color: '#0b0f1a',
                background: '#F26D21', padding: '4px 8px', borderRadius: 4,
                letterSpacing: '0.08em', fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              }}>NEW</div>
              <div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                  fontSize: 11, fontWeight: 600, color: '#F26D21', letterSpacing: '0.16em',
                  textTransform: 'uppercase', marginBottom: 18,
                  fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                }}>
                  <span style={{ width: 18, height: 18, borderRadius: 4, background: '#1046E5', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11 }}>B</span>
                  AI Enablement for brands
                </div>
                <h3 style={{
                  fontFamily: '"Space Grotesk", sans-serif', fontSize: 36,
                  fontWeight: 700, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1,
                }}>
                  Or we help you <em style={{ fontStyle: 'italic', color: '#6FB3FF', fontWeight: 600 }}>build your own</em>.
                </h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.55, color: '#d8dceb', marginTop: 20, marginBottom: 0 }}>
                  We partner with brand teams to stand up their internal AI stack — from data architecture to custom Skills, MCP connectors, and agent workflows your ops team actually uses day-to-day.
                </p>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '28px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'AI readiness audit & roadmap',
                  'Custom MCP + Skills',
                  'Data pipelines + warehouse setup',
                  'Team training & operating playbooks',
                ].map(t => (
                  <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#fff', fontSize: 14 }}>
                    <span style={{ width: 5, height: 5, borderRadius: 999, background: '#6FB3FF' }} />
                    {t}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* tech stack strip */}
          <div style={{
            marginTop: 48, padding: '22px 28px', borderRadius: 14,
            background: 'rgba(255,255,255,.03)', border: '1px solid rgba(255,255,255,.08)',
            display: 'flex', alignItems: 'center', gap: 32,
            fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 13,
          }}>
            <span style={{ color: '#F26D21', fontWeight: 600, letterSpacing: '0.12em', fontSize: 11 }}>◆ STACK</span>
            <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', color: '#9ca3b8' }}>
              {['Python', 'OpenAI', 'Anthropic', 'AWS', 'GitHub', 'Vercel', 'Perplexity'].map(s => (
                <span key={s}>{s}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ————— CTA ————— */}
      <section style={{ padding: '0 40px 100px', background: '#0b0f1a' }}>
        <div style={{
          maxWidth: 1320, margin: '0 auto', borderRadius: 20,
          background: '#0b0f1a', color: '#fff', padding: '80px 64px',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.35,
            backgroundImage: 'linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)',
            backgroundSize: '56px 56px',
          }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div style={{
                fontSize: 12, fontWeight: 600, color: '#F26D21', letterSpacing: '0.16em',
                textTransform: 'uppercase', marginBottom: 20,
                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              }}>
                → Start a project
              </div>
              <h2 style={{
                fontFamily: '"Space Grotesk", sans-serif',
                fontSize: 80, lineHeight: 0.95, letterSpacing: '-0.04em', fontWeight: 700, margin: 0,
              }}>
                Reach your growth potential.
              </h2>
              <p style={{ fontSize: 18, color: '#9ca3b8', marginTop: 24, maxWidth: 540 }}>
                A 15-minute intro is all we need to know if we're a fit. No pitch decks.
              </p>
            </div>
            <div style={{
              background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.12)',
              borderRadius: 14, padding: 28,
            }}>
              <div style={{ fontSize: 13, color: '#9ca3b8', marginBottom: 18, fontFamily: '"JetBrains Mono", ui-monospace, monospace', letterSpacing: '0.06em' }}>
                CONTACT
              </div>
              <a href="mailto:hello@1209digital.com" style={{ fontSize: 22, fontWeight: 600, marginBottom: 28, letterSpacing: '-0.015em', color: 'inherit', textDecoration: 'none', display: 'block' }}>
                hello@1209digital.com
              </a>
              <a href="mailto:hello@1209digital.com?subject=15-min%20intro" style={{
                width: '100%', boxSizing: 'border-box',
                background: '#F26D21', color: '#fff', border: 'none', textDecoration: 'none',
                padding: '18px 24px', borderRadius: 10, fontSize: 15, fontWeight: 600,
                cursor: 'pointer', fontFamily: 'inherit',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              }}>
                Book a 15-min intro →
              </a>
              <div style={{ marginTop: 14, fontSize: 12.5, color: '#9ca3b8', textAlign: 'center' }}>
                Typical response · within 1 business day
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ————— FOOTER ————— */}
      <footer style={{ padding: '40px 40px', borderTop: '1px solid #e8eaf0' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, color: '#606678' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="1209-digital-logo.svg" alt="1209 Digital" style={{ height: 22, display: 'block', opacity: 0.8 }} />
            <span>© 2026 1209 Digital LLC · Designed for the AI era</span>
          </div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="privacy.html" style={{ color: '#606678', textDecoration: 'none' }}>Privacy</a>
            <a style={{ color: '#606678', textDecoration: 'none' }}>Client login</a>
            <a style={{ color: '#606678', textDecoration: 'none' }}>LinkedIn</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

const linkB = { color: '#3a3f52', textDecoration: 'none', cursor: 'pointer', fontWeight: 500 };

const LogoB = ({ small }) => (
  <div style={{
    width: small ? 22 : 26, height: small ? 22 : 26,
    borderRadius: 6, background: '#1046E5', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 700, fontSize: small ? 10 : 12, letterSpacing: '-0.03em',
    fontFamily: '"Space Grotesk", sans-serif',
    position: 'relative', overflow: 'hidden',
  }}>
    <span style={{ position: 'relative', zIndex: 1 }}>12</span>
    <span style={{
      position: 'absolute', right: -4, bottom: -4, width: 12, height: 12,
      background: '#F26D21', borderRadius: 2, transform: 'rotate(45deg)',
    }} />
  </div>
);

// Dashboard in hero
const DashboardCard = () => {
  return (
    <div style={{
      background: '#fff', borderRadius: 16, border: '1px solid #e0e4ee',
      boxShadow: '0 30px 60px -20px rgba(11,15,26,.12), 0 8px 20px -10px rgba(11,15,26,.08)',
      overflow: 'hidden',
    }}>
      {/* header */}
      <div style={{ padding: '14px 18px', borderBottom: '1px solid #e8ebf5', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600 }}>
          <span style={{ width: 18, height: 18, borderRadius: 4, background: '#1046E5', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 10, fontWeight: 700 }}>◆</span>
          Weekly readout · acme co.
        </div>
        <div style={{ fontSize: 11, color: '#9ca3b8', fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>WK 16 / 2026</div>
      </div>

      {/* body */}
      <div style={{ padding: 22 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 20 }}>
          {[
            { l: 'Revenue', v: '$184k', d: '+14.2%', up: true },
            { l: 'ACOS', v: '18.4%', d: '−3.1pp', up: true },
            { l: 'ROAS', v: '5.44×', d: '+0.6×', up: true },
          ].map((k, i) => (
            <div key={i} style={{ padding: '12px 14px', borderRadius: 10, background: '#f6f8fd', border: '1px solid #edf0f8' }}>
              <div style={{ fontSize: 11, color: '#606678', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{k.l}</div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 4 }}>{k.v}</div>
              <div style={{ fontSize: 11.5, color: k.up ? '#10b981' : '#ef4444', fontWeight: 600, marginTop: 2 }}>▲ {k.d}</div>
            </div>
          ))}
        </div>

        {/* chart */}
        <div style={{ padding: '10px 4px 4px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>Sponsored Products · revenue (28d)</div>
            <div style={{ display: 'flex', gap: 10, fontSize: 11, color: '#606678' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 3, background: '#1046E5', borderRadius: 2 }} /> Current</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 3, background: '#F26D21', borderRadius: 2 }} /> Prior</span>
            </div>
          </div>
          <HeroChart />
        </div>

        {/* bottom insight */}
        <div style={{
          marginTop: 14, padding: '12px 14px', borderRadius: 10,
          background: 'linear-gradient(90deg, rgba(242,109,33,.06), rgba(16,70,229,.06))',
          border: '1px solid #f2d9cc',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{
            width: 28, height: 28, borderRadius: 7, background: '#F26D21', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            fontSize: 14, fontWeight: 700,
          }}>!</span>
          <div style={{ fontSize: 12.5, lineHeight: 1.45 }}>
            <strong>Insight:</strong> Reallocate $4.2k from SB → top 3 ASINs. Expected lift: <strong style={{ color: '#1046E5' }}>+$9.8k</strong> over 14d.
          </div>
        </div>
      </div>
    </div>
  );
};

const HeroChart = () => {
  // build two polylines
  const w = 480, h = 120, pad = 6;
  const makePts = (seed) => {
    const pts = [];
    for (let i = 0; i < 28; i++) {
      const x = pad + (i / 27) * (w - pad * 2);
      const t = i / 27;
      const noise = Math.sin(i * 1.3 + seed) * 8 + Math.sin(i * 0.7 + seed) * 10;
      const trend = seed === 0 ? 50 + t * 35 : 60 + t * 15;
      const y = h - 14 - (trend + noise) * 0.55;
      pts.push([x, y]);
    }
    return pts;
  };
  const current = makePts(0);
  const prior = makePts(2.1);
  const toPath = pts => pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ');
  const areaPath = toPath(current) + ` L ${current[current.length-1][0]},${h} L ${current[0][0]},${h} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block', overflow: 'visible' }}>
      <defs>
        <linearGradient id="hcgrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#1046E5" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#1046E5" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* grid */}
      {[0.25, 0.5, 0.75].map(p => (
        <line key={p} x1={pad} x2={w - pad} y1={h * p + 6} y2={h * p + 6} stroke="#eef1f8" strokeDasharray="2 4" />
      ))}
      <path d={areaPath} fill="url(#hcgrad)" />
      <path d={toPath(prior)} fill="none" stroke="#F26D21" strokeWidth="1.7" strokeDasharray="3 3" strokeLinecap="round" />
      <path d={toPath(current)} fill="none" stroke="#1046E5" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      {/* end dot */}
      <circle cx={current[current.length - 1][0]} cy={current[current.length - 1][1]} r="4" fill="#fff" stroke="#1046E5" strokeWidth="2.2" />
    </svg>
  );
};

// Service card
const FlowDiagram = () => {
  // Layout constants (SVG viewBox coordinates)
  const W = 1180, H = 380;

  // Source nodes on the left — platform icons + metric pills
  const sources = [
    { id: 'cart',    x: 90,  y: 40,  kind: 'icon', label: 'Cart',     glyph: '🛒' },
    { id: 'cvr',     x: 260, y: 70,  kind: 'pill', label: 'CVR',      delta: '+' },
    { id: 'bars',    x: 50,  y: 130, kind: 'icon', label: 'Traffic',  glyph: '▮▮▮' },
    { id: 'acos',    x: 220, y: 158, kind: 'pill', label: 'ACoS −3.1pp', delta: '−' },
    { id: 'eye',     x: 300, y: 120, kind: 'icon', label: 'Impressions', glyph: '◉' },
    { id: 'spend',   x: 280, y: 200, kind: 'pill', label: '$184K',    delta: null },
    { id: 'roas',    x: 60,  y: 220, kind: 'pill', label: 'ROAS +', delta: '+' },
    { id: 'user',    x: 170, y: 240, kind: 'icon', label: 'Audience', glyph: '👤' },
    { id: 'ads',     x: 260, y: 290, kind: 'icon', label: 'Ads',     glyph: '📣' },
    { id: 'share',   x: 80,  y: 310, kind: 'pill', label: 'Share',   delta: '+' },
  ];

  // Central hub
  const hubX = 560, hubY = H / 2;

  // Target dashboard anchor
  const tgtX = 780;

  // Build curved connectors source → hub
  const toHub = (s) => {
    const sx = s.x + (s.kind === 'icon' ? 46 : 80);
    const sy = s.y + (s.kind === 'icon' ? 22 : 14);
    const cx = (sx + hubX) / 2;
    return `M ${sx},${sy} C ${cx},${sy} ${cx},${hubY} ${hubX - 48},${hubY}`;
  };

  return (
    <div style={{
      background: '#fff', border: '1px solid #e8ebf5', borderRadius: 16,
      padding: 20, position: 'relative', overflow: 'hidden',
    }}>
      {/* subtle grid bg */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        backgroundImage: 'linear-gradient(#eef1f8 1px, transparent 1px), linear-gradient(90deg, #eef1f8 1px, transparent 1px)',
        backgroundSize: '40px 40px',
      }} />
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block', position: 'relative' }}>
        {/* connector lines */}
        {sources.map(s => (
          <path key={s.id} d={toHub(s)} fill="none" stroke="#c9cfe0" strokeWidth="1.5" />
        ))}
        {/* hub → dashboard */}
        <path d={`M ${hubX + 48},${hubY} L ${tgtX - 8},${hubY}`} fill="none" stroke="#F26D21" strokeWidth="2.2" />
        <polygon points={`${tgtX - 8},${hubY - 5} ${tgtX},${hubY} ${tgtX - 8},${hubY + 5}`} fill="#F26D21" />

        {/* sparkles */}
        {[[20, 20], [400, 30], [120, 340], [490, 340], [820, 60], [1120, 300]].map((p, i) => (
          <g key={i} transform={`translate(${p[0]},${p[1]})`} opacity="0.5">
            <path d="M0,-6 L1.5,-1.5 L6,0 L1.5,1.5 L0,6 L-1.5,1.5 L-6,0 L-1.5,-1.5 Z" fill="#F26D21" />
          </g>
        ))}

        {/* source nodes */}
        {sources.map(s => {
          if (s.kind === 'icon') {
            return (
              <g key={s.id} transform={`translate(${s.x},${s.y})`}>
                <rect width="46" height="44" rx="10" fill="#fff" stroke="#e0e4ee" strokeWidth="1.2" />
                <text x="23" y="28" textAnchor="middle" fontSize="18" fill="#0b0f1a" fontFamily="sans-serif">{s.glyph}</text>
              </g>
            );
          }
          const deltaColor = s.delta === '+' ? '#10b981' : s.delta === '−' ? '#F26D21' : '#1046E5';
          return (
            <g key={s.id} transform={`translate(${s.x},${s.y})`}>
              <rect width="110" height="28" rx="14" fill="#fff" stroke="#e0e4ee" strokeWidth="1.2" />
              <text x="14" y="18" fontSize="12" fill="#0b0f1a" fontFamily='"Space Grotesk", sans-serif' fontWeight="600">{s.label}</text>
              {s.delta && (
                <g transform="translate(88, 8)">
                  <rect width="14" height="14" rx="3" fill={deltaColor} />
                  <text x="7" y="11" textAnchor="middle" fontSize="11" fill="#fff" fontWeight="700" fontFamily="sans-serif">{s.delta}</text>
                </g>
              )}
            </g>
          );
        })}

        {/* hexagonal hub */}
        <g transform={`translate(${hubX},${hubY})`}>
          <polygon points="-46,-26 -23,-52 23,-52 46,-26 46,26 23,52 -23,52 -46,26"
                   fill="#F26D21" stroke="#fff" strokeWidth="2" />
          <polygon points="-46,-26 -23,-52 23,-52 46,-26 46,26 23,52 -23,52 -46,26"
                   fill="none" stroke="#F26D21" strokeWidth="1" opacity="0.25" transform="scale(1.18)" />
          <text x="0" y="-2" textAnchor="middle" fill="#fff"
                fontFamily='"Space Grotesk", sans-serif' fontSize="15" fontWeight="700" letterSpacing="1">1209</text>
          <text x="0" y="16" textAnchor="middle" fill="#fff"
                fontFamily='"JetBrains Mono", ui-monospace, monospace' fontSize="9" opacity="0.9" letterSpacing="2">ENGINE</text>
        </g>

        {/* Dashboard card on right */}
        <g transform={`translate(${tgtX},70)`}>
          <rect width="360" height="240" rx="14" fill="#fff" stroke="#e0e4ee" strokeWidth="1.2" />
          {/* side rail */}
          <rect x="14" y="14" width="30" height="212" rx="6" fill="#0b0f1a" />
          <rect x="20" y="22" width="18" height="16" rx="3" fill="#F26D21" />
          {[0, 1, 2, 3, 4, 5, 6].map(i => (
            <rect key={i} x="20" y={46 + i * 22} width="18" height="14" rx="3" fill="#2a2f3d" />
          ))}
          {/* donut */}
          <g transform="translate(72, 20)">
            <rect width="130" height="96" rx="8" fill="#f6f8fd" />
            <circle cx="48" cy="48" r="28" fill="none" stroke="#eef1f8" strokeWidth="10" />
            <circle cx="48" cy="48" r="28" fill="none" stroke="#F26D21" strokeWidth="10"
                    strokeDasharray="120 176" strokeLinecap="round" transform="rotate(-90 48 48)" />
            <rect x="82" y="30" width="40" height="6" rx="2" fill="#1046E5" opacity="0.7" />
            <rect x="82" y="42" width="30" height="6" rx="2" fill="#c9cfe0" />
          </g>
          {/* bar chart */}
          <g transform="translate(212, 20)">
            <rect width="134" height="96" rx="8" fill="#f6f8fd" />
            {[22, 40, 28, 52, 38, 60, 46, 68, 54, 72, 62, 80].map((v, i) => (
              <rect key={i} x={8 + i * 10} y={88 - v} width="7" height={v} rx="1.5"
                    fill={i % 3 === 0 ? '#F26D21' : i % 3 === 1 ? '#1046E5' : '#f59e0b'} />
            ))}
          </g>
          {/* list */}
          <g transform="translate(72, 124)">
            <rect width="130" height="102" rx="8" fill="#f6f8fd" />
            {[0, 1, 2, 3, 4].map(i => (
              <g key={i} transform={`translate(10, ${12 + i * 17})`}>
                <rect width="10" height="10" rx="2" fill={['#10b981','#F26D21','#10b981','#ef4444','#1046E5'][i]} />
                <rect x="16" y="2" width="90" height="4" rx="2" fill="#c9cfe0" />
                <rect x="16" y="9" width="60" height="3" rx="1.5" fill="#dde1ed" />
              </g>
            ))}
          </g>
          {/* funnel */}
          <g transform="translate(212, 124)">
            <rect width="134" height="102" rx="8" fill="#f6f8fd" />
            <polygon points="16,14 118,14 106,34 28,34" fill="#F26D21" />
            <polygon points="28,42 106,42 96,60 38,60" fill="#ef4444" />
            <polygon points="38,68 96,68 88,84 46,84" fill="#f59e0b" />
            <polygon points="46,92 88,92 82,102 52,102" fill="#facc15" />
          </g>
        </g>

        {/* caption labels */}
        <text x="90" y="375" fontSize="11" fill="#9ca3b8"
              fontFamily='"JetBrains Mono", ui-monospace, monospace' letterSpacing="1.5">
          PLATFORM + SHOPPER SIGNALS
        </text>
        <text x="960" y="375" fontSize="11" fill="#9ca3b8" textAnchor="middle"
              fontFamily='"JetBrains Mono", ui-monospace, monospace' letterSpacing="1.5">
          WEEKLY READOUT
        </text>
      </svg>
    </div>
  );
};

const ServiceCard = ({ idx, title, desc, bullets, chart, accent, badge }) => (
  <div style={{
    border: '1px solid #e8ebf5', borderRadius: 16, padding: 28,
    background: '#fff', display: 'flex', flexDirection: 'column', gap: 18,
    minHeight: 420,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <span style={{
        fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11,
        color: '#9ca3b8', letterSpacing: '0.06em',
      }}>[ {idx} ]</span>
      <span style={{ width: 8, height: 8, borderRadius: 2, background: accent }} />
    </div>
    <div>
      <h3 style={{
        fontFamily: '"Space Grotesk", sans-serif', fontSize: 26, fontWeight: 700,
        letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1,
      }}>{title}</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.55, color: '#4a4f62', marginTop: 10, marginBottom: 0 }}>{desc}</p>
    </div>
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '10px 0' }}>
      {chart}
    </div>
    <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
      {bullets.map(b => (
        <li key={b} style={{ fontSize: 13.5, color: '#3a3f52', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: accent }} />
          {b}
        </li>
      ))}
    </ul>
    {badge && (
      <div style={{
        marginTop: 4, paddingTop: 16, borderTop: '1px dashed #e8ebf5',
        display: 'inline-flex', alignItems: 'center', gap: 10,
        fontSize: 12, fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        color: '#606678', letterSpacing: '0.02em',
      }}>
        <span style={{ color: '#F26D21', fontWeight: 600 }}>✓</span>
        <span>{badge}</span>
      </div>
    )}
  </div>
);

// Minis
const MiniBars = ({ color }) => (
  <svg width="100%" height="80" viewBox="0 0 220 80">
    {[18, 34, 28, 44, 52, 38, 62, 48, 70, 58, 76, 66].map((v, i) => (
      <rect key={i} x={i * 17 + 6} y={80 - v} width="11" height={v} rx="2" fill={color} opacity={0.3 + i / 16} />
    ))}
  </svg>
);
const MiniArea = () => (
  <svg width="100%" height="80" viewBox="0 0 220 80">
    <defs>
      <linearGradient id="ma" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#F26D21" stopOpacity="0.35" />
        <stop offset="100%" stopColor="#F26D21" stopOpacity="0" />
      </linearGradient>
    </defs>
    <path d="M 0 60 L 20 52 L 40 58 L 60 40 L 80 46 L 100 32 L 120 38 L 140 20 L 160 26 L 180 14 L 200 20 L 220 8 L 220 80 L 0 80 Z" fill="url(#ma)" />
    <path d="M 0 60 L 20 52 L 40 58 L 60 40 L 80 46 L 100 32 L 120 38 L 140 20 L 160 26 L 180 14 L 200 20 L 220 8" fill="none" stroke="#F26D21" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const MiniLine = () => (
  <svg width="100%" height="80" viewBox="0 0 220 80">
    <path d="M 4 52 C 30 48, 46 58, 70 40 S 110 22, 136 34 S 180 14, 216 18" fill="none" stroke="#0b0f1a" strokeWidth="2.2" strokeLinecap="round" />
    <circle cx="216" cy="18" r="3.5" fill="#F26D21" />
    {[[40, 48], [96, 30], [160, 22]].map((p, i) => (
      <circle key={i} cx={p[0]} cy={p[1]} r="2.2" fill="#0b0f1a" />
    ))}
  </svg>
);

window.SiteB = SiteB;