// order.jsx — Special Orders (static info page, no online ordering)
// Pre-order pickup info matching live /special-orders. No calendar, no cart.

const CAKE_GALLERY = [
  { src: "brand/photos/cake-kid-birthday.jpg",   label: "Kid Birthdays",   desc: "We can make cakes to match most themes to celebrate your child's special day." },
  { src: "brand/photos/cake-adult-birthday.jpg", label: "Adult Birthdays", desc: "Whether your party is huge, or just a few special people, we can make a cake tailored to your birthday wishes." },
  { src: "brand/photos/cake-graduation.jpg",     label: "Graduation",      desc: "Time flies while your family grows up! We can help you celebrate the biggest moments of life." },
  { src: "brand/photos/cake-wedding.jpg",        label: "Weddings",        desc: "A day like no other, we can provide cake and desserts for all of your guests. And they don't even need to know it's gluten free!" },
  { src: "brand/photos/cake-goodbye.jpg",        label: "Goodbyes",        desc: "It's always hard to say goodbye, so let a cake do the talking for you!" },
  { src: "brand/photos/cake-shower.jpg",         label: "Showers",         desc: "Big celebrations deserve something special. We can make you something everyone can enjoy. We even do reveal cakes!" },
];

const OCCASIONS = [
  "Weddings",
  "Birthdays",
  "Anniversaries",
  "Baby showers",
  "Graduations",
  "Corporate orders",
  "Just because"
];

function OrderPage() {
  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container" style={{ maxWidth: 1080 }}>
        <Reveal><span className="section-label">Pre-order Pickup</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 16 }}>
          Special Orders
        </Reveal>
        <Reveal delay={240} as="p" className="lead" style={{ marginBottom: 64, maxWidth: 720 }}>
          Cakes for every occasion, dozens for the office, holiday boxes. Anything we make in the case can be set aside for you in advance. Call or stop in to place an order.
        </Reveal>

        <Reveal delay={360}>
          <div style={{ marginBottom: 96 }}>
            <h2 className="h2" style={{ marginBottom: 16 }}>Special Order Menu</h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--color-cocoa)", maxWidth: 720 }}>
              Most everything from the case is available to pre-order: croissants by the dozen, cinnamon rolls, scones, bear claws, bread loaves, cupcakes, cookies, and full-sized cakes. We need 48 hours minimum for specialty items; wedding cakes need 2 weeks.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="h2" style={{ marginBottom: 16 }}>We make cakes for every occasion!</h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--color-cocoa)", marginBottom: 32, maxWidth: 720 }}>
            From a single birthday round to a full tiered wedding cake — every cake is gluten-free, made from scratch, and finished by hand.
          </p>
        </Reveal>
        <div className="cakes-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginBottom: 80 }}>
          {CAKE_GALLERY.map((c, i) => (
            <Reveal key={c.src} delay={Math.min(i * 50, 350)}>
              <figure style={{ margin: 0, borderRadius: 16, overflow: "hidden", background: "var(--color-biscuit)", height: "100%", display: "flex", flexDirection: "column" }}>
                <img src={c.src} alt={c.label} loading="lazy"
                  style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block" }}/>
                <figcaption style={{
                  padding: "18px 20px 22px",
                  background: "var(--color-white-warm)",
                  flex: 1
                }}>
                  <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-honey)" }}>{c.label}</div>
                  <div style={{ marginTop: 10, fontSize: 14, color: "var(--color-cocoa)", lineHeight: 1.55 }}>{c.desc}</div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{ marginBottom: 80 }}>
            <h2 className="h2" style={{ marginBottom: 24 }}>Order for any occasion</h2>
            <ul style={{ display: "flex", flexWrap: "wrap", gap: 10, padding: 0, listStyle: "none" }}>
              {OCCASIONS.map((o, i) => (
                <li key={i} style={{
                  padding: "12px 22px", borderRadius: 999,
                  background: "var(--color-white-warm)",
                  border: "1px solid var(--color-border)",
                  fontFamily: "var(--display)", fontStyle: "italic", fontSize: 17,
                  color: "var(--color-espresso)"
                }}>{o}</li>
              ))}
            </ul>
          </div>
        </Reveal>

        <Reveal>
          <div style={{
            background: "var(--color-parchment)", borderRadius: 24, padding: 48,
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40
          }} className="order-cta">
            <div>
              <div className="section-label">How to order</div>
              <h2 className="h2" style={{ marginTop: 12, marginBottom: 16 }}>Call or stop in.</h2>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--color-cocoa)" }}>
                We don't take orders online. Give us a call to confirm what's available, or come in and pick out exactly what you want from the case. At least 48 hours notice for specialty orders, 2 weeks for wedding cakes.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <div>
                <div className="section-label muted">Phone</div>
                <a href="tel:8313165081" style={{
                  fontFamily: "var(--display)", fontSize: 28, fontWeight: 500,
                  color: "var(--color-honey)", textDecoration: "none"
                }}>(831) 316-5081</a>
              </div>
              <div>
                <div className="section-label muted">Visit</div>
                <div style={{ fontSize: 17, lineHeight: 1.6, color: "var(--color-espresso)" }}>
                  1420 41st Avenue<br/>
                  Capitola, CA 95010
                </div>
              </div>
              <div>
                <div className="section-label muted">Hours</div>
                <div style={{ fontSize: 14, lineHeight: 1.7, color: "var(--color-cocoa)" }}>
                  Tuesday – Sunday · 8am – 3pm<br/>
                  Closed Mondays
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .cakes-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .cakes-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 760px) {
          .order-cta { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { OrderPage });