/* global React, Reveal, RevealLines, MagneticButton, Footer */
const { useState: useState_i, useEffect: useEffect_i } = React;

/* =================================================
   SHOWROOMS
================================================= */
function ShowroomsPage({ onNavigate }) {
  const rooms = [
    {
      name: "Los Angeles — Arts District",
      tag: "Flagship · design studio + showroom",
      addr: "1247 Mateo Street\nLos Angeles, CA 90021",
      hours: "Tue–Sat · 10am–6pm\nWalk-ins welcome",
      tags: ["Full catalog", "Swatches", "Astrid's studio"],
      img: "assets/sognefjord-bone.jpg",
    },
    {
      name: "The Atelier — Vietnam",
      tag: "Working workshop · Vietnam",
      addr: "By appointment\nVietnam",
      hours: "By appointment, 30+ days notice\nFloor tours by arrangement",
      tags: ["Workshop visit", "Joinery bench", "Kiln rack"],
      img: "assets/detail-tenon.jpg",
    },
    {
      name: "New York — Tribeca",
      tag: "Showroom",
      addr: "112 Franklin Street\nNew York, NY 10013",
      hours: "Wed–Sun · 11am–7pm\nAppointments preferred",
      tags: ["Appointments", "Sofas & seating", "Trade desk"],
      img: "assets/hardanger-sideboard.jpg",
    },
    {
      name: "Chicago — West Loop",
      tag: "Showroom",
      addr: "861 W Randolph Street\nChicago, IL 60607",
      hours: "Thu–Sun · 11am–6pm",
      tags: ["Appointments", "Dining & casegoods"],
      img: "assets/geirangerfjord-table.jpg",
    },
  ];

  return (
    <main className="page-frame" data-screen-label="Showrooms">
      <div className="page-head">
        <div>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Visit us</div></Reveal>
          <Reveal delay={120}>
            <h1 className="t-h1" style={{ marginTop: 20 }}>
              Four rooms, <span style={{ fontStyle: "italic" }}>one workshop.</span>
            </h1>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <p className="dek">
            The LA flagship is Astrid's design studio and our largest showroom — every piece on the floor, every fabric on the wall. Our Vietnam atelier is where the work actually happens; come if you want to see the kiln rack and the joinery bench. New York and Chicago carry the bestsellers and the full swatch set.
          </p>
        </Reveal>
      </div>

      <section className="section show-grid" style={{ padding: 0 }}>
        {rooms.map((r, i) => (
          <Reveal key={r.name} delay={(i % 2) * 100} className="show-card">
            <div className="img" style={{ backgroundImage: `url(${r.img})` }}></div>
            <div className="info">
              <div>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>{r.tag}</div>
                <h3 style={{ marginTop: 8 }}>{r.name}</h3>
              </div>
              <div className="addr" style={{ whiteSpace: "pre-line" }}>{r.addr}</div>
              <div className="hours" style={{ whiteSpace: "pre-line" }}>{r.hours}</div>
              <div className="tags">
                {r.tags.map((t) => <span key={t} className="tag">{t}</span>)}
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
                <MagneticButton className="btn btn--solid" data-cursor="Book">
                  <span>Book a visit</span><span className="arrow">→</span>
                </MagneticButton>
                <MagneticButton className="btn btn--ghost" data-cursor="Map">
                  <span>Directions</span>
                </MagneticButton>
              </div>
            </div>
          </Reveal>
        ))}
      </section>

      <section className="section section--dark" style={{ textAlign: "center" }}>
        <Reveal>
          <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Atelier visits</div>
          <h2 className="t-h2" style={{ marginTop: 16, maxWidth: "22ch", margin: "16px auto 0" }}>
            See the wood, <span style={{ fontStyle: "italic" }}>meet the joiner.</span>
          </h2>
          <p className="t-body t-body-lg" style={{ maxWidth: "50ch", margin: "24px auto 32px", color: "rgba(242,235,224,0.75)" }}>
            A guided tour of the Vietnam workshop — wood rack to kiln, joinery bench to spray booth. About 90 minutes, no charge, coffee included. Write to us thirty days ahead and we'll arrange a day around your trip.
          </p>
          <MagneticButton className="btn btn--bone" data-cursor="Book">
            <span>Plan a visit</span><span className="arrow">→</span>
          </MagneticButton>
        </Reveal>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   TRADE PROGRAM
================================================= */
function TradePage({ onNavigate }) {
  const [form, setForm] = useState_i({ firstName: "", lastName: "", firm: "", email: "", phone: "", website: "", role: "Interior designer", projects: "" });
  const [submitted, setSubmitted] = useState_i(false);

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

  return (
    <main className="page-frame" data-screen-label="Trade">
      <div className="page-head">
        <div>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Delina Living Trade Program</div></Reveal>
          <Reveal delay={120}>
            <h1 className="t-h1" style={{ marginTop: 20 }}>
              For designers, <span style={{ fontStyle: "italic" }}>at trade.</span>
            </h1>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <p className="dek">
            A small, vetted program for working interior designers, architects and studio teams. Twenty percent off the catalog, dedicated production windows, COMs accepted on most pieces, and a direct line to the workshop.
          </p>
        </Reveal>
      </div>

      <section className="section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            <Reveal><div className="t-eyebrow" style={{ color: "var(--ink-mute)" }}>— What's included</div></Reveal>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line-strong)" }}>
              {[
                ["20% trade discount", "Off the catalog list, on all pieces. Applied automatically at checkout once approved."],
                ["COMs accepted", "Send us your fabric — we accept customer-supplied upholstery on every seating piece. No charge for first-time customers."],
                ["Dedicated production window", "Reserve workshop time for project-scale orders. We commit to a delivery date and hold it."],
                ["Trade desk in NYC", "A dedicated trade-only desk at the Tribeca showroom, Tue–Fri, by appointment."],
                ["Workshop tours", "Bring your client to the atelier in Vietnam. We'll close a day at the atelier just for you."],
                ["Net-30 terms", "Available after the third project. Application required."],
              ].map(([l, b]) => (
                <Reveal key={l} className="row" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 24, padding: "20px 0", borderBottom: "1px solid var(--line)" }}>
                  <div style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 20, letterSpacing: "-0.005em" }}>{l}</div>
                  <div className="t-body" style={{ color: "var(--ink-soft)" }}>{b}</div>
                </Reveal>
              ))}
            </div>
          </div>

          <div style={{ background: "var(--bone-warm)", padding: 48, alignSelf: "start", borderRadius: 4 }}>
            {submitted ? (
              <div>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Thank you</div>
                <h3 className="t-h3" style={{ fontStyle: "italic", marginTop: 16 }}>We'll write back within two days.</h3>
                <p className="t-body" style={{ marginTop: 16, maxWidth: "36ch" }}>
                  Astrid or our trade lead will be in touch from <span className="t-mono">trade@delinalv.com</span>. In the meantime, the full swatch set is on its way.
                </p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Apply</div>
                <h3 className="t-h3" style={{ fontStyle: "italic", marginTop: 12, marginBottom: 24 }}>Tell us about your studio.</h3>
                <div className="field-row">
                  <div className="field"><label>First name</label><input type="text" value={form.firstName} onChange={set("firstName")} required data-cursor="Type" /></div>
                  <div className="field"><label>Last name</label><input type="text" value={form.lastName} onChange={set("lastName")} required data-cursor="Type" /></div>
                </div>
                <div className="field"><label>Firm</label><input type="text" value={form.firm} onChange={set("firm")} required data-cursor="Type" /></div>
                <div className="field"><label>Website / portfolio</label><input type="url" placeholder="https://" value={form.website} onChange={set("website")} data-cursor="Type" /></div>
                <div className="field-row">
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={set("email")} required data-cursor="Type" /></div>
                  <div className="field"><label>Phone</label><input type="tel" value={form.phone} onChange={set("phone")} data-cursor="Type" /></div>
                </div>
                <div className="field">
                  <label>Role</label>
                  <select value={form.role} onChange={set("role")} data-cursor="Select">
                    <option>Interior designer</option>
                    <option>Architect</option>
                    <option>Hospitality designer</option>
                    <option>Studio principal</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="field"><label>Tell us about a project</label><textarea rows={4} value={form.projects} onChange={set("projects")} data-cursor="Type" placeholder="A few sentences about a current or recent project — scale, materials, what you're after." /></div>
                <MagneticButton className="btn btn--solid" data-cursor="Apply" style={{ marginTop: 16 }}>
                  <span>Apply for trade</span><span className="arrow">→</span>
                </MagneticButton>
              </form>
            )}
          </div>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   HELP / FAQ
================================================= */
function HelpPage({ onNavigate }) {
  const sections = [
    {
      title: "Ordering & made-to-order",
      items: [
        { q: "How long does an order take?", a: "Every Delina Living piece is built to order over an eight-week window. Week one is wood selection, weeks two and three are frame and joinery, weeks four through six are upholstery and finish, weeks seven and eight are delivery. We don't keep inventory." },
        { q: "When am I charged?", a: "We authorize your card at checkout but do not charge it until the day your frame is joined — about day ten. If anything in the workshop runs into a problem, you hear from us before any charge is made." },
        { q: "Can I rush an order?", a: "We genuinely cannot. Eight weeks is the minimum amount of time it takes to do the joinery, settling, upholstery and finish to our standard. We'd rather lose the sale than ship a piece we're not proud of." },
        { q: "What about COMs (customer-supplied fabric)?", a: "We accept COMs on every seating piece. Most trade customers send three to seven yards of fabric directly to the workshop. There's no upcharge for first-time use." },
      ],
    },
    {
      title: "Delivery",
      items: [
        { q: "Is delivery really free?", a: "White-glove delivery is included on every piece, anywhere in the continental United States. That includes a two-person team, placement in the room of your choice, and removal of all packaging. Curbside drop is available outside the continental US." },
        { q: "How do you handle stairs and tight doorways?", a: "Tell us in the order notes. We'll send you a doorway diagram before delivery week to confirm fit. If anything looks borderline, we hop on a video walk-through. We have never refused a delivery for fit, but we plan ahead." },
        { q: "Can I change the delivery date?", a: "Yes, up until the week of delivery. We schedule a two-hour window with you the week before; that window is flexible up to 24 hours in advance." },
      ],
    },
    {
      title: "Warranty & care",
      items: [
        { q: "What does the 50-year warranty cover?", a: "Every joinery joint, on every frame, for fifty years. If a tenon ever loosens, a leg splits, or a frame fails for any reason that isn't gross misuse, we repair it free, anywhere in the US. It is transferable to any subsequent owner." },
        { q: "What about upholstery?", a: "Five-year warranty on upholstery construction (the spring deck, suspension, cushion construction). Fabric wear is not covered, but reupholstery is available at cost on any Delina Living piece, ever." },
        { q: "How do I care for the hardwax oil finish?", a: "Dust monthly with a soft cloth. Wipe spills immediately. Every two to three years, apply a thin coat of hardwax oil with 0000 steel wool — we sell the kit for $24, or we can do it for you at any showroom." },
      ],
    },
    {
      title: "Returns & exchanges",
      items: [
        { q: "Can I return a made-to-order piece?", a: "Because every piece is built specifically for you, made-to-order is final. We work very hard before you order — swatch sets, video calls, room dimensions — to make sure you don't need to." },
        { q: "What if I want a different upholstery once it arrives?", a: "Within ten days of delivery, we'll swap upholstery on any seating piece at cost. We can do it at the LA flagship for stocked fabrics, or ship the piece back to the atelier for the full swatch range — about three weeks either way." },
        { q: "What if something arrives damaged?", a: "Write us within seven days. We pick it up, fix it or replace it at no cost. This happens about once a year. We take it personally each time." },
      ],
    },
    {
      title: "Trade & press",
      items: [
        { q: "Do you offer trade discounts?", a: "Yes — 20% off the catalog for approved trade professionals. Apply on the trade page; we review applications in batches each Friday." },
        { q: "Press inquiries?", a: "Write to press@delinalv.com. Astrid handles most press personally; expect a reply within three days." },
      ],
    },
  ];

  return (
    <main className="page-frame" data-screen-label="Help">
      <div className="page-head">
        <div>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Help center</div></Reveal>
          <Reveal delay={120}>
            <h1 className="t-h1" style={{ marginTop: 20 }}>
              The things people <span style={{ fontStyle: "italic" }}>actually ask.</span>
            </h1>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <div>
            <p className="dek">
              Everything below is written by Astrid and our delivery lead. If your question isn't here, write us at <a href="#" data-cursor="Write" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }} style={{ borderBottom: "1px solid currentColor" }}>care@delinalv.com</a> — replies within a day.
            </p>
            <div className="help-search">
              <input type="text" placeholder="Search the help center..." data-cursor="Type" />
              <span className="t-mono" style={{ color: "var(--ink-mute)" }}>↵</span>
            </div>
          </div>
        </Reveal>
      </div>

      <section className="section">
        {sections.map((s, si) => (
          <div key={si} style={{ marginBottom: 64 }}>
            <Reveal>
              <h2 className="t-h3" style={{ fontStyle: "italic", marginBottom: 16 }}>{s.title}.</h2>
            </Reveal>
            <div className="faq">
              {s.items.map((it, i) => (
                <Reveal key={i} delay={i * 60}>
                  <details className="faq-item">
                    <summary data-cursor="Open">{it.q}<span className="toggle">＋</span></summary>
                    <div className="ans">{it.a}</div>
                  </details>
                </Reveal>
              ))}
            </div>
          </div>
        ))}
      </section>

      <section className="section section--bone-warm" style={{ textAlign: "center" }}>
        <Reveal>
          <h3 className="t-h2" style={{ maxWidth: "20ch", margin: "0 auto" }}>Still have <span style={{ fontStyle: "italic" }}>a question?</span></h3>
        </Reveal>
        <Reveal delay={200}>
          <p className="t-body t-body-lg" style={{ marginTop: 16, color: "var(--ink-soft)" }}>
            A real person will reply within a day. Promise.
          </p>
        </Reveal>
        <Reveal delay={400}>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center" }}>
            <MagneticButton className="btn btn--solid" data-cursor="Write" onClick={() => onNavigate("contact")}>
              <span>Write to us</span><span className="arrow">→</span>
            </MagneticButton>
            <MagneticButton className="btn btn--ghost" data-cursor="Call">
              <span>+1 (949) 358-8040</span>
            </MagneticButton>
          </div>
        </Reveal>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   SUSTAINABILITY
================================================= */
function SustainabilityPage({ onNavigate }) {
  return (
    <main data-screen-label="Sustainability">
      <section className="hero" style={{ background: "var(--ink)" }}>
        <div className="hero-image" style={{ backgroundImage: "url(assets/sustainability-hero.jpg)" }}></div>
        <div className="hero-grain"></div>
        <div className="hero-content">
          <div>
            <Reveal><div className="t-eyebrow" style={{ color: "rgba(242,235,224,0.55)" }}>— Materials & sourcing</div></Reveal>
            <h1 className="t-display hero-title" style={{ marginTop: 32 }}>
              <RevealLines lines={["The best", <span key="i" style={{ fontStyle: "italic" }}>environmental decision</span>, "is to make it last."]} gap={120} />
            </h1>
          </div>
          <div></div>
        </div>
      </section>

      <section className="section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <Reveal>
            <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— A note, without the marketing voice</div>
          </Reveal>
          <div className="col" style={{ gap: 24 }}>
            <Reveal delay={120}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", textWrap: "pretty", fontSize: 20 }}>
                We're skeptical of furniture sustainability claims, including our own. The honest version: the single most significant environmental decision we make is to build pieces that don't end up in a landfill in 2031. That's the framework. Below is what falls out of it.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--bone-warm">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line-strong)" }}>
          {[
            ["FSC-certified hardwood", "Our acacia comes from FSC-certified plantations in southern Vietnam, milled within 60 km of the atelier. Walnut is FSC-certified, imported from US suppliers we've used since 2018. Chain-of-custody is documented per board."],
            ["No engineered wood in frames", "Frames are solid hardwood, mortise-and-tenon. There is no plywood, no MDF, no particleboard structural to any piece. Drawer bottoms are solid acacia; cabinet backs are quartersawn walnut."],
            ["Natural fiber upholstery", "Our default fabrics are Belgian linen, Italian mohair, English wool, and cotton bouclé. We will work with a customer-supplied fabric on request. We do not stock synthetic upholstery."],
            ["Hardwax oil, not lacquer", "We finish with six coats of food-grade hardwax oil from a German maker. No VOC sprays, no off-gassing. The finish is fully repairable in place, forever."],
            ["Made in one building", "Cut, joined, upholstered, finished, packed and shipped from our atelier in Vietnam. Designed and prototyped at our Los Angeles studio. No third-party factories, no white-label."],
            ["Take-back program", "If a Delina Living piece ever leaves your life, write us. We'll arrange pickup and either resell, donate, or strip it back to its boards for a future build."],
          ].map(([l, b], i) => (
            <Reveal key={i} delay={(i % 3) * 100} style={{ padding: "32px 32px 32px 0", borderRight: (i % 3) < 2 ? "1px solid var(--line)" : "0", borderBottom: i < 3 ? "1px solid var(--line)" : "0" }}>
              <div className="t-eyebrow" style={{ color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</div>
              <h4 style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 24, marginTop: 16, letterSpacing: "-0.005em" }}>{l}</h4>
              <p className="t-body" style={{ marginTop: 12, color: "var(--ink-soft)" }}>{b}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <Reveal variant="img"><div style={{ aspectRatio: "5/6", backgroundImage: "url(assets/vestfjord-shelf.jpg)", backgroundSize: "cover", backgroundPosition: "center" }}></div></Reveal>
          <div className="col" style={{ gap: 28 }}>
            <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Carbon</div></Reveal>
            <Reveal delay={120}><h3 className="t-h2">We measure it. <span style={{ fontStyle: "italic" }}>We don't offset it.</span></h3></Reveal>
            <Reveal delay={300}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", maxWidth: "44ch" }}>
                We measured the full lifecycle of a Sognefjord sofa in 2024: approximately 348 kg CO₂e from forest to door, of which 71% is international + last-mile delivery and 14% is the kiln cycle. We don't buy offsets because we don't trust the market for them; instead we are reducing the delivery share by consolidating ocean-freight routes and shifting to a regional electric fleet for US last-mile from 2027.
              </p>
            </Reveal>
            <Reveal delay={400}>
              <p className="t-body" style={{ color: "var(--ink-mute)", fontStyle: "italic", maxWidth: "44ch" }}>
                The 2024 figure is published in full at delinalv.com/lca, including methodology.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--dark" style={{ textAlign: "center" }}>
        <Reveal>
          <p className="t-quote" style={{ maxWidth: "30ch", margin: "0 auto", color: "var(--bone)" }}>
            "The greenest building is the one that already exists."
          </p>
          <p className="t-mono" style={{ marginTop: 32, color: "rgba(242,235,224,0.55)" }}>— Carl Elefante · adapted, for furniture</p>
        </Reveal>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   CONTACT
================================================= */
function ContactPage({ onNavigate }) {
  const [form, setForm] = useState_i({ name: "", email: "", subject: "Care", message: "" });
  const [sent, setSent] = useState_i(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <main className="page-frame" data-screen-label="Contact">
      <div className="page-head">
        <div>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Contact</div></Reveal>
          <Reveal delay={120}>
            <h1 className="t-h1" style={{ marginTop: 20 }}>
              Write to us. <span style={{ fontStyle: "italic" }}>A real person replies.</span>
            </h1>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <p className="dek">
            We answer everything within one business day, usually the same day. No support tickets, no chatbots, no IVR menus — just a small team in Los Angeles, one in Tribeca, and our atelier crew in Vietnam.
          </p>
        </Reveal>
      </div>

      <section className="section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            <Reveal><div className="t-eyebrow" style={{ color: "var(--ink-mute)" }}>— Reach us directly</div></Reveal>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                ["Care & orders", "care@delinalv.com", "Replies within one business day"],
                ["Trade & press", "trade@delinalv.com", "Mondays & Thursdays, Astrid + Maya"],
                ["Studio (Astrid directly)", "astrid@delinalv.com", "She reads everything; replies most things personally"],
                ["By phone", "+1 (949) 358-8040", "Tue–Sat, 10am–6pm PT"],
                ["At the door — LA flagship", "1247 Mateo Street, Los Angeles, CA 90021", "Tue–Sat · walk-ins welcome"],
                ["At the bench — Vietnam atelier", "By appointment · Vietnam", "By appointment · 30+ days notice"],
              ].map(([l, v, s], i) => (
                <Reveal key={i} delay={i * 80} style={{ padding: "24px 0", borderTop: "1px solid var(--line)" }}>
                  <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— {l}</div>
                  <div style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 28, marginTop: 8, fontStyle: "italic" }}>{v}</div>
                  <div className="t-mono" style={{ color: "var(--ink-mute)", marginTop: 4 }}>{s}</div>
                </Reveal>
              ))}
            </div>
          </div>

          <div style={{ background: "var(--bone-warm)", padding: 48, alignSelf: "start" }}>
            {sent ? (
              <div>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Sent</div>
                <h3 className="t-h3" style={{ fontStyle: "italic", marginTop: 16 }}>Thanks. We'll write back today.</h3>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Or send us a note</div>
                <h3 className="t-h3" style={{ fontStyle: "italic", marginTop: 12, marginBottom: 24 }}>What can we do?</h3>
                <div className="field-row">
                  <div className="field"><label>Name</label><input type="text" value={form.name} onChange={set("name")} required data-cursor="Type" /></div>
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={set("email")} required data-cursor="Type" /></div>
                </div>
                <div className="field">
                  <label>About</label>
                  <select value={form.subject} onChange={set("subject")} data-cursor="Select">
                    <option>An order I've placed</option>
                    <option>Care</option>
                    <option>A specific piece</option>
                    <option>Trade or press</option>
                    <option>Visit the workshop</option>
                    <option>Something else</option>
                  </select>
                </div>
                <div className="field"><label>Message</label><textarea rows={6} value={form.message} onChange={set("message")} required data-cursor="Type" /></div>
                <MagneticButton className="btn btn--solid" data-cursor="Send" style={{ marginTop: 16 }}>
                  <span>Send</span><span className="arrow">→</span>
                </MagneticButton>
              </form>
            )}
          </div>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   CUSTOM COMMISSIONS — bespoke projects for residential & commercial
================================================= */
const CUSTOM_VERTICALS = [
  {
    slug: "mansion",
    name: "Mansion",
    sub: "Private estates",
    blurb: "Floor-to-ceiling built-ins, libraries, dining suites and full-room commissions for primary homes. Lead times 14–26 weeks depending on scope. Suits clients working with their own interior designer or architect.",
    img: "assets/custom-mansion.jpg",
  },
  {
    slug: "home",
    name: "Home",
    sub: "Private residences",
    blurb: "Custom kitchen islands, built-in benches, fitted dining and storage for the spaces our catalog can't quite fit. Designed to read as part of the building, not as furniture pushed against a wall. 10–16 weeks.",
    img: "assets/custom-home.jpg",
  },
  {
    slug: "showroom",
    name: "Showroom",
    sub: "Retail interiors",
    blurb: "Custom display tables, fitting benches, brand-led merchandising fixtures and seating. We work with your architect or directly with you. Gallery-grade restraint, hard-wearing finishes.",
    img: "assets/custom-showroom.jpg",
  },
  {
    slug: "restaurant",
    name: "Restaurant",
    sub: "Hospitality",
    blurb: "Banquettes, dining tables, host stands and light fixtures, specified for daily service. Commercial-grade upholstery options, scrubbable finishes, and a maintenance kit for year two.",
    img: "assets/custom-restaurant.jpg",
  },
  {
    slug: "nail",
    name: "Nail Salon",
    sub: "Beauty",
    blurb: "Manicure tables with integrated brushed-brass task lighting, pedicure benches, custom retail shelving. Designed for the way the room actually runs — long appointments, multiple operators, restrained palette.",
    img: "assets/custom-nail.jpg",
  },
  {
    slug: "spa",
    name: "Spa",
    sub: "Wellness",
    blurb: "Reception desks, treatment-room millwork, waiting benches, retail niches. Quiet, monastic, designed to lower the volume of the room. No incense rack hardware, no spa-cliché.",
    img: "assets/custom-spa.jpg",
  },
];

const CUSTOM_PROCESS = [
  ["01 — Inquiry", "Tell us about the space", "Send the form below, or write to commissions@delinalv.com. A real person replies within two business days with a yes/no and a realistic window."],
  ["02 — Design", "Astrid draws it from L.A.", "We sketch the commission, agree on materials, dimensions and finishes. One round of revisions included. You'll have a signed-off rendering before we cut wood."],
  ["03 — Build", "Cut and joined at our atelier", "Our atelier builds your commission alongside catalog production. Weekly progress photographs. 8–26 weeks depending on scope. You're charged on a milestone schedule, not up front."],
  ["04 — Install", "White-glove install in the room", "Crated, freighted, white-glove installed by our team or in coordination with your contractor. We don't leave until the room is right."],
];

function CustomPage({ onNavigate }) {
  const [form, setForm] = useState_i({ name: "", email: "", phone: "", type: "Home", budget: "Under $25k", message: "" });
  const [sent, setSent] = useState_i(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <main data-screen-label="Custom">
      {/* HERO */}
      <section className="hero" style={{ background: "var(--ink)" }}>
        <div className="hero-image" style={{ backgroundImage: "url(assets/lifestyle-living.jpg)" }}></div>
        <div className="hero-grain"></div>
        <div className="hero-content">
          <div>
            <Reveal><div className="t-eyebrow" style={{ color: "rgba(242,235,224,0.55)" }}>— Custom commissions</div></Reveal>
            <h1 className="t-display hero-title" style={{ marginTop: 32 }}>
              <RevealLines lines={["Built", <span key="i" style={{ fontStyle: "italic" }}>for the room.</span>]} gap={120} />
            </h1>
          </div>
          <div></div>
        </div>
      </section>

      {/* OPENER */}
      <section className="story">
        <div className="story-grid" style={{ alignItems: "start" }}>
          <Reveal>
            <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Since 2018</div>
            <h2 className="t-h2" style={{ marginTop: 20, maxWidth: "18ch" }}>
              The catalog is twenty-two pieces. <span style={{ fontStyle: "italic" }}>Sometimes that isn't enough.</span>
            </h2>
          </Reveal>
          <div className="col" style={{ gap: 24 }}>
            <Reveal delay={200}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", textWrap: "pretty" }}>
                Delina Living has built one-off and full-suite commissions for private homes, mansions, restaurants, retail showrooms, nail salons and spa receptions since 2018. Same designer, same atelier in Vietnam, same fifty-year warranty as the catalog — sized, finished and specified for your space.
              </p>
            </Reveal>
            <Reveal delay={350}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", textWrap: "pretty" }}>
                We take on roughly twenty commissions a year. We work with end clients directly, with interior designers, and with hospitality and retail operators. Project minimum is around $15,000; there is no maximum.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* VERTICALS GRID */}
      <section className="section" style={{ paddingTop: 40 }}>
        <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Where we work</div></Reveal>
        <Reveal delay={120}>
          <h2 className="t-h2" style={{ marginTop: 16, maxWidth: "20ch" }}>
            Six rooms <span style={{ fontStyle: "italic" }}>we know well.</span>
          </h2>
        </Reveal>
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, rowGap: 80 }}>
          {CUSTOM_VERTICALS.map((v, i) => (
            <Reveal key={v.slug} delay={(i % 3) * 100} variant="img">
              <div style={{ aspectRatio: "4/5", backgroundImage: `url(${v.img})`, backgroundSize: "cover", backgroundPosition: "center", marginBottom: 24, backgroundColor: "var(--bone-deep)" }}></div>
              <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— {v.sub}</div>
              <h3 style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 32, letterSpacing: "-0.005em", marginTop: 10 }}>{v.name}</h3>
              <p className="t-body" style={{ marginTop: 12, color: "var(--ink-soft)", maxWidth: "32ch" }}>{v.blurb}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section className="section section--bone-warm">
        <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— How a commission works</div></Reveal>
        <Reveal delay={120}>
          <h2 className="t-h2" style={{ marginTop: 16, maxWidth: "22ch" }}>
            From inquiry to installation, <span style={{ fontStyle: "italic" }}>step by step.</span>
          </h2>
        </Reveal>
        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line-strong)" }}>
          {CUSTOM_PROCESS.map(([eyebrow, title, body], i) => (
            <Reveal key={i} delay={i * 100} style={{ padding: "40px 24px 0 0", borderRight: i < 3 ? "1px solid var(--line)" : "0" }}>
              <div className="t-eyebrow" style={{ color: "var(--accent)" }}>{eyebrow}</div>
              <h4 style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 26, marginTop: 16, letterSpacing: "-0.005em" }}>{title}</h4>
              <p className="t-body" style={{ marginTop: 12, color: "var(--ink-soft)" }}>{body}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* INQUIRY */}
      <section className="section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Start an inquiry</div></Reveal>
            <Reveal delay={120}>
              <h2 className="t-h2" style={{ marginTop: 16, maxWidth: "16ch" }}>
                Tell us about <span style={{ fontStyle: "italic" }}>the room.</span>
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="t-body t-body-lg" style={{ marginTop: 24, color: "var(--ink-soft)", maxWidth: "42ch" }}>
                A few sentences is enough to start. We'll write back within two business days with a realistic window and a sense of the cost.
              </p>
            </Reveal>
            <Reveal delay={360}>
              <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                <div className="t-eyebrow" style={{ color: "var(--ink-mute)" }}>— Or write directly</div>
                <div style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 28, marginTop: 8, fontStyle: "italic" }}>commissions@delinalv.com</div>
                <div className="t-mono" style={{ color: "var(--ink-mute)", marginTop: 6 }}>Astrid + Maya · replies within two business days</div>
              </div>
            </Reveal>
          </div>

          <div style={{ background: "var(--bone-warm)", padding: 48, alignSelf: "start" }}>
            {sent ? (
              <div>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Received</div>
                <h3 className="t-h3" style={{ fontStyle: "italic", marginTop: 16 }}>Thank you. We'll write back within two days.</h3>
                <p className="t-body" style={{ marginTop: 16, maxWidth: "36ch" }}>
                  We read every inquiry. Astrid will be in touch from <span className="t-mono">commissions@delinalv.com</span>.
                </p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Inquiry</div>
                <h3 className="t-h3" style={{ fontStyle: "italic", marginTop: 12, marginBottom: 24 }}>The project.</h3>
                <div className="field-row">
                  <div className="field"><label>Name</label><input type="text" value={form.name} onChange={set("name")} required data-cursor="Type" /></div>
                  <div className="field"><label>Email</label><input type="email" value={form.email} onChange={set("email")} required data-cursor="Type" /></div>
                </div>
                <div className="field"><label>Phone (optional)</label><input type="tel" value={form.phone} onChange={set("phone")} data-cursor="Type" /></div>
                <div className="field-row">
                  <div className="field">
                    <label>Project type</label>
                    <select value={form.type} onChange={set("type")} data-cursor="Select">
                      <option>Mansion</option>
                      <option>Home</option>
                      <option>Showroom</option>
                      <option>Restaurant</option>
                      <option>Nail Salon</option>
                      <option>Spa</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Budget range</label>
                    <select value={form.budget} onChange={set("budget")} data-cursor="Select">
                      <option>Under $25k</option>
                      <option>$25k – $75k</option>
                      <option>$75k – $200k</option>
                      <option>$200k+</option>
                      <option>Not sure yet</option>
                    </select>
                  </div>
                </div>
                <div className="field"><label>Tell us about the room</label><textarea rows={5} value={form.message} onChange={set("message")} required data-cursor="Type" placeholder="A few sentences — what the space is, what you need, what you've tried, when you'd want delivery." /></div>
                <MagneticButton className="btn btn--solid" data-cursor="Send" style={{ marginTop: 16 }}>
                  <span>Send inquiry</span><span className="arrow">→</span>
                </MagneticButton>
              </form>
            )}
          </div>
        </div>
      </section>

      {/* CLOSE — same tone as atelier CTA */}
      <section className="section section--dark" style={{ textAlign: "center" }}>
        <Reveal>
          <h2 className="t-display" style={{ fontSize: "clamp(48px, 7vw, 128px)", maxWidth: "18ch", margin: "0 auto" }}>
            One designer, <span style={{ fontStyle: "italic" }}>one atelier,</span> your room.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="t-body t-body-lg" style={{ maxWidth: "52ch", margin: "32px auto 40px", color: "rgba(242,235,224,0.75)" }}>
            Every commission is drawn by Astrid in Los Angeles and built at our atelier in Vietnam. Same hands, same warranty, same restraint as the catalog. Sized for your space.
          </p>
        </Reveal>
        <Reveal delay={400}>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <MagneticButton className="btn btn--bone" data-cursor="View" onClick={() => onNavigate("atelier")}>
              <span>Inside the atelier</span><span className="arrow">→</span>
            </MagneticButton>
            <MagneticButton className="btn" style={{ color: "var(--bone)", borderColor: "rgba(242,235,224,0.4)" }} data-cursor="Write" onClick={() => onNavigate("contact")}>
              <span>Write to us</span>
            </MagneticButton>
          </div>
        </Reveal>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   404
================================================= */
function NotFoundPage({ onNavigate }) {
  return (
    <main className="notfound" data-screen-label="404">
      <Reveal>
        <div className="t-eyebrow" style={{ color: "rgba(242,235,224,0.5)" }}>— Error · 404</div>
      </Reveal>
      <Reveal delay={120}>
        <div className="big">404.</div>
      </Reveal>
      <Reveal delay={300}>
        <h1 className="t-h1" style={{ color: "var(--bone)", maxWidth: "20ch", marginTop: 16 }}>
          <span style={{ fontStyle: "italic" }}>That page</span> doesn't exist — or hasn't been built yet.
        </h1>
      </Reveal>
      <Reveal delay={500}>
        <p className="t-body t-body-lg" style={{ maxWidth: "44ch", color: "rgba(242,235,224,0.75)", marginTop: 16 }}>
          We move slowly. If you were sent here from an old link, write us at <span className="t-mono">care@delinalv.com</span> and we'll find what you're after.
        </p>
      </Reveal>
      <Reveal delay={700}>
        <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
          <MagneticButton className="btn btn--bone" data-cursor="Home" onClick={() => onNavigate("home")}>
            <span>Back to Delina Living</span><span className="arrow">→</span>
          </MagneticButton>
          <MagneticButton className="btn" style={{ color: "var(--bone)", borderColor: "rgba(242,235,224,0.4)" }} data-cursor="View" onClick={() => onNavigate("plp")}>
            <span>The catalog</span>
          </MagneticButton>
        </div>
      </Reveal>
    </main>
  );
}

window.ShowroomsPage = ShowroomsPage;
window.TradePage = TradePage;
window.HelpPage = HelpPage;
window.SustainabilityPage = SustainabilityPage;
window.ContactPage = ContactPage;
window.CustomPage = CustomPage;
window.NotFoundPage = NotFoundPage;