// The Kape — Collections / Product Detail / Craft / House / Appointments / Locate
// Attaches each page component to window for the router in app.jsx.

const { useState, useEffect, useMemo } = React;

// ── Collections index ─────────────────────────────────────────
function Collections({ navigate }) {
  const collections = window.COLLECTIONS;
  return (
    <main data-screen-label="02 Collections">
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Collections</span>
          <h1>The current <em>edits</em>.</h1>
          <p>Four chapters in rotation: a painterly print collaboration, autumn couture, resort tailoring, and a quiet Ramadan edit. Read each one in full, or fit them in the showroom.</p>
        </div>
      </section>
      <section className="section container">
        <div style={{display: "grid", gap: 80}}>
          {collections.map((c, i) => (
            <CollectionRow key={c.id} c={c} i={i} navigate={navigate} />
          ))}
        </div>
      </section>
    </main>
  );
}
function CollectionRow({ c, i, navigate }) {
  const products = window.PRODUCTS.filter(p => p.collection === c.id);
  const isReverse = i % 2 === 1;
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center",
      direction: isReverse ? "rtl" : "ltr",
    }}>
      <div style={{direction: "ltr"}}>
        <div style={{aspectRatio: "4/5", overflow: "hidden", background: "var(--border)"}}>
          <img src={c.cover} alt={c.name} loading="lazy" style={{width: "100%", height: "100%", objectFit: "cover"}} />
        </div>
      </div>
      <div style={{direction: "ltr"}}>
        <span className="eyebrow">{c.eyebrow}</span>
        <h2 className="display" style={{fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.05, margin: "14px 0 20px", fontWeight: 500}}>{c.name}</h2>
        <p style={{color: "var(--secondary)", marginBottom: 28, maxWidth: 480}}>{c.blurb}</p>
        <div style={{display: "flex", gap: 14, alignItems: "center", marginBottom: 28}}>
          <span style={{fontSize: 12, color: "var(--muted)", letterSpacing: "0.06em"}}>{products.length} pieces</span>
          <span style={{width: 1, height: 14, background: "var(--border)"}} />
          <span style={{fontSize: 12, color: "var(--muted)", letterSpacing: "0.06em"}}>
            {`AED ${Math.min(...products.map(p => p.price)).toLocaleString()} — ${Math.max(...products.map(p => p.price)).toLocaleString()}`}
          </span>
        </div>
        <a className="btn" href={`/collections/${c.id}`} onClick={(e) => { e.preventDefault(); navigate(`/collections/${c.id}`); }}>
          Read the collection <span className="arrow">→</span>
        </a>
      </div>
    </div>
  );
}
window.Collections = Collections;

// ── Collection detail ─────────────────────────────────────────
function CollectionDetail({ id, navigate }) {
  const c = window.COLLECTIONS.find(x => x.id === id);
  const all = window.PRODUCTS.filter(p => p.collection === id);

  const fabrics = useMemo(() => Array.from(new Set(all.map(p => p.fabric))), [id]);
  const [fabFilter, setFabFilter] = useState("All");
  const filtered = fabFilter === "All" ? all : all.filter(p => p.fabric === fabFilter);

  if (!c) return <main className="section container"><h1>Collection not found.</h1></main>;

  return (
    <main data-screen-label={`02 Collection ${c.name}`}>
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">{c.eyebrow}</span>
          <h1 style={{maxWidth: 1080}}>{splitItalic(c.name)}</h1>
          <p>{c.blurb}</p>
        </div>
      </section>

      <section className="container" style={{paddingTop: 32}}>
        <div className="filters">
          <button className="filter-chip" aria-pressed={fabFilter === "All"} onClick={() => setFabFilter("All")}>All ({all.length})</button>
          {fabrics.map(f => (
            <button key={f} className="filter-chip" aria-pressed={fabFilter === f} onClick={() => setFabFilter(f)}>
              {f} ({all.filter(p => p.fabric === f).length})
            </button>
          ))}
          <span className="filter-meta">Sort: Curatorial order</span>
        </div>

        <div className="products-grid" style={{paddingBottom: 96}}>
          {filtered.map(p => <window.ProductCard key={p.id} p={p} navigate={navigate} />)}
        </div>
      </section>
    </main>
  );
}
// Helper to split last word of a title and italicize it for editorial feel
function splitItalic(title) {
  const parts = title.split(" ");
  if (parts.length < 2) return title;
  const last = parts.pop();
  return <>{parts.join(" ") + " "}<em>{last}</em></>;
}
window.CollectionDetail = CollectionDetail;

// ── Product detail ────────────────────────────────────────────
function ProductDetail({ id, navigate }) {
  const p = window.PRODUCTS.find(x => x.id === id);
  const [size, setSize] = useState("M");
  const [length, setLength] = useState("Standard (58\")");
  const [activeImg, setActiveImg] = useState(0);

  if (!p) return <main className="section container"><h1>Piece not found.</h1></main>;

  const collection = window.COLLECTIONS.find(c => c.id === p.collection);
  const related = window.PRODUCTS.filter(x => x.collection === p.collection && x.id !== p.id).slice(0, 4);
  const gallery = [p.img, ...related.slice(0, 3).map(r => r.img)];

  const waMessage = encodeURIComponent(`Hi The Kape, I'd like to enquire about ${p.title} (${fmtAED(p.price)}).`);

  return (
    <main data-screen-label={`03 Product ${p.title}`}>
      <section className="container">
        <div className="pd">
          <div className="pd-gallery">
            <div className="main"><img src={gallery[activeImg]} alt={p.title} /></div>
            <div className="pd-thumbs">
              {gallery.map((g, i) => (
                <button key={i} className="pd-thumb" aria-pressed={activeImg === i} onClick={() => setActiveImg(i)}>
                  <img src={g} alt="" />
                </button>
              ))}
            </div>
          </div>

          <div className="pd-info">
            <div className="breadcrumbs">
              <a href="/collections" onClick={(e) => { e.preventDefault(); navigate("/collections"); }}>Collections</a>
              {" / "}
              <a href={`/collections/${p.collection}`} onClick={(e) => { e.preventDefault(); navigate(`/collections/${p.collection}`); }}>{collection?.name}</a>
              {" / "} {p.title}
            </div>
            <h1>{p.title}</h1>
            <div className="family-line">{p.family} family · {p.fabric} · {p.colorway}</div>
            <div className="price">{fmtAED(p.price)}</div>
            <p className="desc">
              {p.collection === "louis-barthelemy"
                ? "Our exclusive collaboration with Louis Barthélemy unfolds in painterly prints, where palms, stars and stories drift across the cloth like memory."
                : p.collection === "aw-25"
                ? "An autumn kape in considered tailoring, finished by hand at our Dubai atelier. Made to drape; built to last."
                : p.collection === "resort-26"
                ? "Lightweight tailoring for travel between climates — wrap silhouette, soft shoulder, quiet finish."
                : "A quiet Ramadan piece — restrained ornament, devoted finish."}
            </p>

            <div className="option-block">
              <div className="option-block-label">
                <span>Size</span>
                <a href="#">Size guide</a>
              </div>
              <div className="option-row">
                {["XS", "S", "M", "L", "XL"].map(s => (
                  <button key={s} className="option" aria-pressed={size === s} onClick={() => setSize(s)}>{s}</button>
                ))}
              </div>
            </div>

            <div className="option-block">
              <div className="option-block-label"><span>Garment length</span></div>
              <div className="option-row">
                {["Petite (56\")", "Standard (58\")", "Tall (60\")"].map(l => (
                  <button key={l} className="option" aria-pressed={length === l} onClick={() => setLength(l)}>{l}</button>
                ))}
              </div>
            </div>

            <div className="pd-actions">
              <a className="btn" href="https://thekape.com" target="_blank" rel="noopener">
                Buy on thekape.com <span className="arrow">→</span>
              </a>
              <div className="pd-aux">
                <a className="btn btn--ghost btn--sm" href="/appointments" onClick={(e) => { e.preventDefault(); navigate("/appointments"); }} style={{padding: "14px 18px"}}>
                  Book a fitting
                </a>
                <a className="btn btn--ghost btn--sm" href={`https://wa.me/971504371111?text=${waMessage}`} target="_blank" rel="noopener" style={{padding: "14px 18px"}}>
                  Enquire on WhatsApp
                </a>
              </div>
            </div>

            <div className="pd-details">
              <details open>
                <summary>Details, size &amp; fit</summary>
                <ul>
                  <li>Model height 167 cm, wearing size 0 — see size guide</li>
                  <li>Garment length: 58 inches (standard)</li>
                  <li>Matching sheila included</li>
                  <li>Main fabric: {p.fabric}</li>
                  <li>Dry clean</li>
                  <li>Made in UAE</li>
                </ul>
              </details>
              <details>
                <summary>Fabric &amp; care</summary>
                <p>{p.fabric === "Silk"
                  ? "A heavyweight silk, hand-finished to hold its weight. Dry clean only; store on a padded hanger; avoid direct sun."
                  : p.fabric === "Velvet"
                  ? "Crushed-pile velvet with a deep hand-feel. Dry clean only; steam, do not press."
                  : p.fabric === "Cupro"
                  ? "A cupro twill — fluid, breathable, gently lustrous. Dry clean; hang to settle."
                  : `A ${p.fabric.toLowerCase()} woven for the season. Dry clean; hang to settle.`}</p>
              </details>
              <details>
                <summary>Shipping &amp; returns</summary>
                <p>Complimentary delivery across the UAE. International shipping on request. Returns accepted within 7 days on unworn pieces; alterations and bespoke orders are final sale.</p>
              </details>
              <details>
                <summary>Need advice?</summary>
                <p>Call or WhatsApp <a href="https://wa.me/971504371111" target="_blank" rel="noopener" style={{borderBottom: "1px solid var(--border)"}}>+971 50 437 1111</a> — or book a private fitting at our Dubai Design District showroom.</p>
              </details>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="section container" style={{borderTop: "1px solid var(--border)"}}>
          <div className="section-head">
            <div>
              <span className="eyebrow">From the same chapter</span>
              <h2>More from <em>{collection?.name}</em>.</h2>
            </div>
            <div className="right">
              <a className="linkish" href={`/collections/${p.collection}`} onClick={(e) => { e.preventDefault(); navigate(`/collections/${p.collection}`); }}>
                See the whole collection →
              </a>
            </div>
          </div>
          <div className="products-grid">
            {related.map(r => <window.ProductCard key={r.id} p={r} navigate={navigate} />)}
          </div>
        </section>
      )}
    </main>
  );
}
window.ProductDetail = ProductDetail;

// ── Craft ─────────────────────────────────────────────────────
function Craft({ navigate }) {
  return (
    <main data-screen-label="04 Craft">
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">The Craft</span>
          <h1>A modern <em>interpretation</em><br/>of tailoring.</h1>
          <p>The Kape is a contemporary modest-fashion house. Our work is built on a modern interpretation of tailoring, luxury fabrics and treatments — with a playful use of digital prints and embroidery.</p>
        </div>
      </section>

      <figure className="craft-hero-img">
        <img src="media/product-30-artha.webp" alt="The Kape — Artha, jacquard kape" />
      </figure>

      <section className="container">
        <div className="craft-block">
          <div className="img"><img src="media/product-20-ayala-sapphire.webp" alt="Ayala Sapphire embroidery" /></div>
          <div className="text">
            <span className="num">No. 01 — Tailoring</span>
            <h3>Cut, drape, finish.</h3>
            <p>Every Kape begins on the table. The silhouette is the first decision — wrap or unfastened, soft shoulder or structured, standard or tall. We make adjustments around the body, not against it.</p>
            <p>Hand-finished seams, considered hems, hidden closures: tailoring you only notice when you wear it.</p>
            <p className="kicker">"Tailoring leads; ornament follows."</p>
          </div>
        </div>

        <div className="craft-block reverse">
          <div className="img"><img src="media/product-26-aurelia-beige.webp" alt="Aurelia jacquard" /></div>
          <div className="text">
            <span className="num">No. 02 — Luxury fabrics</span>
            <h3>Silk, velvet, cupro, jacquard.</h3>
            <p>We source quietly — heavyweight silk that holds its weight, crushed-pile velvet, cupro for fluidity, jacquard and brocade for Ramadan, denim and linen for resort.</p>
            <p>Cloth is auditioned in the showroom before it ever makes it onto a Kape. If it does not behave on the body, it does not make the season.</p>
          </div>
        </div>

        <div className="craft-block">
          <div className="img"><img src="media/product-13-nara-velvet-rouge.webp" alt="Nara digital print" /></div>
          <div className="text">
            <span className="num">No. 03 — Digital prints</span>
            <h3>Artworks, translated to cloth.</h3>
            <p>For Resort 26 we worked with French illustrator Louis Barthélemy on the Nara family — palms, stars, oases — printed across silk, velvet and cupro at scale.</p>
            <p>Each colourway is its own painting: Jader, Iris, Amber, Tiffany, Rouge.</p>
          </div>
        </div>

        <div className="craft-block reverse" style={{borderBottom: 0}}>
          <div className="img"><img src="media/product-22-rosalie.webp" alt="Hand embroidery — Rosalie" /></div>
          <div className="text">
            <span className="num">No. 04 — Embroidery</span>
            <h3>Hand-beaded, restrained.</h3>
            <p>Hand-beaded panels are placed where the eye wants to rest — yoke, cuff, hem. We work with embroiderers who have spent a lifetime on the technique, and we set their work against quiet ground cloth.</p>
            <p>Ornament that earns its place; nothing applied for the sake of applying.</p>
          </div>
        </div>
      </section>

      <section className="showroom" style={{borderTop: "1px solid var(--border)"}}>
        <div className="showroom-left">
          <span className="eyebrow" style={{color: "rgba(250,246,239,0.6)"}}>The atelier</span>
          <h2 style={{marginTop: 16}}>See the work <em>in person</em>.</h2>
          <p>Book a private fitting at our Dubai Design District showroom. Our team will walk you through the season and tailor a Kape to your measurements.</p>
          <div className="showroom-cta">
            <a className="btn btn--inv" href="/appointments" onClick={(e) => { e.preventDefault(); navigate("/appointments"); }}>
              Book a fitting <span className="arrow">→</span>
            </a>
            <a className="btn btn--inv-ghost" href="https://wa.me/971504371111" target="_blank" rel="noopener">WhatsApp</a>
          </div>
        </div>
        <div className="showroom-right"><div className="map"><div className="map-label">DUBAI DESIGN DISTRICT</div><div className="map-pin" /></div></div>
      </section>
    </main>
  );
}
window.Craft = Craft;

// ── The House ─────────────────────────────────────────────────
function House({ navigate }) {
  return (
    <main data-screen-label="05 The House">
      <section className="house-hero container">
        <span className="eyebrow">The House</span>
        <h1 className="display" style={{fontSize: "clamp(56px, 7vw, 112px)", lineHeight: 0.98, fontWeight: 500, marginTop: 16}}>
          A modest-fashion house,<br/><em>in Dubai</em>.
        </h1>
        <p className="lede" style={{marginTop: 32}}>
          The Kape is the work of a team of experts from diverse backgrounds with a shared vision: to present traditional modest wear, especially the abaya, with a contemporary look — preserving its traditional form with a modern touch.
        </p>
      </section>

      <section className="container">
        <div className="house-grid">
          <div className="img"><img src="media/product-19-faye-parisian.webp" alt="Faye Parisian — denim kape" /></div>
          <div className="text">
            <h3>The Boutique</h3>
            <p>Our Dubai Design District boutique is built in travertine stone, epoxy resin and prefabricated cement panels — a quiet shell for the work.</p>
            <p>The interior won a German Design Award for Retail Architecture, recognised as an interior-architecture project by SUPERFUTUREDESIGN*.</p>
            <span className="attr">As recognised by SUPERFUTUREDESIGN*, Architonic, Commercial Interior Design</span>
          </div>
        </div>
      </section>

      <section className="timeline">
        <div className="container">
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "end", marginBottom: 56}}>
            <div>
              <span className="eyebrow" style={{color: "rgba(250,246,239,0.6)"}}>Notable moments</span>
              <h2 style={{fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(40px, 4.6vw, 64px)", lineHeight: 1.05, marginTop: 16}}>
                A short<br/><em style={{color: "rgba(176,141,87,0.95)"}}>history</em>.
              </h2>
            </div>
          </div>

          <div className="timeline-row">
            <span className="year">d3</span>
            <div><h4>Boutique opens at Dubai Design District</h4></div>
            <p>A travertine-and-resin boutique in Building 7, Showroom A208.</p>
          </div>
          <div className="timeline-row">
            <span className="year">— Press</span>
            <div><h4>German Design Award — Retail Architecture</h4></div>
            <p>Recognised for the boutique interior. An architecture award for the space, not a garment award.</p>
          </div>
          <div className="timeline-row">
            <span className="year">AW 25</span>
            <div><h4>Couture embroidery in moss, sapphire, midnight</h4></div>
            <p>Hand-beaded panels on linen, silk and denim — read like ornament on architecture.</p>
          </div>
          <div className="timeline-row">
            <span className="year">R26</span>
            <div><h4>The Kape × Louis Barthélemy</h4></div>
            <p>A painterly print collaboration across silk, velvet and cupro — Nara, in five colourways.</p>
          </div>
        </div>
      </section>

      <section className="container" style={{padding: "96px 0"}}>
        <div className="house-grid">
          <div className="text" style={{order: -1}}>
            <h3>Founders &amp; team</h3>
            <p>Our work is the work of a team. Design press attributes the founding direction of The Kape to <strong style={{color: "var(--text)", fontWeight: 500}}>Hanadi al Hawi</strong>; on the record, the brand speaks of a team of experts with a shared vision.</p>
            <p>We collaborate openly — with the embroiderers we work with, with print artists like Louis Barthélemy, and with the architects who built our boutique.</p>
            <span className="attr">Founder attribution as identified by design press</span>
          </div>
          <div className="img"><img src="media/product-23-elaris.webp" alt="Elaris" /></div>
        </div>
      </section>

      <section className="showroom" style={{borderTop: "1px solid var(--border)"}}>
        <div className="showroom-left">
          <span className="eyebrow" style={{color: "rgba(250,246,239,0.6)"}}>Visit</span>
          <h2 style={{marginTop: 16}}>By appointment <em>only</em>.</h2>
          <p>The showroom runs by appointment so we can give each visit the time it deserves. Book a slot or message us on WhatsApp.</p>
          <div className="showroom-cta">
            <a className="btn btn--inv" href="/appointments" onClick={(e) => { e.preventDefault(); navigate("/appointments"); }}>Book a visit <span className="arrow">→</span></a>
            <a className="btn btn--inv-ghost" href="/locate-us" onClick={(e) => { e.preventDefault(); navigate("/locate-us"); }}>Locate us</a>
          </div>
        </div>
        <div className="showroom-right"><div className="map"><div className="map-label">DUBAI DESIGN DISTRICT</div><div className="map-pin" /></div></div>
      </section>
    </main>
  );
}
window.House = House;

// ── Appointments ──────────────────────────────────────────────
function Appointments({ navigate }) {
  const [step, setStep] = useState("form"); // "form" | "done"
  const [form, setForm] = useState({
    name: "", phone: "", email: "",
    date: "", slot: "", piece: "", visit: "Fitting", notes: "",
  });
  const slots = ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"];
  const today = new Date();
  const minDate = today.toISOString().slice(0,10);

  const setField = (k, v) => setForm(f => ({...f, [k]: v}));
  const valid = form.name && form.phone && form.date && form.slot;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setStep("done");
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  const waLink = `https://wa.me/971504371111?text=${encodeURIComponent(
    `Hi The Kape, I'd like to book an appointment.\n\nName: ${form.name}\nPhone: ${form.phone}\nDate: ${form.date} at ${form.slot}\nVisit type: ${form.visit}\nPiece of interest: ${form.piece || "—"}\nNotes: ${form.notes || "—"}`
  )}`;

  return (
    <main data-screen-label="06 Appointments">
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Appointments</span>
          <h1>Book a private <em>fitting</em>.</h1>
          <p>Our Dubai Design District showroom runs by appointment. Choose a date and time below — we'll confirm by phone or WhatsApp within a few hours.</p>
        </div>
      </section>

      <section className="container">
        <div className="appt">
          <aside className="appt-aside">
            <h3>What to expect</h3>
            <p>An hour with our team in the d3 showroom: walk through the current collections, try the Kapes that catch your eye, and explore garment length and sleeve options.</p>
            <p>If you'd prefer to chat first, message us on WhatsApp — we'll arrange a slot that suits.</p>

            <ul className="appt-meta-list">
              <li><span className="lbl">Location</span><span>Showroom A208, Building 7, Dubai Design District</span></li>
              <li><span className="lbl">Phone</span><span><a href="tel:+971504371111">+971 50 437 1111</a> · <a href="tel:+97142763333">+971 4 276 3333</a></span></li>
              <li><span className="lbl">WhatsApp</span><span><a href="https://wa.me/971504371111" target="_blank" rel="noopener">+971 50 437 1111</a></span></li>
              <li><span className="lbl">Visit length</span><span>Approx. 60 minutes</span></li>
            </ul>

            <div className="img"><img src="media/product-18-gaida-deep-moss.webp" alt="In the showroom" loading="lazy" /></div>
          </aside>

          {step === "form" ? (
            <form className="appt-form" onSubmit={submit} noValidate>
              <h2>Reserve a slot</h2>
              <p className="form-lede">Required fields are marked. We'll never share your details.</p>

              <div className="form-row two">
                <div>
                  <label>Full name *</label>
                  <input type="text" value={form.name} onChange={(e) => setField("name", e.target.value)} placeholder="Your name" required />
                </div>
                <div>
                  <label>Phone *</label>
                  <input type="tel" value={form.phone} onChange={(e) => setField("phone", e.target.value)} placeholder="+971 …" required />
                </div>
              </div>

              <div className="form-row">
                <label>Email</label>
                <input type="email" value={form.email} onChange={(e) => setField("email", e.target.value)} placeholder="optional" />
              </div>

              <div className="form-row two">
                <div>
                  <label>Preferred date *</label>
                  <input type="date" value={form.date} onChange={(e) => setField("date", e.target.value)} min={minDate} required />
                </div>
                <div>
                  <label>Visit type</label>
                  <select value={form.visit} onChange={(e) => setField("visit", e.target.value)}>
                    <option>Fitting</option>
                    <option>Styling consultation</option>
                    <option>Collection preview</option>
                    <option>Bridal / occasion</option>
                  </select>
                </div>
              </div>

              <div className="form-row">
                <label>Preferred time *</label>
                <div className="slot-grid">
                  {slots.map(s => (
                    <button key={s} type="button" className="slot" aria-pressed={form.slot === s} onClick={() => setField("slot", s)}>{s}</button>
                  ))}
                </div>
              </div>

              <div className="form-row">
                <label>Piece of interest</label>
                <select value={form.piece} onChange={(e) => setField("piece", e.target.value)}>
                  <option value="">Browsing — open to suggestions</option>
                  <optgroup label="The Kape × Louis Barthélemy">
                    {window.PRODUCTS.filter(p => p.collection === "louis-barthelemy").map(p =>
                      <option key={p.id} value={p.title}>{p.title}</option>)}
                  </optgroup>
                  <optgroup label="AW 25">
                    {window.PRODUCTS.filter(p => p.collection === "aw-25").map(p =>
                      <option key={p.id} value={p.title}>{p.title}</option>)}
                  </optgroup>
                  <optgroup label="Resort 26">
                    {window.PRODUCTS.filter(p => p.collection === "resort-26").map(p =>
                      <option key={p.id} value={p.title}>{p.title}</option>)}
                  </optgroup>
                  <optgroup label="Ramadan 26">
                    {window.PRODUCTS.filter(p => p.collection === "ramadan-26").map(p =>
                      <option key={p.id} value={p.title}>{p.title}</option>)}
                  </optgroup>
                </select>
              </div>

              <div className="form-row">
                <label>Notes</label>
                <textarea value={form.notes} onChange={(e) => setField("notes", e.target.value)} placeholder="Sizing, occasion, anything we should know."></textarea>
              </div>

              <div className="form-submit">
                <button className="btn" type="submit" disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>
                  Reserve appointment <span className="arrow">→</span>
                </button>
                <p className="form-note">We'll confirm by phone or WhatsApp within a few hours. Prefer to message? <a href="https://wa.me/971504371111" target="_blank" rel="noopener" style={{borderBottom: "1px solid var(--border)"}}>Open WhatsApp</a>.</p>
              </div>
            </form>
          ) : (
            <div className="appt-success">
              <div className="check">✓</div>
              <h2>Your slot is reserved.</h2>
              <p>Thank you, {form.name.split(" ")[0]}. We'll be in touch within a few hours to confirm — most often by WhatsApp on the number you provided.</p>
              <div className="summary">
                <div><span className="lbl">Name</span><span>{form.name}</span></div>
                <div><span className="lbl">Phone</span><span>{form.phone}</span></div>
                <div><span className="lbl">Date</span><span>{form.date} at {form.slot}</span></div>
                <div><span className="lbl">Visit</span><span>{form.visit}</span></div>
                <div><span className="lbl">Piece</span><span>{form.piece || "Open"}</span></div>
              </div>
              <div style={{display: "flex", gap: 12, flexWrap: "wrap"}}>
                <a className="btn" href={waLink} target="_blank" rel="noopener">Message us on WhatsApp <span className="arrow">→</span></a>
                <button className="btn btn--ghost" onClick={() => { setStep("form"); }}>Book another</button>
              </div>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}
window.Appointments = Appointments;

// ── Locate Us ─────────────────────────────────────────────────
function Locate({ navigate }) {
  return (
    <main data-screen-label="07 Locate Us">
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Locate Us</span>
          <h1>Showroom A208,<br/><em>Building 7</em>.</h1>
          <p>Our boutique sits in Dubai Design District. By appointment, six days a week — please reach out before you visit.</p>
        </div>
      </section>

      <section className="locate">
        <div className="locate-left">
          <h2>Dubai Design District</h2>

          <div className="locate-section">
            <h4>Address</h4>
            <p>Showroom A208, Building 7<br/>Dubai Design District<br/>Dubai, United Arab Emirates</p>
          </div>

          <div className="locate-section">
            <h4>Phone</h4>
            <p><a href="tel:+971504371111">+971 50 437 1111</a> (mobile · WhatsApp)<br/>
               <a href="tel:+97142763333">+971 4 276 3333</a> (landline)</p>
          </div>

          <div className="locate-section">
            <h4>Hours</h4>
            <p style={{color: "var(--muted)"}}>By appointment, six days a week. Please book a slot below or message us on WhatsApp.</p>
          </div>

          <div className="locate-section">
            <h4>Follow</h4>
            <p>
              <a href="https://instagram.com/the_kape" target="_blank" rel="noopener">Instagram</a> · <a href="https://facebook.com/The-Kape-684275191707993" target="_blank" rel="noopener">Facebook</a>
            </p>
          </div>

          <div className="locate-cta">
            <a className="btn" href="/appointments" onClick={(e) => { e.preventDefault(); navigate("/appointments"); }}>Book appointment <span className="arrow">→</span></a>
            <a className="btn btn--ghost" href="https://wa.me/971504371111" target="_blank" rel="noopener">WhatsApp</a>
          </div>
        </div>
        <div className="locate-right">
          <div className="map" style={{
            background:
              "linear-gradient(135deg, rgba(110,90,67,0.12), rgba(24,20,15,0.05))," +
              "repeating-linear-gradient(0deg, transparent 0 39px, rgba(140,129,112,0.18) 39px 40px)," +
              "repeating-linear-gradient(90deg, transparent 0 39px, rgba(140,129,112,0.18) 39px 40px)," +
              "#EFE7D8",
          }}>
            <div style={{position: "absolute", left: "12%", top: "20%", right: "12%", bottom: "20%", border: "1px solid rgba(140,129,112,0.35)"}} aria-hidden="true" />
            <div className="map-label" style={{left: "auto", top: "26%", right: "16%"}}>D3 · BUILDING 7</div>
            <div className="map-pin" style={{left: "62%", top: "52%"}} />
            <div style={{
              position: "absolute", left: "16%", bottom: "16%", fontFamily: "var(--font-display)",
              fontSize: 14, fontStyle: "italic", color: "var(--secondary)",
            }}>Sheikh Zayed Rd →</div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.Locate = Locate;