/* The Purple Chair — secondary pages: hubs, about, press, services, contact, footer, enquire modal */

const { useState: useStateB, useEffect: useEffectB } = React;

function Hub({ slug, title, eyebrow, blurb, projects, go, openEnquire, heroImg }) {
  const items = projects.filter(p => {
    if (slug === "weddings") return p.category === "Weddings";
    if (slug === "events") return p.category === "Events & Social";
    if (slug === "brand-events") return p.category === "Brand Events";
    return true;
  });

  return (
    <main>
      <section style={{ position: "relative", height: "78vh", marginTop: "-78px", color: "white" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url(${heroImg})`, backgroundSize: "cover", backgroundPosition: "center" }}></div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,14,16,.45) 0%, transparent 50%, rgba(15,14,16,.75) 100%)" }}></div>
        <div style={{ position: "relative", height: "100%", padding: "180px 56px 80px", display: "flex", flexDirection: "column", justifyContent: "flex-end", maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow white>{eyebrow}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(72px, 10vw, 160px)", fontWeight: 300, lineHeight: 0.95, letterSpacing: "-0.02em", margin: "24px 0 0", color: "white" }}>{title}</h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,.85)", fontWeight: 300, margin: "32px 0 0", maxWidth: 620 }}>{blurb}</p>
        </div>
      </section>

      <section style={{ padding: "120px 56px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 64, rowGap: 96 }}>
          {items.map((p, i) => (
            <article key={p.id} onClick={() => go(`project:${p.id}`)} style={{ cursor: "pointer" }} className="tpc-card">
              <div style={{ aspectRatio: i % 3 === 0 ? "16/10" : "4/5", overflow: "hidden", background: "var(--mist)" }}>
                <img src={p.image} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .8s ease" }}/>
              </div>
              <div style={{ paddingTop: 24, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24 }}>
                <div>
                  <Eyebrow>{String(i+1).padStart(2,"0")} — {p.tags.join(" · ")}</Eyebrow>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 400, margin: "12px 0 6px", color: "var(--ink)" }}>{p.title}</h3>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--muted)", fontWeight: 300 }}>{p.venue}</div>
                </div>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 18, color: "var(--ink)" }}>→</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      <EnquireBand openEnquire={openEnquire} sector={slug}/>
      <Footer go={go}/>
    </main>
  );
}

// ---------- ABOUT ----------

function About({ go, openEnquire }) {
  return (
    <main>
      <section style={{ padding: "180px 56px 80px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow>The Studio</Eyebrow>
          <DisplayH size={100} style={{ marginTop: 40, maxWidth: 1200 }}>
            A boutique founded by three sisters, <em>built on conversation, craft and care.</em>
          </DisplayH>
        </div>
      </section>

      <section style={{ padding: "60px 56px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--mist)" }}>
            {/* Placeholder for founder portrait */}
            <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, background: "repeating-linear-gradient(135deg, var(--mist), var(--mist) 12px, var(--paper) 12px, var(--paper) 24px)" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--muted)" }}>Founder portrait</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", color: "var(--ink)" }}>Rasha Badran</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)", marginTop: 24 }}>Client to supply</div>
            </div>
          </div>
          <div style={{ paddingTop: 40 }}>
            <Eyebrow>Founder & Managing Director</Eyebrow>
            <DisplayH size={44} style={{ marginTop: 20 }}>Rasha Badran</DisplayH>
            <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 20 }}>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: 0 }}>
                The Purple Chair began as a small boutique founded by Rasha with her sisters Dana and May Badran — organising and styling small, classically beautiful celebrations. It became, over time, a full design house: planning, styling and creative direction for weddings, social events and luxury-brand experiences.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: 0 }}>
                We remain founder-led and intentionally small. Each project is briefed, designed and produced by the same hands from first conversation to final breakdown — an editorial sensibility held across every detail.
              </p>
            </div>

            <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, borderTop: "1px solid var(--line)", paddingTop: 32 }}>
              <div>
                <Eyebrow>Co-Founders</Eyebrow>
                <div style={{ marginTop: 10, fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300 }}>Dana & May Badran</div>
              </div>
              <div>
                <Eyebrow>Headquarters</Eyebrow>
                <div style={{ marginTop: 10, fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300 }}>Al Quoz, Dubai</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ padding: "120px 56px", background: "var(--mist)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, marginBottom: 80 }}>
            <Eyebrow>The Philosophy</Eyebrow>
            <DisplayH size={56}>
              We make events that <em>feel like a place</em>, not a checklist — singular, considered, intentionally restrained.
            </DisplayH>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, borderTop: "1px solid var(--line)", paddingTop: 56 }}>
            {[
              ["I.", "Editorial restraint", "We prefer a tight palette, a single signature material, and a quiet visual language carried through every detail."],
              ["II.", "Sense of place", "Whether desert, ballroom or villa — the venue is our first collaborator. The design begins with the site."],
              ["III.", "In-house from concept to breakdown", "Planning, styling and creative direction held under one roof. Decisions stay with the people who made them."],
            ].map(([n, t, d]) => (
              <div key={t}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", color: "var(--muted)" }}>{n}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 400, margin: "16px 0 16px", color: "var(--ink)" }}>{t}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <EnquireBand openEnquire={openEnquire}/>
      <Footer go={go}/>
    </main>
  );
}

// ---------- SERVICES / APPROACH ----------

function Services({ go, openEnquire }) {
  const pillars = [
    {
      key: "planning",
      num: "I.",
      title: "Planning",
      lede: "From the first conversation to the final breakdown — quietly held, end-to-end.",
      bullets: [
        "Brief & consultation",
        "Venue selection & site planning",
        "Supplier negotiation & contract management",
        "Production logistics & timelines",
        "Guest experience & hospitality flow",
        "Entertainment programming",
        "On-the-day event management",
      ],
    },
    {
      key: "styling",
      num: "II.",
      title: "Styling",
      lede: "An editorial language for the table, the room, and every transition in between.",
      bullets: [
        "Tablescape & centrepiece design",
        "Floral concept & selection",
        "Furniture, linens & tableware curation",
        "Ceremony staging & arrival moments",
        "Graphic design & print artwork",
        "Lighting & atmosphere",
        "Bespoke fabrication where required",
      ],
    },
    {
      key: "direction",
      num: "III.",
      title: "Creative Direction",
      lede: "The concept behind the event — what it should feel like, sound like, photograph as.",
      bullets: [
        "Concept development",
        "Mood, palette & material language",
        "Narrative & sequencing",
        "Photographer & film direction",
        "Wardrobe and styling guidance",
        "Brand alignment for activations",
      ],
    },
  ];

  return (
    <main>
      <section style={{ padding: "180px 56px 80px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow>The Approach</Eyebrow>
          <DisplayH size={96} style={{ marginTop: 40, maxWidth: 1200 }}>
            Planning. Styling. <em>Creative Direction.</em>
          </DisplayH>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--text)", fontWeight: 300, margin: "48px 0 0", maxWidth: 760 }}>
            Three disciplines, one studio — held in-house across weddings, social events and luxury brand experiences. Engagements are bespoke; we work with a small number of clients each season to keep the work close.
          </p>
        </div>
      </section>

      <section style={{ padding: "80px 56px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "flex", flexDirection: "column", gap: 0 }}>
          {pillars.map((p, i) => (
            <div key={p.key} style={{
              display: "grid", gridTemplateColumns: "auto 1fr 2fr",
              gap: 64, alignItems: "start",
              padding: "64px 0",
              borderTop: "1px solid var(--line)",
              borderBottom: i === pillars.length - 1 ? "1px solid var(--line)" : "none",
            }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 64, fontStyle: "italic", fontWeight: 300, color: "var(--plum)", lineHeight: 1 }}>{p.num}</div>
              <div>
                <DisplayH size={56}>{p.title}</DisplayH>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: "24px 0 0", maxWidth: 380 }}>{p.lede}</p>
              </div>
              <div style={{ paddingTop: 12 }}>
                <Eyebrow>Inclusions</Eyebrow>
                <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  {p.bullets.map(b => (
                    <li key={b} style={{
                      fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--ink)", fontWeight: 400,
                      display: "flex", gap: 12, alignItems: "baseline",
                    }}>
                      <span style={{ width: 18, height: 1, background: "var(--plum)", flexShrink: 0, transform: "translateY(-4px)" }}></span>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section style={{ padding: "120px 56px", background: "var(--noir)", color: "white" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow white>The Process</Eyebrow>
          <DisplayH size={72} style={{ marginTop: 32, color: "white", maxWidth: 1100 }}>
            <span style={{ color: "white" }}>Six conversations</span> <em style={{ color: "white", opacity: 0.7 }}>between brief and breakdown.</em>
          </DisplayH>
          <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 32, borderTop: "1px solid rgba(255,255,255,.2)", paddingTop: 32 }}>
            {[
              ["01", "Enquire", "A short note about your event — the date, the place, the sense of it."],
              ["02", "Discovery", "We meet (in person, or by video) to listen. A bespoke proposal follows within ten days."],
              ["03", "Design", "Mood, palette, materials. Decks, samples, site visits, sourcing."],
              ["04", "Production", "Suppliers, contracts, logistics. Weekly meetings as we approach the date."],
              ["05", "Event", "We run the day. You enjoy it."],
              ["06", "Archive", "A curated set of stills and credits — to keep, to share, to remember."],
            ].map(([n, t, d]) => (
              <div key={n}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", color: "rgba(255,255,255,.6)" }}>{n}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 400, margin: "20px 0 14px", color: "white" }}>{t}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.6, color: "rgba(255,255,255,.7)", fontWeight: 300, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <EnquireBand openEnquire={openEnquire}/>
      <Footer go={go}/>
    </main>
  );
}

// ---------- PRESS ----------

function Press({ go, openEnquire }) {
  return (
    <main>
      <section style={{ padding: "180px 56px 60px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow>Editorial</Eyebrow>
          <DisplayH size={96} style={{ marginTop: 40 }}>
            As featured in.
          </DisplayH>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 300, margin: "40px 0 0", maxWidth: 620 }}>
            Selected editorial coverage. Full credits and links are added once publication and image-usage rights are confirmed.
          </p>
        </div>
      </section>

      <section style={{ padding: "80px 56px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {window.PRESS.map((p, i) => (
              <div key={p.name} style={{
                display: "grid", gridTemplateColumns: "60px 1fr auto auto",
                gap: 40, alignItems: "center",
                padding: "40px 0", borderBottom: "1px solid var(--line)",
                opacity: p.confirmed ? 1 : 0.55,
              }}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", color: "var(--muted)" }}>{String(i+1).padStart(2,"0")}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 44, fontStyle: "italic", fontWeight: 300 }}>{p.name}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--muted)" }}>{p.note}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase", color: p.confirmed ? "var(--plum)" : "var(--muted)" }}>
                  {p.confirmed ? "Read →" : "Pending"}
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 56, padding: 28, background: "var(--mist)", border: "1px solid var(--line)" }}>
            <Eyebrow>A note on attribution</Eyebrow>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: "16px 0 0", maxWidth: 720 }}>
              The Purple Chair has been featured by multiple editorial titles. This page lists only publications whose feature, year and image-usage rights have been confirmed with the publisher and the photographer. Pending entries will be added once verified.
            </p>
          </div>
        </div>
      </section>

      <EnquireBand openEnquire={openEnquire}/>
      <Footer go={go}/>
    </main>
  );
}

// ---------- CONTACT ----------

function Contact({ go, openEnquire }) {
  return (
    <main>
      <section style={{ padding: "180px 56px 80px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Eyebrow>Begin</Eyebrow>
          <DisplayH size={120} style={{ marginTop: 32, maxWidth: 1200 }}>
            Tell us about <em>your event.</em>
          </DisplayH>
        </div>
      </section>

      <section style={{ padding: "60px 56px 160px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 100, alignItems: "start" }}>
          <ContactForm/>

          <aside>
            <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
              <div>
                <Eyebrow>Studio</Eyebrow>
                <div style={{ marginTop: 16, fontFamily: "var(--font-display)", fontSize: 24, fontStyle: "italic", fontWeight: 300, lineHeight: 1.5 }}>
                  Al Quoz Industrial Area 3<br/>Dubai, United Arab Emirates
                </div>
                <div style={{ marginTop: 12, fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--muted)" }}>Exact unit pending confirmation</div>
              </div>

              <div>
                <Eyebrow>Direct</Eyebrow>
                <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
                  <a href="tel:+97143552777" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300, color: "var(--ink)", textDecoration: "none" }}>+971 4 355 2777</a>
                  <a href="mailto:info@thepurplechair.co" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300, color: "var(--ink)", textDecoration: "none" }}>info@thepurplechair.co</a>
                </div>
              </div>

              <div>
                <Eyebrow>Hours</Eyebrow>
                <div style={{ marginTop: 16, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--muted)", fontWeight: 300 }}>By appointment</div>
              </div>

              <div>
                <Eyebrow>Find Us</Eyebrow>
                <div style={{ marginTop: 16, display: "flex", gap: 14 }}>
                  {["Instagram", "Brand Events", "Facebook", "Pinterest"].map(s => (
                    <a key={s} href="#" style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 4, textDecoration: "none" }}>{s}</a>
                  ))}
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>

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

// ---------- CONTACT FORM ----------

function ContactForm({ initialSector = "" }) {
  const [data, setData] = useStateB({
    name: "", email: "", phone: "",
    type: initialSector || "wedding",
    date: "", guests: "", venue: "",
    message: "",
  });
  const [sent, setSent] = useStateB(false);

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

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  if (sent) {
    return (
      <div style={{ padding: 56, border: "1px solid var(--line)", background: "var(--mist)" }}>
        <Eyebrow>Thank you</Eyebrow>
        <DisplayH size={48} style={{ marginTop: 24 }}>We've received your <em>note.</em></DisplayH>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.7, color: "var(--text)", fontWeight: 300, margin: "24px 0 0", maxWidth: 480 }}>
          A member of the studio will respond personally within two working days. If urgent, please call <a href="tel:+97143552777" style={{ color: "var(--plum)" }}>+971 4 355 2777</a>.
        </p>
        <button onClick={() => { setSent(false); setData({ name:"", email:"", phone:"", type: "wedding", date:"", guests:"", venue:"", message:"" }); }} style={{ marginTop: 40, background: "none", border: 0, fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", cursor: "pointer", borderBottom: "1px solid var(--ink)", paddingBottom: 4 }}>
          Send another enquiry
        </button>
      </div>
    );
  }

  const fieldStyle = {
    border: 0, borderBottom: "1px solid var(--line)",
    padding: "16px 0", fontFamily: "var(--font-sans)", fontSize: 15,
    background: "transparent", outline: "none",
    color: "var(--ink)", fontWeight: 300,
    width: "100%",
  };
  const labelStyle = { fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 6, display: "block" };

  return (
    <form onSubmit={submit} style={{ display: "grid", gap: 32 }}>
      <div>
        <label style={labelStyle}>Event type</label>
        <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
          {[["wedding", "Wedding"], ["brand", "Brand Event"], ["social", "Social / Private"]].map(([k, l]) => (
            <button key={k} type="button" onClick={() => setData(d => ({...d, type: k}))} style={{
              fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
              padding: "12px 20px",
              border: "1px solid", borderColor: data.type === k ? "var(--ink)" : "var(--line)",
              background: data.type === k ? "var(--ink)" : "transparent",
              color: data.type === k ? "var(--paper)" : "var(--ink)",
              cursor: "pointer", transition: "all .2s",
            }}>{l}</button>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
        <div>
          <label style={labelStyle}>Name</label>
          <input style={fieldStyle} value={data.name} onChange={set("name")} placeholder="Your name" required/>
        </div>
        <div>
          <label style={labelStyle}>Email</label>
          <input type="email" style={fieldStyle} value={data.email} onChange={set("email")} placeholder="you@example.com" required/>
        </div>
        <div>
          <label style={labelStyle}>Phone</label>
          <input style={fieldStyle} value={data.phone} onChange={set("phone")} placeholder="+971"/>
        </div>
        <div>
          <label style={labelStyle}>Date or season</label>
          <input style={fieldStyle} value={data.date} onChange={set("date")} placeholder="e.g. Autumn 2026"/>
        </div>
        <div>
          <label style={labelStyle}>Guest count (approx.)</label>
          <input style={fieldStyle} value={data.guests} onChange={set("guests")} placeholder="—"/>
        </div>
        <div>
          <label style={labelStyle}>Venue / Location (if known)</label>
          <input style={fieldStyle} value={data.venue} onChange={set("venue")} placeholder="Dubai, destination, undecided…"/>
        </div>
      </div>

      <div>
        <label style={labelStyle}>Tell us about the event</label>
        <textarea style={{ ...fieldStyle, resize: "vertical", minHeight: 100 }} value={data.message} onChange={set("message")} placeholder="A few sentences are enough — we'll follow up to learn more."/>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16, gap: 24, flexWrap: "wrap" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, color: "var(--muted)", fontWeight: 300, maxWidth: 360 }}>
          By submitting, you consent to The Purple Chair contacting you about your enquiry. We don't share details.
        </div>
        <HairlineButton variant="plum" style={{ padding: "18px 32px" }}>Send enquiry</HairlineButton>
      </div>
    </form>
  );
}

// ---------- ENQUIRE MODAL ----------

function EnquireModal({ open, onClose, initialSector }) {
  useEffectB(() => {
    if (!open) return;
    const sc = document.querySelector(".tpc-scroll");
    if (sc) sc.style.overflow = "hidden";
    return () => { if (sc) sc.style.overflow = ""; };
  }, [open]);

  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(15,14,16,.65)", backdropFilter: "blur(6px)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: "var(--paper)", maxWidth: 900, width: "100%", maxHeight: "90vh", overflow: "auto", padding: "56px 64px", position: "relative" }}>
        <button onClick={onClose} style={{ position: "absolute", top: 24, right: 24, background: "none", border: 0, fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", cursor: "pointer", color: "var(--ink)" }}>Close ×</button>
        <Eyebrow>Begin a conversation</Eyebrow>
        <DisplayH size={56} style={{ marginTop: 24, marginBottom: 40 }}>Request a <em>proposal.</em></DisplayH>
        <ContactForm initialSector={initialSector}/>
      </div>
    </div>
  );
}

// ---------- ENQUIRE BAND ----------

function EnquireBand({ openEnquire, sector }) {
  const labels = {
    "weddings": "Plan your wedding with The Purple Chair",
    "events": "Plan a social event with us",
    "brand-events": "Brief us on your activation",
  };
  const label = labels[sector] || "Begin a conversation with the studio";
  return (
    <section style={{ padding: "120px 56px", background: "var(--ink)", color: "var(--paper)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "2fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <Eyebrow white>Enquire</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(56px, 7vw, 104px)", fontWeight: 300, lineHeight: 1, letterSpacing: "-0.02em", margin: "24px 0 0", color: "var(--paper)", textWrap: "balance" }}>
            {label}.
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-end" }}>
          <HairlineButton variant="ghost" onClick={openEnquire}>Request a Proposal</HairlineButton>
          <a href="tel:+97143552777" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontStyle: "italic", fontWeight: 300, color: "var(--paper)", textDecoration: "none" }}>+971 4 355 2777</a>
          <a href="mailto:info@thepurplechair.co" style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "rgba(251,250,248,.7)", textDecoration: "none" }}>info@thepurplechair.co</a>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------

function Footer({ go }) {
  return (
    <footer style={{ background: "var(--noir)", color: "var(--paper)", padding: "80px 56px 40px" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 56, paddingBottom: 64, borderBottom: "1px solid rgba(255,255,255,.15)" }}>
          <div>
            <Mark size={26} white/>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,.65)", fontWeight: 300, margin: "32px 0 0", maxWidth: 320 }}>
              A Dubai-based design house for weddings, social events and brand activations. Planning · Styling · Creative Direction.
            </p>
          </div>
          <div>
            <Eyebrow white>Studio</Eyebrow>
            <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
              {[["about", "About"], ["services", "Approach"], ["press", "Press"], ["contact", "Contact"]].map(([k, l]) => (
                <li key={k}><button onClick={() => go(k)} style={{ background: "none", border: 0, color: "rgba(255,255,255,.8)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 300, cursor: "pointer", padding: 0 }}>{l}</button></li>
              ))}
            </ul>
          </div>
          <div>
            <Eyebrow white>Work</Eyebrow>
            <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
              {[["portfolio", "All Work"], ["weddings", "Weddings"], ["events", "Events & Social"], ["brand-events", "Brand Events"]].map(([k, l]) => (
                <li key={k}><button onClick={() => go(k)} style={{ background: "none", border: 0, color: "rgba(255,255,255,.8)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 300, cursor: "pointer", padding: 0 }}>{l}</button></li>
              ))}
            </ul>
          </div>
          <div>
            <Eyebrow white>Find Us</Eyebrow>
            <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
              {["Instagram — @thepurplechair", "Instagram — @eventsbythepurplechair", "Facebook", "Pinterest"].map(s => (
                <li key={s}><a href="#" style={{ color: "rgba(255,255,255,.8)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 300, textDecoration: "none" }}>{s}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <Eyebrow white>Contact</Eyebrow>
            <div style={{ marginTop: 20, fontFamily: "var(--font-sans)", fontSize: 13, color: "rgba(255,255,255,.8)", fontWeight: 300, lineHeight: 1.7 }}>
              Al Quoz Industrial Area 3<br/>Dubai, UAE<br/><br/>
              <a href="tel:+97143552777" style={{ color: "rgba(255,255,255,.8)", textDecoration: "none" }}>+971 4 355 2777</a><br/>
              <a href="mailto:info@thepurplechair.co" style={{ color: "rgba(255,255,255,.8)", textDecoration: "none" }}>info@thepurplechair.co</a>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 32, fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>
          <div>© The Purple Chair FZE</div>
          <div>Founded by the Badran Sisters · Dubai</div>
          <div>EN · AR · RU</div>
        </div>
      </div>
    </footer>
  );
}

window.Hub = Hub;
window.About = About;
window.Services = Services;
window.Press = Press;
window.Contact = Contact;
window.EnquireBand = EnquireBand;
window.EnquireModal = EnquireModal;
window.Footer = Footer;
