/* global React, SK_DATA, SK */
const { useState, useEffect, useMemo } = React;
const { PriceTag, Eyebrow, Arrow, Wordmark, STRINGS, ProductCard } = window.SK;

/* ---------- Bridal page ---------- */
function BridalPage({ openProduct, go, locale }) {
  const couture = SK_DATA.products.filter(p => p.line === "Bridal Couture");
  const rtw = SK_DATA.products.filter(p => p.line === "Bridal Ready-to-Wear");
  return (
    <div className="page">
      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow gold>Bridal</Eyebrow>
            <h2>Two paths<br/><em style={{color:"var(--secondary)", fontStyle:"italic"}}>to the aisle.</em></h2>
            <p>A made-to-measure couture commission, or a priced Bridal Ready-to-Wear silhouette from the seasonal collection — both pursued through a Dubai showroom appointment.</p>
          </div>
        </div>

        <div className="bridal-split">
          <div className="bridal-pane">
            <span className="tag">Bridal Couture</span>
            <h3 style={{fontSize: 40}}>The Commission</h3>
            <p style={{color:"var(--muted)", maxWidth:"42ch"}}>Two to five fittings, ten to sixteen weeks. Hand-couture finishings, internal corsetry, and atelier-led embroidery — every piece is realised to a single body.</p>
            <ul style={{listStyle: "none", padding: 0, margin: "12px 0 0", display: "grid", gap: 10, fontSize: 13, color: "var(--ink-soft)"}}>
              <li>• Initial consultation in Beirut, Dubai or Paris</li>
              <li>• Three to five atelier fittings</li>
              <li>• Mood-board, fabric sourcing and embroidery samples</li>
              <li>• Delivered with garment bag, fabric remnants and care guide</li>
            </ul>
            <div style={{display:"flex", gap: 10, marginTop: 16, flexWrap:"wrap"}}>
              <button className="btn" onClick={() => go("appointments")}>Begin a commission <Arrow/></button>
            </div>
          </div>
          <div className="bridal-pane">
            <span className="tag">Bridal Ready-to-Wear</span>
            <h3 style={{fontSize: 40}}>The Collection</h3>
            <p style={{color:"var(--muted)", maxWidth:"42ch"}}>Three signature silhouettes from Bridal RTW FW26 — Tayla, Annelise and Selene. Made to stock sizing, available for in-showroom try-on by appointment.</p>
            <ul style={{listStyle: "none", padding: 0, margin: "12px 0 0", display: "grid", gap: 10, fontSize: 13, color: "var(--ink-soft)"}}>
              <li>• Standard sizing FR 34–44</li>
              <li>• Up to two alteration fittings included</li>
              <li>• 8–12 week production from order</li>
              <li>• Pricing on request — by silhouette and finish</li>
            </ul>
            <div style={{display:"flex", gap: 10, marginTop: 16, flexWrap:"wrap"}}>
              <button className="btn ghost" onClick={() => openProduct("tayla")}>View Tayla <Arrow/></button>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow>Bridal Couture 2027</Eyebrow>
            <h2 style={{fontSize: 44}}>The commission gallery</h2>
            <p>Each look below is offered on request — submit a name, an event date, and your preferred showroom and we'll pull samples for your first fitting.</p>
          </div>
        </div>
        <div className="product-grid">
          {couture.map(p => (
            <ProductCard key={p.id} p={p} openProduct={openProduct} locale={locale}/>
          ))}
        </div>
      </section>

      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow>Bridal Ready-to-Wear FW26</Eyebrow>
            <h2 style={{fontSize: 44}}>The collection gallery</h2>
            <p>Three silhouettes from the latest Bridal RTW season. Pricing for each look is shared during your showroom appointment.</p>
          </div>
        </div>
        <div className="product-grid">
          {rtw.map(p => (
            <ProductCard key={p.id} p={p} openProduct={openProduct} locale={locale}/>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ---------- Custom-Made page ---------- */
function CustomMadePage({ go }) {
  return (
    <div className="page">
      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow gold>Custom-Made · VIP Atelier</Eyebrow>
            <h2>A piece for<br/><em style={{color:"var(--secondary)", fontStyle:"italic"}}>one occasion,</em><br/>and one body.</h2>
            <p>For private clients, royal commissions, stylists and bridal parties. We translate a reference, a sketch or a memory into a hand-finished garment — sourced, draped and embroidered in our Beirut atelier, presented at the Dubai showroom for fitting.</p>
          </div>
        </div>

        <div className="split lopsided">
          <img src="media/product-22-couture-double-satin-train-gown.webp" alt="" style={{aspectRatio:"3/4", objectFit:"cover", border:"1px solid var(--border)"}}/>
          <div style={{display:"grid", gap: 36}}>
            {[
              { n: "01", k: "Consult", d: "An hour at the Dubai showroom, in Beirut, or by video. We discuss occasion, references, fabric instinct and timeline." },
              { n: "02", k: "Sketch & Quote", d: "An exclusive sketch and a quotation by hand within ten days. No commitment until you accept." },
              { n: "03", k: "Fabric & Sample", d: "Approved fabrics are sourced and embroidery samples are run for sign-off." },
              { n: "04", k: "Fittings", d: "Three to five fittings in Beirut, Dubai or Paris. The garment is shaped to your body and gesture." },
              { n: "05", k: "Delivery", d: "Final pressing, garment bag, fabric remnants, care guide. We can ship anywhere our couriers reach you." },
            ].map(step => (
              <div key={step.n} style={{display:"grid", gridTemplateColumns: "60px 1fr", gap: 20, paddingBottom: 24, borderBottom: "1px solid var(--border)"}}>
                <span className="serif" style={{fontSize: 36, color:"var(--accent)"}}>{step.n}</span>
                <div>
                  <h4>{step.k}</h4>
                  <p style={{marginTop: 8, color:"var(--muted)"}}>{step.d}</p>
                </div>
              </div>
            ))}
            <button className="btn" onClick={() => go("appointments")}>Request a custom-made consult <Arrow/></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- House page ---------- */
function HousePage({ go }) {
  return (
    <div className="page">
      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow gold>The House</Eyebrow>
            <h2>Twenty-four years,<br/><em style={{color:"var(--secondary)", fontStyle:"italic"}}>one signature.</em></h2>
            <p>The House began in Beirut, in 2000, as a quiet practice for private clients. Today, Saiid Kobeisy is presented in 35+ countries through 130 points of sale, with houses in Beirut, Dubai and Paris.</p>
          </div>
        </div>

        <div className="timeline">
          {SK_DATA.timeline.map(item => (
            <div key={item.year} className="tl-item">
              <div className="y">{item.year}</div>
              <div className="t">{item.text}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{background: "var(--surface)"}}>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow>Press · Credits</Eyebrow>
            <h2 style={{fontSize: 44}}>In the room.</h2>
            <p>Attributed credits only. Visit the publishers for the full feature.</p>
          </div>
        </div>
        <div className="press">
          {SK_DATA.pressLines.map(p => (
            <div key={p.house + p.year} className="press-item">
              <div className="pub">{p.house}</div>
              <div className="credit">{p.credit}</div>
              <div className="y">{p.year}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop: 24, padding: "16px 20px", borderLeft: "2px solid var(--accent)", color: "var(--muted)", fontSize: 12, maxWidth: 720}}>
          Photographer credits and licensing for all editorial / red-carpet imagery are obtained prior to publication. We do not host third-party press photography here.
        </div>
      </section>
    </div>
  );
}

/* ---------- Stores page ---------- */
function StoresPage({ go }) {
  return (
    <div className="page">
      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow gold>Stores</Eyebrow>
            <h2>Beirut.<br/><em style={{color:"var(--secondary)", fontStyle:"italic"}}>Dubai.</em><br/>Paris.</h2>
            <p>Three showrooms, one atelier. Appointments are coordinated centrally through WhatsApp and the appointments form below.</p>
          </div>
          <div className="rhs">
            <button className="btn ghost sm" onClick={() => go("appointments")}>Book a fitting →</button>
          </div>
        </div>

        <div className="stores-grid">
          {SK_DATA.stores.map(s => (
            <div key={s.city} className="store-card">
              <div className="role">{s.role}</div>
              <div className="city">{s.city}</div>
              <address>{s.address}</address>
              <div className="meta">
                <div><strong>Hours</strong></div>
                <div>{s.hours}</div>
                <div style={{marginTop: 8}}><strong>Direct</strong></div>
                <div>{s.phone}</div>
                {s.altPhone && <div style={{color: "var(--secondary)"}}>{s.altPhone}</div>}
              </div>
              {s.caveat && <div className="caveat">{s.caveat}</div>}
              <div style={{display:"flex", gap: 8, marginTop: 12, flexWrap:"wrap"}}>
                <a className="btn sm" href={"https://wa.me/9613813893?text=" + encodeURIComponent("Hello — I'd like to book an appointment at the " + s.city + " showroom.")} target="_blank" rel="noreferrer">WhatsApp</a>
                <button className="btn ghost sm" onClick={() => go("appointments")}>Book →</button>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ---------- Appointments page ---------- */
function AppointmentsPage({ submitted, setSubmitted, locale }) {
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    line: "Couture",
    showroom: "Dubai",
    date: "",
    occasion: "",
    eventDate: "",
    message: "",
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const waText = useMemo(() => {
    const lines = [
      "Hello — I'd like to book an appointment.",
      "",
      "Name: " + (form.name || "—"),
      "Service: " + form.line,
      "Showroom: " + form.showroom,
      form.date ? "Preferred date: " + form.date : null,
      form.eventDate ? "Occasion date: " + form.eventDate : null,
      form.occasion ? "Occasion: " + form.occasion : null,
      form.message ? "\nNote: " + form.message : null,
    ].filter(Boolean);
    return lines.join("\n");
  }, [form]);

  const waHref = "https://wa.me/9613813893?text=" + encodeURIComponent(waText);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted({ name: form.name || "you", line: form.line, showroom: form.showroom, waHref });
  };

  return (
    <div className="page">
      <section>
        <div className="section-head">
          <div className="lhs">
            <Eyebrow gold>Appointments</Eyebrow>
            <h2>Book your<br/><em style={{color:"var(--secondary)", fontStyle:"italic"}}>visit.</em></h2>
            <p>Tell us the service, the showroom and your preferred date. We confirm by WhatsApp within one business day.</p>
          </div>
          <div className="rhs">
            <a className="btn ghost sm" href={waHref} target="_blank" rel="noreferrer">Skip form · WhatsApp →</a>
          </div>
        </div>

        <div className="split lopsided">
          <form className="form" onSubmit={submit}>
            <div className="form-row two">
              <div className="form-row">
                <label>Name</label>
                <input value={form.name} onChange={set("name")} required placeholder="Full name"/>
              </div>
              <div className="form-row">
                <label>Phone / WhatsApp</label>
                <input value={form.phone} onChange={set("phone")} placeholder="+971…" type="tel"/>
              </div>
            </div>
            <div className="form-row">
              <label>Email</label>
              <input type="email" value={form.email} onChange={set("email")} placeholder="name@email.com" required/>
            </div>
            <div className="form-row two">
              <div className="form-row">
                <label>Service</label>
                <select value={form.line} onChange={set("line")}>
                  <option>Couture</option>
                  <option>Bridal Couture</option>
                  <option>Bridal Ready-to-Wear</option>
                  <option>Ready-to-Wear</option>
                  <option>Custom-Made / VIP</option>
                </select>
              </div>
              <div className="form-row">
                <label>Showroom</label>
                <select value={form.showroom} onChange={set("showroom")}>
                  <option>Dubai</option>
                  <option>Beirut</option>
                  <option>Paris</option>
                  <option>Video consult</option>
                </select>
              </div>
            </div>
            <div className="form-row two">
              <div className="form-row">
                <label>Preferred appointment date</label>
                <input type="date" value={form.date} onChange={set("date")}/>
              </div>
              <div className="form-row">
                <label>Occasion date (if known)</label>
                <input type="date" value={form.eventDate} onChange={set("eventDate")}/>
              </div>
            </div>
            <div className="form-row">
              <label>Occasion</label>
              <input value={form.occasion} onChange={set("occasion")} placeholder="Wedding · Gala · Editorial · Awards · Other"/>
            </div>
            <div className="form-row">
              <label>Notes for the atelier</label>
              <textarea value={form.message} onChange={set("message")} placeholder="References, mood, references, sizing notes, anything we should know."></textarea>
            </div>
            <div style={{display:"flex", gap: 10, alignItems:"center", marginTop: 8, flexWrap:"wrap"}}>
              <button type="submit" className="btn">Send request <Arrow/></button>
              <a className="btn ghost" href={waHref} target="_blank" rel="noreferrer">Continue on WhatsApp</a>
            </div>
            <div className="form-row">
              <div className="help" style={{marginTop: 18, color: "var(--muted)"}}>
                On submit we save the request to the house customer care inbox and open a pre-filled WhatsApp message. A team member confirms within one business day.
              </div>
            </div>
          </form>

          <aside style={{display: "grid", gap: 22}}>
            <div style={{padding: "28px 28px", background: "var(--text)", color: "var(--bg)"}}>
              <div className="eyebrow gold" style={{color: "var(--accent-soft)", marginBottom: 14}}>Customer care</div>
              <h3 style={{color:"#fff"}}>+961 3 813 893</h3>
              <p style={{color: "rgba(255,255,255,0.7)", marginTop: 12, fontSize: 13}}>
                customer.experience@saiidkobeisy.com
              </p>
              <a className="btn gold sm" href={waHref} target="_blank" rel="noreferrer" style={{marginTop: 18}}>WhatsApp →</a>
            </div>

            <div style={{padding: "28px 28px", background: "var(--surface)", border: "1px solid var(--border)"}}>
              <div className="eyebrow" style={{marginBottom: 14}}>Dubai · d3</div>
              <div style={{fontFamily:"var(--serif)", fontSize: 22, lineHeight: 1.2}}>Unit M04, Building 06<br/>Dubai Design District</div>
              <p style={{marginTop: 14, fontSize: 13, color:"var(--muted)"}}>
                Mon–Sat 10:00–21:00. Sunday closed*.
              </p>
              <p style={{marginTop: 8, fontSize: 12, color: "var(--secondary)", borderLeft: "2px solid var(--accent)", paddingLeft: 10}}>
                * d3 directory lists Mon–Sun by appointment. Sunday availability pending client confirmation.
              </p>
            </div>

            <div style={{padding: "28px 28px", background: "var(--surface)", border: "1px solid var(--border)"}}>
              <div className="eyebrow" style={{marginBottom: 14}}>What to expect</div>
              <ul style={{listStyle:"none", padding: 0, margin: 0, display: "grid", gap: 12, fontSize: 13, color:"var(--ink-soft)"}}>
                <li>• A 45–60 minute first session</li>
                <li>• Champagne, tea or arak — your call</li>
                <li>• Sample garments pulled in advance</li>
                <li>• Sketch or quotation within ten days</li>
              </ul>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

/* ---------- Product Detail Modal ---------- */
function ProductModal({ id, close, go, locale }) {
  const p = SK_DATA.products.find(x => x.id === id);
  if (!p) return null;
  const t = STRINGS[locale];
  const more = SK_DATA.products.filter(x => x.line === p.line && x.id !== p.id).slice(0, 4);

  return (
    <div className="modal-scrim" onClick={close}>
      <aside className="modal" onClick={e => e.stopPropagation()}>
        <header className="modal-head">
          <div className="crumbs">
            <span>{p.line}</span>
            <span className="sep">/</span>
            <span>{p.season}</span>
            <span className="sep">/</span>
            <span style={{color: "var(--text)"}}>{p.title}</span>
          </div>
          <button className="modal-close" onClick={close} aria-label="Close">✕</button>
        </header>
        <div className="modal-body">
          <div className="modal-image">
            <img src={p.image} alt={p.title}/>
          </div>
          <div className="modal-info">
            <div>
              <Eyebrow gold>{p.season}</Eyebrow>
              <h2 style={{marginTop: 12}}>{p.title}</h2>
            </div>
            <div className="price-row">
              <span className="eyebrow">Price</span>
              <PriceTag price={p.price} big/>
            </div>
            <div className="spec-list">
              <div><div className="k">Line</div><div className="v">{p.line}</div></div>
              <div><div className="k">Fabric</div><div className="v">{p.fabric}</div></div>
              <div><div className="k">Silhouette</div><div className="v">{p.notes}</div></div>
              <div><div className="k">Sizing</div><div className="v">{p.sizes.join(" · ")}</div></div>
            </div>
            <div className="actions">
              {p.price > 0 ? (
                <>
                  <button className="btn">{t.addToBag} · {window.SK.formatAED(p.price)}</button>
                  <button className="btn ghost" onClick={() => { close(); go("appointments"); }}>{t.bookAppointment}</button>
                </>
              ) : (
                <>
                  <button className="btn gold" onClick={() => { close(); go("appointments"); }}>{t.enquire} · {t.bookAppointment}</button>
                  <a className="btn ghost" href={"https://wa.me/9613813893?text=" + encodeURIComponent("Hello — I'd like to enquire about " + p.title + " (" + p.season + ").")} target="_blank" rel="noreferrer">WhatsApp →</a>
                </>
              )}
            </div>

            <div style={{borderTop: "1px solid var(--border)", paddingTop: 24, marginTop: 12}}>
              <Eyebrow>More from {p.line}</Eyebrow>
              <div className="strip" style={{marginTop: 16, gridTemplateColumns:"repeat(4,1fr)"}}>
                {more.map(m => (
                  <button key={m.id} className="strip-item" onClick={() => { window.dispatchEvent(new CustomEvent("sk-open", { detail: m.id })); }} style={{border:0, background:"none", padding:0, cursor:"pointer"}}>
                    <img src={m.image} alt={m.title}/>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer({ go }) {
  return (
    <footer>
      <div className="ft-grid">
        <div>
          <div style={{fontFamily:"var(--serif)", fontSize: 28, letterSpacing:"0.32em", textTransform:"uppercase", color: "#fff"}}>Saiid<br/>Kobeisy</div>
          <p style={{marginTop: 18, color: "#9C968B", maxWidth: 36 + "ch"}}>
            Lebanese couture, ready-to-wear and bridal — Beirut, Dubai, Paris. House founded 2000.
          </p>
          <div style={{display:"flex", gap: 12, marginTop: 22, flexWrap: "wrap", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase"}}>
            <a href="https://instagram.com/saiidkobeisy" target="_blank" rel="noreferrer">Instagram</a>
            <a href="https://facebook.com/saiidkobeisy" target="_blank" rel="noreferrer">Facebook</a>
            <a href="https://youtube.com/@saiidkobeisyofficial" target="_blank" rel="noreferrer">YouTube</a>
            <a href="https://www.tiktok.com/@saiidkobeisy" target="_blank" rel="noreferrer">TikTok</a>
            <a href="https://www.pinterest.com/saiidkobeisy" target="_blank" rel="noreferrer">Pinterest</a>
          </div>
        </div>
        <div>
          <h5>Lines</h5>
          <ul>
            <li><a onClick={() => go("couture")} style={{cursor:"pointer"}}>Couture</a></li>
            <li><a onClick={() => go("rtw")} style={{cursor:"pointer"}}>Ready-to-Wear</a></li>
            <li><a onClick={() => go("bridal")} style={{cursor:"pointer"}}>Bridal Couture</a></li>
            <li><a onClick={() => go("bridal")} style={{cursor:"pointer"}}>Bridal Ready-to-Wear</a></li>
            <li><a onClick={() => go("custom")} style={{cursor:"pointer"}}>Custom-Made / VIP</a></li>
          </ul>
        </div>
        <div>
          <h5>Visit</h5>
          <ul>
            <li><a onClick={() => go("stores")} style={{cursor:"pointer"}}>Beirut · House &amp; Atelier</a></li>
            <li><a onClick={() => go("stores")} style={{cursor:"pointer"}}>Dubai · d3 Showroom</a></li>
            <li><a onClick={() => go("stores")} style={{cursor:"pointer"}}>Paris · Showroom</a></li>
            <li><a onClick={() => go("appointments")} style={{cursor:"pointer"}}>Book an appointment</a></li>
            <li><a href="https://wa.me/9613813893" target="_blank" rel="noreferrer">WhatsApp · +961 3 813 893</a></li>
          </ul>
        </div>
        <div>
          <h5>House</h5>
          <ul>
            <li><a onClick={() => go("house")} style={{cursor:"pointer"}}>The House</a></li>
            <li><a href="mailto:customer.experience@saiidkobeisy.com">customer.experience@saiidkobeisy.com</a></li>
            <li><a href="mailto:pr@saiidkobeisy.com">PR — pr@saiidkobeisy.com</a></li>
            <li><a href="#" onClick={e => e.preventDefault()}>Care &amp; aftercare</a></li>
            <li><a href="#" onClick={e => e.preventDefault()}>Shipping &amp; returns</a></li>
          </ul>
        </div>
      </div>
      <div className="ft-bottom">
        <span>© Saiid Kobeisy · Beirut · Dubai · Paris</span>
        <span>Prototype design draft — not the production site</span>
      </div>
    </footer>
  );
}

window.SK = Object.assign(window.SK, {
  BridalPage, CustomMadePage, HousePage, StoresPage, AppointmentsPage,
  ProductModal, Footer,
});