/* Figure 8 — shared design tokens + chrome (header, utility bar, footer, primitives)
   Used across all pages. Visual language: Direction 01 (Aggressive Performance)
   with editorial breathing room from Direction 03.
*/

window.F8 = {
  ink: '#0A0B0A',
  surface: '#0d0e0c',
  surface2: '#111210',
  fg: '#F2F3EE',
  muted: 'rgba(242,243,238,0.55)',
  faint: 'rgba(242,243,238,0.32)',
  accent: 'oklch(0.82 0.19 142)',     // matrix green
  accentDim: 'oklch(0.55 0.12 142)',
  rust: '#ff6b5e',
  border: 'rgba(255,255,255,0.08)',
  borderSoft: 'rgba(255,255,255,0.06)',
};

window.f8Display = {
  fontFamily: '"Oswald", "Bebas Neue", Impact, sans-serif',
  fontWeight: 600,
  letterSpacing: '-0.01em',
  textTransform: 'uppercase',
  lineHeight: 0.88,
};

window.f8Mono = {
  fontFamily: '"JetBrains Mono", ui-monospace, monospace',
  fontFeatureSettings: '"ss01", "zero"',
};

window.f8Serif = {
  fontFamily: '"Bodoni Moda", Georgia, serif',
  fontStyle: 'italic',
  fontWeight: 400,
  textTransform: 'none',
  letterSpacing: '-0.02em',
};

const F8Mark = ({ accent }) => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
    <path d="M 9,11 a 5,5 0 1 1 0,10 a 7,7 0 1 0 14,0 a 5,5 0 1 1 0,-10 a 7,7 0 1 0 -14,0 z"
          stroke={accent || F8.accent} strokeWidth="2" fill="none" transform="rotate(-15 16 16)" />
  </svg>
);
window.F8Mark = F8Mark;

const F8UtilityBar = () => (
  <div className="f8-utility" style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '14px 32px', borderBottom: `1px solid ${F8.border}`,
    ...f8Mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
    background: F8.ink, color: F8.muted,
  }}>
    <span>FIG—8 // PORTLAND, OR · USA</span>
    <span style={{ display: 'flex', gap: 22 }}>
      <span><span style={{ color: F8.accent }}>●</span> 4 BIKES IN LINEUP</span>
      <span>FREE SHIPPING $4,500+</span>
      <span>FINANCING AVAILABLE</span>
    </span>
  </div>
);
window.F8UtilityBar = F8UtilityBar;

const F8Header = ({ active }) => {
  const items = [
    ['Lineup', '/shop'],
    ['Compare', '/compare'],
    ['Buying Guide', '/buying-guide'],
    ['Why Figure 8', '/why'],
    ['Service', '/support'],
    ['Contact', '/contact'],
  ];
  return (
    <header className="f8-header" style={{
      display: 'grid', gridTemplateColumns: '300px 1fr 300px', alignItems: 'center',
      padding: '22px 32px', borderBottom: `1px solid ${F8.borderSoft}`,
      background: F8.ink,
    }}>
      <a href="/" className="f8-brand" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: F8.fg }}>
        <F8Mark accent={F8.accent} />
        <span style={{ ...f8Display, fontSize: 20, letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>
          FIGURE&nbsp;8
        </span>
        <span className="f8-brand-sub" style={{ ...f8Mono, fontSize: 10, letterSpacing: '0.2em', color: F8.muted, borderLeft: `1px solid rgba(255,255,255,0.15)`, paddingLeft: 12, textTransform: 'uppercase' }}>
          Powersports
        </span>
      </a>
      <nav className="f8-nav" style={{ display: 'flex', justifyContent: 'center', gap: 32, ...f8Mono, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em' }}>
        {items.map(([label, href]) => (
          <a key={label} href={href} style={{
            color: active === label ? F8.accent : F8.fg,
            textDecoration: 'none',
            opacity: active === label ? 1 : 0.85,
            position: 'relative',
            paddingBottom: 4,
            borderBottom: active === label ? `1px solid ${F8.accent}` : '1px solid transparent',
          }}>{label}</a>
        ))}
      </nav>
      <div className="f8-actions" style={{ display: 'flex', justifyContent: 'flex-end', gap: 18, ...f8Mono, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: F8.fg }}>
        <span style={{ color: F8.muted, cursor: 'pointer' }}>Search</span>
        <span style={{ color: F8.muted, cursor: 'pointer' }}>Account</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
          Cart <span style={{ color: F8.accent }}>(0)</span>
        </span>
      </div>
    </header>
  );
};
window.F8Header = F8Header;

const F8Footer = () => (
  <footer style={{
    background: '#06070605', borderTop: `1px solid ${F8.border}`,
    color: F8.fg,
  }}>
    {/* newsletter strip */}
    <section style={{
      padding: '80px 64px',
      borderBottom: `1px solid ${F8.border}`,
      display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'center',
    }}>
      <div>
        <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.32em', color: F8.accent, marginBottom: 18 }}>
          / NEWSLETTER
        </div>
        <h3 style={{ ...f8Display, fontSize: 56, margin: 0, lineHeight: 0.92 }}>
          New bikes,<br/>
          <span style={{ ...f8Serif, color: F8.muted }}>shop notes,</span><br/>
          ride invites.
        </h3>
      </div>
      <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 560 }}>
        <div style={{ display: 'flex', borderBottom: `1px solid ${F8.fg}` }}>
          <input type="email" placeholder="your@email.com" style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: F8.fg, padding: '16px 0', fontSize: 18, ...f8Mono,
          }} />
          <button style={{
            background: F8.accent, color: F8.ink, border: 'none', padding: '14px 24px',
            ...f8Mono, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600,
            cursor: 'pointer',
          }}>Subscribe →</button>
        </div>
        <div style={{ ...f8Mono, fontSize: 10, letterSpacing: '0.18em', color: F8.muted, textTransform: 'uppercase' }}>
          No spam. New stock alerts and shop stories. Unsubscribe anytime.
        </div>
      </form>
    </section>

    {/* link columns */}
    <section style={{ padding: '64px 64px 48px', display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr)', gap: 48 }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
          <F8Mark accent={F8.accent} />
          <span style={{ ...f8Display, fontSize: 22, letterSpacing: '0.04em' }}>FIGURE 8</span>
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: F8.muted, margin: 0, maxWidth: '36ch' }}>
          A small American dealer of premium high-performance electric dirt bikes. We ride what we sell.
        </p>
        <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.18em', color: F8.muted, textTransform: 'uppercase', marginTop: 28 }}>
          Portland, Oregon<br/>
          Shipping nationwide
        </div>
      </div>
      <FooterCol title="Bikes" items={[['Ultra Bee HP', '/ultra-bee-hp'], ['Light Bee 2', '/light-bee-2'], ['Light Bee X', '/light-bee-x'], ['Meta SM01-PRO', '/sm01'], ['View all', '/shop']]} />
      <FooterCol title="Buying" items={[['Buying Guide', '/buying-guide'], ['Compare Bikes', '/compare'], ['Financing', '/financing'], ['Shipping', '/financing'], ['Returns', '/support']]} />
      <FooterCol title="Support" items={[['Service', '/support'], ['Parts & Accessories', '/contact'], ['Warranty', '/support'], ['Contact', '/contact'], ['FAQ', '/support']]} />
      <FooterCol title="Company" items={[['Why Figure 8', '/why'], ['Journal', '/buying-guide'], ['Press', '/contact'], ['Instagram', 'https://www.instagram.com/figure8powersports/'], ['YouTube', '/contact']]} />
    </section>

    {/* Big wordmark */}
    <section style={{ padding: '40px 64px 0' }}>
      <div style={{
        ...f8Display, fontSize: 'clamp(120px, 20vw, 360px)',
        lineHeight: 0.85, letterSpacing: '-0.04em',
        color: 'transparent', WebkitTextStroke: `1px ${F8.muted}`,
        userSelect: 'none',
      }}>
        FIGURE 8.
      </div>
    </section>

    {/* legal */}
    <section style={{
      padding: '24px 64px 36px', borderTop: `1px solid ${F8.border}`,
      display: 'flex', justifyContent: 'space-between',
      ...f8Mono, fontSize: 10, letterSpacing: '0.2em', color: F8.muted, textTransform: 'uppercase',
    }}>
      <span>© 2026 FIGURE 8 POWERSPORTS · ALL RIGHTS RESERVED</span>
      <span style={{ display: 'flex', gap: 24 }}>
        <a style={fLink}>Privacy</a>
        <a style={fLink}>Terms</a>
        <a style={fLink}>Accessibility</a>
        <span>[ Independent dealer ]</span>
      </span>
    </section>
  </footer>
);
const fLink = { color: 'inherit', textDecoration: 'none', cursor: 'pointer' };
const FooterCol = ({ title, items }) => (
  <div>
    <div style={{ ...f8Mono, fontSize: 10, letterSpacing: '0.24em', color: F8.accent, marginBottom: 18, textTransform: 'uppercase' }}>/ {title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map(([label, href]) => (
        <li key={label}><a href={href} style={{ color: F8.fg, textDecoration: 'none', fontSize: 14, opacity: 0.85 }}>{label}</a></li>
      ))}
    </ul>
  </div>
);
window.F8Footer = F8Footer;

// Small reusable bits
const F8Eyebrow = ({ children, color }) => (
  <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.32em', color: color || F8.accent, display: 'flex', alignItems: 'center', gap: 12, textTransform: 'uppercase' }}>
    <span style={{ width: 32, height: 1, background: color || F8.accent }} />
    {children}
  </div>
);
window.F8Eyebrow = F8Eyebrow;

const F8Btn = ({ children, primary, href, onClick }) => (
  <a href={href} onClick={onClick} style={{
    background: primary ? F8.accent : 'transparent',
    color: primary ? F8.ink : F8.fg,
    border: primary ? 'none' : `1px solid rgba(242,243,238,0.4)`,
    padding: '18px 28px',
    ...f8Mono, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600,
    display: 'inline-flex', alignItems: 'center', gap: 12, cursor: 'pointer',
    textDecoration: 'none',
  }}>{children}</a>
);
window.F8Btn = F8Btn;

const F8Tag = ({ accent, children }) => (
  <span style={{
    border: `1px solid ${accent ? F8.accent : 'rgba(242,243,238,0.25)'}`,
    color: accent ? F8.accent : 'rgba(242,243,238,0.85)',
    padding: '6px 10px',
    background: 'rgba(10,11,10,0.55)',
    backdropFilter: 'blur(6px)',
    ...f8Mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
  }}>{children}</span>
);
window.F8Tag = F8Tag;

const F8SectionHeading = ({ num, eyebrow, h, italic, kicker }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, paddingTop: 40 }}>
    <div>
      <F8Eyebrow>{num} / {eyebrow}</F8Eyebrow>
      <h2 style={{ ...f8Display, fontSize: 96, margin: '18px 0 0', lineHeight: 0.92 }}>
        {h}<br />
        {italic && <span style={{ ...f8Serif, color: F8.muted }}>{italic}</span>}
      </h2>
    </div>
    {kicker && (
      <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.2em', color: F8.muted, textTransform: 'uppercase', textAlign: 'right' }}>
        {kicker}
      </div>
    )}
  </div>
);
window.F8SectionHeading = F8SectionHeading;

/* Home page — full version, built on Direction 01 chassis with Direction 03 lineup rows + manifesto.
   Sections:
    1. Utility bar + header
    2. Hero (Ultra Bee HP, telemetry overlay)
    3. Trust strip (4 placeholders)
    4. Why we ride manifesto
    5. The Lineup (alternating editorial rows)
    6. Buying guide teaser
    7. Service / shop story strip
    8. Latest from the journal (placeholder)
    9. Final CTA
    10. Footer
*/

const HomeMobileCSS = () => <style>{`
@media (max-width: 820px) {
  html, body, #root { width: 100%; max-width: 100%; overflow-x: hidden; }
  * { box-sizing: border-box; }
  .f8-utility {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  .f8-utility > span:first-child {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .f8-utility > span:last-child > span:nth-child(3) { display: none !important; }
  .f8-utility > span:last-child {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    overflow: visible !important;
    white-space: normal !important;
    scrollbar-width: none !important;
  }
  .f8-utility > span:last-child::-webkit-scrollbar { display: none !important; }
  .f8-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 16px !important; }
  .f8-brand { justify-content: center !important; width: 100% !important; }
  .f8-brand-sub, .f8-actions { display: none !important; }
  .f8-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }
  .f8-nav a {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: #0d0e0c !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.18 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .f8-home-hero { min-height: auto !important; display: block !important; }
  .f8-hero-rail { display: none !important; }
  .f8-hero-visual {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    overflow: visible !important;
    background: #070807 !important;
  }
  .f8-hero-bg {
    position: relative !important;
    inset: auto !important;
    height: 330px !important;
    min-height: 330px !important;
    background-size: cover !important;
    background-position: 58% center !important;
  }
  .f8-hero-shade {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 330px !important;
    background: linear-gradient(180deg, rgba(10,11,10,0.08) 0%, rgba(10,11,10,0.16) 45%, rgba(10,11,10,0.78) 100%) !important;
  }
  .f8-hero-crosshair { display: none !important; }
  .f8-hero-chips {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 16px 16px 0 !important;
    scrollbar-width: none !important;
  }
  .f8-hero-chips::-webkit-scrollbar { display: none !important; }
  .f8-hero-copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 8px 18px 34px !important;
  }
  .f8-hero-copy h1 {
    font-size: clamp(46px, 14vw, 62px) !important;
    line-height: 0.96 !important;
    max-width: 10ch !important;
    margin-top: 18px !important;
  }
  .f8-hero-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    margin-top: 24px !important;
  }
  .f8-hero-body p { max-width: 100% !important; font-size: 15px !important; }
  .f8-hero-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .f8-hero-actions a { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
  section[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .bike-row { flex-direction: column !important; }
  .bike-row-photo { flex: none !important; aspect-ratio: 4 / 3 !important; min-height: 260px !important; border-left: none !important; border-right: none !important; background-size: contain !important; }
  .bike-row > div:last-child { padding: 26px 20px !important; }
  .bike-row h3 { font-size: 42px !important; margin-bottom: 24px !important; }
  .bike-row a { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
}
@media (max-width: 480px) {
  .f8-hero-bg, .f8-hero-shade { height: 300px !important; min-height: 300px !important; }
  .f8-hero-copy h1 { font-size: clamp(44px, 13vw, 58px) !important; }
  .bike-row-photo { min-height: 220px !important; aspect-ratio: 1 / 1 !important; }
}
`}</style>;

const HomePage = () => {
  return (
    <div style={{ width: '100%', background: F8.ink, color: F8.fg, fontFamily: 'Inter, system-ui, sans-serif', overflow: 'hidden' }}>
      <HomeMobileCSS />
      <F8UtilityBar />
      <F8Header active="" />

      {/* HERO */}
      <section className="f8-home-hero" style={{ position: 'relative', minHeight: 880, display: 'grid', gridTemplateColumns: '64px 1fr 64px' }}>
        {/* Left rail */}
        <aside className="f8-hero-rail" style={{
          borderRight: `1px solid ${F8.borderSoft}`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          padding: '32px 0', ...f8Mono, fontSize: 10, letterSpacing: '0.2em', color: F8.muted,
          textAlign: 'center',
        }}>
          <div style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', alignSelf: 'center' }}>
            01 / HERO &nbsp;·&nbsp; ULTRA BEE HP
          </div>
          <div style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', alignSelf: 'center', color: F8.accent }}>
            ↓ SCROLL
          </div>
        </aside>

        {/* Photo + overlays */}
        <div className="f8-hero-visual" style={{ position: 'relative', overflow: 'hidden' }}>
          <div className="f8-hero-bg" style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'url(/assets/hero/ultra-bee-road-hero.jpg)',
            backgroundSize: 'cover', backgroundPosition: 'center 50%',
            filter: 'contrast(1.08) saturate(0.9) brightness(0.78)',
          }} />
          <div className="f8-hero-shade" style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(10,11,10,0.55) 0%, rgba(10,11,10,0.05) 35%, rgba(10,11,10,0.85) 100%), radial-gradient(ellipse at center, transparent 30%, rgba(10,11,10,0.55) 100%)',
          }} />
          {/* center crosshair */}
          <svg className="f8-hero-crosshair" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
            <g stroke={F8.accent} strokeWidth="1" fill="none" opacity="0.5">
              <circle cx="58%" cy="56%" r="50" />
              <line x1="58%" y1="46%" x2="58%" y2="66%" strokeDasharray="2 4" />
              <line x1="52%" y1="56%" x2="64%" y2="56%" strokeDasharray="2 4" />
            </g>
          </svg>
          {/* Telemetry chips */}
          <div className="f8-hero-chips" style={{ position: 'absolute', top: 28, right: 32, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
            <F8Tag accent>SUR-RON ULTRA BEE HP</F8Tag>
            <F8Tag>22.5 KW PEAK</F8Tag>
            <F8Tag>74 MPH TOP</F8Tag>
            <F8Tag>40AH PACK</F8Tag>
          </div>
          {/* Hero copy */}
          <div className="f8-hero-copy" style={{ position: 'absolute', left: 48, right: 48, bottom: 56 }}>
            <F8Eyebrow>FLAGSHIP / 2026</F8Eyebrow>
            <h1 style={{ ...f8Display, fontSize: 'clamp(72px, 9vw, 156px)', margin: '24px 0 0', maxWidth: '14ch' }}>
              Engineered<br/>
              for the <span style={{ ...f8Serif, color: F8.accent }}>flow</span><br/>
              line.
            </h1>
            <div className="f8-hero-body" style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', marginTop: 40, gap: 64 }}>
              <p style={{ maxWidth: '46ch', fontSize: 16, lineHeight: 1.55, color: F8.muted, margin: 0 }}>
                The Sur-Ron Ultra Bee HP is the most capable electric off-road platform in the Figure 8 lineup — curated by riders, set up by the shop, and delivered ready for the trail.
              </p>
              <div className="f8-hero-actions" style={{ display: 'flex', gap: 12 }}>
                <F8Btn primary href="/shop">Shop the Lineup →</F8Btn>
                <F8Btn href="/compare">Compare Models</F8Btn>
              </div>
            </div>
          </div>
        </div>

        {/* Right rail */}
        <aside className="f8-hero-rail" style={{
          borderLeft: `1px solid ${F8.borderSoft}`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          padding: '32px 0', ...f8Mono, fontSize: 10, letterSpacing: '0.2em', color: F8.muted,
          textAlign: 'center',
        }}>
          <div style={{ writingMode: 'vertical-rl', alignSelf: 'center' }}>46.2147° N · 122.6520° W</div>
          <div style={{ writingMode: 'vertical-rl', alignSelf: 'center' }}>REC — <span style={{ color: F8.accent }}>● LIVE</span></div>
        </aside>
      </section>

      {/* Trust strip */}
      <section style={{ borderTop: `1px solid ${F8.border}`, borderBottom: `1px solid ${F8.border}`, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {[
          ['01', 'Curated Lineup', 'A tight lineup of electric dirt bikes we would actually ride — no filler catalog.'],
          ['02', 'Set Up in Shop', 'Every bike gets a pre-delivery check before it leaves the shop.'],
          ['03', 'US-Based Support', 'Questions, setup, parts, and post-sale support handled by real riders.'],
          ['04', 'Real Riders', 'We sell the bikes we understand, ride, and can stand behind.'],
        ].map(([n, h, b], i) => (
          <div key={i} style={{
            padding: '36px 28px',
            borderRight: i < 3 ? `1px solid ${F8.borderSoft}` : 'none',
          }}>
            <div style={{ ...f8Mono, fontSize: 10, letterSpacing: '0.24em', color: F8.accent, marginBottom: 14 }}>/ {n}</div>
            <div style={{ ...f8Display, fontSize: 24, marginBottom: 10 }}>{h}</div>
            <div style={{ fontSize: 13, color: F8.muted, lineHeight: 1.5 }}>{b}</div>
          </div>
        ))}
      </section>

      {/* Why we ride manifesto */}
      <section style={{ padding: '140px 64px 120px', position: 'relative' }}>
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), rgba(255,255,255,0.025) calc(100% / 12 - 1px), rgba(255,255,255,0.025) calc(100% / 12))',
        }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start', position: 'relative' }}>
          <div>
            <F8Eyebrow>02 / WHY WE RIDE</F8Eyebrow>
            <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.2em', color: F8.muted, textTransform: 'uppercase', marginTop: 32 }}>
              FILE — manifesto.txt<br/>
              REV — LIVE<br/>
              <span style={{ color: F8.accent }}>● SHOP NOTE</span>
            </div>
          </div>
          <div>
            <p style={{ ...f8Display, textTransform: 'none', fontWeight: 500, fontSize: 'clamp(36px, 3.6vw, 60px)', lineHeight: 1.12, margin: 0, letterSpacing: '-0.02em', maxWidth: '24ch' }}>
              The mind clears flowing through trees. <span style={{ ...f8Serif, color: F8.muted }}>Slow becomes flight, close cousin to horseback.</span> An emotional outlet that words don't reach. <span style={{ ...f8Serif, color: F8.accent }}>So we sell the bikes that take you there.</span>
            </p>
            <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.2em', color: F8.muted, marginTop: 40, textTransform: 'uppercase', display: 'flex', gap: 24 }}>
              <span>— A NOTE FROM THE SHOP</span>
              <a href="/why" style={{ color: F8.accent, textDecoration: 'none' }}>READ THE FULL STORY →</a>
            </div>
          </div>
        </div>
      </section>

      {/* THE LINEUP */}
      <section style={{ padding: '40px 64px 120px', borderTop: `1px solid ${F8.border}` }}>
        <F8SectionHeading num="03" eyebrow="THE LINEUP" h="Four bikes." italic="No filler." kicker={<><span>INDEX — 04 UNITS</span><br/><span>UPDATED 2026.07.21</span><br/><span style={{ color: F8.accent }}>● 2 AVAILABLE · 1 PREORDER · 1 SOLD OUT</span></>} />

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <BikeRow num="01" name="Ultra Bee HP" tagline="THE FLAGSHIP TRAIL WEAPON"
            specs={[['TOP SPEED', '74 mph'], ['PEAK POWER', '22.5 kW'], ['BATTERY', '40 Ah'], ['WEIGHT', '209 lb']]}
            price="$5,999" slash="$6,299" img="/assets/ultrabee/stage/hp-white-stage-ai.png" href="/ultra-bee-hp" />
          <BikeRow num="02" name="Light Bee X" tagline="THE CLASSIC THAT STARTED IT ALL"
            specs={[['TOP SPEED', '47 mph'], ['POWER', '6 kW'], ['BEST FOR', 'New riders'], ['STATUS', 'Sold out']]}
            price="$3,999" slash="$4,499" soldout reverse img="/assets/lightbee/colors/purple.png" href="/light-bee-x" />
          <BikeRow num="03" name="Meta SM01-PRO" tagline="THE SLEEPER FROM META"
            specs={[['ARCHITECTURE', '72V'], ['USE', 'Off-road'], ['NEW', '2026'], ['COLOR', 'Black']]}
            price="$5,299" slash="$5,799" img="/assets/meta-sm01.jpg" href="/sm01" />
          <BikeRow num="04" name="Light Bee 2" tagline="NEXT-GENERATION LIGHT BEE · PREORDER"
            specs={[['TOP SPEED', '56 mph'], ['PEAK POWER', '24 kW'], ['BATTERY', '3.53 kWh'], ['DELIVERY', 'Late Aug–early Sep']]}
            price="$5,199" reverse img="/assets/lightbee2/color-1.png" href="/light-bee-2" />
          {/* Coming soon row */}
          <div style={{
            borderTop: `1px solid ${F8.border}`,
            padding: '40px 48px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            background: F8.surface,
          }}>
            <div>
              <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.24em', color: F8.accent, marginBottom: 8 }}>/ COMING SOON</div>
              <div style={{ ...f8Display, fontSize: 32 }}>More bikes incoming.</div>
              <div style={{ fontSize: 14, color: F8.muted, marginTop: 6 }}>We're expanding the lineup. Get notified when new bikes hit the shop.</div>
            </div>
            <F8Btn primary href="/contact">Get Notified →</F8Btn>
          </div>
        </div>
      </section>

      {/* Buying guide teaser */}
      <section style={{
        position: 'relative', padding: '120px 64px',
        borderTop: `1px solid ${F8.border}`, borderBottom: `1px solid ${F8.border}`,
        background: F8.surface,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <F8Eyebrow>04 / BUYING GUIDE</F8Eyebrow>
            <h2 style={{ ...f8Display, fontSize: 80, margin: '20px 0 28px', lineHeight: 0.95 }}>
              First time<br/>on an electric<br/>
              <span style={{ ...f8Serif, color: F8.muted }}>dirt bike?</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: F8.muted, maxWidth: '50ch', margin: '0 0 36px' }}>
              We wrote the guide we wish existed when we got our first one. Skill level, terrain, range — what actually matters when picking your first bike.
            </p>
            <F8Btn primary href="/buying-guide">Read the Guide →</F8Btn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              ['SUR-RON', 'vs Meta', 'What\'s the actual difference between platforms.'],
              ['NEW RIDER', 'starter pack', 'Choosing your first electric dirt bike.'],
              ['STREET', 'or trail', 'Off-road vs street-legal: which fits your life.'],
              ['SPEC', 'translator', 'How to read kW, Ah, and torque numbers.'],
            ].map(([t, sub, body], i) => (
              <div key={i} style={{ padding: 28, border: `1px solid ${F8.border}`, background: F8.ink }}>
                <div style={{ ...f8Mono, fontSize: 10, letterSpacing: '0.22em', color: F8.accent, marginBottom: 14 }}>/ 0{i+1}</div>
                <div style={{ ...f8Display, fontSize: 22, marginBottom: 4 }}>{t}</div>
                <div style={{ ...f8Serif, fontSize: 18, color: F8.muted, marginBottom: 14, textTransform: 'none' }}>{sub}</div>
                <div style={{ fontSize: 13, color: F8.muted, lineHeight: 1.5 }}>{body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Service / shop story */}
      <section style={{ padding: '120px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{
              aspectRatio: '4/3',
              backgroundImage: 'url(/assets/ultrabee-hero.jpg)',
              backgroundSize: 'cover', backgroundPosition: 'center 60%',
              filter: 'contrast(1.05) saturate(0.95) brightness(0.85)',
              border: `1px solid ${F8.borderSoft}`,
              position: 'relative',
            }}>
              <div style={{ position: 'absolute', inset: 14, border: `1px solid ${F8.accent}`, opacity: 0.18, pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', bottom: 16, left: 16, ...f8Mono, fontSize: 10, letterSpacing: '0.22em', color: F8.fg, textTransform: 'uppercase', background: 'rgba(10,11,10,0.6)', padding: '6px 10px', backdropFilter: 'blur(4px)' }}>
                FIELD · CASCADE FOOTHILLS
              </div>
            </div>
          </div>
          <div>
            <F8Eyebrow>05 / SHOP & SERVICE</F8Eyebrow>
            <h2 style={{ ...f8Display, fontSize: 64, margin: '20px 0 28px', lineHeight: 0.95 }}>
              Every bike<br/>
              <span style={{ ...f8Serif, color: F8.muted }}>set up by hand.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: F8.muted, maxWidth: '46ch', margin: '0 0 16px' }}>
              Pre-delivery inspection, torque check, controller setup, and a practical once-over before handoff. We do not just pass boxes along — we help get bikes ready to ride.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: F8.muted, maxWidth: '46ch', margin: '0 0 36px' }}>
              And if something goes sideways post-delivery, you're not stuck in a generic support queue. You're talking to riders.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <F8Btn href="/support">Service & Warranty</F8Btn>
              <F8Btn href="/contact">Get in Touch</F8Btn>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA — full bleed dark with big type */}
      <section style={{
        padding: '160px 64px',
        background: F8.ink,
        borderTop: `1px solid ${F8.border}`,
        textAlign: 'center', position: 'relative',
      }}>
        <F8Eyebrow>06 / READY?</F8Eyebrow>
        <h2 style={{ ...f8Display, fontSize: 'clamp(80px, 11vw, 200px)', margin: '32px auto', lineHeight: 0.88, maxWidth: '14ch' }}>
          Throw a leg<br/>
          <span style={{ ...f8Serif, color: F8.accent }}>over one.</span>
        </h2>
        <p style={{ fontSize: 18, color: F8.muted, maxWidth: '52ch', margin: '0 auto 48px', lineHeight: 1.5 }}>
          Four bikes in stock. Free shipping over $4,500. Real humans on the phone.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
          <F8Btn primary href="/shop">Shop the Lineup →</F8Btn>
          <F8Btn href="/contact">Talk to a Rider</F8Btn>
        </div>
      </section>

      <F8Footer />
    </div>
  );
};

const BikeRow = ({ num, name, tagline, specs, price, slash, img, placeholder, reverse, soldout, href }) => {
  const isProductStage = img && (img.includes('/ultrabee/stage/') || img.includes('/lightbee/colors/'));
  const photo = (
    <div className="bike-row-photo" style={{
      flex: '1.4',
      aspectRatio: '16/10',
      background: placeholder ? `repeating-linear-gradient(45deg, #141513 0 10px, #181a17 10px 20px)` : (isProductStage ? '#f7f7f4' : '#0e0f0d'),
      backgroundImage: img ? `url(${img})` : undefined,
      backgroundSize: isProductStage ? 'contain' : 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
      filter: img ? 'contrast(1.04) saturate(0.96)' : undefined,
      position: 'relative',
      borderRight: reverse ? 'none' : `1px solid ${F8.border}`,
      borderLeft: reverse ? `1px solid ${F8.border}` : 'none',
    }}>
      <div style={{ position: 'absolute', inset: 14, border: `1px solid ${F8.accent}`, opacity: 0.18, pointerEvents: 'none' }} />
      {soldout && (
        <div style={{
          position: 'absolute', top: 20, right: 20,
          ...f8Mono, fontSize: 10, letterSpacing: '0.2em',
          color: F8.rust, padding: '6px 10px',
          border: `1px solid ${F8.rust}`, background: 'rgba(10,11,10,0.6)',
        }}>SOLD OUT</div>
      )}
    </div>
  );
  const info = (
    <div style={{ flex: '1', padding: '40px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', background: F8.surface }}>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
          <span style={{ ...f8Mono, color: F8.accent, fontSize: 11, letterSpacing: '0.24em', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 20, height: 1, background: F8.accent }} /> № {num}
          </span>
          <span style={{ ...f8Mono, color: F8.muted, fontSize: 10, letterSpacing: '0.22em' }}>{tagline}</span>
        </div>
        <h3 style={{ ...f8Display, fontSize: 64, margin: 0, marginBottom: 36, lineHeight: 0.9 }}>{name}</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px 24px', maxWidth: 480 }}>
          {specs.map(([k, v]) => (
            <div key={k} style={{ paddingTop: 14, borderTop: `1px solid rgba(255,255,255,0.1)` }}>
              <div style={{ ...f8Mono, color: F8.muted, fontSize: 10, letterSpacing: '0.22em', marginBottom: 6, textTransform: 'uppercase' }}>{k}</div>
              <div style={{ fontSize: 18, color: F8.fg, fontWeight: 500 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 24, borderTop: `1px solid rgba(255,255,255,0.12)` }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span style={{ ...f8Display, fontSize: 36 }}>{price}</span>
          {slash && <span style={{ ...f8Mono, fontSize: 12, color: F8.muted, textDecoration: 'line-through' }}>{slash}</span>}
        </div>
        <a href={href || '#'} style={{
          background: F8.accent, color: F8.ink, border: 'none', padding: '14px 22px',
          ...f8Mono, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 12, cursor: 'pointer', textDecoration: 'none',
        }}>Explore →</a>
      </div>
    </div>
  );
  return (
    <div className="bike-row" style={{ display: 'flex', flexDirection: reverse ? 'row-reverse' : 'row', borderTop: `1px solid ${F8.border}`, alignItems: 'stretch' }}>
      {photo}{info}
    </div>
  );
};

window.HomePage = HomePage;


ReactDOM.createRoot(document.getElementById('root')).render(<HomePage />);