// Catering page — platters by head count + inline inquiry form.
const { useState: useStateCater } = React;

function PageCatering({ navigate }) {
  return (
    <main className="fade-enter">
      <CateringHero />
      <PlatterShowcase />
      <CateringForm />
      <CateringPolicy />
    </main>
  );
}

function CateringHero() {
  return (
    <section style={{ position: 'relative', minHeight: 480, overflow: 'hidden' }}>
      <img src="assets/family-platter-feast.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(31,27,23,0.92) 0%, rgba(31,27,23,0.55) 60%, rgba(31,27,23,0.1) 100%)' }} />
      <div className="container container--wide" style={{ position: 'relative', padding: '120px var(--gutter) 80px' }}>
        <div style={{ maxWidth: 640, color: 'var(--paper)' }}>
          <div className="eyebrow" style={{ color: 'var(--saffron)' }}>Catering · UAE-wide</div>
          <h1 style={{ fontSize: 'clamp(48px, 6vw, 84px)', lineHeight: 1.02, marginTop: 16, color: 'var(--paper)' }}>
            Feed 8.<br/>Feed 800.
          </h1>
          <p style={{ fontSize: 18, color: 'rgba(245,235,220,0.85)', marginTop: 24, lineHeight: 1.6, maxWidth: 540 }}>
            Office Friday lunch, school fête, hotel majlis. Mezze platters, mixed-grill trays,
            shawarma bars and sandwich boxes — delivered hot, with chafing dishes and serving spoons.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a className="btn btn--primary" href="#inquire">Get a quote</a>
            <a className="btn btn--ghost-light" href="https://wa.me/971565266357" target="_blank" rel="noopener">
              <Icon.whatsapp width="14" height="14"/> WhatsApp · 056 526 6357
            </a>
          </div>
          <div style={{ display: 'flex', gap: 24, marginTop: 40, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(245,235,220,0.65)', letterSpacing: '0.1em' }}>
            <div>48-HOUR LEAD TIME</div><div>·</div>
            <div>UAE-WIDE DELIVERY</div><div>·</div>
            <div>CHAFING DISHES INCLUDED</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PlatterShowcase() {
  const platters = [
    {
      name: 'Mezze Platter',
      ar: 'صحن مزة',
      desc: 'Cold and hot mezze sampler — hummus, mutabbal, labneh, fattoush, falafel, kibbeh.',
      img: 'mezze-spread',
      sizes: [
        { size: 'Small', serves: '4–6', price: 180 },
        { size: 'Medium', serves: '8–12', price: 320 },
        { size: 'Large', serves: '15–20', price: 540 },
      ],
    },
    {
      name: 'Mixed Grill Tray',
      ar: 'صينية مشاوي',
      desc: 'Shish tawook, lamb kabab, chicken kabab, kafta. Bread, sauces and pickles included.',
      img: 'mixed-grill-platter',
      sizes: [
        { size: 'Small', serves: '4–6', price: 260 },
        { size: 'Medium', serves: '8–12', price: 460 },
        { size: 'Large', serves: '15–20', price: 780 },
      ],
    },
    {
      name: 'Shawarma Sandwich Box',
      ar: 'علبة سندويشات شاورما',
      desc: 'Half-cut Arabic and meat shawarma sandwiches, individually wrapped. Lunch-ready.',
      img: 'shawarma-spread',
      sizes: [
        { size: '10 sandwiches', serves: '5–8', price: 240 },
        { size: '20 sandwiches', serves: '10–15', price: 440 },
        { size: '40 sandwiches', serves: '20–30', price: 820 },
      ],
    },
    {
      name: 'Arabic Feast',
      ar: 'مأدبة عربية',
      desc: 'Full table: mezze, salad, mixed grill, dessert, drinks. The wedding-and-majlis order.',
      img: 'family-platter',
      sizes: [
        { size: 'Family', serves: '8–10', price: 680 },
        { size: 'Majlis', serves: '20–25', price: 1450 },
        { size: 'Hotel', serves: '50+', price: 'POA' },
      ],
    },
  ];
  return (
    <section className="section">
      <div className="container container--wide">
        <div className="eyebrow">By head count</div>
        <h2 className="section-title">Four platters. Three sizes each.</h2>
        <p className="lede" style={{ marginTop: 16 }}>
          Pricing is indicative. Lock the head count and we'll send you a final quote within an hour.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 48 }} className="platter-grid">
          {platters.map(p => <PlatterCard key={p.name} {...p} />)}
        </div>
      </div>
      <style>{`@media (max-width: 820px) { .platter-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function PlatterCard({ name, ar, desc, img, sizes }) {
  return (
    <article style={{
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius)',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <div style={{ aspectRatio: '16/9', overflow: 'hidden' }}>
        <img src={`assets/${img}.jpg`} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>
      <div style={{ padding: 24, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h3 className="serif" style={{ fontSize: 24, fontWeight: 600 }}>{name}</h3>
          <div className="arabic" style={{ fontSize: 16, color: 'var(--ink-2)' }}>{ar}</div>
        </div>
        <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 8, lineHeight: 1.5 }}>{desc}</p>

        <table style={{ width: '100%', marginTop: 18, borderCollapse: 'collapse', fontSize: 13 }}>
          <tbody>
            {sizes.map((s, i) => (
              <tr key={i} style={{ borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                <td style={{ padding: '10px 0', fontWeight: 600, color: 'var(--charcoal)' }}>{s.size}</td>
                <td style={{ padding: '10px 0', color: 'var(--ink-2)', fontSize: 12 }}>Serves {s.serves}</td>
                <td style={{ padding: '10px 0', textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--terracotta)', fontWeight: 600 }}>
                  {typeof s.price === 'number' ? `AED ${s.price}` : s.price}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </article>
  );
}

window.PageCatering = PageCatering;