/* Afrah Gifting Services — landing page React app */
const { useState, useEffect, useRef } = React;

/* ─── Placeholder image component (striped + label) ─── */
function Ph({ label, variant = "", style }) {
  return (
    <div className={`ph ${variant ? "ph--" + variant : ""}`} style={style}>
      <div className="ph__label">{label}</div>
    </div>);

}

/* ─── Header ─── */
function Header({ onOpenForm }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close menu on resize to desktop
  useEffect(() => {
    const onResize = () => { if (window.innerWidth > 860) setMenuOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // Lock body scroll when menu open
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const closeMenu = () => setMenuOpen(false);

  return (
    <>
      <header className={`site-header ${scrolled ? "is-scrolled" : ""} ${menuOpen ? "menu-open" : ""}`}>
        <div className="wrap site-header__inner">
          <a href="#" className="brand" aria-label="Al Afrah Noor Sweets Trading">
            <img src="afrah-logo.png" alt="Al Afrah" className="brand__logo" />
            <span className="brand__tag" style={{ fontSize: "12px" }}>Corporate Gifting · Bahrain</span>
          </a>
          <nav className="nav">
            <a href="#process">Process</a>
            <a href="#collections">Collections</a>
            <a href="#use-cases">Use cases</a>
            <a href="#faq">FAQ</a>
            <button className="btn btn--ghost btn--sm nav-cta" onClick={onOpenForm}>
              Get free mockup <span className="arrow">→</span>
            </button>
          </nav>
          <button
            className={`burger ${menuOpen ? "is-open" : ""}`}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={`mobile-nav ${menuOpen ? "is-open" : ""}`} aria-hidden={!menuOpen}>
        <nav>
          <a href="#process" onClick={closeMenu}>Process</a>
          <a href="#collections" onClick={closeMenu}>Collections</a>
          <a href="#use-cases" onClick={closeMenu}>Use cases</a>
          <a href="#faq" onClick={closeMenu}>FAQ</a>
        </nav>
        <div className="mobile-nav__cta">
          <button className="btn btn--primary" style={{ width: "100%" }} onClick={() => { closeMenu(); onOpenForm(); }}>
            Get a free branded mockup <span className="arrow">→</span>
          </button>
        </div>
        <div className="mobile-nav__meta">
          <span>sales@afrahbh.com</span>
          <span>+973 3550 9112</span>
        </div>
      </div>

      {/* Backdrop */}
      {menuOpen && <div className="mobile-nav__backdrop" onClick={closeMenu} />}
    </>
  );
}

/* ─── Hero ─── */
function Hero({ onOpenForm }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="wrap hero__grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>Corporate sweets · Made in Bahrain</div>
          <h1 className="display hero__headline">
            Corporate sweets gifting, <em>handled end-to-end.</em>
          </h1>
          <p className="hero__sub">
            Afrah designs, produces, and delivers branded sweet boxes for Bahrain's leading companies — so HR, admin, and marketing teams gift on time, on brand, without juggling vendors.
          </p>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={onOpenForm}>
              Get a free branded mockup <span className="arrow">→</span>
            </button>
            <a href="#process" className="btn btn--ghost">See how it works</a>
          </div>
          <div className="hero__meta">
            <span>Free mockup before order</span>
            <span className="sep"></span>
            <span>Bahrain-wide delivery</span>
          </div>
        </div>
        <div className="hero__visual">
          <img src="images/hero.jpg" alt="Branded sweet box" />
          <div className="hero__badge"><span className="pulse"></span>Now booking · Q3 2026</div>
          <div className="hero__caption">
            <strong>Free branded mockup</strong>
            See your logo on the box before you place the order.
          </div>
        </div>
      </div>
    </section>);

}

/* ─── Marquee strip ─── */
function Strip() {
  const items = [
  "Trusted by Bahrain corporates",
  "Halal certified kitchen",
  "Same-week production",
  "Branded packaging in-house",
  "200+ orders fulfilled",
  "Bahrain-wide same-day delivery"];

  const all = [...items, ...items];
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip__track">
        {all.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>);

}

/* ─── Problem + Trust ─── */
function ProblemTrust() {
  const problems = [
  { n: "01", t: "Juggling three vendors", d: "Designer, sweet shop, courier — three contacts, three invoices, three timelines." },
  { n: "02", t: "Off-brand packaging", d: "Generic boxes that don't reflect the care your team took to plan the gift." },
  { n: "03", t: "Last-minute scrambling", d: "Eid, Ramadan, anniversaries. The dates don't move. Vendors do." },
  { n: "04", t: "No idea what you'll get", d: "You approve a quote, then hope the result matches what you imagined." }];

  return (
    <section className="problem" data-screen-label="02 Problem & Trust">
      <div className="wrap problem__grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>The state of corporate gifting</div>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", marginTop: 16, letterSpacing: "-0.02em" }}>
            Gifting shouldn't take three weeks and four vendors.
          </h2>
          <p className="lede" style={{ marginTop: 16 }}>
            Most corporate gifting in Bahrain is stitched together piece by piece. We replace the whole chain with a single point of contact, fixed timelines, and a mockup before you commit.
          </p>
          <div className="problem__list">
            {problems.map((p) =>
            <div className="problem__item" key={p.n}>
                <div className="num">{p.n}</div>
                <div>
                  <h4>{p.t}</h4>
                  <p>{p.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
        <aside className="trust">
          <h3>Working with teams across Bahrain.</h3>
          <p>Banking, telecom, real estate, hospitality — and a few names you'd recognise.</p>
          <div className="trust__grid">
            {["Bank · BHD", "Telecom Co.", "Real Estate", "Hospitality", "Government", "Retail Group"].map((l, i) =>
            <div className="trust__cell" key={i}>{l}</div>
            )}
          </div>
          <div className="trust__stats">
            <div className="trust__stat">
              <div className="v">200+</div>
              <div className="l">Corporate orders fulfilled</div>
            </div>
            <div className="trust__stat">
              <div className="v">7&nbsp;days</div>
              <div className="l">Average lead time</div>
            </div>
            <div className="trust__stat">
              <div className="v">100%</div>
              <div className="l">Made in Bahrain</div>
            </div>
          </div>
        </aside>
      </div>
    </section>);

}

/* ─── Solution / 3-step ─── */
function Solution() {
  const steps = [
  {
    n: "1",
    t: "Design",
    d: "We mock up your packaging — logo, colours, message card. You approve before anything is produced.",
    list: ["Free branded mockup", "2–3 design options", "Approval in 48h"]
  },
  {
    n: "2",
    t: "Produce",
    d: "Our kitchen makes the sweets fresh. Halal-certified, batch-tested, and packed in your branded boxes.",
    list: ["Halal certified", "Made-to-order", "Quality-checked"]
  },
  {
    n: "3",
    t: "Deliver",
    d: "We coordinate delivery across Bahrain — to one office, or split across multiple recipients.",
    list: ["Bahrain-wide", "Single or split delivery", "On the date you set"]
  }];

  return (
    <section className="solution" id="process" data-screen-label="03 Process">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>How it works</div>
            <h2 className="display">Three steps. One vendor. Done.</h2>
          </div>
          <p className="lede">
            From the first brief to the last delivery, you talk to one team. No production calls, no courier handoffs, no chasing approvals across email threads.
          </p>
        </div>
        <div className="solution__steps">
          {steps.map((s) =>
          <div className="step" key={s.n}>
              <div className="step__num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="step__list">
                {s.list.map((l) => <span key={l}>{l}</span>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Use cases ─── */
function UseCases() {
  const cases = [
  { tag: "01 / VIP gifting", t: "VIP & board gifts", d: "Curated for senior stakeholders. Discreet, refined, and never generic.", img: "vip.jpg" },
  { tag: "02 / Events", t: "Corporate events", d: "Conference welcome boxes, AGM tokens, summit favours — at scale, on schedule.", img: "events.jpg" },
  { tag: "03 / Clients", t: "Client appreciation", d: "Quarterly thank-yous and renewal moments that keep your name on their desk.", img: "clients.jpg" },
  { tag: "04 / Festive", t: "Festive gifting", d: "Eid, Ramadan, National Day. We plan ahead so you don't scramble at month-end.", img: "festive.jpg" }];

  return (
    <section className="usecases" id="use-cases" data-screen-label="04 Use cases">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Built for</div>
            <h2 className="display">Where teams use our gifting service.</h2>
          </div>
          <p className="lede">
            Whether you're sending one box to a board chair or two hundred to a conference hall, the process — and the standard — stays the same.
          </p>
        </div>
        <div className="usecases__grid">
          {cases.map((c) =>
          <article className="usecase" key={c.t}>
              <div className="usecase__img">
                <img src={`images/${c.img}`} alt={c.t} />
              </div>
              <div className="usecase__body">
                <div className="usecase__tag">{c.tag}</div>
                <h3>{c.t}</h3>
                <p>{c.d}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Collections ─── */
function Collections() {
  const tiers = [
  {
    name: "Petite",
    price: "From BHD 2 / box",
    d: "A focused selection for everyday recognition — onboarding, thank-yous, and quarterly touchpoints.",
    specs: [
    { l: "Pieces", v: "2-4 sweets" },
    { l: "Box", v: "Kraft + foil" },
    { l: "Branding", v: "Logo + sleeve" },
    { l: "MOQ", v: "25 units" }],

    img: "petite.jpg"
  },
  {
    name: "Elegant",
    price: "From BHD 5 / box",
    d: "Our most-ordered tier. The right balance of presentation and value for client and event gifting.",
    specs: [
    { l: "Pieces", v: "6-10 sweets" },
    { l: "Box", v: "Rigid lid · matte" },
    { l: "Branding", v: "Foil + insert card" },
    { l: "MOQ", v: "50 units" }],

    img: "elegant.jpg"
  },
  {
    name: "Majestic",
    price: "From BHD 20 / box",
    d: "For board members, VIP partners, and milestone moments where the box itself is the message.",
    specs: [
    { l: "Pieces", v: "14-24 sweets" },
    { l: "Box", v: "Wood-look · magnetic" },
    { l: "Branding", v: "Embossed + ribbon" },
    { l: "MOQ", v: "20 units" }],

    img: "majestic.jpg"
  }];

  return (
    <section className="collections" id="collections" data-screen-label="05 Collections">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Collections</div>
            <h2 className="display">Three tiers. Every one branded to you.</h2>
          </div>
          <p className="lede" style={{ color: "rgba(247,242,234,0.7)" }}>
            Pick a starting tier — we customise the contents, the wrap, and the message card. Mix tiers within a single order if you're gifting up and down a hierarchy.
          </p>
        </div>
        <div className="collections__grid">
          {tiers.map((t) =>
          <article className="collection" key={t.name}>
              <div className="collection__img">
                <img src={`images/${t.img}`} alt={`${t.name} collection`} />
              </div>
              <div className="collection__body">
                <div className="collection__tier">
                  <span className="name">{t.name}</span>
                  <span className="price">{t.price}</span>
                </div>
                <p>{t.d}</p>
                <div className="collection__specs">
                  {t.specs.map((s) =>
                <div key={s.l}>
                      {s.l}<span>{s.v}</span>
                    </div>
                )}
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Visual proof ─── */
function Proof() {
  return (
    <section className="proof" data-screen-label="06 Visual proof">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Inside the box</div>
            <h2 className="display">A closer look.</h2>
          </div>
          <p className="lede">
            Every order is photographed before dispatch, so you have proof of presentation — useful for marketing, PR, or simply peace of mind.
          </p>
        </div>
        <div className="proof__grid">
          <div className="proof__cell"><img src="images/proof-1.jpg" alt="Open gift box, overhead view" /></div>
          <div className="proof__cell"><img src="images/proof-2.jpg" alt="Arabic sweet, close-up" /></div>
          <div className="proof__cell"><img src="images/proof-3.jpg" alt="Gold foil packaging detail" /></div>
          <div className="proof__cell"><img src="images/proof-4.jpg" alt="Ribbon and message card detail" /></div>
        </div>
      </div>
    </section>);

}

/* ─── Branding emphasis ─── */
function Branding() {
  return (
    <section className="branding" data-screen-label="07 Branding">
      <div className="wrap branding__grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>Branded packaging</div>
          <h2 className="display">Your logo, your colours, on every box.</h2>
          <p>
            Generic packaging makes a corporate gift feel transactional. Ours doesn't. Every Afrah box is designed around your brand guidelines — and you see exactly how it will look before we print a single sleeve.
          </p>
          <ul className="branding__bullets">
            <li><span><strong>Free mockup</strong> — sent within 48 hours of brief.</span></li>
            <li><span><strong>Foil, emboss, print</strong> — pick the finish that fits the occasion.</span></li>
            <li><span><strong>Custom message card</strong> — printed inside, signed by you.</span></li>
            <li><span><strong>Pantone matched</strong> — your brand colour, not approximately.</span></li>
          </ul>
        </div>
        <div className="branding__visual">
          <img src="images/branding.jpg" alt="Branded gift box with embossed logo and foil sleeve" />
        </div>
      </div>
    </section>);

}

/* ─── Offer banner ─── */
function Offer({ onOpenForm }) {
  return (
    <section className="offer" data-screen-label="08 Offer">
      <div className="wrap">
        <div className="offer__inner">
          <div>
            <div className="eyebrow"><span className="dot"></span>Risk-free start</div>
            <h2>See the box <em style={{ fontStyle: "italic", color: "var(--accent-2)" }}>before</em> you order it.</h2>
            <p>
              Send us your logo and brand colours. We'll send back a designed mockup of your box — sleeve, card, finish — within 48 hours. No commitment. No fee.
            </p>
          </div>
          <div className="offer__action">
            <button className="btn btn--primary" onClick={onOpenForm}>
              Request my free mockup <span className="arrow">→</span>
            </button>
            <a href="#contact" className="btn btn--ghost">Talk to us first</a>
            <div className="offer__meta">No credit card · No commitment</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ─── FAQ ─── */
function FAQ() {
  const items = [
  { q: "What's the minimum order?", a: "Most collections start at 20–25 boxes. For VIP one-off orders we can go smaller — talk to us." },
  { q: "How long does an order take?", a: "Average lead time is 7 working days from approved mockup. Rush orders are possible — reach out and we'll confirm." },
  { q: "Do you deliver outside Manama?", a: "Yes — we deliver across all of Bahrain, including split deliveries to multiple recipients on the same date." },
  { q: "Are the sweets Halal?", a: "Yes. Our kitchen is Halal-certified and we batch-test every production run." },
  { q: "Can I see a sample before ordering at scale?", a: "Yes. After mockup approval we can produce a single sample box for sign-off before full production." }];

  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq" data-screen-label="09 FAQ">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Common questions</div>
            <h2 className="display">Quick answers.</h2>
          </div>
          <p className="lede">
            Most questions we hear from HR and admin teams before placing a first order. If yours isn't here, message us on WhatsApp.
          </p>
        </div>
        <div className="faq__list">
          {items.map((it, i) =>
          <div
            key={i}
            className={`faq__item ${open === i ? "is-open" : ""}`}
            onClick={() => setOpen(open === i ? -1 : i)}>
            
              <div className="faq__q">
                <span style={{ fontWeight: "400" }}>{it.q}</span>
                <span className="faq__icon">+</span>
              </div>
              <div className="faq__a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Final CTA ─── */
function FinalCTA({ onOpenForm }) {
  return (
    <section className="final" id="contact" data-screen-label="10 Final CTA">
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>Let's plan your next gift</div>
        <h2 className="display">Ready when you are.</h2>
        <p>
          Tell us the occasion, the headcount, and the deadline. We'll come back with a mockup and a quote — usually within two working days.
        </p>
        <div className="final__ctas">
          <button className="btn btn--primary" onClick={onOpenForm}>
            Request a quote <span className="arrow">→</span>
          </button>
          <a className="btn btn--ghost" href="https://wa.me/97335509112" target="_blank" rel="noopener">
            <WhatsAppGlyph /> Chat on WhatsApp
          </a>
        </div>
        <div className="final__meta">
          <span>Hidd, Bahrain</span>
          <span>sales@afrahbh.com</span>
          <span>+973 3550 9112</span>
        </div>
      </div>
    </section>);

}

/* ─── Footer ─── */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div className="footer__brand">
            <a href="#" className="brand">
              <img src="afrah-logo.png" alt="Al Afrah" className="brand__logo" style={{ height: "49px", width: "73px" }} />
            </a>
            <p>Al Afrah Noor Sweets Trading — premium corporate sweets gifting, designed and produced in Bahrain.</p>
          </div>
          <div>
            <h5>Service</h5>
            <ul>
              <li><a href="#process">How it works</a></li>
              <li><a href="#collections">Collections</a></li>
              <li><a href="#use-cases">Use cases</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:sales@afrahbh.com">sales@afrahbh.com</a></li>
              <li><a href="tel:+97335509112">+973 3550 9112</a></li>
              <li><a href="https://wa.me/97335509112">WhatsApp</a></li>
            </ul>
          </div>
          <div>
            <h5>Visit</h5>
            <ul style={{ fontSize: "12px" }}>
              <li>Shop No. 1, Building 2356</li>
              <li>Road 1532, Block 115, Hidd</li>
              <li>Kingdom of Bahrain</li>
            </ul>
          </div>
        </div>
        <div className="footer__base">
          <span>Copyright 2026 © Al Afrah Noor Sweets Trading</span>
          <span>Made in Bahrain · Halal certified</span>
        </div>
      </div>
    </footer>);

}

/* ─── WhatsApp glyph ─── */
function WhatsAppGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.6 14.2c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.7-1.7-2-.2-.3 0-.5.1-.6l.4-.5c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.4 1 2.8 1.2 3c.1.2 2 3.1 4.9 4.4.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z" />
      <path d="M20.5 3.5C18.3 1.2 15.3 0 12.1 0 5.6 0 .3 5.3.3 11.8c0 2.1.6 4.1 1.6 5.9L0 24l6.4-1.7c1.7.9 3.7 1.4 5.7 1.4 6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.2-3.4-8.4zM12.1 21.7c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.4-9.8 9.8-9.8 2.6 0 5.1 1 6.9 2.9 1.8 1.8 2.9 4.3 2.9 6.9 0 5.4-4.4 9.9-9.8 9.9z" />
    </svg>);

}

/* ─── WhatsApp FAB ─── */
function FAB() {
  return (
    <a className="fab" href="https://wa.me/97335509112" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
      <WhatsAppGlyph />
      <span>Chat with us</span>
    </a>);

}

/* ─── Mockup form modal ─── */
function MockupModal({ open, onClose }) {
  const [form, setForm] = useState({
    name: "", company: "", email: "", phone: "", occasion: "", quantity: "", notes: ""
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");
  const firstFieldRef = useRef(null);

  useEffect(() => {
    if (open && firstFieldRef.current) {
      setTimeout(() => firstFieldRef.current.focus(), 100);
    }
    if (!open) {
      setTimeout(() => {
        setSubmitted(false);
        setSubmitError("");
        setSubmitting(false);
        setForm({ name: "", company: "", email: "", phone: "", occasion: "", quantity: "", notes: "" });
        setErrors({});
      }, 200);
    }
  }, [open]);

  useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape" && open) onClose();};
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required";
    if (!form.company.trim()) errs.company = "Required";
    if (!form.email.trim() || !/.+@.+\..+/.test(form.email)) errs.email = "Valid email required";
    if (!form.occasion.trim()) errs.occasion = "Required";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSubmitting(true);
    setSubmitError("");
    try {
      const res = await fetch("https://formspree.io/f/mjgjdvrq", {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          company: form.company,
          email: form.email,
          phone: form.phone,
          occasion: form.occasion,
          quantity: form.quantity,
          notes: form.notes,
          _subject: `New mockup request — ${form.company}`
        })
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        const data = await res.json().catch(() => ({}));
        setSubmitError(data?.errors?.[0]?.message || "Something went wrong. Please try WhatsApp instead.");
      }
    } catch (err) {
      setSubmitError("Network issue. Please try WhatsApp instead.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="modal__close" onClick={onClose} aria-label="Close">×</button>
        {submitted ?
        <div className="modal__success">
            <div className="check">✓</div>
            <h3>Got it, {form.name.split(" ")[0]}.</h3>
            <p>We'll send your branded mockup to <strong>{form.email}</strong> within two working days.</p>
            <button className="btn btn--ghost" onClick={onClose}>Close</button>
          </div> :

        <form onSubmit={submit} noValidate>
            <h3>Get a free branded mockup.</h3>
            <p className="modal__sub">Tell us about the occasion. We'll come back with a designed mockup of your box within 48 hours.</p>
            <div className="field--row">
              <div className="field">
                <label>Your name</label>
                <input ref={firstFieldRef} type="text" value={form.name} onChange={update("name")} placeholder="Noor Al Zayani" />
                {errors.name && <span className="field__error">{errors.name}</span>}
              </div>
              <div className="field">
                <label>Company</label>
                <input type="text" value={form.company} onChange={update("company")} placeholder="Your company" />
                {errors.company && <span className="field__error">{errors.company}</span>}
              </div>
            </div>
            <div className="field--row">
              <div className="field">
                <label>Work email</label>
                <input type="email" value={form.email} onChange={update("email")} placeholder="you@company.bh" />
                {errors.email && <span className="field__error">{errors.email}</span>}
              </div>
              <div className="field">
                <label>Phone (optional)</label>
                <input type="tel" value={form.phone} onChange={update("phone")} placeholder="+973…" />
              </div>
            </div>
            <div className="field--row">
              <div className="field">
                <label>Occasion</label>
                <select value={form.occasion} onChange={update("occasion")}>
                  <option value="">Choose…</option>
                  <option>VIP / Board gifting</option>
                  <option>Corporate event</option>
                  <option>Client appreciation</option>
                  <option>Eid / Ramadan</option>
                  <option>National Day</option>
                  <option>Other</option>
                </select>
                {errors.occasion && <span className="field__error">{errors.occasion}</span>}
              </div>
              <div className="field">
                <label>Approx. quantity</label>
                <select value={form.quantity} onChange={update("quantity")}>
                  <option value="">Choose…</option>
                  <option>20–50 boxes</option>
                  <option>50–150 boxes</option>
                  <option>150–500 boxes</option>
                  <option>500+ boxes</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label>Anything else?</label>
              <textarea value={form.notes} onChange={update("notes")} placeholder="Date, brand colours, dietary notes…"></textarea>
            </div>
            {submitError &&
          <div style={{
            background: "rgba(178, 58, 58, 0.08)",
            border: "1px solid rgba(178, 58, 58, 0.25)",
            color: "#8B2D2D",
            padding: "10px 12px",
            borderRadius: 4,
            fontSize: 13,
            marginBottom: 12
          }}>{submitError}</div>
          }
            <button type="submit" className="btn btn--primary" disabled={submitting} style={{ width: "100%", marginTop: 8, opacity: submitting ? 0.6 : 1, cursor: submitting ? "wait" : "pointer" }}>
              {submitting ? "Sending…" : <>Send me the mockup <span className="arrow">→</span></>}
            </button>
          </form>
        }
      </div>
    </div>);

}

/* ─── App ─── */
function App() {
  const [formOpen, setFormOpen] = useState(false);
  const open = () => setFormOpen(true);
  const close = () => setFormOpen(false);

  // Tweaks support
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accentHue": 50,
    "accentChroma": 0.06,
    "accentLightness": 0.42,
    "displayFont": "Instrument Serif",
    "showFAB": true
  } /*EDITMODE-END*/;
  const [tweaks, setTweak] = typeof useTweaks === "function" ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", `oklch(${tweaks.accentLightness} ${tweaks.accentChroma} ${tweaks.accentHue})`);
    root.style.setProperty("--accent-2", `oklch(${Math.min(tweaks.accentLightness + 0.30, 0.85)} ${Math.max(tweaks.accentChroma + 0.02, 0.04)} ${tweaks.accentHue + 25})`);
    const fontMap = {
      "Instrument Serif": '"Instrument Serif", Georgia, serif',
      "Cormorant Garamond": '"Cormorant Garamond", Georgia, serif',
      "Fraunces": '"Fraunces", Georgia, serif',
      "Playfair Display": '"Playfair Display", Georgia, serif'
    };
    root.style.setProperty("--font-display", fontMap[tweaks.displayFont] || fontMap["Instrument Serif"]);
  }, [tweaks]);

  return (
    <>
      <Header onOpenForm={open} />
      <main>
        <Hero onOpenForm={open} />
        <Strip />
        <ProblemTrust />
        <Solution />
        <UseCases />
        <Collections />
        <Proof />
        <Branding />
        <Offer onOpenForm={open} />
        <FAQ />
        <FinalCTA onOpenForm={open} />
      </main>
      <Footer />
      {tweaks.showFAB && <FAB />}
      <MockupModal open={formOpen} onClose={close} />

      {typeof TweaksPanel === "function" &&
      <TweaksPanel title="Tweaks">
          <TweakSection title="Accent colour">
            <TweakSlider label="Hue" value={tweaks.accentHue} min={0} max={360} step={1} onChange={(v) => setTweak("accentHue", v)} />
            <TweakSlider label="Chroma" value={tweaks.accentChroma} min={0} max={0.2} step={0.01} onChange={(v) => setTweak("accentChroma", v)} />
            <TweakSlider label="Lightness" value={tweaks.accentLightness} min={0.2} max={0.7} step={0.01} onChange={(v) => setTweak("accentLightness", v)} />
          </TweakSection>
          <TweakSection title="Typography">
            <TweakSelect
            label="Display font"
            value={tweaks.displayFont}
            options={["Instrument Serif", "Cormorant Garamond", "Fraunces", "Playfair Display"]}
            onChange={(v) => setTweak("displayFont", v)} />
          
          </TweakSection>
          <TweakSection title="UI">
            <TweakToggle label="WhatsApp button" value={tweaks.showFAB} onChange={(v) => setTweak("showFAB", v)} />
          </TweakSection>
        </TweaksPanel>
      }
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);