// Pages part 2 — Real Weddings index, Wedding Story, Services, Destinations, About, Enquire.

// ────────── REAL WEDDINGS INDEX ──────────
function RealWeddings() {
  const [filter, setFilter] = useState("All");
  const destinations = ["All", ...Array.from(new Set(REAL_WEDDINGS.map((w) => w.destination)))];
  const filtered = filter === "All" ? REAL_WEDDINGS : REAL_WEDDINGS.filter((w) => w.destination === filter);

  return (
    <div className="page-shell">
      <PageHero
        eyebrow="Real Weddings"
        heading="The stories we've helped tell."
        kicker="Real weddings, real families, real photographers. Each story below carries the venue, the multi-day flow and a credit to the people who photographed it. Names and faces appear only with written consent."
        image="media/gallery-header.webp"
      />

      <section className="section" style={{ paddingTop: 60 }}>
        <div className="container">
          {/* filter */}
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 56, justifyContent: "center", alignItems: "center" }}>
            <span className="micro" style={{ marginRight: 8 }}>Filter by destination:</span>
            {destinations.map((d) => (
              <button
                key={d}
                className={`chip ${filter === d ? "active" : ""}`}
                onClick={() => setFilter(d)}
              >
                {d}
              </button>
            ))}
          </div>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: 40,
              rowGap: 64,
            }}
          >
            {filtered.map((w, i) => (
              <div key={w.slug} style={{ paddingTop: i % 3 === 1 ? 40 : i % 3 === 2 ? 80 : 0 }}>
                <WeddingCard wedding={w} />
              </div>
            ))}
          </div>

          {filtered.length === 0 && (
            <p className="lede" style={{ textAlign: "center", color: "var(--muted)" }}>
              No published weddings for this destination yet — the team has worked there, but
              we are still waiting on consent.
            </p>
          )}
        </div>
      </section>

      <CtaBand heading="Tell us about yours." sub="From a first conversation to the final farewell, we will quietly carry the wedding for you." />
    </div>
  );
}

// ────────── WEDDING STORY (case study) ──────────
function WeddingStory({ slug }) {
  const w = REAL_WEDDINGS.find((x) => x.slug === slug);
  if (!w) {
    return (
      <div className="page-shell" style={{ padding: "160px 0", textAlign: "center" }}>
        <h2 className="serif">Wedding not found</h2>
        <p style={{ marginTop: 24 }}>
          <a href="#/real-weddings" className="btn-link">Back to all weddings</a>
        </p>
      </div>
    );
  }

  return (
    <div className="page-shell">
      {/* Hero */}
      <section style={{ position: "relative", height: "92vh", minHeight: 620, color: "#FBF6F1", overflow: "hidden" }}>
        <img src={w.hero} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(22,17,18,0.4) 0%, rgba(22,17,18,0.15) 40%, rgba(22,17,18,0.7) 100%)" }} />
        <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 60 }}>
          <div style={{ display: "inline-block", padding: "6px 12px", background: "rgba(251,246,241,0.92)", color: "var(--text)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 500, marginBottom: 24, alignSelf: "flex-start" }}>
            A Real Wedding · {w.destination}
          </div>
          <h1 className="serif" style={{ color: "#FBF6F1", fontWeight: 300, fontStyle: "italic", maxWidth: 900, textWrap: "balance" }}>
            {w.display}
          </h1>
          <p className="lede" style={{ color: "rgba(251,246,241,0.85)", maxWidth: 620, marginTop: 24 }}>
            Photography {w.photographer} · {w.year} · Published with consent of the family.
          </p>
        </div>
      </section>

      {/* Meta strip */}
      <section style={{ borderBottom: "1px solid var(--hairline)", padding: "32px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 24 }}>
          {[
            { label: "Destination", val: w.location },
            { label: "Venue", val: w.venue },
            { label: "Events", val: `${w.events} across ${w.days} days` },
            { label: "Guests", val: w.guests },
            { label: "Year", val: w.year },
          ].map((m) => (
            <div key={m.label}>
              <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 8 }}>{m.label}</div>
              <div className="serif" style={{ fontSize: 18, fontStyle: "italic", color: "var(--text)" }}>{m.val}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Narrative */}
      <section className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 100, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <span className="ornament eyebrow"><span>The Story</span></span>
            <h2 className="serif" style={{ marginTop: 22, fontWeight: 300, fontStyle: "italic" }}>
              A long, slow weekend on the island.
            </h2>
          </div>
          <div>
            <p className="lede" style={{ color: "var(--text)", textWrap: "pretty" }}>
              {w.excerpt}
            </p>
            <p className="lede" style={{ color: "var(--muted)", marginTop: 24, textWrap: "pretty" }}>
              The brief from the family was unusually quiet: "let the venue do the work." We
              worked with the natural arc of the island — sunrise haldi, late-afternoon sangeet
              on the lawn, an intimate mandap set against the open Gulf. Twelve weeks of
              planning, three transport routes, one shared meal a day for the family — and a
              wedding that arrived feeling, in the family's own words, "as if we had nothing to
              do but be guests."
            </p>
            <p className="lede" style={{ color: "var(--muted)", marginTop: 24, textWrap: "pretty" }}>
              The design palette was drawn from the bride's grandmother's wedding sari — blush,
              champagne and a deep oxblood that only appeared at dusk. The decor was kept light
              by day, layered for the evenings.
            </p>

            {/* Functions */}
            <div style={{ marginTop: 56 }}>
              <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 16 }}>Functions Covered</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                {w.functions.map((f) => (
                  <span key={f} className="chip" style={{ background: "var(--surface)", color: "var(--text)", borderColor: "var(--hairline)" }}>
                    {f}
                  </span>
                ))}
              </div>
            </div>

            {/* Palette */}
            <div style={{ marginTop: 48 }}>
              <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 16 }}>Design Palette</div>
              <div style={{ display: "flex", gap: 12 }}>
                {w.palette.map((c) => (
                  <div key={c}>
                    <div style={{ width: 64, height: 96, background: c, border: "1px solid var(--hairline)" }} />
                    <div className="small" style={{ marginTop: 8, fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.05em" }}>{c}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="section" style={{ background: "var(--surface)", paddingBlock: 80 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
            <div className="img-frame" style={{ aspectRatio: "4/5", gridRow: "span 2" }}>
              <img src="media/decor-mandap.webp" alt="" />
            </div>
            <div className="img-frame" style={{ aspectRatio: "4/3" }}>
              <img src="media/decor-haldi-ceremony.webp" alt="" />
            </div>
            <div className="img-frame" style={{ aspectRatio: "4/3" }}>
              <img src="media/decor-mehndi.webp" alt="" />
            </div>
            <div className="img-frame" style={{ aspectRatio: "4/3" }}>
              <img src="media/decor-sangeet.webp" alt="" />
            </div>
            <div className="img-frame" style={{ aspectRatio: "4/3" }}>
              <img src="media/decor-wedding-stage.webp" alt="" />
            </div>
          </div>

          <div style={{ marginTop: 40, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <p className="small" style={{ color: "var(--muted)", fontStyle: "italic" }}>
              Imagery above is decor work from the studio. Wedding photography is consent + photographer-credit gated and shown only where families have agreed.
            </p>
            <p className="micro" style={{ color: "var(--accent-deep)" }}>
              Photography: {w.photographer}
            </p>
          </div>
        </div>
      </section>

      {/* Adjacent weddings */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="More Real Weddings" heading="Other stories from the studio." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {REAL_WEDDINGS.filter((x) => x.slug !== w.slug).slice(0, 3).map((other) => (
              <WeddingCard key={other.slug} wedding={other} />
            ))}
          </div>
        </div>
      </section>

      <CtaBand heading="Plan a wedding like this." sub="Start with a conversation. We'll come back with a single point of view." />
    </div>
  );
}

// ────────── SERVICES ──────────
function Services() {
  return (
    <div className="page-shell">
      <PageHero
        eyebrow="What We Do"
        heading="Six lines of work, one studio."
        kicker="From the first conversation about how you'd like to feel on your wedding day, to the corporate gala that has to land for a CEO and a thousand staff — the same in-house team carries every brief end-to-end."
        image="media/decor-entrance.webp"
      />

      <section className="section">
        <div className="container">
          {SERVICES.map((s, i) => (
            <ServiceRow key={s.id} service={s} flipped={i % 2 === 1} index={i} />
          ))}
        </div>
      </section>

      <CtaBand />
    </div>
  );
}

function ServiceRow({ service, flipped, index }) {
  return (
    <article
      id={service.id}
      style={{
        display: "grid",
        gridTemplateColumns: flipped ? "1fr 1.1fr" : "1.1fr 1fr",
        gap: 80,
        alignItems: "center",
        paddingBlock: 80,
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      <div style={{ order: flipped ? 2 : 1 }}>
        <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 14 }}>
          {String(index + 1).padStart(2, "0")} / 06
        </div>
        <h2 className="serif" style={{ fontWeight: 400, marginBottom: 24, fontStyle: "italic" }}>
          {service.title}
        </h2>
        <p className="lede" style={{ color: "var(--muted)", maxWidth: 520, marginBottom: 32 }}>
          {service.body}
        </p>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
          {service.bullets.map((b) => (
            <li key={b} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
              <span style={{ color: "var(--accent)", fontSize: 12, letterSpacing: "0.1em" }}>—</span>
              <span style={{ color: "var(--text)" }}>{b}</span>
            </li>
          ))}
        </ul>
        <a href="#/enquire" className="btn-link" style={{ display: "inline-block", marginTop: 36 }}>
          Enquire about {service.title.toLowerCase()} →
        </a>
      </div>
      <div className="img-frame" style={{ aspectRatio: "4/5", order: flipped ? 1 : 2 }}>
        <img src={service.img} alt="" />
      </div>
    </article>
  );
}

// ────────── DESTINATIONS ──────────
function DestinationsPage() {
  return (
    <div className="page-shell">
      <PageHero
        eyebrow="Where We Work"
        heading="Ten countries, one team on the ground."
        kicker="We design and run weddings around a core set of destinations — places we know the venues, the suppliers, the customs paperwork and the back roads."
        image="media/destination-bahrain.webp"
      />

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, rowGap: 56 }}>
            {DESTINATIONS.map((d, i) => (
              <a key={d.short} href="#/real-weddings" style={{ display: "block" }}>
                <div className="img-frame" style={{ aspectRatio: "4/5", marginBottom: 18 }}>
                  <img src={d.img} alt="" />
                </div>
                <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 8 }}>
                  {String(i + 1).padStart(2, "0")} · {d.count} weddings
                </div>
                <h3 className="serif" style={{ fontWeight: 400, fontStyle: "italic" }}>
                  {d.name}
                </h3>
                <p className="small" style={{ marginTop: 10 }}>
                  Local partners, venue relationships and on-ground logistics
                  established over a decade.
                </p>
              </a>
            ))}
          </div>

          <div style={{ marginTop: 80, padding: 40, background: "var(--surface)", textAlign: "center" }}>
            <p className="lede" style={{ color: "var(--text)", maxWidth: 720, margin: "0 auto" }}>
              Couples have also brought us to Hong Kong, South Africa and Qatar — and we travel
              wherever the story calls for. If your destination isn't above, ask.
            </p>
            <a href="#/enquire" className="btn btn-primary" style={{ marginTop: 28 }}>Tell us where</a>
          </div>
        </div>
      </section>
    </div>
  );
}

// ────────── ABOUT ──────────
function About() {
  return (
    <div className="page-shell">
      <PageHero
        eyebrow="The Studio"
        heading={<>Founded in Dubai, <em className="script" style={{ color: "var(--secondary)", fontSize: "1.2em", lineHeight: 0.7 }}>2014</em>.</>}
        kicker="A wedding and event studio born out of one founder's instinct for the families behind the paperwork."
        image="media/decor-wedding-stage.webp"
      />

      <section className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
          <div className="img-frame" style={{ aspectRatio: "4/5", position: "sticky", top: 120 }}>
            <img src="media/founder-saniya-wahi.webp" alt="Saniya Wahi" />
          </div>
          <div>
            <span className="ornament eyebrow"><span>The Founder</span></span>
            <h2 className="serif" style={{ marginTop: 22, marginBottom: 24, fontWeight: 300 }}>
              Saniya Wahi
            </h2>
            <p className="lede" style={{ color: "var(--text)" }}>
              Saniya started planning weddings at twenty-two, out of a small apartment in
              Dubai, under the name <em>Selvatico</em>. A decade later, the studio she founded
              carries her name and works across the UAE, India and the world.
            </p>
            <p className="lede" style={{ color: "var(--muted)", marginTop: 22 }}>
              Her stated background in psychology shapes the way the studio works. The first
              meeting is rarely about the wedding — it's about the family, the parents, the
              friends and the small histories that have led to this celebration. Everything
              that follows is in service of that.
            </p>

            <hr className="rule-gold" style={{ margin: "56px 0" }} />

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
              <div>
                <h4 className="serif" style={{ fontStyle: "italic", marginBottom: 14, fontWeight: 400 }}>
                  Our ethos
                </h4>
                <p className="small">
                  Every wedding has a different emotion. The job of the studio is to find that
                  emotion, name it, and design every room, ritual and meal around it.
                </p>
              </div>
              <div>
                <h4 className="serif" style={{ fontStyle: "italic", marginBottom: 14, fontWeight: 400 }}>
                  Our practice
                </h4>
                <p className="small">
                  We work as a single in-house team — planners, designers, florists,
                  production. Vendors are curated, not assembled at random.
                </p>
              </div>
              <div>
                <h4 className="serif" style={{ fontStyle: "italic", marginBottom: 14, fontWeight: 400 }}>
                  Our network
                </h4>
                <p className="small">
                  Photographers, videographers, caterers, performers, designers — a decade of
                  relationships in Dubai, Mumbai, Delhi, London and beyond.
                </p>
              </div>
              <div>
                <h4 className="serif" style={{ fontStyle: "italic", marginBottom: 14, fontWeight: 400 }}>
                  Our scale
                </h4>
                <p className="small">
                  More than 250 events. Weddings from 60 to 600 guests. Corporate galas, award
                  nights, product launches, intimate dinners.
                </p>
              </div>
            </div>

            <hr className="rule-gold" style={{ margin: "56px 0" }} />

            <h4 className="serif" style={{ fontStyle: "italic", marginBottom: 18, fontWeight: 400 }}>From Selvatico to Events by Saniya</h4>
            <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", rowGap: 22, columnGap: 32 }}>
              {[
                ["2014", "Selvatico is founded in Dubai by Saniya Wahi, aged 22."],
                ["2018", "First major destination wedding outside the UAE — India."],
                ["2020", "Selvatico is rechristened Events by Saniya."],
                ["2022", "Two offices: Dubai (UAE) and Gurgaon (India)."],
                ["2024", "Two hundred and fiftieth event."],
              ].map(([y, t]) => (
                <React.Fragment key={y}>
                  <div className="serif" style={{ fontStyle: "italic", color: "var(--accent-deep)", fontSize: 22 }}>{y}</div>
                  <div className="small" style={{ color: "var(--text)" }}>{t}</div>
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CtaBand />
    </div>
  );
}

// ────────── ENQUIRE ──────────
function Enquire() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    eventType: "Wedding",
    eventDate: "",
    guests: "100–200",
    destination: "UAE",
    budget: "",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const waText = encodeURIComponent(
    `Hi Events by Saniya — I'd like to enquire about a ${form.eventType.toLowerCase()} in ${form.destination}, ${form.eventDate || "TBC"}, ~${form.guests} guests.`
  );

  return (
    <div className="page-shell">
      <PageHero
        eyebrow="Enquire"
        heading="Tell us about your celebration."
        kicker="Where it is, when it is, who you are. We'll come back with a single, considered point of view — not a quote, not a brochure."
        image="media/decor-entrance.webp"
        compact
      />

      <section className="section" style={{ paddingTop: 60 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "start" }}>
          {/* Form */}
          <div>
            {submitted ? (
              <div style={{ padding: 56, background: "var(--surface)", textAlign: "center" }}>
                <span className="ornament eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}><span>Sent</span></span>
                <h2 className="serif" style={{ marginTop: 22, fontStyle: "italic", fontWeight: 300 }}>
                  Thank you, {form.name.split(" ")[0] || "we'll be in touch"}.
                </h2>
                <p className="lede" style={{ color: "var(--muted)", marginTop: 18, maxWidth: 520, marginInline: "auto" }}>
                  We've received your enquiry and will reply personally within two working
                  days. If your celebration is sooner, please WhatsApp us directly.
                </p>
                <a href={`https://wa.me/971542457826?text=${waText}`} target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 28 }}>
                  Open WhatsApp
                </a>
              </div>
            ) : (
              <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                <FormGroup label="Your name" required>
                  <input type="text" required value={form.name} onChange={(e) => update("name", e.target.value)} className="input" placeholder="Full name" />
                </FormGroup>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                  <FormGroup label="Email" required>
                    <input type="email" required value={form.email} onChange={(e) => update("email", e.target.value)} className="input" placeholder="you@example.com" />
                  </FormGroup>
                  <FormGroup label="Phone (with country code)" required>
                    <input type="tel" required value={form.phone} onChange={(e) => update("phone", e.target.value)} className="input" placeholder="+971 …" />
                  </FormGroup>
                </div>

                <FormGroup label="Event type">
                  <SegmentedField
                    value={form.eventType}
                    options={["Wedding", "Corporate", "Private", "Other"]}
                    onChange={(v) => update("eventType", v)}
                  />
                </FormGroup>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                  <FormGroup label="Approximate date">
                    <input type="text" value={form.eventDate} onChange={(e) => update("eventDate", e.target.value)} className="input" placeholder="e.g. Nov 2025 or undecided" />
                  </FormGroup>
                  <FormGroup label="Guest count">
                    <SegmentedField
                      value={form.guests}
                      options={["< 100", "100–200", "200–400", "400+"]}
                      onChange={(v) => update("guests", v)}
                      small
                    />
                  </FormGroup>
                </div>

                <FormGroup label="Destination or venue">
                  <select className="input" value={form.destination} onChange={(e) => update("destination", e.target.value)}>
                    {["UAE", "India", "Greece", "Thailand", "Sri Lanka", "UK", "Bahrain", "Hong Kong", "South Africa", "Undecided", "Other"].map((d) => <option key={d}>{d}</option>)}
                  </select>
                </FormGroup>

                <FormGroup label="Budget band (optional)">
                  <SegmentedField
                    value={form.budget}
                    options={["Not sure", "< $100k", "$100–250k", "$250–500k", "$500k+"]}
                    onChange={(v) => update("budget", v)}
                    small
                  />
                </FormGroup>

                <FormGroup label="Tell us a little more">
                  <textarea rows="5" value={form.message} onChange={(e) => update("message", e.target.value)} className="input" placeholder="The story behind the celebration, any ideas you've had, anything we should know about the families." />
                </FormGroup>

                <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap", marginTop: 10 }}>
                  <button type="submit" className="btn btn-primary">Send Enquiry</button>
                  <a href={`https://wa.me/971542457826?text=${waText}`} target="_blank" rel="noopener" className="btn btn-ghost">
                    Or message on WhatsApp →
                  </a>
                </div>

                <p className="small" style={{ color: "var(--muted)", marginTop: 8 }}>
                  We respond personally within two working days. Your details are used only to
                  reply to this enquiry.
                </p>
              </form>
            )}
          </div>

          {/* Side */}
          <aside style={{ display: "flex", flexDirection: "column", gap: 32, padding: "0 0 0 0" }}>
            <ContactCard
              title="Dubai (Head Office)"
              lines={["PO Box 450450", "United Arab Emirates"]}
              phone="+971 54 245 7826"
            />
            <ContactCard
              title="Gurgaon"
              lines={["DLF Phase 1", "PO Box 122002, India"]}
            />

            <div style={{ padding: 28, background: "var(--surface)", border: "1px solid var(--hairline)" }}>
              <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 14 }}>Direct</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <a href="tel:+971542457826" className="serif" style={{ fontSize: 22, fontStyle: "italic" }}>
                  +971 54 245 7826
                </a>
                <a href="mailto:info@eventsbysaniya.com" className="small" style={{ color: "var(--text)" }}>
                  info@eventsbysaniya.com
                </a>
              </div>
            </div>

            <div className="small" style={{ color: "var(--muted)", fontStyle: "italic" }}>
              We don't publish prices. Every celebration is bespoke; we'll come back with a
              point of view sized to your brief.
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

function FormGroup({ label, required, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <span className="micro" style={{ color: "var(--text)" }}>
        {label}{required && <span style={{ color: "var(--primary)" }}> *</span>}
      </span>
      {children}
    </label>
  );
}

function SegmentedField({ value, options, onChange, small }) {
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      {options.map((o) => (
        <button
          key={o}
          type="button"
          onClick={() => onChange(o)}
          className={`chip ${value === o ? "active" : ""}`}
          style={small ? { fontSize: 10 } : {}}
        >
          {o}
        </button>
      ))}
    </div>
  );
}

function ContactCard({ title, lines, phone }) {
  return (
    <div style={{ paddingBottom: 28, borderBottom: "1px solid var(--hairline)" }}>
      <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 12 }}>{title}</div>
      {lines.map((l, i) => (
        <div key={i} className="small" style={{ color: "var(--text)", lineHeight: 1.7 }}>{l}</div>
      ))}
      {phone && <div className="small" style={{ marginTop: 6 }}>{phone}</div>}
    </div>
  );
}

// Shared page hero with image background
function PageHero({ eyebrow, heading, kicker, image, compact }) {
  return (
    <section
      style={{
        position: "relative",
        paddingTop: compact ? 180 : 220,
        paddingBottom: compact ? 80 : 120,
        background: `linear-gradient(rgba(22,17,18,0.42), rgba(22,17,18,0.55)), url(${image}) center/cover`,
        color: "#FBF6F1",
      }}
    >
      <div className="container" style={{ maxWidth: 880, textAlign: "center", marginInline: "auto" }}>
        <span className="ornament" style={{ color: "rgba(251,246,241,0.85)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", justifyContent: "center", display: "inline-flex", fontFamily: "var(--font-body)", fontWeight: 500 }}>
          <span>{eyebrow}</span>
        </span>
        <h1 className="serif" style={{ fontWeight: 300, color: "#FBF6F1", marginTop: 26, marginBottom: kicker ? 24 : 0, textWrap: "balance" }}>
          {heading}
        </h1>
        {kicker && (
          <p className="lede" style={{ color: "rgba(251,246,241,0.86)", maxWidth: 640, marginInline: "auto" }}>
            {kicker}
          </p>
        )}
      </div>
    </section>
  );
}

Object.assign(window, {
  RealWeddings,
  WeddingStory,
  Services,
  DestinationsPage,
  About,
  Enquire,
  PageHero,
});
