/* 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)',
};


if (!document.getElementById('f8-mobile-overrides')) {
  const mobileStyle = document.createElement('style');
  mobileStyle.id = 'f8-mobile-overrides';
  mobileStyle.textContent = `
@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .f8-header, header { grid-template-columns: 1fr !important; gap: 16px !important; padding: 18px !important; }
  .f8-brand { justify-content: center !important; min-width: 0 !important; }
  .f8-brand-sub, .f8-actions, header > div:last-child { display: none !important; }
  .f8-nav, nav { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; gap: 18px !important; overflow-x: auto !important; padding: 4px 2px 8px !important; font-size: 10px !important; letter-spacing: 0.14em !important; scrollbar-width: none; }
  .f8-nav::-webkit-scrollbar, nav::-webkit-scrollbar { display: none; }
  section, footer section { padding-left: 18px !important; padding-right: 18px !important; }
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  footer section { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="repeat(2"], [style*="repeat(3"], [style*="repeat(4"] { grid-template-columns: 1fr !important; }
  [style*="padding: 80px 64px"], [style*="padding: 64px"] { padding: 48px 18px !important; }
  h1 { font-size: clamp(54px, 16vw, 76px) !important; line-height: 0.94 !important; }
  h2 { font-size: clamp(38px, 12vw, 56px) !important; line-height: 0.96 !important; }
  h3 { font-size: clamp(28px, 9vw, 42px) !important; }
  p { max-width: 100% !important; }
  form, aside, article { min-width: 0 !important; }
  input, textarea, button, a { max-width: 100%; }
}
@media (max-width: 480px) {
  .f8-nav, nav { gap: 14px !important; font-size: 9px !important; }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="font-size: 96"], [style*="font-size: 56"], [style*="fontSize: 96"], [style*="fontSize: 56"] { font-size: clamp(34px, 11vw, 48px) !important; }
}
`;
  document.head.appendChild(mobileStyle);
}
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 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 style={{
      display: 'grid', gridTemplateColumns: '300px 1fr 300px', alignItems: 'center',
      padding: '22px 32px', borderBottom: `1px solid ${F8.borderSoft}`,
      background: F8.ink,
    }}>
      <a href="/" 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 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 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 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;

/* Why Figure 8 — about page */
const WhyPage = () => (
  <div style={{ background: F8.ink, color: F8.fg, fontFamily: 'Inter,system-ui,sans-serif', overflow: 'hidden' }}>
    <F8UtilityBar />
    <F8Header active="Why Figure 8" />

    {/* Hero quote */}
    <section style={{ padding: '120px 64px', borderBottom: `1px solid ${F8.border}` }}>
      <F8Eyebrow>WHY FIGURE 8 / EST. 2024</F8Eyebrow>
      <h1 style={{ ...f8Display, fontSize: 'clamp(56px, 6vw, 96px)', textTransform: 'none', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: '32px 0 0', maxWidth: '22ch' }}>
        Two wheels are the closest thing we have to <span style={{ ...f8Serif, color: F8.accent }}>flight.</span> We sell the bikes that get you there.
      </h1>
    </section>

    {/* Owner story */}
    <section style={{ padding: '120px 64px', borderBottom: `1px solid ${F8.border}`, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start' }}>
      <div>
        <div style={{ aspectRatio: '4/5', background: `repeating-linear-gradient(45deg, #141513 0 12px, #181a17 12px 24px)`, position: 'relative', border: `1px solid ${F8.border}` }}>
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', ...f8Mono, fontSize: 11, color: F8.faint, letterSpacing: '0.22em' }}>FIGURE 8 - PORTLAND SHOP</div>
        </div>
      </div>
      <div>
        <F8Eyebrow>01 / THE OWNER STORY</F8Eyebrow>
        <h2 style={{ ...f8Display, fontSize: 64, margin: '20px 0 28px', lineHeight: 0.95 }}>The mind clears<br/><span style={{ ...f8Serif, color: F8.muted }}>flowing through trees.</span></h2>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: F8.fg, marginBottom: 22 }}>
          Figure 8 exists for riders who want the electric dirt bike world to feel less like a drop-ship catalog and more like a real shop. The focus is simple: carry bikes we understand, set them up correctly, and help buyers choose the machine that fits how they actually ride.
        </p>
        <p style={{ ...f8Serif, fontSize: 22, color: F8.muted, lineHeight: 1.5, marginBottom: 22, fontStyle: 'italic', textTransform: 'none' }}>
          "Slow becomes flight, close cousin to horseback. An emotional outlet that words don't reach. So we sell the bikes that take you there."
        </p>
        <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.22em', color: F8.accent, textTransform: 'uppercase' }}>— FOUNDER · FIGURE 8 POWERSPORTS</div>
      </div>
    </section>

    {/* Shop story */}
    <section style={{ padding: '120px 64px', borderBottom: `1px solid ${F8.border}`, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'start' }}>
      <div>
        <F8Eyebrow>02 / THE SHOP</F8Eyebrow>
        <h2 style={{ ...f8Display, fontSize: 64, margin: '20px 0 28px', lineHeight: 0.95 }}>Set up by hand.<br/><span style={{ ...f8Serif, color: F8.muted }}>Every single bike.</span></h2>
        <p style={{ fontSize: 17, lineHeight: 1.65, color: F8.muted, marginBottom: 18 }}>
          Every bike gets treated like something a rider is about to trust at speed. We inspect the basics, check the important fasteners, review setup, and make sure customers have a real person to come back to after the sale.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 32, paddingTop: 24, borderTop: `1px solid ${F8.border}` }}>
          {[['Pre-delivery inspection','Every bike, every time.'],['Torque check','Critical bolts verified.'],['Suspension setup','Sag set to your weight.'],['Walk-through call','Before your first ride.']].map(([h,b])=>(
            <div key={h}><div style={{...f8Mono,fontSize:10,letterSpacing:'0.22em',color:F8.accent,marginBottom:8}}>● {h.toUpperCase()}</div><div style={{fontSize:14,color:F8.muted}}>{b}</div></div>
          ))}
        </div>
      </div>
      <div>
        <div style={{ aspectRatio: '4/5', backgroundImage: 'url(/assets/ultrabee-hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 40%', filter: 'contrast(1.05) saturate(0.95)', border: `1px solid ${F8.border}`, position: 'relative' }}>
          <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <g stroke={F8.accent} strokeWidth="1" fill="none" opacity="0.6">
              <path d="M 14,14 L 14,30 M 14,14 L 30,14" />
            </g>
          </svg>
          <div style={{ position: 'absolute', bottom: 16, left: 16, ...f8Mono, fontSize: 10, color: F8.fg, letterSpacing: '0.22em', background: 'rgba(10,11,10,0.6)', padding: '6px 10px' }}>SHOP · PORTLAND OR</div>
        </div>
      </div>
    </section>

    {/* What we don't do */}
    <section style={{ padding: '120px 64px', background: F8.surface, borderBottom: `1px solid ${F8.border}` }}>
      <F8Eyebrow>03 / WHAT WE DON'T DO</F8Eyebrow>
      <h2 style={{ ...f8Display, fontSize: 80, margin: '20px 0 48px', lineHeight: 0.95 }}>Things you<br/><span style={{ ...f8Serif, color: F8.muted }}>won't find here.</span></h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          ['NO', 'Stock photos', 'Every photo is a bike we actually sold.'],
          ['NO', 'Fake reviews', 'No "as seen on" walls. No paid testimonials.'],
          ['NO', 'Inflated specs', 'Manufacturer numbers, not marketing math.'],
          ['NO', 'Phone trees', 'Real humans. Real shop. Real phone number.'],
        ].map(([n, h, b], i) => (
          <div key={i} style={{ padding: 32, border: `1px solid ${F8.border}`, background: F8.ink }}>
            <div style={{ ...f8Mono, fontSize: 11, letterSpacing: '0.24em', color: F8.rust, marginBottom: 14 }}>/ {n}</div>
            <div style={{ ...f8Display, fontSize: 28, marginBottom: 12 }}>{h}</div>
            <div style={{ fontSize: 14, color: F8.muted, lineHeight: 1.5 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>

    <F8Footer />
  </div>
);
window.WhyPage = WhyPage;


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