// extra-pages.jsx — FAQs, Contact, Recipes, How to Take and Bake
// Copy lifted verbatim from melindasbakery.com (live site) for FAQs and Take-and-Bake.
const { useState: uS_x } = React;

// ===== FAQS =====
const FAQS = [
  {
    q: "What types of baked goods do you offer at Melinda's Gluten Free?",
    a: "Here at Melinda's Gluten Free, we pride ourselves on our vast collection of premium gluten-free and vegan baked goods. We carry a variety of Melinda's-own, hand-crafted goods, including but not limited to loaves of bread, cakes, cookies, pastries, pies, sandwiches, danishes, snacks, beverages, and the frequent discovery of new ways to make classic baked goods gluten-free and allergen-friendly!"
  },
  {
    q: "Are your baked goods made fresh?",
    a: "Yes! All of our goods are baked fresh daily using the highest quality ingredients."
  },
  {
    q: "What flours do you use?",
    a: "We have developed our own special, signature flour blends that mimic (and even exceed) the texture and flavor of your gluten-favorites, without any of the gluten! We use mixes of brown rice, white rice, sorghum, tapioca, potato, arrowroot, and millet flour (croissants only)!"
  },
  {
    q: "How should I store it?",
    a: "Even though our products are baked fresh daily, we don't use many/any preservatives to keep them fresh and tasty! Left outside unattended, Melinda's Gluten Free goods remain good for ~two days. After that, our treats are best frozen and then reheated using a little moisture. Cakes, cupcakes, and pies are the only items we suggest you refrigerate.\n\nBecause the large majority of our goods are dairy-free or vegan, they can last much longer than other baked goods due to the lack of spoilable ingredients."
  },
  {
    q: "What about other allergens?",
    a: "We are acutely aware of food allergies, so feel free to ask us about any items! We are a completely gluten and peanut-free facility. We have many dairy-free, egg-free, and vegan goods available. Most of our dairy-free items contain coconut-based butter, and we do make some items with tree nuts. However, they are marked as such or you will be able to see the allergen on the top of the item (ie; bear claws have almonds on top). Products with chocolate chips are the only items that contain soy. Please bend our ears if you have any concerns!"
  },
  {
    q: "What is gluten?",
    a: "Gluten is a protein found in cereal grains like wheat, barley, rye, and more, that acts as an elastic binding agent which allows the dough made from these grains to rise and take their shape, texture, and taste. However, it is also directly the cause of many food allergies and illnesses such as celiac disease, wheat allergy, non-celiac gluten sensitivity (NCGS), and many more gluten-related disorders."
  },
  {
    q: "Why go gluten free?",
    a: "For those with a gluten-related disorder or allergy, cutting gluten out of your diet is imperative to maintaining a healthy lifestyle. Gluten can aggravate allergy symptoms, headaches, stomach aches, and a slew of other problems. And while there is no direct science to suggest that going gluten-free without a preexisting condition is beneficial to your health, cutting out gluten from your diet will also cut out the harmful preservatives and dyes that are used in processed foods, so while not directly connected, there is an indirect link with a gluten-free lifestyle and healthier living!"
  }
];

function FAQsPage() {
  const [open, setOpen] = uS_x(0);
  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal><span className="section-label">Frequently Asked</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 16, maxWidth: 700 }}>
          Questions, gently answered.
        </Reveal>
        <Reveal delay={240} as="p" className="lead" style={{ marginBottom: 56 }}>
          Can't find what you're looking for? Email{" "}
          <a href="mailto:melindasgf@gmail.com" className="ul-link">melindasgf@gmail.com</a>.
        </Reveal>

        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={Math.min(i * 60, 360)}>
                <article style={{
                  borderTop: i === 0 ? "1px solid var(--color-border)" : "none",
                  borderBottom: "1px solid var(--color-border)",
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left", padding: "26px 4px",
                      display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24,
                      cursor: "pointer", background: "transparent", border: "none"
                    }}>
                    <span style={{
                      fontFamily: "var(--display)", fontWeight: 500, fontSize: 22,
                      color: "var(--color-espresso)", lineHeight: 1.3, letterSpacing: "-0.01em",
                      flex: 1
                    }}>{f.q}</span>
                    <span style={{
                      width: 34, height: 34, flexShrink: 0, borderRadius: 999,
                      border: "1px solid var(--color-border-hover)",
                      display: "grid", placeItems: "center",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                      transition: "transform 250ms var(--ease-out-expo)",
                      color: "var(--color-honey)",
                      marginTop: 2
                    }}>
                      <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round">
                        <path d="M7 2v10M2 7h10"/>
                      </svg>
                    </span>
                  </button>
                  <div style={{
                    display: "grid",
                    gridTemplateRows: isOpen ? "1fr" : "0fr",
                    transition: "grid-template-rows 320ms var(--ease-out-expo)",
                  }}>
                    <div style={{ overflow: "hidden" }}>
                      <div style={{ paddingBottom: 28, paddingRight: 58, color: "var(--color-cocoa)", fontSize: 16, lineHeight: 1.7, whiteSpace: "pre-line", maxWidth: "62ch" }}>
                        {f.a}
                      </div>
                    </div>
                  </div>
                </article>
              </Reveal>
            );
          })}
        </div>

        <Reveal delay={400}>
          <div style={{
            marginTop: 80, padding: 32, borderRadius: 20,
            background: "var(--color-parchment)",
            display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap"
          }}>
            <div>
              <div className="section-label">Still curious?</div>
              <div style={{ fontFamily: "var(--display)", fontSize: 24, fontWeight: 500, marginTop: 8, color: "var(--color-espresso)" }}>
                Come by and ask.
              </div>
              <div style={{ color: "var(--color-cocoa)", marginTop: 6, fontSize: 15 }}>
                1420 41st Avenue, Capitola · Tue–Sun · 8am–3pm
              </div>
            </div>
            <Link to="/contact" className="btn btn-primary">Contact us →</Link>
          </div>
        </Reveal>
      </div>
    </div>
  );
}

// ===== CONTACT =====
function ContactPage() {
  const [name, setName] = uS_x("");
  const [email, setEmail] = uS_x("");
  const [msg, setMsg] = uS_x("");
  const [sent, setSent] = uS_x(false);

  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container">
        <Reveal><span className="section-label">Get in touch</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 16, maxWidth: 700 }}>
          Better yet, see us in person.
        </Reveal>
        <Reveal delay={240} as="p" className="lead" style={{ marginBottom: 64 }}>
          We love our customers. Feel free to visit during normal business hours. For orders, call the bakery. For questions, send a note.
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }} className="contact-grid">
          {/* Left: address + hours card */}
          <Reveal>
            <div style={{
              background: "var(--color-white-warm)", borderRadius: 24, padding: 36,
              border: "1px solid var(--color-border)", boxShadow: "var(--shadow-card)",
              display: "flex", flexDirection: "column", gap: 28
            }}>
              <div>
                <div className="section-label">Melinda's Gluten Free</div>
                <div style={{ fontFamily: "var(--display)", fontSize: 28, fontWeight: 500, color: "var(--color-espresso)", marginTop: 10, letterSpacing: "-0.015em", lineHeight: 1.2 }}>
                  1420 41st Avenue<br/>Capitola, CA 95010
                </div>
                <a href="tel:8313165081" style={{ display: "inline-block", marginTop: 14, color: "var(--color-honey)", fontWeight: 600, fontSize: 17 }}>(831) 316-5081</a>
              </div>

              <div style={{ borderTop: "1px solid var(--color-border)", paddingTop: 24 }}>
                <div className="section-label">Hours</div>
                <div style={{ marginTop: 12, fontSize: 15, lineHeight: 1.9, color: "var(--color-cocoa)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", maxWidth: 320 }}><span>Tuesday – Sunday</span><span style={{ fontVariantNumeric: "tabular-nums" }}>8:00am – 3:00pm</span></div>
                  <div style={{ display: "flex", justifyContent: "space-between", maxWidth: 320, color: "var(--color-stone)" }}><span>Monday</span><span>Closed</span></div>
                </div>
                <div style={{ marginTop: 12, fontSize: 13, color: "var(--color-stone)", maxWidth: 360 }}>
                  Closed on major holidays. We will be closed the week between Christmas Eve and New Year's.
                </div>
              </div>

              <div style={{ borderTop: "1px solid var(--color-border)", paddingTop: 24 }}>
                <div className="section-label">Email</div>
                <a href="mailto:melindasgf@gmail.com" className="ul-link" style={{ display: "inline-block", marginTop: 10, fontSize: 16 }}>
                  melindasgf@gmail.com
                </a>
              </div>
            </div>
          </Reveal>

          {/* Right: form */}
          <Reveal delay={120}>
            <div>
              <div className="section-label">Send a note</div>
              <p style={{ marginTop: 10, marginBottom: 28, color: "var(--color-cocoa)", maxWidth: 440, lineHeight: 1.6 }}>
                Please call the bakery to make orders, but if you have questions, send them here.
              </p>

              {sent ? (
                <div style={{
                  padding: 32, borderRadius: 18, background: "var(--color-sage-light)",
                  border: "1px solid rgba(92,138,92,0.3)"
                }}>
                  <div style={{ fontFamily: "var(--display)", fontSize: 24, color: "var(--color-espresso)", fontWeight: 500 }}>Thanks, {name || "friend"}.</div>
                  <p style={{ marginTop: 8, color: "var(--color-cocoa)" }}>We'll get back to you as soon as we're out of the kitchen.</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                  <CField label="Name">
                    <input value={name} onChange={(e) => setName(e.target.value)} required style={cInputStyle()}/>
                  </CField>
                  <CField label="Email *">
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required style={cInputStyle()}/>
                  </CField>
                  <CField label="Message">
                    <textarea value={msg} onChange={(e) => setMsg(e.target.value)} rows={5} style={{ ...cInputStyle(), resize: "vertical", lineHeight: 1.5 }}/>
                  </CField>
                  <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
                    <button type="submit" className="btn btn-primary">Send</button>
                    <button type="button" onClick={() => { setName(""); setEmail(""); setMsg(""); }} className="btn btn-secondary">Clear</button>
                  </div>
                  <p style={{ fontSize: 11.5, color: "var(--color-stone)", marginTop: 4 }}>
                    This form is for questions only. To place an order, please <Link to="/order" className="ul-link">use the order page</Link> or call.
                  </p>
                </form>
              )}
            </div>
          </Reveal>
        </div>

        {/* Map block */}
        <Reveal delay={240}>
          <div style={{ marginTop: 80, width: "100%", aspectRatio: "21/9", borderRadius: 24, overflow: "hidden", border: "1px solid var(--color-border)", boxShadow: "var(--shadow-card)" }}>
            <iframe
              title="Melinda's Gluten Free — 1420 41st Avenue, Capitola, CA"
              src="https://maps.google.com/maps?q=1420%2041st%20Avenue%2C%20Capitola%2C%20CA%2095010&t=&z=15&ie=UTF8&iwloc=&output=embed"
              style={{ width: "100%", height: "100%", border: 0, display: "block" }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </div>
  );
}

function CField({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontFamily: "var(--body)", fontWeight: 600, fontSize: 12, color: "var(--color-cocoa)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{label}</span>
      <div style={{ marginTop: 6 }}>{children}</div>
    </label>
  );
}
function cInputStyle() {
  return {
    width: "100%", padding: "12px 14px",
    background: "var(--color-white-warm)",
    border: "1px solid var(--color-border)",
    borderRadius: 12,
    fontFamily: "var(--body)", fontSize: 15, color: "var(--color-espresso)",
    outline: "none", transition: "border-color 200ms"
  };
}

// ===== RECIPES =====
// Live site is essentially "Subscribe — My Blog" placeholder; mirror that
// honestly rather than invent recipe content.
function RecipesPage() {
  const [email, setEmail] = uS_x("");
  const [sub, setSub] = uS_x(false);
  const posts = [
    { title: "Black Bean Chili, My Hero", href: "https://melindasbakery.com/recipes-you-will-love/f/black-bean-chili-my-hero", img: "https://img1.wsimg.com/isteam/ip/48f62440-1494-4dda-af46-2c1f8533c26b/IMG_4764.jpeg", excerpt: "It's party time at my house (it often is)! As I set the menu for this group of friends and family, I have to consider all the dietary needs..." },
    { title: "Gluten Free and Dairy Free Clam Chowder!", href: "https://melindasbakery.com/recipes-you-will-love/f/gluten-free-and-dairy-free-clam-chowder", img: "https://img1.wsimg.com/isteam/ip/48f62440-1494-4dda-af46-2c1f8533c26b/IMG_3068.jpeg", excerpt: "Yes, gluten free, dairy free clam chowder can be creamy, thick, and delicious! I hope you take the time to make this soup..." },
    { title: "Fall is for Soup", href: "https://melindasbakery.com/recipes-you-will-love/f/fall-is-for-soup", img: "https://img1.wsimg.com/isteam/ip/48f62440-1494-4dda-af46-2c1f8533c26b/IMG_2873.jpeg", excerpt: "The weather is cooling down and it's time to cuddle up with a delicious bowl of soup. I love making all kinds of nutritious..." },
    { title: "You Can't Just Eat Baked Goods... Such a Shame", href: "https://melindasbakery.com/recipes-you-will-love/f/you-cant-just-eat-baked-goods-such-a-shame", img: "https://img1.wsimg.com/isteam/ip/48f62440-1494-4dda-af46-2c1f8533c26b/IMG_0501-1a6be2c.jpeg", excerpt: "Being gluten free can be a struggle. Not only are you now very restricted in what you can eat out in the world, but making meals at home..." },
  ];
  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal><span className="section-label">From Melinda's kitchen</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 16 }}>
          Recipes you'll love.
        </Reveal>
        <Reveal delay={240} as="p" className="lead" style={{ marginBottom: 48 }}>
          Gluten-free meals that go beyond the bakery case.
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 20, marginBottom: 56 }}>
          {posts.map((p, i) => (
            <Reveal key={i} delay={300 + i * 80}>
              <a href={p.href} target="_blank" rel="noopener" style={{ textDecoration: "none", display: "block", height: "100%" }}>
                <div style={{
                  background: "var(--color-white-warm)", border: "1px solid var(--color-border)",
                  borderRadius: 18, overflow: "hidden", height: "100%",
                  display: "flex", flexDirection: "column",
                  transition: "border-color 200ms, box-shadow 200ms, transform 200ms", cursor: "pointer"
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--color-honey)"; e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--color-border)"; e.currentTarget.style.boxShadow = ""; e.currentTarget.style.transform = ""; }}
                >
                  <div style={{ width: "100%", height: 180, overflow: "hidden" }}>
                    <img src={p.img} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                  </div>
                  <div style={{ padding: "20px 22px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 19, lineHeight: 1.3, color: "var(--color-espresso)" }}>{p.title}</div>
                    <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-cocoa)", flex: 1, margin: 0 }}>{p.excerpt}</p>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--color-honey-dark)", marginTop: 4 }}>Continue Reading →</div>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{
            background: "var(--color-parchment)", borderRadius: 24, padding: 48,
            display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap"
          }}>
            <div style={{ maxWidth: 420 }}>
              <div className="section-label">Subscribe</div>
              <h2 className="h2" style={{ marginTop: 12, fontSize: 32 }}>Recipes, every now and then.</h2>
              <p style={{ marginTop: 12, color: "var(--color-cocoa)" }}>
                No newsletter spam. Just the occasional tested, retested gluten-free recipe from Melinda's kitchen.
              </p>
            </div>
            {sub ? (
              <div style={{ fontFamily: "var(--display)", fontStyle: "italic", fontSize: 19, color: "var(--color-honey-dark)" }}>
                Thanks — we'll be in touch.
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSub(true); }} style={{ display: "flex", gap: 10, alignItems: "stretch", flexWrap: "wrap" }}>
                <input type="email" required placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)}
                  style={{ ...cInputStyle(), minWidth: 240 }}/>
                <button type="submit" className="btn btn-primary">Sign up</button>
              </form>
            )}
          </div>
        </Reveal>

      </div>
    </div>
  );
}

// ===== TAKE AND BAKE =====
// Instructions lifted verbatim from melindasbakery.com/how-to-take-and-bake.
const TAKE_BAKE_ITEMS = [
  {
    id: "croissants",
    name: "Croissants",
    temp: "425°F",
    time: "30 min",
    videos: [
      { url: "https://player.vimeo.com/video/1037309764?badge=0&byline=0&h=e90e106a20&portrait=0&title=0", label: "Watch the bake" }
    ],
    body: "Our buttery croissants, almost ready. Remove from the freezer the night before. Pre-heat your oven to 425°F. Remove the croissants from the pan and place on a cookie sheet. Egg wash the tops (or a little oil if vegan). Bake for 30 minutes or until golden brown. Stores well in the fridge; freezes for the long term."
  },
  {
    id: "cinnamon-rolls",
    name: "Cinnamon Rolls",
    temp: "350°F",
    time: "40–50 min",
    videos: [
      { url: "https://player.vimeo.com/video/1037253560?badge=0&byline=0&h=49a10dc880&portrait=0&title=0", label: "Watch the bake" }
    ],
    body: "6 cinnamon rolls ready to go into your oven. Remove from the freezer the night before. Pre-heat your oven to 350°F. They're in a pan that's ready for your oven. Place in the oven with a bit of water in a pan or oven-safe dish. Bake for 40–50 minutes (or until golden brown on top) and enjoy."
  },
  {
    id: "stuffing",
    name: "Stuffing Starter",
    temp: "—",
    time: "see video",
    videos: [
      { url: "https://player.vimeo.com/video/1032715377?badge=0&byline=0&h=74a6b91547&portrait=0&title=0", label: "Watch the bake" }
    ],
    body: "Melinda's gluten-free take-n-bake stuffing starter. Watch the short video for the full method."
  }
];

function TakeAndBakePage() {
  const tnbRef = React.useRef(null);
  React.useEffect(() => {
    if (!tnbRef.current) return;
    const ctx = gsap.context(() => {
      gsap.set(".tnb-timeline-line", { scaleY: 0, transformOrigin: "top center" });
      gsap.to(".tnb-timeline-line", {
        scaleY: 1, ease: "none",
        scrollTrigger: { trigger: tnbRef.current, scrub: 1, start: "top 30%", end: "bottom 70%" }
      });
    }, tnbRef);
    return () => ctx.revert();
  }, []);
  const H2_BY_ID = {
    "croissants": "Take and bake instructions for Croissants!",
    "cinnamon-rolls": "Take and bake cinnamon roll instructions!",
    "stuffing": "Take-N-Bake Instructions!"
  };
  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container">
        <Reveal><span className="section-label">Take & Bake</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 16, maxWidth: 760 }}>
          How to bring it home and finish it fresh.
        </Reveal>
        <Reveal delay={240} as="p" className="lead" style={{ marginBottom: 64, maxWidth: 660 }}>
          Pull from the freezer the night before. Bake the day of. The smell will do the rest.
        </Reveal>

        <div ref={tnbRef} className="tnb-content" style={{ position: "relative", display: "flex", flexDirection: "column", gap: 56 }}>
          <div className="tnb-timeline-rail" aria-hidden="true"/>
          <div className="tnb-timeline-line" aria-hidden="true"/>
          {TAKE_BAKE_ITEMS.map((item, idx) => (
            <Reveal key={item.id} delay={120 + idx * 80}>
              <div className="tnb-item" style={{ position: "relative" }}>
                <div className="tnb-dot" aria-hidden="true"/>
              <article style={{
                background: "var(--color-white-warm)", borderRadius: 24, padding: 40,
                border: "1px solid var(--color-border)", boxShadow: "var(--shadow-card)"
              }}>
                <div style={{ display: "flex", gap: 32, marginBottom: 28, paddingBottom: 24, borderBottom: "1px solid var(--color-border)", flexWrap: "wrap" }}>
                  <div>
                    <div className="section-label muted">Oven</div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 32, fontWeight: 500, color: "var(--color-espresso)", marginTop: 6 }}>{item.temp}</div>
                  </div>
                  <div>
                    <div className="section-label muted">Bake time</div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 32, fontWeight: 500, color: "var(--color-espresso)", marginTop: 6 }}>{item.time}</div>
                  </div>
                  <div>
                    <div className="section-label muted">Thaw</div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 32, fontWeight: 500, color: "var(--color-espresso)", marginTop: 6 }}>Overnight</div>
                  </div>
                </div>
                <h2 className="h2" style={{ marginBottom: 16 }}>{H2_BY_ID[item.id] || item.name}</h2>
                <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--color-cocoa)", maxWidth: "60ch" }}>
                  {item.body}
                </p>

                <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }} className="tnb-steps">
                  {[
                    { n: "01", label: "Thaw overnight", note: "In the fridge or counter, covered." },
                    { n: "02", label: `Preheat ${item.temp}`, note: "Convection? Drop 25°F." },
                    { n: "03", label: "Egg wash (or oil)", note: "Oil if vegan." },
                    { n: "04", label: `Bake ${item.time}`, note: "Until golden brown." },
                  ].map((s, i) => (
                    <div key={i} style={{
                      padding: 16, borderRadius: 14, border: "1px solid var(--color-border)",
                      background: "var(--color-cream)"
                    }}>
                      <div style={{ fontFamily: "var(--display)", fontStyle: "italic", color: "var(--color-honey)", fontSize: 14, marginBottom: 8 }}>{s.n}</div>
                      <div style={{ fontWeight: 600, fontSize: 14, color: "var(--color-espresso)", marginBottom: 4 }}>{s.label}</div>
                      <div style={{ fontSize: 12.5, color: "var(--color-cocoa)" }}>{s.note}</div>
                    </div>
                  ))}
                </div>

                {item.videos && item.videos.length > 0 && (
                  <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 24 }}>
                    {item.videos.map((v, vi) => (
                      <div key={vi}>
                        {v.label ? (
                          <div style={{
                            fontFamily: "var(--body)", fontSize: 11, fontWeight: 700, letterSpacing: "0.18em",
                            textTransform: "uppercase", color: "var(--color-honey)", marginBottom: 10
                          }}>{v.label}</div>
                        ) : null}
                        <div style={{ aspectRatio: "16/9", borderRadius: 16, overflow: "hidden", background: "var(--color-espresso)", position: "relative" }}>
                          <iframe src={v.url} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen
                            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
                            title={`${item.name} — ${v.label || "video"}`}/>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </article>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .tnb-steps { grid-template-columns: repeat(2, 1fr) !important; }
        }
        .tnb-content { padding-left: 0; }
        .tnb-timeline-rail, .tnb-timeline-line { display: none; }
        .tnb-dot { display: none; }
        @media (min-width: 980px) {
          .tnb-content { padding-left: 60px; }
          .tnb-timeline-rail, .tnb-timeline-line {
            display: block; position: absolute;
            left: 18px; top: 30px; bottom: 30px; width: 2px;
          }
          .tnb-timeline-rail { background: var(--color-border); }
          .tnb-timeline-line { background: var(--color-honey); transform: scaleY(0); transform-origin: top center; }
          .tnb-dot {
            display: block; position: absolute;
            left: -50px; top: 32px; width: 14px; height: 14px;
            border-radius: 50%; background: var(--color-cream); border: 2px solid var(--color-honey);
            z-index: 2;
          }
        }
      `}</style>
    </div>
  );
}

window.FAQsPage = FAQsPage;
window.ContactPage = ContactPage;
window.RecipesPage = RecipesPage;
window.TakeAndBakePage = TakeAndBakePage;
