/* 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);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="wrap site-header__inner">
        <a href="#" className="brand" aria-label="Afrah Gifting Services">
          <span className="brand__mark">A</span>
          <span className="brand__name">Afrah</span>
          <span className="brand__tag">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>
      </div>
    </header>
  );
}

/* ─── 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">
          <Ph label="Hero · Branded box, three-quarter view" variant="accent" />
          <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.", v: "accent" },
    { tag: "02 / Events", t: "Corporate events", d: "Conference welcome boxes, AGM tokens, summit favours — at scale, on schedule.", v: "cream" },
    { tag: "03 / Clients", t: "Client appreciation", d: "Quarterly thank-yous and renewal moments that keep your name on their desk.", v: "gold" },
    { tag: "04 / Festive", t: "Festive gifting", d: "Eid, Ramadan, National Day. We plan ahead so you don't scramble at month-end.", v: "" },
  ];
  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 Afrah.</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">
                <Ph label={c.tag} variant={c.v} />
              </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 8 / box",
      d: "A focused selection for everyday recognition — onboarding, thank-yous, and quarterly touchpoints.",
      specs: [
        { l: "Pieces", v: "9 sweets" },
        { l: "Box", v: "Kraft + foil" },
        { l: "Branding", v: "Logo + sleeve" },
        { l: "MOQ", v: "25 units" },
      ],
      v: "cream",
    },
    {
      name: "Elegant",
      price: "From BHD 14 / box",
      d: "Our most-ordered tier. The right balance of presentation and value for client and event gifting.",
      specs: [
        { l: "Pieces", v: "16 sweets" },
        { l: "Box", v: "Rigid lid · matte" },
        { l: "Branding", v: "Foil + insert card" },
        { l: "MOQ", v: "50 units" },
      ],
      v: "accent",
    },
    {
      name: "Majestic",
      price: "From BHD 28 / box",
      d: "For board members, VIP partners, and milestone moments where the box itself is the message.",
      specs: [
        { l: "Pieces", v: "24 sweets" },
        { l: "Box", v: "Wood-look · magnetic" },
        { l: "Branding", v: "Embossed + ribbon" },
        { l: "MOQ", v: "20 units" },
      ],
      v: "dark",
    },
  ];
  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">
                <Ph label={`${t.name} collection`} variant={t.v} />
              </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"><Ph label="Open box · overhead" variant="accent" /></div>
          <div className="proof__cell"><Ph label="Sweet · close-up" variant="cream" /></div>
          <div className="proof__cell"><Ph label="Foil detail" variant="gold" /></div>
          <div className="proof__cell"><Ph label="Packaging detail · ribbon + card" variant="dark" /></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">
          <Ph label="Branded box · logo emboss + foil sleeve" variant="cream" />
        </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>{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/97333000000" target="_blank" rel="noopener">
            <WhatsAppGlyph /> Chat on WhatsApp
          </a>
        </div>
        <div className="final__meta">
          <span>Manama, Bahrain</span>
          <span>hello@afrahgifting.bh</span>
          <span>+973 3300 0000</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">
              <span className="brand__mark">A</span>
              <span className="brand__name">Afrah</span>
            </a>
            <p>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:hello@afrahgifting.bh">hello@afrahgifting.bh</a></li>
              <li><a href="tel:+97333000000">+973 3300 0000</a></li>
              <li><a href="https://wa.me/97333000000">WhatsApp</a></li>
            </ul>
          </div>
          <div>
            <h5>Visit</h5>
            <ul>
              <li>Manama, Bahrain</li>
              <li>Sun–Thu · 9:00–17:00</li>
              <li>By appointment</li>
            </ul>
          </div>
        </div>
        <div className="footer__base">
          <span>© 2026 Afrah Gifting Services. Manama, Bahrain.</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/97333000000" 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 firstFieldRef = useRef(null);

  useEffect(() => {
    if (open && firstFieldRef.current) {
      setTimeout(() => firstFieldRef.current.focus(), 100);
    }
    if (!open) {
      setTimeout(() => {
        setSubmitted(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 = (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) {
      setSubmitted(true);
    }
  };

  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="Sara Al Khalifa" />
                {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>
            <button type="submit" className="btn btn--primary" style={{ width: "100%", marginTop: 8 }}>
              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 />);