// Remaining pages: Fuel, Wash, Locations, Rewards, Distribution, Careers, About
const { useState: useS_p, useEffect: useE_p, useRef: useR_p, useContext: useC_p } = React;

// ============================================================
// FUEL PAGE
// ============================================================
function FuelPage() {
  const [grade, setGrade] = useS_p('unleaded');
  const [gallons, setGallons] = useS_p(12);
  const grades = {
    unleaded: { label: 'Unleaded 87', price: 2.78, octane: 87, color: 'var(--mm-red)' },
    plus: { label: 'Plus 89', price: 3.08, octane: 89, color: '#FF8A3D' },
    premium: { label: 'Premium 93', price: 3.38, octane: 93, color: '#5B6CF7' },
    diesel: { label: 'Diesel', price: 3.42, octane: 'D', color: '#1FCB6F' },
  };
  const g = grades[grade];
  const total = (g.price * gallons).toFixed(2);
  const points = Math.floor(gallons * 10);

  return (
    <Page>
      {/* Hero */}
      <section style={{
        position: 'relative',
        paddingBlock: '120px 80px',
        background: 'var(--bg)',
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: '10%', right: '-10%',
          width: 600, height: 600, borderRadius: '50%',
          background: 'radial-gradient(circle, var(--mm-red-soft) 0%, transparent 70%)',
          pointerEvents: 'none',
        }}/>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <span className="eyebrow">Minimax Fuels</span>
          <h1 className="display" style={{ fontSize: 'clamp(80px, 11vw, 200px)', margin: '24px 0', maxWidth: '12ch' }}>
            Top-tier<br/>at the bottom<br/><span style={{ color: 'var(--mm-red)' }}>of the price.</span>
          </h1>
          <p style={{ fontSize: 20, color: 'var(--text-2)', maxWidth: 560, lineHeight: 1.55 }}>
            Detergent-rich gasoline that meets the Top Tier standard, sourced and distributed by Minimax Fuels —
            our own pipeline from Texas refineries to your tank. Authorized Shell, Valero, and Minimax unbranded.
          </p>
        </div>
      </section>

      {/* Fuel estimator (sample prices for illustration) */}
      <section className="section" style={{ background: 'var(--bg-alt)', paddingBlock: 80 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">Fuel estimator · sample prices</span>
              <h2 className="display" style={{ fontSize: 64, margin: '16px 0 24px' }}>What it'll run you.</h2>
              <p style={{ color: 'var(--text-2)', fontSize: 16, lineHeight: 1.6, marginBottom: 16 }}>
                Slide to your tank size. Pick a grade. We'll show you total + Max Rewards points earned.
              </p>
              <p style={{ color: 'var(--text-3)', fontSize: 12, fontStyle: 'italic', marginBottom: 32, lineHeight: 1.5 }}>
                Sample prices for illustration only — see in-store pumps for live local pricing.
              </p>

              {/* Grade selector */}
              <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
                {Object.entries(grades).map(([k, v]) => (
                  <button key={k} onClick={() => setGrade(k)}
                    style={{
                      padding: '12px 18px', borderRadius: 999,
                      border: `1px solid ${grade === k ? v.color : 'var(--border)'}`,
                      background: grade === k ? v.color : 'transparent',
                      color: grade === k ? '#fff' : 'var(--text)',
                      cursor: 'pointer', fontWeight: 600, fontSize: 14,
                      transition: 'all .2s',
                    }}>{v.label}</button>
                ))}
              </div>

              {/* Gallons slider */}
              <div style={{ marginBottom: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                  <span className="eyebrow">Gallons</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: g.color }}>{gallons}</span>
                </div>
                <input type="range" min="1" max="40" value={gallons} onChange={(e) => setGallons(+e.target.value)}
                  style={{ width: '100%', accentColor: g.color }}/>
              </div>
            </div>

            {/* Receipt */}
            <div style={{
              background: 'var(--bg-elev)', border: '1px solid var(--border)',
              borderRadius: 'var(--r-xl)', padding: 36,
              fontFamily: 'var(--font-mono)',
              boxShadow: 'var(--shadow)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 28 }}>MINIMAX</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.1em' }}>AUSTIN · FM 969</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', textAlign: 'right', letterSpacing: '0.1em' }}>
                  RECEIPT #14238<br/>{new Date().toLocaleDateString()}
                </div>
              </div>
              <div style={{ borderTop: '1px dashed var(--border)', borderBottom: '1px dashed var(--border)', padding: '20px 0', display: 'grid', gap: 8 }}>
                <Row label={`${g.label} × ${gallons}gal`} value={`$${total}`}/>
                <Row label={`@ $${g.price.toFixed(2)}/gal`} value={`OCT ${g.octane}`}/>
                <Row label="Pump fee" value="—"/>
                <Row label="Member discount" value="−$0.10/gal"/>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 24 }}>
                <span style={{ fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-3)' }}>TOTAL</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 64, color: 'var(--mm-red)' }}>${total}</span>
              </div>
              <div style={{
                marginTop: 24, padding: 16,
                background: 'var(--mm-red-soft)', borderRadius: 'var(--r)',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span style={{ fontSize: 12, fontFamily: 'var(--font-sans)', color: 'var(--mm-red)', fontWeight: 600 }}>
                  + {points} Max Points earned
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--mm-red)' }}>★</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Distribution map */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="From refinery to pump" title={<>Our pipeline. <span className="serif" style={{ color: 'var(--mm-red)' }}>Your tank.</span></>}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { step: '01', t: 'Refined in Texas', d: 'Top Tier additive package blended at our terminals' },
              { step: '02', t: 'Trucked overnight', d: 'Minimax fleet — 280 dedicated tankers, never sub-leased' },
              { step: '03', t: 'Tested before pumping', d: 'Octane verified at every store, every shift' },
              { step: '04', t: 'In your tank', d: 'Average pump time 2:14 — fastest in Texas' },
            ].map((s, i) => (
              <Reveal key={i} delay={i*80}>
                <div className="card" style={{ height: '100%' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, color: 'var(--mm-red)', display: 'block', lineHeight: 0.9 }}>{s.step}</span>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '16px 0 8px', lineHeight: 1.05 }}>{s.t}</h4>
                  <p style={{ color: 'var(--text-2)', fontSize: 14, lineHeight: 1.5, margin: 0 }}>{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

function Row({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--text-2)' }}>
      <span>{label}</span><span style={{ color: 'var(--text)' }}>{value}</span>
    </div>
  );
}

// ============================================================
// WASH PAGE
// ============================================================
function WashPage() {
  const [tier, setTier] = useS_p('super');
  const [unlimited, setUnlimited] = useS_p(false);
  const tiers = {
    basic: { label: 'Basic', monthly: 21.99, price: 10, color: '#9CA3AF', features: ['Wash', 'Rinse', 'Dry'] },
    super: { label: 'Super', monthly: 34.99, price: 20, color: '#4B5563', features: ['Triple Foam Polish', 'Chemical Tire Applicator', 'Tire Dressing', 'Carnauba Wax', 'Underbody Rinse'] },
    max: { label: 'MAX', monthly: 39.99, price: 25, color: 'var(--mm-red)', features: ['Super Wash Plus', 'Carnauba Wax', 'Ceramic Ultra Sealant', 'Max Shield', 'Spot Free'], pop: true },
  };
  const t = tiers[tier];
  const monthly = unlimited ? t.monthly : null;

  return (
    <Page>
      <section style={{
        position: 'relative',
        paddingBlock: '120px 60px',
        background: `linear-gradient(180deg, var(--max-foam) 0%, var(--bg) 100%)`,
        overflow: 'hidden',
      }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 60, alignItems: 'center' }}>
            <div>
              <span className="eyebrow" style={{ color: 'var(--max-blue)' }}>Max Express · Modern car wash</span>
              <h1 className="display" style={{ fontSize: 'clamp(72px, 10vw, 160px)', margin: '24px 0', lineHeight: 0.86 }}>
                Dirty in.<br/>Shining out.<br/>
                <span style={{ color: 'var(--max-blue)' }}>Under 3 minutes.</span>
              </h1>
              <p style={{ fontSize: 18, color: 'var(--text-2)', maxWidth: 480, lineHeight: 1.55, marginBottom: 32 }}>
                Soft-touch micro-fiber, ceramic-grade rinse, free vacuums. The cleanest car wash on the highway —
                with a monthly pass that pays for itself in 2 visits.
              </p>
              <div style={{ display: 'flex', gap: 12 }}>
                <a className="btn btn-primary"
                   href="#wash-pricing"
                   onClick={(e) => { e.preventDefault(); document.getElementById('wash-pricing')?.scrollIntoView({ behavior: 'smooth' }); }}
                   style={{ textDecoration: 'none' }}>
                  See plans
                </a>
                <span className="btn btn-ghost" style={{ cursor: 'default', opacity: 0.7 }}>
                  <Icon name="play" size={14}/> Watch the wash · Coming Soon
                </span>
              </div>
            </div>
            <WashAnimation/>
          </div>
        </div>
      </section>

      {/* Pricing tiers */}
      <section className="section">
        <div className="container">
          <div id="wash-pricing"><SectionHeader eyebrow="Three tiers · One promise" title="Pick your shine."/></div>

          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 32 }}>
            <span style={{
              display: 'inline-flex', padding: 4, borderRadius: 999,
              border: '1px solid var(--border)', background: 'var(--surface-2)',
            }}>
              <button onClick={() => setUnlimited(false)} style={{
                padding: '8px 18px', borderRadius: 999, border: 0,
                background: !unlimited ? 'var(--mm-red)' : 'transparent',
                color: !unlimited ? '#fff' : 'var(--text)',
                fontWeight: 600, fontSize: 13, cursor: 'pointer',
              }}>Single wash</button>
              <button onClick={() => setUnlimited(true)} style={{
                padding: '8px 18px', borderRadius: 999, border: 0,
                background: unlimited ? 'var(--mm-red)' : 'transparent',
                color: unlimited ? '#fff' : 'var(--text)',
                fontWeight: 600, fontSize: 13, cursor: 'pointer',
              }}>Unlimited monthly</button>
            </span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {Object.entries(tiers).map(([k, v]) => (
              <button key={k} onClick={() => setTier(k)}
                className="card"
                style={{
                  textAlign: 'left', cursor: 'pointer',
                  border: `1px solid ${tier === k ? v.color : 'var(--border)'}`,
                  background: tier === k ? `color-mix(in oklab, ${v.color} 8%, var(--surface))` : 'var(--surface)',
                  transform: tier === k ? 'translateY(-4px)' : 'none',
                  position: 'relative',
                }}>
                {v.pop && (
                  <span style={{
                    position: 'absolute', top: -10, right: 24,
                    background: 'var(--mm-red)', color: '#fff',
                    padding: '4px 12px', borderRadius: 999,
                    fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.15em',
                  }}>MOST POPULAR</span>
                )}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 36, margin: 0 }}>{v.label}</h3>
                  <Icon name="wash" size={28} stroke={1.6} style={{ color: v.color }}/>
                </div>
                <div style={{ marginTop: 16 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 64, color: v.color }}>
                    ${unlimited ? v.monthly : v.price}
                  </span>
                  <span style={{ fontSize: 13, color: 'var(--text-2)', marginLeft: 6 }}>{unlimited ? '/mo unlimited' : '/wash'}</span>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {v.features.map(f => (
                    <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'var(--text-2)' }}>
                      <Icon name="check" size={14} stroke={2.5} style={{ color: v.color, flexShrink: 0 }}/>
                      {f}
                    </li>
                  ))}
                </ul>
              </button>
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

function WashAnimation() {
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '4/3',
      borderRadius: 'var(--r-xl)',
      background: 'linear-gradient(135deg, #4B5563 0%, #6B7280 50%, var(--mm-red) 100%)',
      overflow: 'hidden',
      boxShadow: 'var(--shadow-lg)',
    }}>
      {/* Foam bubbles */}
      {Array.from({ length: 18 }).map((_, i) => (
        <div key={i} style={{
          position: 'absolute',
          width: 10 + Math.random() * 30,
          height: 10 + Math.random() * 30,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.3)',
          left: `${Math.random() * 100}%`,
          top: '110%',
          animation: `bubble ${3 + Math.random() * 4}s linear infinite`,
          animationDelay: `${-Math.random() * 4}s`,
        }}/>
      ))}
      {/* Car silhouette */}
      <svg viewBox="0 0 400 280" style={{ position: 'absolute', bottom: '20%', left: '50%', transform: 'translateX(-50%)', width: '70%' }}>
        <path d="M 50 200 L 80 130 L 140 110 L 240 110 L 310 130 L 360 200 Z"
          fill="#fff" opacity="0.9"/>
        <rect x="100" y="130" width="60" height="40" fill="rgba(0,0,0,0.2)"/>
        <rect x="200" y="130" width="60" height="40" fill="rgba(0,0,0,0.2)"/>
        <circle cx="100" cy="200" r="22" fill="#1A1A1A"/>
        <circle cx="310" cy="200" r="22" fill="#1A1A1A"/>
      </svg>
      <div style={{
        position: 'absolute', top: 24, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        color: '#fff', fontFamily: 'var(--font-mono)',
        fontSize: 11, letterSpacing: '0.15em',
      }}>
        <span>WASH IN PROGRESS · DEMO</span>
        <span>02:14</span>
      </div>
      {/* "AI demo · Coming Soon" badge — placeholder until real wash demo video is produced */}
      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px',
        background: 'rgba(0,0,0,0.55)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.18)',
        borderRadius: 'var(--r-md)',
        color: '#fff',
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: 'var(--mm-red)',
          animation: 'mm-wash-pulse 1.5s ease-in-out infinite',
        }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em' }}>AI-generated wash demo · Coming Soon</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>This animation is a placeholder.</div>
        </div>
      </div>
      <style>{`
        @keyframes mm-wash-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
      `}</style>
      <style>{`
        @keyframes bubble {
          0% { transform: translateY(0); opacity: 0; }
          15% { opacity: 1; }
          100% { transform: translateY(-450px); opacity: 0; }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// LOCATIONS PAGE — full screen locator
// ============================================================
function LocationsPage() {
  return (
    <Page>
      <section style={{ paddingBlock: '120px 60px' }}>
        <div className="container">
          <span className="eyebrow">Locations</span>
          <h1 className="display" style={{ fontSize: 'clamp(80px, 11vw, 200px)', margin: '24px 0', lineHeight: 0.86 }}>
            11 locations.<br/><span style={{ color: 'var(--mm-red)' }}>Across Texas.</span>
          </h1>
        </div>
      </section>
      <LocationFinderFull/>
    </Page>
  );
}

function LocationFinderFull() {
  const allStores = window.MM_STORES.map(s => ({
    id: s.num, name: s.short, city: s.short.split(' · ')[0], distance: s.distance,
    open: s.open, comingSoon: s.comingSoon, services: s.services, addr: s.addr, lat: s.lat, lng: s.lng,
    region: s.region, phone: s.phone,
    hours: s.hours,
  }));
  const [region, setRegion] = useS_p('All');
  const [filter, setFilter] = useS_p('All');
  const [active, setActive] = useS_p(0);
  const [query, setQuery] = useS_p('');
  const [userPos, setUserPos] = useS_p(null);
  const [geoErr, setGeoErr] = useS_p('');
  const [zipCenter, setZipCenter] = useS_p(null);
  useE_p(() => {
    const q = query.trim();
    const m = q.match(/^(\d{5})$/);
    if (!m) { setZipCenter(null); return; }
    setGeoErr('');  // ZIP search clears any prior geo error
    let cancelled = false;
    fetch(`https://api.zippopotam.us/us/${m[1]}`)
      .then(r => r.ok ? r.json() : null)
      .then(d => {
        if (cancelled) return;
        if (d && d.places && d.places[0]) {
          setZipCenter({ lat: parseFloat(d.places[0].latitude), lng: parseFloat(d.places[0].longitude), zip: m[1] });
        } else {
          setZipCenter(null);
        }
      })
      .catch(() => { if (!cancelled) setZipCenter(null); });
    return () => { cancelled = true; };
  }, [query]);

  const distMi = (a, b) => {
    if (!a || !b) return null;
    const R = 3959;
    const dLat = (b.lat - a.lat) * Math.PI / 180;
    const dLng = (b.lng - a.lng) * Math.PI / 180;
    const lat1 = a.lat * Math.PI / 180, lat2 = b.lat * Math.PI / 180;
    const h = Math.sin(dLat/2)**2 + Math.cos(lat1)*Math.cos(lat2)*Math.sin(dLng/2)**2;
    return 2 * R * Math.asin(Math.sqrt(h));
  };
  const useMyLocation = () => {
    setGeoErr('');
    if (!navigator.geolocation) { setGeoErr('Geolocation not supported'); return; }
    navigator.geolocation.getCurrentPosition(
      (pos) => setUserPos({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
      (err) => setGeoErr(err.code === 1 ? 'Location permission denied' : 'Could not get location'),
      { enableHighAccuracy: false, timeout: 8000, maximumAge: 60000 }
    );
  };
  const filters = ['All', 'Fuel', 'Flamin', 'KKC', 'Which Wich', 'Fiery', 'Brew MAX', 'Kona', 'Wash'];
  const regions = ['All'];
  let filtered = allStores.filter(s => {
    if (region !== 'All' && s.region !== region) return false;
    if (filter !== 'All' && !s.services.includes(filter)) return false;
    const q = query.trim().toLowerCase();
    const isZip = /^\d{5}$/.test(query.trim());
    if (q && !isZip && !(
      s.name.toLowerCase().includes(q) ||
      (s.addr || '').toLowerCase().includes(q) ||
      (s.region || '').toLowerCase().includes(q) ||
      s.services.some(sv => sv.toLowerCase().includes(q))
    )) return false;
    return true;
  });
  const _center = userPos || zipCenter;
  if (_center) {
    filtered = filtered.map(s => ({ ...s, _miles: distMi(_center, s) }))
                       .sort((a, b) => (a._miles ?? 999) - (b._miles ?? 999));
  }

  // Brand colors for chips
  const chipColor = {
    Fuel:        { bg: 'rgba(226,35,26,0.10)',   fg: '#E2231A' },
    Flamin:      { bg: 'rgba(226,35,26,0.10)',   fg: '#E2231A' },
    KKC:         { bg: 'rgba(255,158,0,0.14)',   fg: '#C97600' },
    'Which Wich':{ bg: 'rgba(255,210,0,0.18)',   fg: '#8A6800' },
    Fiery:       { bg: 'rgba(255,106,0,0.14)',   fg: '#C24A00' },
    'Brew MAX':  { bg: 'rgba(76,46,32,0.14)',    fg: '#5A2E1A' },
    Kona:        { bg: 'rgba(143,90,46,0.14)',   fg: '#6B3F1E' },
    Wash:        { bg: 'rgba(75,85,99,0.16)',    fg: '#374151' },
    'Trucker Fueling': { bg: 'rgba(14,14,14,0.10)', fg: '#0E0E0E' },
  };

  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '440px 1fr', gap: 24, height: '78vh', minHeight: 600 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, minHeight: 0 }}>
            {/* Region tabs */}
            <div style={{ display: 'flex', gap: 0, padding: 4, background: 'var(--surface-2)', borderRadius: 999, border: '1px solid var(--border)' }}>
              {regions.map(r => (
                <button key={r} onClick={() => { setRegion(r); setActive(0); }} style={{
                  flex: 1, padding: '10px 14px', borderRadius: 999, border: 0,
                  background: region === r ? 'var(--mm-red)' : 'transparent',
                  color: region === r ? '#fff' : 'var(--text)',
                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>{r === 'All' ? 'All 11' : r}</button>
              ))}
            </div>
            {/* Filters */}
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {filters.map(f => (
                <button key={f} onClick={() => setFilter(f)} style={{
                  padding: '8px 14px', borderRadius: 999,
                  border: `1px solid ${filter === f ? 'var(--mm-red)' : 'var(--border)'}`,
                  background: filter === f ? 'var(--mm-red)' : 'transparent',
                  color: filter === f ? '#fff' : 'var(--text)',
                  fontSize: 12, fontWeight: 500, cursor: 'pointer',
                }}>{f}</button>
              ))}
            </div>
            {/* Search */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '14px 18px',
              background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 999,
            }}>
              <Icon name="search" size={16}/>
              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search ZIP, city, highway, service" style={{
                border: 0, background: 'transparent', outline: 0, flex: 1,
                fontFamily: 'inherit', fontSize: 14, color: 'var(--text)',
              }}/>
              {query && (
                <button onClick={() => setQuery('')} aria-label="Clear" style={{ background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--text-3)', fontSize: 16, padding: 0 }}>×</button>
              )}
            </div>
            <button onClick={useMyLocation} style={{
              width: '100%', justifyContent: 'center', padding: '10px 14px',
              fontSize: 13, borderRadius: 999, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: userPos ? 'var(--mm-red-soft)' : 'transparent',
              color: userPos ? 'var(--mm-red)' : 'var(--text-2)',
              border: '1px solid ' + (userPos ? 'var(--mm-red)' : 'var(--border)'),
            }}>
              <Icon name="pin" size={14}/>
              {userPos ? 'Using your location · sorted by distance' : 'Use my location → nearest first'}
            </button>
            {geoErr && (
              <div style={{ fontSize: 12, color: 'var(--mm-red)', padding: '0 4px' }}>{geoErr}</div>
            )}
            {zipCenter && !userPos && (
              <div style={{ fontSize: 12, color: 'var(--mm-red)', padding: '0 4px', fontFamily: 'var(--font-mono)', letterSpacing: '0.05em' }}>
                ● Sorted by distance from {zipCenter.zip}
              </div>
            )}
            {/* Store list */}
            <div className="no-scrollbar" style={{ overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
              {filtered.map((s, i) => (
                <button key={s.id} onClick={() => setActive(i)} style={{
                  textAlign: 'left', padding: 18,
                  borderRadius: 'var(--r-md)',
                  border: `1px solid ${i === active ? 'var(--mm-red)' : 'var(--border)'}`,
                  background: i === active ? 'var(--mm-red-soft)' : 'var(--surface)',
                  cursor: 'pointer',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{s.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 4 }}>
                        {s.comingSoon
                          ? <span style={{ color: 'var(--mm-red)', fontWeight: 600 }}>● Coming Soon</span>
                          : <>{s._miles != null ? (s._miles.toFixed(1) + 'mi') : (userPos ? '—' : 'Distance: turn on location')} · {s.open ? <span style={{ color: '#1FCB6F' }}>● {s.hours}</span> : <span style={{ color: 'var(--text-3)' }}>{s.hours}</span>}</>
                        }
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.addr}</div>
                      {s.phone && <div style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 2, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em' }}>{s.phone}</div>}
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 4, marginTop: 10, flexWrap: 'wrap' }}>
                    {s.services.map(sv => {
                      const c = chipColor[sv] || { bg: 'var(--surface-2)', fg: 'var(--text-2)' };
                      return (
                        <span key={sv} style={{
                          fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em',
                          padding: '3px 8px', borderRadius: 4,
                          background: c.bg, color: c.fg, textTransform: 'uppercase', fontWeight: 600,
                        }}>{sv}</span>
                      );
                    })}
                  </div>
                </button>
              ))}
            </div>
          </div>
          <GreyMap stores={filtered} active={active} setActive={setActive} userPos={userPos || zipCenter}/>
        </div>
      </div>
    </section>
  );
}

// Leaflet-based map with multi-marker support, themed light/dark
function GreyMap({ stores, active, setActive, userPos }) {
  const s = stores[active] || stores[0];
  if (!s) return null;
  const { theme } = React.useContext(window.ThemeCtx);
  return (
    <div style={{
      position: 'relative',
      borderRadius: 'var(--r-xl)',
      overflow: 'hidden',
      border: '1px solid var(--border)',
      background: 'var(--surface)',
      minHeight: 520,
    }}>
      <window.MMMap
        stores={stores}
        active={active}
        setActive={setActive}
        userPos={userPos}
        mapTheme={theme === 'dark' ? 'dark' : 'light'}
      />
      {/* Floating store list overlay (top) — horizontal scroll for many stores */}
      <div style={{
        position: 'absolute', top: 16, left: 16, right: 16,
        display: 'flex', gap: 8, overflowX: 'auto', padding: 4,
        zIndex: 500, pointerEvents: 'auto',
      }} className="no-scrollbar">
        {stores.map((st, i) => (
          <button key={st.id || st.num} onClick={() => setActive(i)} style={{
            flexShrink: 0,
            padding: '8px 14px', borderRadius: 999,
            border: '1px solid ' + (i === active ? 'var(--mm-red)' : 'var(--border)'),
            background: i === active ? 'var(--mm-red)' : 'var(--bg-elev)',
            color: i === active ? '#fff' : 'var(--text)',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            boxShadow: 'var(--shadow)',
          }}>#{st.id || st.num}{st._miles != null ? ` · ${st._miles.toFixed(1)}mi` : ''}</button>
        ))}
      </div>
      {/* Floating active store info (bottom) */}
      <div style={{
        position: 'absolute', bottom: 20, left: 20, right: 20,
        background: 'var(--bg-elev)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--r-md)',
        padding: 16,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        boxShadow: 'var(--shadow-lg)',
        zIndex: 500,
      }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Store #{s.id || s.num} · {s.name || s.short}</div>
          <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {s.addr || (s._miles != null ? `${s._miles.toFixed(1)}mi away` : '')}
          </div>
          {s.phone && <div style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 2, fontFamily: 'var(--font-mono)' }}>{s.phone}</div>}
        </div>
        <a className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13, textDecoration: 'none', flexShrink: 0 }}
          href={`https://www.google.com/maps/dir/?api=1&destination=${s.lat},${s.lng}`}
          target="_blank" rel="noopener noreferrer">
          Get directions <Icon name="arrowUp" size={14}/>
        </a>
      </div>
    </div>
  );
}

// ============================================================
// REWARDS PAGE
// ============================================================
function RewardsPage() {
  // Max Rewards — Coming Soon (per design feedback)
  // Original sign-up flow code preserved in git history; restore when launch is ready.
  return (
    <Page>
      <section style={{
        background: 'var(--mm-black)', color: '#fff',
        paddingBlock: '160px 120px',
        position: 'relative', overflow: 'hidden',
        minHeight: '80vh',
        display: 'flex', alignItems: 'center',
      }}>
        <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
          <span className="eyebrow" style={{ color: 'var(--mm-red)' }}>Max Rewards</span>
          <h1 className="display" style={{
            fontSize: 'clamp(80px, 12vw, 220px)',
            margin: '32px 0',
            lineHeight: 0.86,
            color: '#fff',
            textTransform: 'lowercase',
            fontWeight: 400,
          }}>
            <span style={{ color: 'var(--mm-red)' }}>coming</span><br/>
            <span style={{ color: 'transparent', WebkitTextStroke: '3px rgba(255,255,255,0.3)' }}>soon.</span>
          </h1>
          <p style={{
            fontSize: 22, color: 'rgba(255,255,255,0.7)',
            lineHeight: 1.6, maxWidth: 640, margin: '32px auto 0',
          }}>
            We're building Max Rewards from scratch. Points on every gallon, every burrito, every wash —
            <span className="serif" style={{ color: 'var(--mm-red)' }}> launching soon</span>.
          </p>
          <div style={{
            display: 'inline-flex',
            alignItems: 'center', gap: 12,
            padding: '14px 28px', marginTop: 48,
            background: 'rgba(226,35,26,0.15)',
            border: '1px solid var(--mm-red)',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            fontSize: 13,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            color: 'var(--mm-red)',
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: 'var(--mm-red)',
              animation: 'mm-pulse 1.5s ease-in-out infinite',
            }}/>
            Notification when ready · Watch this space
          </div>
        </div>
        <div className="footer-mega" style={{ bottom: '-100px', color: 'rgba(255,255,255,0.04)' }}>SOON</div>
      </section>
      <style>{`
        @keyframes mm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
      `}</style>
    </Page>
  );
}

const inputStyle = {
  width: '100%', padding: '16px 18px',
  background: 'rgba(255,255,255,0.05)',
  border: '1px solid rgba(255,255,255,0.15)',
  borderRadius: 'var(--r)',
  color: '#fff', fontSize: 15, fontFamily: 'inherit',
  marginBottom: 12, outline: 0,
};

// ============================================================
// DISTRIBUTION (B2B) PAGE
// ============================================================
function DistributionPage() {
  return (
    <Page>
      <section style={{ paddingBlock: '120px 60px', background: 'var(--bg-alt)' }}>
        <div className="container">
          <span className="eyebrow">Minimax Fuels · B2B</span>
          <h1 className="display" style={{ fontSize: 'clamp(72px, 10vw, 168px)', margin: '24px 0', lineHeight: 0.86 }}>
            Wholesale fuel.<br/><span style={{ color: 'var(--mm-red)' }}>Wholesale reliability.</span>
          </h1>
          <p style={{ fontSize: 20, color: 'var(--text-2)', maxWidth: 600, lineHeight: 1.55 }}>
            We supply fuel to 600+ independent stations, fleets, and municipalities across Texas. From rack to retail,
            with daily pricing transparency and zero-stockout SLAs.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginBottom: 80 }}>
            <Stat value="2.4B" suffix="gal" label="Annual throughput"/>
            <Stat value="280" label="Dedicated tankers"/>
            <Stat value="600" suffix="+" label="B2B accounts"/>
            <Stat value="99.7" suffix="%" label="On-time delivery"/>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
            <div>
              <SectionHeader eyebrow="Programs" title={<>Three ways<br/>to partner.</>}/>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {[
                  { t: 'Branded Distribution', d: 'Fly the Minimax flag — full retail support, signage, POS, training.' },
                  { t: 'Unbranded Wholesale', d: 'Buy at rack +0.4¢, locked daily by 9am. Min 8,500gal/load.' },
                  { t: 'Fleet Fuel Cards', d: 'Real-time controls, IFTA reporting, accepted at 142+ Minimax sites + national network.' },
                ].map((it, i) => (
                  <div key={i} style={{
                    padding: 24,
                    background: 'var(--surface)', border: '1px solid var(--border)',
                    borderRadius: 'var(--r-md)',
                  }}>
                    <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 32, margin: 0 }}>{it.t}</h4>
                    <p style={{ color: 'var(--text-2)', fontSize: 14, lineHeight: 1.5, marginTop: 8, margin: 0 }}>{it.d}</p>
                  </div>
                ))}
              </div>
            </div>

            <div style={{
              background: 'var(--mm-black)', color: '#fff',
              borderRadius: 'var(--r-xl)', padding: 40,
            }}>
              <h3 className="display" style={{ fontSize: 56, margin: 0, color: '#fff' }}>Get a quote.</h3>
              <p style={{ color: 'rgba(255,255,255,0.6)', marginTop: 12, marginBottom: 32 }}>One of our reps responds within an hour during business hours.</p>
              <input placeholder="Company" style={inputStyle}/>
              <input placeholder="Contact name" style={inputStyle}/>
              <input placeholder="Email" style={inputStyle}/>
              <select style={{ ...inputStyle, appearance: 'none' }}>
                <option>Estimated monthly volume…</option>
                <option>10k – 50k gal</option>
                <option>50k – 250k gal</option>
                <option>250k – 1M gal</option>
                <option>1M+ gal</option>
              </select>
              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}>
                Request quote <Icon name="arrow" size={14}/>
              </button>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

// ============================================================
// CAREERS PAGE
// ============================================================
function CareersPage() {
  const jobs = [
    { team: 'Stores', title: 'Store Manager', loc: 'Austin, TX', type: 'Full-time' },
    { team: 'Stores', title: 'Shift Lead', loc: 'Manor, TX', type: 'Full-time' },
    { team: 'Food', title: 'Kitchen Trainer · Flamin Burger', loc: 'Austin, TX', type: 'Full-time' },
    { team: 'Distribution', title: 'CDL-A Tanker Driver', loc: 'Austin, TX', type: 'Full-time' },
    { team: 'Distribution', title: 'Logistics Coordinator', loc: 'Austin, TX', type: 'Full-time' },
    { team: 'Corporate', title: 'Senior Brand Designer', loc: 'Austin, TX', type: 'Full-time' },
    { team: 'Corporate', title: 'Pricing Analyst, Fuel', loc: 'Remote · TX', type: 'Full-time' },
    { team: 'Franchise', title: 'Franchise Development Lead', loc: 'Statewide', type: 'Full-time' },
  ];
  const [team, setTeam] = useS_p('All');
  const teams = ['All', ...new Set(jobs.map(j => j.team))];
  const filtered = team === 'All' ? jobs : jobs.filter(j => j.team === team);

  return (
    <Page>
      <section style={{ paddingBlock: '120px 80px' }}>
        <div className="container">
          <span className="eyebrow">Careers · Franchise</span>
          <h1 className="display" style={{ fontSize: 'clamp(80px, 11vw, 200px)', margin: '24px 0', lineHeight: 0.86 }}>
            Build with us.<br/><span style={{ color: 'var(--mm-red)' }}>In Texas.</span>
          </h1>
          <p style={{ fontSize: 20, color: 'var(--text-2)', maxWidth: 580, lineHeight: 1.55 }}>
            From first job to franchise. Top-of-market pay, full benefits day one, real career ladders.
          </p>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
            {teams.map(t => (
              <button key={t} onClick={() => setTeam(t)} style={{
                padding: '10px 18px', borderRadius: 999,
                border: `1px solid ${team === t ? 'var(--mm-red)' : 'var(--border)'}`,
                background: team === t ? 'var(--mm-red)' : 'transparent',
                color: team === t ? '#fff' : 'var(--text)',
                cursor: 'pointer', fontWeight: 500, fontSize: 13,
              }}>{t}</button>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {filtered.map((j, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '1.5fr 1fr 1fr auto',
                gap: 20, alignItems: 'center',
                padding: 24,
                background: 'var(--surface)', border: '1px solid var(--border)',
                borderRadius: 'var(--r-md)',
                transition: 'all .2s',
                cursor: 'pointer',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--mm-red)'; e.currentTarget.style.transform = 'translateX(4px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = ''; }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1 }}>{j.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', marginTop: 6 }}>{j.team.toUpperCase()}</div>
                </div>
                <span style={{ color: 'var(--text-2)', fontSize: 14 }}>{j.loc}</span>
                <span style={{ color: 'var(--text-2)', fontSize: 14 }}>{j.type}</span>
                <button className="btn btn-ghost" style={{ padding: '10px 16px', fontSize: 13 }}>Apply <Icon name="arrow" size={14}/></button>
              </div>
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

// ============================================================
// ABOUT PAGE
// ============================================================
function AboutPage() {
  return (
    <Page>
      {/* HERO with MINI/MAX wordmark treatment */}
      <section style={{ paddingBlock: '120px 60px', position: 'relative', overflow: 'hidden' }}>
        <div className="container">
          <span className="eyebrow">Our story</span>
          <h1 className="display" style={{
            fontSize: 'clamp(96px, 14vw, 240px)', margin: '24px 0',
            lineHeight: 0.82, letterSpacing: '-0.02em',
            textTransform: 'lowercase', fontWeight: 400,
          }}>
            <span style={{ color: 'var(--mm-red)' }}>mini</span><span style={{
              color: 'var(--text)',
            }}>mal </span><span style={{
              color: 'transparent', WebkitTextStroke: '3px #9CA3AF',
            }}>time</span><br/>
            <span style={{ color: 'var(--mm-red)' }}>max</span><span style={{
              color: 'var(--text)',
            }}>imum </span><span style={{
              color: 'transparent', WebkitTextStroke: '3px #9CA3AF',
            }}>experience</span>
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, marginTop: 64 }}>
            <p style={{ fontSize: 22, color: 'var(--text-2)', lineHeight: 1.55, margin: 0 }}>
              Minimax — a privately held company, serving Texas for over 25 years. Since opening our doors in 1995, we have been committed
              to providing service of the highest quality, paying particular attention to working efficiently while keeping the lines of
              communication with our guests clear and concise.
            </p>
            <div>
              <p className="serif" style={{ fontSize: 26, color: 'var(--text)', lineHeight: 1.4, margin: 0 }}>
                "Our mission is simple: to merge speed with exceptional service. With each store, with each guest, we operate beyond expectations."
              </p>
              <span style={{ fontSize: 13, color: 'var(--text-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.15em', marginTop: 16, display: 'block' }}>
                — THE MINIMAX TEAM
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* VISION / MISSION / COMMUNITY */}
      <section className="section" style={{ background: 'var(--mm-black)', color: '#fff' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {[
              { tag: '01 / VISION', title: 'Our Vision', body: 'To become the community\'s preferred destination for fuel and convenience.', tone: 'red', glyph: '◎' },
              { tag: '02 / MISSION', title: 'Our Mission', body: 'To merge speed with exceptional service — minimal time, MAXimum experience, every visit.', tone: 'yellow', glyph: '→' },
              { tag: '03 / COMMUNITY', title: 'Community', body: 'At miniMAX we believe in being an integral part of the community we serve. Local stores. Local jobs. Local pride.', tone: 'fire', glyph: '★' },
            ].map((p, i) => (
              <Reveal key={i} delay={i*80}>
                <div style={{
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: 'var(--r-lg)',
                  padding: 36,
                  height: '100%',
                  display: 'flex', flexDirection: 'column',
                  position: 'relative', overflow: 'hidden',
                  minHeight: 380,
                }}>
                  <ImgPlaceholder ratio="16/9" tone={p.tone} caption={p.tag} glyph={p.glyph} style={{ marginBottom: 24 }}/>
                  <h3 className="display" style={{ fontSize: 56, margin: 0, lineHeight: 0.95 }}>{p.title}</h3>
                  <p style={{ color: 'rgba(255,255,255,0.75)', lineHeight: 1.6, marginTop: 16, fontSize: 16, flex: 1 }}>{p.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* VALUES STRIP */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="What we stand on" title={<>Five things, every store, every <span className="serif" style={{ color: 'var(--mm-red)' }}>shift</span>.</>}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {[
              { n: '01', t: 'Teamwork', d: 'A store runs on the people in it. We hire, train, and pay accordingly.' },
              { n: '02', t: 'Safety', d: 'Spotless lots. Working pumps. Camera-monitored 24/7. No exceptions.' },
              { n: '03', t: 'Quality service', d: 'Greeted, helped, out the door. Guests, never just customers.' },
              { n: '04', t: 'Eco-friendly', d: 'Reclaim-water washes, LED canopies, smart fuel-vapor recovery.' },
              { n: '05', t: 'Guaranteed', d: "If we got it wrong, we'll fix it on the spot. That simple." },
            ].map((v, i) => (
              <Reveal key={i} delay={i*60}>
                <div className="card" style={{ height: '100%', minHeight: 220 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: 'var(--mm-red)' }}>{v.n}</div>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 36, margin: '12px 0 8px', lineHeight: 1 }}>{v.t}</h4>
                  <p style={{ color: 'var(--text-2)', fontSize: 14, lineHeight: 1.55, margin: 0 }}>{v.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* COMMUNITY / IMAGES */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', marginBottom: 64 }}>
            <div>
              <span className="eyebrow">In the community</span>
              <h2 className="display" style={{ fontSize: 'clamp(56px, 7vw, 96px)', margin: '20px 0', lineHeight: 0.92 }}>
                We belong<br/>to the<br/><span style={{ color: 'var(--mm-red)' }}>neighborhood.</span>
              </h2>
              <p style={{ fontSize: 18, color: 'var(--text-2)', lineHeight: 1.6, margin: 0 }}>
                We're committed to becoming our community's preferred destination for fuel and convenience because at Minimax we believe in serving you.
                That means little league sponsorships, school supply drives, hurricane-relief water stations, and store managers who actually live in
                the zip code they run.
              </p>
              <button className="btn btn-primary" style={{ marginTop: 32 }}>
                Get in touch <Icon name="arrow" size={16}/>
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <ImgPlaceholder ratio="3/4" tone="fire" caption="LITTLE LEAGUE" glyph="⚾" label="community/01"/>
              <ImgPlaceholder ratio="3/4" tone="red" caption="DISASTER RELIEF" glyph="❤" label="community/02" style={{ marginTop: 24 }}/>
              <ImgPlaceholder ratio="3/4" tone="yellow" caption="SCHOOL DRIVE" glyph="✎" label="community/03" style={{ marginTop: -12 }}/>
              <ImgPlaceholder ratio="3/4" tone="ink" caption="STORE TEAM" glyph="◐" label="community/04" style={{ marginTop: 12 }}/>
            </div>
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Timeline" title="The road so far."/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 80, top: 0, bottom: 0, width: 2, background: 'var(--border)' }}/>
            {[
              { y: '1995', t: 'First Minimax opens', d: 'A single Austin gas station becomes the prototype — minimal time, MAXimum experience.' },
              { y: '2004', t: 'Hot food under our roof', d: 'We start partnering with national hot-food brands so guests can grab a real meal, not just a snack.' },
              { y: '2018', t: 'House brands launch', d: 'Brew MAX, Maximum Refreshment, Chill To The MAX, Tap.IT, Fit MAX, Flavor MAX — all built in-house, around our customers.' },
              { y: '2020', t: 'Minimax Fuels launches', d: 'We become an authorized distributor for Shell, Valero, and Minimax unbranded fuels.' },
              { y: '2021', t: 'Max Express Wash debuts', d: 'Soft-touch tunnels at every new build — plus the GO MAX / GO UNLIMITED Wash Club program.' },
              { y: '2023', t: 'Eleven brands strong', d: 'Flamin Burger, Which Wich, KKC, Fiery Tacos, Brew MAX, Maximum Refreshment, Chill To The MAX, Tap.IT, Fit MAX, Flavor MAX, minis Bakery — all under one roof.' },
              { y: '2026', t: '11 locations. Counting.', d: 'Texas — from Greater Austin to the Houston metro. You are here.' },
            ].map((e, i) => (
              <Reveal key={e.y} delay={i*60}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40,
                  padding: '12px 0',
                  position: 'relative',
                }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, color: 'var(--mm-red)', lineHeight: 1 }}>{e.y}</div>
                  <div style={{ paddingLeft: 24, position: 'relative' }}>
                    <div style={{
                      position: 'absolute', left: -7, top: 12,
                      width: 14, height: 14, borderRadius: '50%',
                      background: 'var(--mm-red)', border: '3px solid var(--bg)',
                    }}/>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 1.05 }}>{e.t}</div>
                    <p style={{ color: 'var(--text-2)', marginTop: 8, fontSize: 15, lineHeight: 1.55 }}>{e.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { FuelPage, WashPage, LocationsPage, RewardsPage, DistributionPage, CareersPage, AboutPage });