// Food Brands page — KKC, Fiery Grill, Flamin Burger, Kona Moka
const { useState: useS_b, useEffect: useE_b, useRef: useR_b, useContext: useC_b } = React;

const BRAND_DATA = {
  kkc: {
    id: 'kkc', name: 'Krispy Krunchy Chicken', short: 'KKC',
    tag: 'Hand-breaded. Fried just for this order.',
    bg: '#E31837', ink: '#fff', accent: '#FFD200', soft: '#FFF6E0',
    icon: 'chicken',
    story: "Bone-in, hand-breaded, fried in cajun-spiced oil. The way it should be — at gas station prices, in 8 minutes flat.",
    menu: [
      { name: '8-Piece Box', price: 14.99, desc: 'Hand-breaded · Cajun-spiced · 8 pieces white & dark', cal: 1840, hot: true },
      { name: 'Tender Combo', price: 9.49, desc: '4 tenders, fries, biscuit, sweet tea', cal: 1120 },
      { name: 'Spicy Sandwich', price: 6.99, desc: 'Brioche, pickles, krunch sauce, ghost pepper crust', cal: 720, hot: true },
      { name: 'Honey Biscuits', price: 3.49, desc: 'Buttermilk · 4 pack · house honey butter', cal: 480 },
      { name: 'Mac & Cheese', price: 3.99, desc: 'Three-cheese · cracker top', cal: 380 },
      { name: 'Family Hot Box', price: 22.99, desc: '8pc + 4 biscuits + 2 sides + sweet tea pitcher', cal: 3600, featured: true },
    ],
  },
  fg: {
    id: 'fg', name: 'Fiery Grill', short: 'FIERY',
    tag: 'Mesquite fire on a Texas flattop.',
    bg: '#1A1410', ink: '#fff', accent: '#FF6B1A', soft: '#FFB347',
    icon: 'fire',
    story: "Mesquite-fired carne asada, slow al pastor, charred peppers. Border-to-Texas fire on the flattop, served on hand-pressed corn.",
    menu: [
      { name: 'Asada Tacos · 3', price: 8.99, desc: 'Mesquite carne, onion, cilantro, lime', cal: 540, featured: true },
      { name: 'Al Pastor Bowl', price: 10.49, desc: 'Slow-rotated pork, pineapple salsa, rice, charro beans', cal: 880 },
      { name: 'Fiery Burrito', price: 9.99, desc: 'Carne, queso, pinto, fire chili crisp', cal: 1240, hot: true },
      { name: 'Quesabirria', price: 12.49, desc: '3 tacos, consomé dipping cup', cal: 1080, hot: true },
      { name: 'Grilled Street Corn', price: 4.49, desc: 'Crema, cotija, tajín, lime', cal: 320 },
      { name: 'Horchata · 22oz', price: 3.49, desc: 'House-blended, cinnamon spice', cal: 280 },
    ],
  },
  fb: {
    id: 'fb', name: 'Flamin Burger', short: 'FLAMIN',
    tag: 'A smashburger that earned its name.',
    bg: '#E2231A', ink: '#fff', accent: '#FFD200', soft: '#FFD6D6',
    icon: 'burger',
    story: "Smashburger that lives up to its name. Two 1/4lb patties, lacy crust, ghost-pepper aioli, on a black sesame brioche.",
    menu: [
      { name: 'OG Flamin Double', price: 8.99, desc: 'Two smash patties, american, pickles, ghost aioli', cal: 880, featured: true },
      { name: 'Inferno Triple', price: 11.49, desc: 'Three patties, jalapeño, scorpion sauce, charred onion', cal: 1240, hot: true },
      { name: 'Bacon Ember', price: 9.99, desc: 'Smoked bacon, pepperjack, candied jalapeño', cal: 1020 },
      { name: 'Chicken Flamin', price: 8.49, desc: 'Hand-breaded buttermilk, slaw, fire honey', cal: 780 },
      { name: 'Crinkle Fries', price: 3.49, desc: 'Sea salt, fire dust on request', cal: 420 },
      { name: 'Spicy Shake', price: 4.99, desc: 'Vanilla, chili-chocolate swirl, candied chili rim', cal: 580, hot: true },
    ],
  },
  km: {
    id: 'km', name: 'Kona Moka', short: 'KONA',
    tag: 'Hawaiian-roasted beans, dialed in by a real barista.',
    bg: '#3A2418', ink: '#F4E6CC', accent: '#D4A574', soft: '#EFE6D2',
    icon: 'coffee',
    story: "Hawaiian-roasted beans, single-origin, dialed in by a real barista. Plus mochi donuts, açaí bowls, and the cold brew that built a cult.",
    menu: [
      { name: 'Kona Cold Brew · 24oz', price: 4.49, desc: 'Slow-steeped 16hr, vanilla cream float optional', cal: 90, featured: true },
      { name: 'Macadamia Latte', price: 5.49, desc: 'Espresso, mac nut milk, hawaiian honey', cal: 240 },
      { name: 'Volcano Mocha', price: 5.99, desc: 'Dark cocoa, espresso, sea salt, chili dust', cal: 360 },
      { name: 'Mochi Donut · 4pk', price: 6.49, desc: 'Matcha, ube, mango, kona coffee glazes', cal: 540 },
      { name: 'Açaí Bowl', price: 8.99, desc: 'Frozen açaí, granola, pineapple, coconut, honey', cal: 480 },
      { name: 'Iced Hibiscus', price: 4.29, desc: 'Hibiscus tea, lime, agave, sparkling water', cal: 60 },
    ],
  },
  ww: {
    id: 'ww', name: 'Which Wich', short: 'WICH',
    tag: 'Mark up your bag. Hand it over. Lunch in four minutes.',
    bg: '#FFD200', ink: '#0E0E0E', accent: '#0E0E0E', soft: '#FFF8E0',
    icon: 'sandwich',
    story: "50+ sandwiches across 10 categories. Mark up your bag, hand it over, and a fresh-pressed wich is yours in under 4 minutes.",
    menu: [
      { name: 'The Wicked', price: 9.99, desc: 'Turkey, ham, roast beef, pepperoni, bacon, three cheeses', cal: 1080, featured: true },
      { name: 'Italian', price: 8.49, desc: 'Pepperoni, salami, ham, provolone, pepperoncini', cal: 880, hot: true },
      { name: 'Buffalo Chicken', price: 8.99, desc: 'Grilled chicken, buffalo sauce, blue cheese, celery', cal: 760 },
      { name: 'Black Bean Patty', price: 7.99, desc: 'House black bean, avocado, sprouts, chipotle', cal: 540 },
      { name: 'Wicked Bowlwich', price: 9.99, desc: 'No bread, all the fillings, fresh greens', cal: 620 },
      { name: 'Cookie + Wich combo', price: 11.49, desc: 'Any sandwich + chips + warm cookie + drink', cal: 1280 },
    ],
  },
  bm: {
    id: 'bm', name: 'Brew MAX', short: 'BREW',
    tag: 'Coffee, brewed to MAX.',
    bg: '#3B1F0F', ink: '#FFE9C0', accent: '#FFCC00', soft: '#FFF8E0',
    icon: 'coffee',
    story: "House-roasted, fresh-ground, every two hours. Drip, espresso, cold brew, frozen — served from sunrise to last call. Free with 8gal fill-up.",
    menu: [
      { name: 'Brew MAX Drip · 24oz', price: 2.49, desc: 'Texas pecan, dark roast, light roast, decaf', cal: 5, featured: true },
      { name: 'Cold Brew · 24oz', price: 3.99, desc: '16hr steeped, smooth chocolate finish', cal: 15 },
      { name: 'Vanilla Latte', price: 4.49, desc: 'Double shot, steamed milk, house vanilla', cal: 280 },
      { name: 'Iced Caramel Macchiato', price: 4.99, desc: 'Vanilla, espresso, caramel drizzle', cal: 320 },
      { name: 'Pecan Praline Latte', price: 5.49, desc: 'Texas pecan syrup, brown sugar, espresso', cal: 380 },
      { name: 'Brew Free with 8gal', price: 0, desc: 'Fill up. Free 16oz drip. Every time.', cal: 5, hot: true },
    ],
  },
  maxref: {
    id: 'maxref', name: 'Maximum Refreshment', short: 'MAX REF',
    tag: 'Fountain. Thirty-two flavors. Forty-four ounces.',
    bg: '#5C3A21', ink: '#F0E5D5', accent: '#C0C5CA', soft: '#E8E0CC',
    icon: 'cup',
    story: "The biggest fountain wall in any Texas convenience store. 32 flavor heads, mix-and-match, crushed pebble ice, free refills with the Wash Club card. Pull the lever — go MAX.",
    menu: [
      { name: 'MAX Cup · 44oz', price: 1.49, desc: 'Any flavor, any mix, free refill all day with rewards', cal: 280, featured: true },
      { name: 'MEGA MAX · 64oz', price: 1.99, desc: 'For when 44 just isn\'t enough', cal: 420, hot: true },
      { name: 'Mini MAX · 22oz', price: 0.99, desc: 'Quick fix on the way out', cal: 140 },
      { name: 'Mix-It Six', price: 2.49, desc: 'Six flavor pumps, one cup, dealer\'s choice', cal: 320 },
      { name: 'Pebble Ice add-on', price: 0.25, desc: 'Sonic-style nugget ice. Worth every nickel.', cal: 0 },
      { name: 'Refill (Wash Club)', price: 0, desc: 'Free with active membership. Forever.', cal: 280 },
    ],
  },
  chillmax: {
    id: 'chillmax', name: 'Chill To The MAX', short: 'CHILL',
    tag: 'The coldest beer cave in Texas.',
    bg: '#0A2540', ink: '#E5F2FF', accent: '#5BC8FA', soft: '#B8E5F8',
    icon: 'snowflake',
    story: "The biggest walk-in beer cave in the neighborhood. 38°F all day, 200+ SKUs of domestic, craft, import, hard seltzer, and Texas local. Walk in. Pick yours. Walk out cold.",
    menu: [
      { name: '12-pk Domestic', price: 14.99, desc: 'Bud, Coors, Miller — your call, ice cold', cal: null, featured: true },
      { name: 'Texas Craft 6-pk', price: 12.99, desc: 'Live Oak, St. Arnold, Karbach, Real Ale — rotating', cal: null },
      { name: 'Hard Seltzer 12-pk', price: 16.99, desc: 'White Claw, Truly, High Noon — mix-pack option', cal: null, hot: true },
      { name: 'Import Single', price: 2.99, desc: 'Modelo, Corona, Heineken, Stella — singles only', cal: null },
      { name: 'Tallboy 24oz', price: 3.49, desc: 'Coors, Modelo, Mich Ultra — out the door cold', cal: null },
      { name: 'Build-Your-6', price: 13.99, desc: 'Walk the cave, pick any six bottles or cans', cal: null },
    ],
  },
  tapit: {
    id: 'tapit', name: 'Tap.IT', short: 'TAP.IT',
    tag: 'Kombucha & Tractor flavor on tap.',
    bg: '#FF6A00', ink: '#FFFFFF', accent: '#FFB347', soft: '#FFE5CC',
    icon: 'flask',
    story: "On a mission to redefine your beverage journey. Real kombucha and Tractor Beverage Company flavor lines on draft — fresh, fizzy, sustainable. Tap your cup, walk out happy.",
    menu: [
      { name: 'Ginger Kombucha · 22oz', price: 3.99, desc: 'Live cultures, fresh ginger root, lightly tart', cal: 60, featured: true },
      { name: 'Hibiscus Tractor Soda', price: 2.99, desc: 'Tractor flavor, organic cane, real hibiscus', cal: 120 },
      { name: 'Berry Beet Booch', price: 4.49, desc: 'Strawberry-beet kombucha, raw, on draft', cal: 70, hot: true },
      { name: 'Lemon Lavender', price: 2.99, desc: 'Tractor sparkling, lavender essence, lemon zest', cal: 90 },
      { name: 'Tap Flight · 4×6oz', price: 5.49, desc: 'Pick any four pours, taste before you commit', cal: 240 },
      { name: 'Refill BYO', price: 1.99, desc: 'Bring your own bottle, save a buck. Save a planet.', cal: 0 },
    ],
  },
  fitmax: {
    id: 'fitmax', name: 'Fit MAX', short: 'FIT',
    tag: 'Better-for-you fuel.',
    bg: '#1F2937', ink: '#F9FAFB', accent: '#A3E635', soft: '#ECFCCB',
    icon: 'barbell',
    story: "Real food for real schedules. Protein boxes, overnight oats, cold-pressed juice — all under 600 cal, all under 8 minutes from cooler to counter.",
    menu: [
      { name: 'Power Box', price: 8.99, desc: '6oz grilled chicken, sweet potato, broccolini, sauce', cal: 540, featured: true },
      { name: 'Steel-Cut Oats', price: 4.49, desc: 'Almond butter, banana, chia, hemp', cal: 380 },
      { name: 'Avocado Toast Box', price: 5.99, desc: 'Multigrain, smashed avo, soft egg, everything', cal: 420 },
      { name: 'Cold-Pressed Green', price: 6.49, desc: 'Kale, cucumber, apple, ginger, lemon. 16oz.', cal: 110, hot: true },
      { name: 'Tuna Bowl', price: 9.49, desc: 'Wild ahi, brown rice, edamame, ponzu, avocado', cal: 580 },
      { name: 'Protein Shake · 20oz', price: 5.99, desc: '30g whey, banana, peanut butter, oat milk', cal: 380 },
    ],
  },
  flavormax: {
    id: 'flavormax', name: 'Flavor MAX', short: 'FLAVOR',
    tag: 'House sauces. Snack wall. All you.',
    bg: '#0E0E0E', ink: '#fff', accent: '#E2231A', soft: '#FF6B6B',
    icon: 'fire',
    story: "Six house-blended sauces (mild ranch to scorpion ghost), a 40-foot snack wall, and the only beef jerky bar in Travis County. Build your own gas-station charcuterie.",
    menu: [
      { name: 'Sauce 6-Pack', price: 9.99, desc: 'All six house sauces, 4oz each, refrigerator-ready', cal: 0, featured: true },
      { name: 'Build-A-Bag Snack Wall', price: 5.99, desc: '1lb mix from 60+ bins. Pay by weight.', cal: 0 },
      { name: 'Jerky Bar Quarter', price: 7.49, desc: '4oz of any house jerky — peppered, teriyaki, ghost', cal: 320, hot: true },
      { name: 'Trail Mix MAX', price: 4.49, desc: 'House blend — Texas pecan, cocoa nib, dried mango', cal: 280 },
      { name: 'Hot Crisp Tray', price: 6.49, desc: 'Three crisp varieties + ranch flight', cal: 540 },
      { name: 'Chamoy Gummy Cup', price: 4.99, desc: 'Sour gummies, chamoy, tajín, tamarind candy', cal: 420 },
    ],
  },
  minis: {
    id: 'minis', name: 'minis Bakery', short: 'minis',
    tag: 'Baked daily. In-house.',
    bg: '#F4E1C1', ink: '#3B2A1A', accent: '#C8102E', soft: '#FFF8E0',
    icon: 'coffee',
    story: "Pan dulce, kolaches, croissants, cinnamon rolls — pulled out of the oven before dawn, gone by lunch. The bakery your tía would respect.",
    menu: [
      { name: 'Klobasnek (Sausage Kolache)', price: 2.49, desc: 'Smoked sausage, jalapeño, pepper jack, soft pillow dough', cal: 380, featured: true },
      { name: 'Concha · pink', price: 1.79, desc: 'Vanilla shell, sweet bun, the way abuela makes it', cal: 320 },
      { name: 'Cinnamon Roll MAX', price: 3.49, desc: 'Texas-sized swirl, cream cheese frost, warmed on demand', cal: 540, hot: true },
      { name: 'Almond Croissant', price: 3.79, desc: 'Twice-baked, almond cream, crunchy top, powdered', cal: 420 },
      { name: 'Cuernito (ham + cheese)', price: 3.49, desc: 'Mexican-style horn pastry, ham, queso oaxaca', cal: 380 },
      { name: 'Box of 6', price: 12.99, desc: 'Mix and match anything in the case', cal: 1800 },
    ],
  },
};

// Big interactive header for brand
function BrandHero({ b, scrollY }) {
  return (
    <section style={{
      background: b.bg, color: b.ink,
      paddingBlock: '120px 80px',
      position: 'relative', overflow: 'hidden',
      transition: 'background-color .6s, color .6s',
    }}>
      {/* Giant short brand bg */}
      <div style={{
        position: 'absolute',
        top: '50%', left: '50%',
        transform: `translate(-50%, -50%) translateY(${scrollY * 0.15}px)`,
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(280px, 36vw, 600px)',
        color: 'transparent',
        WebkitTextStroke: `1.5px ${b.accent}`,
        opacity: 0.18,
        letterSpacing: '-0.04em',
        whiteSpace: 'nowrap',
        pointerEvents: 'none',
      }}>{b.short}</div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <span className="eyebrow" style={{ color: b.accent }}>A Minimax house brand</span>
            <h1 className="display" style={{ fontSize: 'clamp(72px, 9vw, 144px)', margin: '20px 0', color: b.ink }}>
              {b.name}
            </h1>
            <p className="serif" style={{ fontSize: 28, color: b.accent, margin: 0, marginBottom: 24 }}>"{b.tag}"</p>
            <p style={{ fontSize: 18, color: b.ink, opacity: 0.85, lineHeight: 1.6, maxWidth: 480, margin: 0 }}>
              {b.story}
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', height: 420 }}>
            <div style={{
              width: 320, height: 320,
              borderRadius: '50%',
              background: b.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: b.bg,
              transform: `rotate(${scrollY * 0.05}deg)`,
              transition: 'transform .15s linear',
              boxShadow: `0 30px 80px -20px ${b.accent}80`,
            }}>
              <Icon name={b.icon} size={180} stroke={1.4}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MenuGrid({ b, onAdd }) {
  return (
    <section style={{ background: b.bg === '#1A1410' || b.bg === '#2A0A3D' ? 'var(--bg)' : 'var(--bg)', paddingBlock: 80 }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <span className="eyebrow">Menu · {b.short}</span>
            <h3 className="display" style={{ fontSize: 64, margin: '16px 0 0', color: 'var(--text)' }}>Menu preview</h3>
          </div>
          <span style={{ color: 'var(--text-2)', fontSize: 14 }}>Online ordering · Coming Soon</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {b.menu.map((item, i) => (
            <div key={i} className="card" style={{
              gridColumn: item.featured ? 'span 2' : 'span 1',
              padding: 28,
              background: item.featured ? b.bg : 'var(--surface)',
              color: item.featured ? b.ink : 'var(--text)',
              borderColor: item.featured ? b.accent : 'var(--border)',
              display: 'flex', flexDirection: 'column',
              minHeight: 260,
              position: 'relative',
              overflow: 'hidden',
            }}>
              {item.featured && (
                <div style={{
                  position: 'absolute', top: 0, right: 0,
                  width: 200, height: 200,
                  background: `radial-gradient(circle at top right, ${b.accent}40, transparent 70%)`,
                  pointerEvents: 'none',
                }}/>
              )}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: item.featured ? 44 : 28, lineHeight: 1 }}>
                  {item.name}
                </h4>
                {item.hot && <span style={{
                  background: b.accent, color: b.bg,
                  padding: '4px 10px', borderRadius: 999,
                  fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em',
                }}>🔥 HOT</span>}
              </div>
              <p style={{ fontSize: 14, opacity: 0.75, lineHeight: 1.5, marginTop: 12, flex: 1 }}>{item.desc}</p>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                marginTop: 20, paddingTop: 16,
                borderTop: `1px solid ${item.featured ? 'rgba(255,255,255,0.15)' : 'var(--border)'}`,
              }}>
                <div>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 32 }}>${item.price}</span>
                  <span style={{ fontSize: 11, opacity: 0.6, fontFamily: 'var(--font-mono)', marginLeft: 8 }}>{item.cal} CAL</span>
                </div>
                <span style={{
                  padding: '6px 12px', borderRadius: 999,
                  fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em',
                  textTransform: 'uppercase', fontWeight: 600,
                  background: item.featured ? 'rgba(255,255,255,0.15)' : 'var(--surface-2)',
                  color: item.featured ? b.ink : 'var(--text-3)',
                  border: '1px solid ' + (item.featured ? 'rgba(255,255,255,0.25)' : 'var(--border)'),
                  cursor: 'default',
                }}>Soon</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BrandsPage() {
  const initialBrand = (function(){
    const m = (window.location.hash || '').match(/[?&]b=([a-z]+)/i);
    if (m && BRAND_DATA[m[1]]) return m[1];
    return 'fb';
  })();
  const [activeBrand, setActiveBrand] = useS_b(initialBrand);
  const [cart, setCart] = useS_b([]);
  const [scrollY, setScrollY] = useS_b(0);
  useE_b(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const b = BRAND_DATA[activeBrand];
  const onAdd = (item) => setCart(c => [...c, item]);

  return (
    <Page>
      {/* Brand selector tabs */}
      <div style={{
        position: 'sticky', top: 70, zIndex: 50,
        background: 'color-mix(in oklab, var(--bg) 88%, transparent)',
        backdropFilter: 'blur(20px)',
        borderBottom: '1px solid var(--border)',
        padding: '16px 0',
      }}>
        <div className="container" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          {Object.values(BRAND_DATA).map(br => (
            <button key={br.id} onClick={() => setActiveBrand(br.id)}
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 18px',
                borderRadius: 999,
                border: `1px solid ${activeBrand === br.id ? br.bg : 'var(--border)'}`,
                background: activeBrand === br.id ? br.bg : 'transparent',
                color: activeBrand === br.id ? br.ink : 'var(--text)',
                fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.02em',
                textTransform: 'none', cursor: 'pointer', transition: 'all .3s',
              }}>
              <Icon name={br.icon} size={16}/>
              {br.name}
            </button>
          ))}
        </div>
      </div>

      <BrandHero b={b} scrollY={scrollY}/>
      <MenuGrid b={b} onAdd={onAdd}/>

      {/* Why our brands */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <SectionHeader eyebrow="Why house brands?" title={<>Made by us. <span className="serif" style={{ color: 'var(--mm-red)' }}>Made for you.</span></>}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { t: 'One kitchen. Four menus.', d: 'Every Minimax houses a smart kitchen running all four brands from one footprint, so you never wait twice.' },
              { t: 'Real food. Real fast.', d: 'Avg ticket time 4:32. Fresh-fried, never lamp-warmed. Cooked to order, even at 3am.' },
              { t: 'Loyalty across all brands', d: 'Earn Max Points on every receipt — cross-redeem for chicken, coffee, fuel, or wash.' },
            ].map((it, i) => (
              <Reveal key={i} delay={i*100}>
                <div className="card" style={{ height: '100%' }}>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 1, margin: 0 }}>{it.t}</h4>
                  <p style={{ color: 'var(--text-2)', lineHeight: 1.6, marginTop: 16 }}>{it.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Floating cart */}
      {cart.length > 0 && (
        <div style={{
          position: 'fixed', bottom: 24, right: 24, zIndex: 80,
          background: b.bg, color: b.ink,
          borderRadius: 'var(--r-lg)', padding: 16,
          boxShadow: 'var(--shadow-lg)',
          display: 'flex', alignItems: 'center', gap: 16,
          minWidth: 280,
          animation: 'cartIn .4s var(--ease-spring)',
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: b.accent, color: b.bg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="cart" size={18}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{cart.length} items · ${cart.reduce((s,i)=>s+i.price,0).toFixed(2)}</div>
            <div style={{ fontSize: 11, opacity: 0.7, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Ready in 8 min</div>
          </div>
          <button style={{
            background: b.accent, color: b.bg, border: 0,
            padding: '10px 14px', borderRadius: 999, fontWeight: 600,
            fontSize: 13, cursor: 'pointer',
          }}>Checkout →</button>
        </div>
      )}
      <style>{`@keyframes cartIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </Page>
  );
}

Object.assign(window, { BrandsPage });
