/* Pages: Home, Menu, Bulk, About, Contact */

/* ============== HOME ============== */
function HomePage({ tweaks, addToCart, setPage }) {
  const { heroLayout, dark, accent, cardStyle } = tweaks;
  const featured = FEATURED_IDS.map(id => MENU.mains.find(m => m.id === id)).filter(Boolean);
  return (
    <React.Fragment>
      <Hero tweaks={tweaks} setPage={setPage} />
      <SignaturesStrip tweaks={tweaks} setPage={setPage} />
      <TodaysSpecials items={featured} tweaks={tweaks} addToCart={addToCart} setPage={setPage} />
      <HowItWorks tweaks={tweaks} />
      <KitchenGallery tweaks={tweaks} />
      <BulkCallout tweaks={tweaks} setPage={setPage} />
      <Testimonials tweaks={tweaks} />
      <FooterCTA tweaks={tweaks} setPage={setPage} />
    </React.Fragment>
  );
}

/* ----- Hero with three layout variants ----- */
function Hero({ tweaks, setPage }) {
  const { heroLayout, dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const mute = dark ? 'rgba(247,238,219,0.7)' : '#6b6253';

  if (heroLayout === 'menuCard') {
    /* Layout B: an editorial "menu page" hero — pulls directly from the brand menu graphics vibe */
    return (
      <section style={{ padding: '60px 0 40px' }}>
        <div className="dp-shell" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent, marginBottom: 22 }}>
              <span style={{ display: 'inline-block', width: 28, height: 1, background: accent, verticalAlign: 'middle', marginRight: 10 }}></span>
              Lagos · since 2019
            </div>
            <h1 style={{
              fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
              fontSize: 'clamp(48px, 7.2vw, 108px)', lineHeight: 0.95, letterSpacing: '-0.035em',
              color: fg, margin: 0, textWrap: 'balance',
            }}>
              Home cooking,<br />
              <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400, color: accent }}>delivered.</span>
            </h1>
            <p style={{ color: mute, fontSize: 19, lineHeight: 1.5, maxWidth: 480, marginTop: 26 }}>
              Jollof that smokes the right way. Soups your grandmother would nod at. Order ahead or pick up tonight.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <Btn variant="orange" size="lg" onClick={()=>setPage('menu')}>Order food now →</Btn>
              <Btn variant={dark ? 'ghostDark' : 'ghost'} size="lg" onClick={()=>setPage('bulk')}>Bulk & catering</Btn>
            </div>
            <div style={{ display: 'flex', gap: 28, marginTop: 38, color: mute, fontSize: 13 }}>
              <Stat n="14k" l="meals served" mute={mute} fg={fg} />
              <Stat n="60min" l="avg delivery" mute={mute} fg={fg} />
              <Stat n="4.9★" l="across Lagos" mute={mute} fg={fg} />
            </div>
          </div>
          <MenuCardHero tweaks={tweaks} />
        </div>
      </section>
    );
  }

  if (heroLayout === 'gallery') {
    /* Layout C: a quilted gallery */
    return (
      <section style={{ padding: '56px 0 40px' }}>
        <div className="dp-shell">
          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent, marginBottom: 18 }}>
              · for the love of food ·
            </div>
            <h1 style={{
              fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
              fontSize: 'clamp(48px, 8vw, 124px)', lineHeight: 0.94, letterSpacing: '-0.035em',
              color: fg, margin: 0, textWrap: 'balance',
            }}>
              Naija food,
              <br /><span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400 }}>cooked with </span>
              <span style={{ color: accent }}>love.</span>
            </h1>
            <p style={{ color: mute, fontSize: 19, lineHeight: 1.5, maxWidth: 560, margin: '24px auto 0' }}>
              From smoky party jollof to slow-simmered peppersoup — Delishpot is the home kitchen you order from on the days you can't cook.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Btn variant="orange" size="lg" onClick={()=>setPage('menu')}>Order food now →</Btn>
              <Btn variant={dark ? 'ghostDark' : 'ghost'} size="lg" onClick={()=>setPage('bulk')}>Cater an event</Btn>
            </div>
          </div>
          <div className="dp-hero-gallery" style={{
            display: 'grid', gap: 14, marginTop: 56,
            gridTemplateColumns: '1.2fr 1fr 1fr 1.2fr',
            gridAutoRows: '120px',
          }}>
            <div style={{ gridRow: 'span 2' }}><FoodPhoto imageId="friedRiceChicken" ratio="auto" radius={16} /></div>
            <div><FoodPhoto imageId="pepperedFish" ratio="auto" radius={16} /></div>
            <div style={{ gridRow: 'span 2' }}><FoodPhoto imageId="jollofSpaghetti" ratio="auto" radius={16} /></div>
            <div style={{ gridRow: 'span 2' }}><FoodPhoto imageId="okraSwallow" ratio="auto" radius={16} /></div>
            <div><FoodPhoto imageId="boiledYam" ratio="auto" radius={16} /></div>
          </div>
        </div>
      </section>
    );
  }

  /* DEFAULT — Layout A: split with single big photo */
  return (
    <section style={{ padding: '64px 0 40px' }}>
      <div className="dp-shell" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent, marginBottom: 22 }}>
            <span style={{ display: 'inline-block', width: 28, height: 1, background: accent, verticalAlign: 'middle', marginRight: 10 }}></span>
            Now delivering across Lagos
          </div>
          <h1 style={{
            fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
            fontSize: 'clamp(48px, 7.5vw, 112px)', lineHeight: 0.95, letterSpacing: '-0.035em',
            color: fg, margin: 0, textWrap: 'balance',
          }}>
            A pot of <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400, color: accent }}>good</span><br />
            on every table.
          </h1>
          <p style={{ color: mute, fontSize: 19, lineHeight: 1.55, maxWidth: 480, marginTop: 26 }}>
            Order home-style Nigerian meals, weekday lunch boxes, or full catering trays for the people you love. We cook fresh each morning.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <Btn variant="orange" size="lg" onClick={()=>setPage('menu')}>Order food now →</Btn>
            <Btn variant={dark ? 'ghostDark' : 'ghost'} size="lg" onClick={()=>setPage('bulk')}>See bulk menu</Btn>
          </div>
          <div style={{ display: 'flex', gap: 32, marginTop: 38 }}>
            <Stat n="14k+" l="meals served" mute={mute} fg={fg} />
            <Stat n="60 min" l="avg delivery" mute={mute} fg={fg} />
            <Stat n="4.9 ★" l="across 1.2k reviews" mute={mute} fg={fg} />
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <FoodPhoto imageId="specialFriedRice" radius={26} ratio="4/5" position="center" />
          {/* floating chips */}
          <div style={{
            position: 'absolute', bottom: 18, left: -16, padding: '14px 18px',
            borderRadius: 18, background: dark ? '#073c3a' : '#fbf5e6',
            border: `1px solid ${dark ? 'rgba(247,238,219,0.10)' : 'rgba(14,110,106,0.12)'}`,
            boxShadow: '0 14px 30px rgba(0,0,0,0.10)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 36, height: 36, borderRadius: '50%', background: accent, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>★</span>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14, color: fg, fontFamily: '"Bricolage Grotesque", system-ui' }}>Chef's pot today</div>
              <div style={{ fontSize: 12, color: mute }}>Special Fried Rice + Chicken</div>
            </div>
          </div>
          <div style={{
            position: 'absolute', top: 24, right: -10, padding: '12px 14px',
            borderRadius: 14, background: accent, color: '#fff',
            transform: 'rotate(4deg)',
            fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 16, fontWeight: 500,
            boxShadow: '0 10px 24px rgba(232,122,31,0.30)',
          }}>"for the love of food"</div>
        </div>
      </div>
    </section>
  );
}

function MenuCardHero({ tweaks }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const surface = dark ? '#0a4a47' : '#fbf5e6';
  const border = dark ? 'rgba(247,238,219,0.10)' : 'rgba(14,110,106,0.10)';
  const mute = dark ? 'rgba(247,238,219,0.65)' : '#6b6253';
  const sample = [
    { name: 'Jollof Rice & Chicken', price: 4000 },
    { name: 'Ofada Rice & Sauce', price: 5000 },
    { name: 'Special Fried Rice', price: 7000 },
    { name: 'Chicken Peppersoup', price: 10000 },
  ];
  return (
    <div style={{ position: 'relative', padding: 28, borderRadius: 28, background: surface, border: `1px solid ${border}`, overflow: 'hidden' }}>
      {/* big vertical MENU. like the brand cards */}
      <div style={{
        position: 'absolute', right: -8, top: 16, bottom: 16,
        fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 800,
        writingMode: 'vertical-rl', textOrientation: 'mixed',
        fontSize: 'clamp(72px, 9vw, 128px)', lineHeight: 0.85,
        color: fg, letterSpacing: '-0.04em',
        opacity: 0.95,
      }}>MENU<span style={{ color: accent }}>.</span></div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent }}>Today's specials</div>
      <div style={{ marginTop: 16, paddingRight: 80 }}>
        {sample.map((s, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: i < sample.length - 1 ? `1px dashed ${border}` : 'none' }}>
            <span style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 500, fontSize: 17, color: fg, letterSpacing: '-0.005em' }}>{s.name}</span>
            <span style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 600, fontSize: 15, color: fg }}>{ngn(s.price)}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 20, paddingTop: 18, paddingRight: 80, borderTop: `1px solid ${border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: mute, fontStyle: 'italic', fontFamily: '"Fraunces", serif' }}>
        <span>all prices exclusive of packs & delivery</span>
        <LogoMark color={fg} dot={accent} size={28} />
      </div>
    </div>
  );
}

function Stat({ n, l, mute, fg }) {
  return (
    <div>
      <div style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 24, color: fg, letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 12, color: mute, marginTop: 2 }}>{l}</div>
    </div>
  );
}

function KitchenGallery({ tweaks }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const gallery = ['okraSwallow', 'yamFishOverhead', 'eggSauce', 'chickenSandwich'];
  return (
    <section style={{ padding: '40px 0' }}>
      <div className="dp-shell">
        <SectionHeader
          kicker="Fresh from the kitchen"
          title="From soup to lunch plates."
          italicWord="lunch"
          sub="Real Delishpot dishes from the daily menu and bulk kitchen."
          dark={dark} accent={accent}
        />
        <div className="dp-grid-4" style={{ marginTop: 30 }}>
          {gallery.map((imageId, index) => (
            <FoodPhoto key={imageId} imageId={imageId} ratio={index === 1 ? '3/4' : '4/5'} radius={18} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Marquee strip ----- */
function SignaturesStrip({ tweaks, setPage }) {
  const { dark, accent } = tweaks;
  const items = ['Jollof Rice', 'Egusi Soup', 'Ofada Rice', 'Peppersoup', 'Efo-Riro', 'Ofada Sauce', 'Special Fried Rice', 'Chicken Shawarma', 'Edikaikong', 'Afang Soup'];
  return (
    <section style={{
      borderTop: `1px solid ${dark ? 'rgba(247,238,219,0.08)' : 'rgba(14,110,106,0.10)'}`,
      borderBottom: `1px solid ${dark ? 'rgba(247,238,219,0.08)' : 'rgba(14,110,106,0.10)'}`,
      margin: '24px 0 0', padding: '20px 0', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', gap: 36, animation: 'dp-marquee 36s linear infinite', whiteSpace: 'nowrap' }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} style={{
            fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 600,
            fontSize: 'clamp(24px, 2.4vw, 32px)', letterSpacing: '-0.02em',
            color: dark ? '#f7eedb' : '#0e6e6a',
            display: 'inline-flex', alignItems: 'center', gap: 36,
          }}>{it}<span style={{ width: 8, height: 8, borderRadius: '50%', background: accent, display: 'inline-block' }}></span></span>
        ))}
      </div>
    </section>
  );
}

/* ----- Today's specials ----- */
function TodaysSpecials({ items, tweaks, addToCart, setPage }) {
  const { dark, accent, cardStyle } = tweaks;
  return (
    <section style={{ padding: '80px 0 40px' }}>
      <div className="dp-shell">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap', marginBottom: 36 }}>
          <SectionHeader
            kicker="On the pot today"
            title="Today's specials"
            italicWord="specials"
            sub="Cooked this morning, finished to order. Available while the pot is hot."
            dark={dark} accent={accent}
          />
          <Btn variant={dark ? 'ghostDark' : 'ghost'} onClick={()=>setPage('menu')}>See full menu →</Btn>
        </div>
        <div className="dp-grid-4">
          {items.map(it => <DishCard key={it.id} item={it} cardStyle={cardStyle} dark={dark} accent={accent} onAdd={addToCart} />)}
        </div>
      </div>
    </section>
  );
}

/* ----- How it works ----- */
function HowItWorks({ tweaks }) {
  const { dark, accent } = tweaks;
  const steps = [
    { n: '01', t: 'Pick your pot', d: 'Build a single meal, a weekly meal plan, or a full bulk tray for an event.' },
    { n: '02', t: 'We cook fresh', d: 'Every order is made the same morning. Nothing comes out of a freezer.' },
    { n: '03', t: 'Hot at your door', d: 'Riders across the Mainland and Island. Hot in 60 minutes for ASAP orders.' },
  ];
  return (
    <section style={{ padding: '80px 0' }}>
      <div className="dp-shell">
        <SectionHeader
          kicker="How it works"
          title="Three steps from craving to spoon."
          italicWord="craving"
          align="center"
          dark={dark} accent={accent}
        />
        <div className="dp-grid-3" style={{ marginTop: 48 }}>
          {steps.map(s => (
            <div key={s.n} style={{
              padding: 28, borderRadius: 22,
              background: dark ? 'rgba(247,238,219,0.04)' : '#fbf5e6',
              border: `1px solid ${dark ? 'rgba(247,238,219,0.08)' : 'rgba(14,110,106,0.10)'}`,
            }}>
              <div style={{
                fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
                fontSize: 56, color: accent, letterSpacing: '-0.04em', lineHeight: 1,
              }}>{s.n}</div>
              <h4 style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 22, color: dark ? '#f7eedb' : '#0e6e6a', marginTop: 16, marginBottom: 10, letterSpacing: '-0.01em' }}>{s.t}</h4>
              <p style={{ color: dark ? 'rgba(247,238,219,0.65)' : '#6b6253', fontSize: 14.5, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Bulk callout ----- */
function BulkCallout({ tweaks, setPage }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const surface = dark ? '#0a4a47' : '#0e6e6a';
  const onSurface = '#f7eedb';
  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="dp-shell">
        <div className="dp-bulk-cta" style={{
          background: surface, color: onSurface, borderRadius: 32, padding: 'clamp(36px, 5vw, 64px)',
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 220, height: 220, borderRadius: '50%', background: accent, opacity: 0.18 }}></div>
          <div style={{ position: 'absolute', bottom: -30, right: 120, width: 60, height: 60, borderRadius: '50%', background: accent }}></div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>Bulk & catering</div>
            <h3 style={{
              fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
              fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.02, letterSpacing: '-0.025em',
              margin: 0, color: onSurface, textWrap: 'balance',
            }}>
              Feeding <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400 }}>fifty</span> tonight?<br />
              The pot scales.
            </h3>
            <p style={{ color: 'rgba(247,238,219,0.7)', fontSize: 17, lineHeight: 1.5, marginTop: 18, maxWidth: 480 }}>
              Trays of jollof, soups by the liter, and full grilled birds. Pre-order a day ahead and we'll have it on your table at the time you choose.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <Btn variant="orange" size="lg" onClick={()=>setPage('bulk')}>See bulk menu →</Btn>
              <Btn variant="ghostDark" size="lg" onClick={()=>setPage('contact')}>Quote for an event</Btn>
            </div>
          </div>
          <div style={{
            background: 'rgba(247,238,219,0.06)', borderRadius: 22, padding: 24,
            border: '1px solid rgba(247,238,219,0.10)', position: 'relative',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent, marginBottom: 14 }}>From the bulk menu</div>
            {MENU.bulk.slice(0, 5).map((b, i) => (
              <div key={b.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '10px 0', borderBottom: i < 4 ? '1px dashed rgba(247,238,219,0.12)' : 'none' }}>
                <span style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 500, fontSize: 16, letterSpacing: '-0.005em' }}>{b.name}</span>
                <span style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 600, fontSize: 16 }}>{ngn(b.price)}</span>
              </div>
            ))}
            <div style={{ marginTop: 14, fontSize: 12, color: 'rgba(247,238,219,0.55)', fontFamily: '"Fraunces", serif', fontStyle: 'italic' }}>
              All bulk orders should be pre-ordered a day before.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Testimonials ----- */
function Testimonials({ tweaks }) {
  const { dark, accent } = tweaks;
  const reviews = [
    { q: "The jollof tastes exactly like my grandma's in Ibadan. I cried a little.", a: 'Tobi A.', p: 'Lekki' },
    { q: "Catered our daughter's introduction — 80 guests, not a single complaint. The Edikaikong was the talk.", a: 'Mr. & Mrs. Eze', p: 'Ikoyi' },
    { q: "I order the special fried rice every Friday now. The prawns are not playing.", a: 'Adaeze O.', p: 'Yaba' },
  ];
  return (
    <section style={{ padding: '80px 0' }}>
      <div className="dp-shell">
        <SectionHeader
          kicker="Word of mouth"
          title="What Lagos says about the pot."
          italicWord="pot"
          dark={dark} accent={accent}
        />
        <div className="dp-grid-3" style={{ marginTop: 40 }}>
          {reviews.map((r, i) => (
            <figure key={i} style={{
              margin: 0, padding: 32, borderRadius: 22,
              background: dark ? 'rgba(247,238,219,0.04)' : '#fbf5e6',
              border: `1px solid ${dark ? 'rgba(247,238,219,0.08)' : 'rgba(14,110,106,0.10)'}`,
            }}>
              <div style={{ color: accent, fontSize: 36, fontFamily: '"Fraunces", serif', lineHeight: 0.6 }}>"</div>
              <blockquote style={{ margin: '14px 0 24px', fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 500, fontSize: 19, lineHeight: 1.4, letterSpacing: '-0.01em', color: dark ? '#f7eedb' : '#0e6e6a', textWrap: 'pretty' }}>
                {r.q}
              </blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 36, height: 36, borderRadius: '50%', background: accent, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>{r.a[0]}</span>
                <span>
                  <div style={{ fontSize: 14, fontWeight: 600, color: dark ? '#f7eedb' : '#0e6e6a' }}>{r.a}</div>
                  <div style={{ fontSize: 12, color: dark ? 'rgba(247,238,219,0.6)' : '#6b6253' }}>{r.p}</div>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function FooterCTA({ tweaks, setPage }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const mute = dark ? 'rgba(247,238,219,0.7)' : '#6b6253';
  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="dp-shell" style={{ textAlign: 'center' }}>
        <h3 style={{
          fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
          fontSize: 'clamp(36px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.03em',
          color: fg, margin: 0,
        }}>
          What's <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400, color: accent }}>cooking</span> tonight?
        </h3>
        <p style={{ color: mute, marginTop: 18, fontSize: 17, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto' }}>
          One spoonful at a time, we're feeding Lagos. Come join the table.
        </p>
        <div style={{ display: 'inline-flex', gap: 12, marginTop: 28, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Btn variant="orange" size="lg" onClick={()=>setPage('menu')}>Browse the menu</Btn>
          <Btn variant={dark ? 'ghostDark' : 'ghost'} size="lg" onClick={()=>setPage('contact')}>Talk to us</Btn>
        </div>
      </div>
    </section>
  );
}

/* ============== MENU ============== */
function MenuPage({ tweaks, addToCart, setPage }) {
  const { dark, accent, cardStyle } = tweaks;
  const [cat, setCat] = React.useState('mains');
  const [query, setQuery] = React.useState('');
  const items = MENU[cat] || [];
  const filtered = query ? items.filter(i => i.name.toLowerCase().includes(query.toLowerCase())) : items;
  return (
    <section style={{ padding: '40px 0 60px' }}>
      <div className="dp-shell">
        <SectionHeader
          kicker="The menu"
          title="Pick your pot."
          italicWord="pot"
          sub="Cooked fresh every morning. Sides and extras are sized to share."
          dark={dark} accent={accent}
        />

        <div style={{ display: 'flex', gap: 16, justifyContent: 'space-between', alignItems: 'center', marginTop: 36, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {CATEGORIES.map(c => (
              <button key={c.id} onClick={()=>setCat(c.id)} style={{
                background: cat === c.id ? (dark ? '#f7eedb' : '#0e6e6a') : 'transparent',
                color: cat === c.id ? (dark ? '#073c3a' : '#f7eedb') : (dark ? '#f7eedb' : '#0e6e6a'),
                border: `1px solid ${cat === c.id ? 'transparent' : (dark ? 'rgba(247,238,219,0.18)' : 'rgba(14,110,106,0.18)')}`,
                padding: '12px 22px', borderRadius: 999, cursor: 'pointer',
                fontSize: 14, fontWeight: 600, fontFamily: '"Plus Jakarta Sans", system-ui',
                display: 'inline-flex', gap: 8, alignItems: 'center',
              }}>
                {c.label}
                <span style={{ fontSize: 11, opacity: 0.7 }}>{c.count}</span>
              </button>
            ))}
          </div>
          <div style={{
            position: 'relative',
            background: dark ? 'rgba(247,238,219,0.06)' : '#fbf5e6',
            border: `1px solid ${dark ? 'rgba(247,238,219,0.10)' : 'rgba(14,110,106,0.10)'}`,
            borderRadius: 999, padding: '10px 18px 10px 42px', minWidth: 260,
          }}>
            <span style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', fontSize: 14, color: dark ? 'rgba(247,238,219,0.5)' : '#6b6253' }}>⌕</span>
            <input value={query} onChange={(e)=>setQuery(e.target.value)} placeholder="Search the menu…" style={{
              background: 'transparent', border: 'none', outline: 'none',
              color: dark ? '#f7eedb' : '#0e6e6a', fontSize: 14, width: '100%',
              fontFamily: '"Plus Jakarta Sans", system-ui',
            }} />
          </div>
        </div>

        <div style={{ marginTop: 28 }}>
          {cardStyle === 'editorial' ? (
            <div>
              {filtered.map(it => <DishCard key={it.id} item={it} cardStyle="editorial" dark={dark} accent={accent} onAdd={addToCart} />)}
              {filtered.length === 0 && <EmptyMsg dark={dark} mute={dark ? 'rgba(247,238,219,0.6)' : '#6b6253'} />}
            </div>
          ) : (
            <div className="dp-grid-4">
              {filtered.map(it => <DishCard key={it.id} item={it} cardStyle="photo" dark={dark} accent={accent} onAdd={addToCart} />)}
              {filtered.length === 0 && <EmptyMsg dark={dark} mute={dark ? 'rgba(247,238,219,0.6)' : '#6b6253'} />}
            </div>
          )}
        </div>

        <div style={{
          marginTop: 60, padding: 24, borderRadius: 18,
          background: dark ? 'rgba(232,122,31,0.10)' : 'rgba(232,122,31,0.08)',
          border: `1px dashed ${accent}66`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap',
        }}>
          <div style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 17, color: dark ? '#f7eedb' : '#0e6e6a' }}>
            All prices are exclusive of packs and delivery.
          </div>
          <div style={{ fontSize: 13, color: dark ? 'rgba(247,238,219,0.7)' : '#6b6253' }}>
            Packs and delivery are quoted with your order.
          </div>
        </div>
      </div>
    </section>
  );
}

function EmptyMsg({ dark, mute }) {
  return (
    <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: 60, color: mute }}>
      <div style={{ fontSize: 36, opacity: 0.4 }}>🍲</div>
      <div style={{ marginTop: 8, fontSize: 15 }}>Nothing in the pot matches that.</div>
    </div>
  );
}

/* ============== BULK ============== */
function BulkPage({ tweaks, setPage }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const mute = dark ? 'rgba(247,238,219,0.7)' : '#6b6253';
  const surface = dark ? 'rgba(247,238,219,0.04)' : '#fbf5e6';
  const border = dark ? 'rgba(247,238,219,0.08)' : 'rgba(14,110,106,0.10)';
  return (
    <section style={{ padding: '40px 0 60px' }}>
      <div className="dp-shell">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'end' }}>
          <SectionHeader
            kicker="Bulk & catering"
            title="Trays, liters, and full birds."
            italicWord="liters"
            sub="Pre-order a day before. Share the size of your order and Delishpot will confirm packs, delivery, and timing."
            dark={dark} accent={accent}
          />
          <div style={{
            padding: 18, borderRadius: 18, background: surface, border: `1px solid ${border}`,
            fontFamily: '"Fraunces", serif', fontStyle: 'italic', color: fg, fontSize: 16,
          }}>
            "all bulk orders should be pre-ordered a day before."
            <div style={{ marginTop: 8, fontFamily: '"Plus Jakarta Sans", system-ui', fontStyle: 'normal', color: mute, fontSize: 13 }}>
              Call <span style={{ color: fg, fontWeight: 700 }}>0704 200 4295</span> for quotes over 100 guests.
            </div>
          </div>
        </div>

        <div className="dp-grid-3" style={{ marginTop: 40 }}>
          {MENU.bulk.map(b => (
            <div key={b.id} style={{
              padding: 24, borderRadius: 22, background: surface, border: `1px solid ${border}`,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              {b.imageId && <FoodPhoto imageId={b.imageId} ratio="16/10" radius={14} />}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                <h4 style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 600, fontSize: 22, color: fg, margin: 0, letterSpacing: '-0.01em', textWrap: 'balance' }}>{b.name}</h4>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: accent, marginTop: 8 }}></span>
              </div>
              <div style={{ color: mute, fontSize: 13 }}>{b.serves}</div>
              <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, borderTop: `1px dashed ${border}` }}>
                <span style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 22, color: fg, letterSpacing: '-0.01em' }}>{ngn(b.price)}</span>
                <Btn size="sm" variant="orange" onClick={()=>setPage('contact')}>Request quote</Btn>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 60, padding: 'clamp(28px, 4vw, 48px)', borderRadius: 28,
          background: dark ? 'rgba(14,110,106,0.30)' : '#0e6e6a',
          color: '#f7eedb',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28,
        }} className="dp-bulk-meta">
          <MetaTile k="Lead time" v="24 hours" sub="48 hours for groups over 100" />
          <MetaTile k="Service area" v="All of Lagos" sub="Outside Lagos by arrangement" />
          <MetaTile k="Tasting menu" v="By appointment" sub="Free sample tray for weddings" />
        </div>
      </div>
    </section>
  );
}

function MetaTile({ k, v, sub }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#e87a1f', marginBottom: 10 }}>{k}</div>
      <div style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 30, letterSpacing: '-0.01em', color: '#f7eedb' }}>{v}</div>
      <div style={{ fontSize: 13, color: 'rgba(247,238,219,0.65)', marginTop: 6 }}>{sub}</div>
    </div>
  );
}

/* ============== ABOUT ============== */
function AboutPage({ tweaks, setPage }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const mute = dark ? 'rgba(247,238,219,0.7)' : '#6b6253';
  const surface = dark ? 'rgba(247,238,219,0.04)' : '#fbf5e6';
  const border = dark ? 'rgba(247,238,219,0.08)' : 'rgba(14,110,106,0.10)';
  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="dp-shell">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' }} className="dp-about-hero">
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent, marginBottom: 18 }}>Our story</div>
            <h1 style={{
              fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700,
              fontSize: 'clamp(40px, 6vw, 92px)', lineHeight: 0.98, letterSpacing: '-0.03em',
              color: fg, margin: 0, textWrap: 'balance',
            }}>
              A kitchen built on <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400, color: accent }}>memory</span>.
            </h1>
            <p style={{ color: mute, fontSize: 18, lineHeight: 1.6, marginTop: 22, maxWidth: 540 }}>
              Delishpot cooks Nigerian meals for everyday orders, bulk trays, and gatherings that need food people remember.
            </p>
            <p style={{ color: mute, fontSize: 18, lineHeight: 1.6, marginTop: 14, maxWidth: 540 }}>
              From rice plates to soups, sauces, sandwiches, and catering pans, the menu is built for fresh meals and generous hosting.
            </p>
          </div>
          <FoodPhoto imageId="vegetableSoupTub" radius={26} ratio="4/5" position="center" />
        </div>

        <div className="dp-grid-3" style={{ marginTop: 72 }}>
          {[
            { k: 'Fresh-daily', t: 'Cooked this morning', d: 'No reheats, no shortcuts. The kitchen opens at 5am.' },
            { k: 'Sourced local', t: 'From Mile 12 to your plate', d: 'We work directly with farmers across the South-West for produce, pepper and proteins.' },
            { k: 'Family-led', t: 'Recipes from home', d: 'Chef Aduke leads a kitchen of nine. Every dish is a recipe she grew up eating.' },
          ].map((c, i) => (
            <div key={i} style={{ padding: 28, borderRadius: 22, background: surface, border: `1px solid ${border}` }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent, marginBottom: 14 }}>{c.k}</div>
              <h4 style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 24, color: fg, margin: 0, letterSpacing: '-0.01em' }}>{c.t}</h4>
              <p style={{ color: mute, marginTop: 12, fontSize: 14.5, lineHeight: 1.6 }}>{c.d}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 80 }}>
          <SectionHeader kicker="The kitchen" title="A day in the pot." italicWord="day" dark={dark} accent={accent} />
          <div className="dp-grid-4" style={{ marginTop: 36 }}>
            {[
              { t: '5:00', l: 'Market run', desc: 'First trip to Mile 12 for tomato, pepper, scent leaf.' },
              { t: '7:30', l: 'Stocks on', desc: 'Bones and aromatics start the peppersoup base.' },
              { t: '11:00', l: 'Service prep', desc: 'Rice par-cooked. Plantain ripe and ready. Sauces tasted.' },
              { t: '12:30', l: 'First riders out', desc: 'Lunch leaves the kitchen hot, in insulated bags.' },
            ].map((s, i) => (
              <div key={i} style={{ padding: 24, borderRadius: 22, background: surface, border: `1px solid ${border}` }}>
                <div style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 40, color: accent, letterSpacing: '-0.03em' }}>{s.t}</div>
                <div style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 600, fontSize: 18, color: fg, marginTop: 6 }}>{s.l}</div>
                <div style={{ color: mute, fontSize: 13, marginTop: 8, lineHeight: 1.5 }}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== CONTACT ============== */
function ContactPage({ tweaks }) {
  const { dark, accent } = tweaks;
  const fg = dark ? '#f7eedb' : '#0e6e6a';
  const mute = dark ? 'rgba(247,238,219,0.7)' : '#6b6253';
  const surface = dark ? 'rgba(247,238,219,0.04)' : '#fbf5e6';
  const border = dark ? 'rgba(247,238,219,0.10)' : 'rgba(14,110,106,0.10)';
  const inputBg = dark ? 'rgba(247,238,219,0.06)' : '#fff';
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', topic: 'Catering', message: '' });
  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="dp-shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }} >
        <div>
          <SectionHeader
            kicker="Talk to us"
            title="Yes, we will pick up."
            italicWord="will"
            sub="Call, WhatsApp, or send a note. We answer within an hour during kitchen hours."
            dark={dark} accent={accent}
          />
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ContactRow icon="☎" label="Call or WhatsApp" v="0704 200 4295" surface={surface} border={border} fg={fg} mute={mute} accent={accent} />
            <ContactRow icon="◐" label="Instagram" v="@delishpot.ng" surface={surface} border={border} fg={fg} mute={mute} accent={accent} />
            <ContactRow icon="◈" label="Menu notes" v="Prices exclude packs and delivery" surface={surface} border={border} fg={fg} mute={mute} accent={accent} />
          </div>
          <div style={{
            marginTop: 28, padding: 20, borderRadius: 18,
            background: surface, border: `1px solid ${border}`,
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent, marginBottom: 10 }}>Order notes</div>
            {[
              ['Bulk orders', 'Pre-order a day before'],
              ['Packs',       'Priced separately'],
              ['Delivery',    'Confirmed per order'],
            ].map((r,i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 2 ? `1px dashed ${border}` : 'none', fontSize: 14, color: fg }}>
                <span>{r[0]}</span><span style={{ fontWeight: 600 }}>{r[1]}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          padding: 'clamp(28px, 4vw, 40px)', borderRadius: 28,
          background: dark ? 'rgba(247,238,219,0.04)' : '#fbf5e6',
          border: `1px solid ${border}`, alignSelf: 'start',
        }}>
          {!sent ? (
            <React.Fragment>
              <h3 style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 28, color: fg, margin: 0, letterSpacing: '-0.015em' }}>Send us a note</h3>
              <p style={{ color: mute, fontSize: 14, marginTop: 8 }}>We'll get back to you within the hour.</p>
              <div style={{ display: 'grid', gap: 14, marginTop: 22 }}>
                <Field label="Your name" value={form.name} onChange={(v)=>setForm({...form, name: v})} bg={inputBg} fg={fg} border={border} mute={mute} />
                <Field label="Email or phone" value={form.email} onChange={(v)=>setForm({...form, email: v})} bg={inputBg} fg={fg} border={border} mute={mute} />
                <SelectField label="What's this about?" value={form.topic} onChange={(v)=>setForm({...form, topic: v})} bg={inputBg} fg={fg} border={border} mute={mute}
                  options={['Catering', 'Bulk order', 'Weekly meal plan', 'Partnership', 'Press', 'Something else']} />
                <Field label="Message" value={form.message} onChange={(v)=>setForm({...form, message: v})} bg={inputBg} fg={fg} border={border} mute={mute} multi ph="Tell us about your event, guest count, dates, dietary notes…" />
                <Btn variant="orange" size="lg" fullWidth onClick={()=>setSent(true)} disabled={!form.name || !form.email || !form.message}>Send note</Btn>
              </div>
            </React.Fragment>
          ) : (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ width: 72, height: 72, borderRadius: '50%', background: accent, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 30, fontWeight: 700, marginBottom: 16 }}>✓</div>
              <h4 style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 700, fontSize: 26, color: fg, margin: 0 }}>Note received.</h4>
              <p style={{ color: mute, marginTop: 10, fontSize: 15 }}>We'll reach out to <strong style={{ color: fg }}>{form.email}</strong> shortly. <br />In the meantime — what's for lunch?</p>
              <Btn variant={dark ? 'cream' : 'primary'} onClick={()=>{ setSent(false); setForm({ name: '', email: '', topic: 'Catering', message: '' }); }} style={{ marginTop: 18 }}>Send another</Btn>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ContactRow({ icon, label, v, surface, border, fg, mute, accent }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '46px 1fr', gap: 16, alignItems: 'center',
      padding: 16, background: surface, border: `1px solid ${border}`, borderRadius: 16,
    }}>
      <div style={{
        width: 46, height: 46, borderRadius: '50%', background: accent, color: '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
      }}>{icon}</div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: mute }}>{label}</div>
        <div style={{ fontFamily: '"Bricolage Grotesque", system-ui', fontWeight: 600, fontSize: 17, color: fg, marginTop: 2, letterSpacing: '-0.005em' }}>{v}</div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, MenuPage, BulkPage, AboutPage, ContactPage });