/* JAM — Services, Venues, About, Testimonials, Contact */

function ServicesPage({ setRoute }) {
  const D = window.JAM;
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 80px" }}>
        <div className="wrap">
          <span className="eyebrow eyebrow-rose">Services</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 96px)", fontWeight: 300, margin: "16px 0 28px", lineHeight: 1.02, maxWidth: "16ch" }}>
            One in-house team.<br/><em className="display-italic" style={{ color: "var(--primary-ink)" }}>Every</em> moving part.
          </h1>
          <p className="lead" style={{ maxWidth: "62ch" }}>
            Planning, design, florals, entertainment, photography, logistics and warehouse — all
            on one payroll, in one office, briefed once. Every wedding is bespoke; we price each
            project after the consultation.
          </p>
        </div>
      </section>

      {D.services.map((s, i) => (
        <section key={s.group} style={{ borderTop: "1px solid var(--border)", padding: "80px 0" }}>
          <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div style={{ position: "sticky", top: 110 }}>
              <p className="meta">0{i+1} · {String(D.services.length).padStart(2,'0')}</p>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 300, margin: "12px 0 18px", lineHeight: 1.05 }}>
                {s.group}
              </h2>
              <p style={{ color: "var(--muted)", fontSize: 15, maxWidth: "34ch" }}>
                {s.tagline}
              </p>
              <Lotus size={20} color="var(--accent)" />
            </div>

            <div>
              <p className="display" style={{ fontSize: "clamp(22px, 2vw, 30px)", fontWeight: 300, lineHeight: 1.4, margin: "0 0 32px", color: "var(--text)", maxWidth: "44ch" }}>
                {s.blurb}
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--border)" }}>
                {s.items.map((it, j) => (
                  <div key={it} style={{
                    padding: "20px 0",
                    borderBottom: "1px solid var(--border)",
                    borderRight: j % 2 === 0 ? "1px solid var(--border)" : "none",
                    paddingRight: j % 2 === 0 ? 24 : 0,
                    paddingLeft: j % 2 === 1 ? 24 : 0,
                    display: "flex", alignItems: "baseline", gap: 16
                  }}>
                    <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent)", fontSize: 18, minWidth: 28 }}>{String(j+1).padStart(2,'0')}</span>
                    <span style={{ fontSize: 16, color: "var(--text)" }}>{it}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      ))}

      <section style={{ background: "var(--surface)", padding: "100px 0", borderTop: "1px solid var(--border)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <span className="eyebrow eyebrow-rose">Pricing</span>
          <h3 className="display" style={{ fontSize: "clamp(34px, 3.6vw, 52px)", fontWeight: 300, margin: "16px auto 24px", maxWidth: "22ch", lineHeight: 1.1 }}>
            Every Jam wedding is <em className="display-italic" style={{ color: "var(--primary-ink)" }}>bespoke</em>. No tiers, no packages, no surprises.
          </h3>
          <p className="lead" style={{ maxWidth: "56ch", margin: "0 auto 32px" }}>
            We quote after the first conversation, against a real brief — date, venue, guest count,
            functions, mood. The number lands once, and it doesn't move.
          </p>
          <a className="btn btn-rose" href="#/contact" onClick={() => setRoute("contact")}>Start the conversation <span>→</span></a>
        </div>
      </section>
    </div>
  );
}


function VenuesPage({ setRoute }) {
  const D = window.JAM;
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 56px" }}>
        <div className="wrap">
          <span className="eyebrow eyebrow-rose">Venues</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 96px)", fontWeight: 300, margin: "16px 0 24px", lineHeight: 1.02, maxWidth: "20ch" }}>
            Dubai, in full. <em className="display-italic" style={{ color: "var(--primary-ink)" }}>Plus</em> wherever you'd rather be.
          </h1>
          <p className="lead" style={{ maxWidth: "60ch" }}>
            We've worked these rooms enough times to know where the bridal suite gets the
            afternoon light, which loading bay you want at 4pm, and which kitchen handles a
            biryani for six hundred. Below: nine venues we know intimately. Beyond Dubai:
            the Maldives, Seychelles, the Riviera, Marrakech, Mallorca, and anywhere with a runway.
          </p>
          <p style={{ marginTop: 22 }}>
            <ConsentNote text="Venue logos require preferred-supplier confirmation — shown here as named cards only" />
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {D.venues.map(v => (
              <article key={v.name} className="tile" style={{ aspectRatio: "4/5" }}>
                <img src={v.image} alt={v.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(26,23,20,0) 50%, rgba(26,23,20,0.85) 100%)" }}></div>
                <div className="tile-caption">
                  <div className="tradition" style={{ color: "rgba(255,255,255,0.7)" }}>{v.area}</div>
                  <div className="title">{v.name}</div>
                  <div style={{ fontSize: 12, color: "rgba(255,255,255,0.7)", marginTop: 8, letterSpacing: "0.06em" }}>{v.capacity}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "#FBF6F2", padding: "100px 0" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <span className="eyebrow" style={{ color: "rgba(251,246,242,0.6)" }}>Destination</span>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 60px)", fontWeight: 300, margin: "16px 0 24px", maxWidth: "16ch", lineHeight: 1.1 }}>
              Anywhere with a <em className="display-italic" style={{ color: "var(--accent)" }}>runway</em>.
            </h2>
            <p style={{ color: "rgba(251,246,242,0.78)", fontSize: 17, lineHeight: 1.6, fontWeight: 300, maxWidth: "52ch" }}>
              We fly the whole team. Planning, design, florals, entertainment, photography and
              logistics — all out of Dubai, all under one company, all on the same WhatsApp thread.
              We build the temporary structures, ship the production and clear the customs.
            </p>
          </div>
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              {["Maldives","Seychelles","Riviera","Mallorca","Marrakech","Bodrum","Goa","Cape Town"].map(p => (
                <div key={p} style={{ padding: "20px 0", borderTop: "1px solid rgba(255,255,255,0.12)", fontSize: 15 }}>
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent)", marginRight: 14 }}>↗</span>
                  {p}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}


function AboutPage({ setRoute }) {
  const D = window.JAM;
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 80px" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <span className="eyebrow eyebrow-rose">About · Since 2006</span>
            <h1 className="display" style={{ fontSize: "clamp(44px, 5.4vw, 88px)", fontWeight: 300, margin: "16px 0 28px", lineHeight: 1.02, maxWidth: "12ch" }}>
              German precision. <em className="display-italic" style={{ color: "var(--primary-ink)" }}>Dubai</em> heart.
            </h1>
            <p className="lead" style={{ maxWidth: "52ch" }}>
              Jam is a wedding planning, production and design company founded in Dubai in 2006.
              Stefanie Heller, our founder, is German by training and Dubai by choice — and has
              spent more than seventeen years on the planning side of weddings in the UAE.
            </p>
            <p style={{ fontSize: 15, color: "var(--muted)", maxWidth: "52ch", marginTop: 20 }}>
              The brief from day one has been simple: every wedding should feel like the couple who
              threw it. We translate the tradition; we don't import it.
            </p>
          </div>
          <div className="split-img" style={{ aspectRatio: "5/6" }}>
            <img src="media/about-feature.webp" alt="Jam team at work" />
          </div>
        </div>
      </section>

      {/* Founder block */}
      <section style={{ background: "var(--surface)", padding: "120px 0", borderTop: "1px solid var(--border)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
          <div className="split-img" style={{ aspectRatio: "4/5" }}>
            <img src="media/about-stefanie-heller.webp" alt="Stefanie Heller" />
          </div>
          <div>
            <span className="eyebrow eyebrow-rose">Founder</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", fontWeight: 300, margin: "14px 0 22px", lineHeight: 1.05 }}>
              Stefanie Heller
            </h2>
            <p className="meta" style={{ marginBottom: 18 }}>CEO &amp; Creative Director · German Creative Direction</p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--secondary)", fontWeight: 300, maxWidth: "54ch" }}>
              Founded Jam in 2006. Over seventeen years on the planning side of weddings in the UAE,
              with more than twenty years in the wider Dubai events industry. Trained in Germany,
              shaped by Dubai — fluent in the gap between Khaleeji formality, South Asian scale,
              Chinese ceremony and European restraint.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--secondary)", fontWeight: 300, maxWidth: "54ch", marginTop: 22 }}>
              Creative direction on every wedding remains with her. So does the final walk-through
              the morning before doors.
            </p>
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, color: "var(--primary-ink)", marginTop: 36, maxWidth: "44ch", lineHeight: 1.4 }}>
              "Achieving my clients' goals is my aim, exceeding their expectations my mission."
            </p>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56, flexWrap: "wrap", gap: 20 }}>
            <div>
              <span className="eyebrow eyebrow-rose">The team · 11 in-house</span>
              <h2 className="display" style={{ fontSize: "clamp(34px, 3.6vw, 52px)", fontWeight: 300, margin: "12px 0 0", maxWidth: "20ch", lineHeight: 1.05 }}>
                Planning, design, florals, entertainment, photography, logistics.
              </h2>
            </div>
            <p style={{ color: "var(--muted)", fontSize: 13, maxWidth: "32ch" }}>
              Hand-picked, on one payroll, briefed once. No agency-of-record handoffs.
            </p>
          </div>
          <div className="team-grid">
            {D.team.map(m => (
              <div key={m.name} className="team-card">
                <div className="avatar">
                  {m.image ? <img src={m.image} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <span className="initials">{m.initials}</span>}
                </div>
                <div className="role">{m.role}</div>
                <div className="name">{m.name}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "#FBF6F2", padding: "100px 0" }}>
        <div className="wrap-narrow" style={{ textAlign: "center" }}>
          <Lotus size={28} color="var(--accent)" />
          <p className="display" style={{ fontSize: "clamp(28px, 3vw, 40px)", fontWeight: 300, fontStyle: "italic", margin: "28px auto 32px", maxWidth: "32ch", lineHeight: 1.3, color: "rgba(251,246,242,0.95)" }}>
            "We work hand-in-hand with you and your fiancé, bridesmaids, family, and everyone involved — to create a tailored wedding day that truly reflects the two of you as a couple."
          </p>
          <p style={{ color: "rgba(251,246,242,0.5)", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Jam · The Brief</p>
        </div>
      </section>
    </div>
  );
}


function TestimonialsPage({ setRoute }) {
  const D = window.JAM;
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 60px" }}>
        <div className="wrap">
          <span className="eyebrow eyebrow-rose">Stories · From the couples</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 96px)", fontWeight: 300, margin: "16px 0 24px", lineHeight: 1.02, maxWidth: "18ch" }}>
            What the couples<br/><em className="display-italic" style={{ color: "var(--primary-ink)" }}>actually</em> said.
          </h1>
          <p className="lead" style={{ maxWidth: "60ch" }}>
            Below: unedited testimonials from real Jam couples — published with their consent,
            attributed to year and route, names redacted on request. No paid reviews. No
            aggregate score we couldn't verify.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 100 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--border)" }}>
            {D.testimonials.map((t, i) => (
              <div key={i} style={{
                padding: "56px 0",
                borderBottom: "1px solid var(--border)",
                paddingRight: i % 2 === 0 ? 56 : 0,
                paddingLeft: i % 2 === 1 ? 56 : 0,
                borderRight: i % 2 === 0 ? "1px solid var(--border)" : "none"
              }}>
                <Lotus size={18} color="var(--accent)" />
                <p className="display" style={{ fontSize: "clamp(22px, 1.9vw, 30px)", fontWeight: 300, fontStyle: "italic", lineHeight: 1.4, margin: "20px 0 28px", color: "var(--text)", letterSpacing: "-0.005em" }}>
                  "{t.quote}"
                </p>
                <p className="t-attrib">{t.attrib}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--surface)", padding: "80px 0", borderTop: "1px solid var(--border)" }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <div>
            <p className="meta" style={{ marginBottom: 8 }}>A note on ratings</p>
            <p style={{ maxWidth: "62ch", color: "var(--secondary)", fontSize: 15 }}>
              We don't display a star aggregate. We will once our Google Business profile rating is
              verified live and attributable — until then, every voice on this page is one we can name.
            </p>
          </div>
          <a className="btn btn-rose" href="#/contact" onClick={() => setRoute("contact")}>Begin yours <span>→</span></a>
        </div>
      </section>
    </div>
  );
}


function ContactPage({ setRoute }) {
  const b = window.JAM.brand;
  const D = window.JAM;
  const [form, setForm] = useState({
    name: "", email: "", phone: "", date: "", guests: "", venue: "", program: "", tradition: "", budget: "", message: ""
  });
  const [submitted, setSubmitted] = useState(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

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

  if (submitted) {
    const waText = encodeURIComponent(
      `Hi JAM — ${form.name || "we"} would like to book a free consultation. ` +
      `Date: ${form.date || "TBC"}. Guests: ${form.guests || "TBC"}. ` +
      `Venue: ${form.venue || "TBC"}. Tradition: ${form.tradition || "TBC"}. ` +
      `Budget band: ${form.budget || "TBC"}.`
    );
    const waLink = `https://wa.me/971505249597?text=${waText}`;
    return (
      <div className="page-enter">
        <section style={{ padding: "160px 0", textAlign: "center" }}>
          <div className="wrap-narrow">
            <Lotus size={32} color="var(--primary)" />
            <h1 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", fontWeight: 300, margin: "28px 0 24px", lineHeight: 1.05, maxWidth: "20ch", marginLeft: "auto", marginRight: "auto" }}>
              Thank you, {form.name ? form.name.split(" ")[0] : "friend"}.<br/>
              <em className="display-italic" style={{ color: "var(--primary-ink)" }}>We'll be in touch within 24 hours.</em>
            </h1>
            <p className="lead" style={{ maxWidth: "52ch", margin: "0 auto 48px" }}>
              Your enquiry is with the planning team. We typically reply within a working day —
              in English, Arabic, German, Russian or Mandarin.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn btn-rose" href={waLink} target="_blank" rel="noopener">
                Continue on WhatsApp ↗
              </a>
              <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setForm({ name: "", email: "", phone: "", date: "", guests: "", venue: "", program: "", tradition: "", budget: "", message: "" }); }}>
                Send another
              </button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  const budgets = ["Under 250k AED", "250–500k AED", "500k–1M AED", "1M–2M AED", "2M+ AED", "Prefer not to say"];
  const guestBands = ["Under 100", "100–250", "250–500", "500–800", "800+"];

  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 40px" }}>
        <div className="wrap">
          <span className="eyebrow eyebrow-rose">Contact · Book a free consultation</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 92px)", fontWeight: 300, margin: "16px 0 24px", lineHeight: 1.02, maxWidth: "18ch" }}>
            Tell us about your <em className="display-italic" style={{ color: "var(--primary-ink)" }}>wedding</em>.
          </h1>
          <p className="lead" style={{ maxWidth: "62ch" }}>
            The more you can share now, the more useful the first conversation will be — date,
            guests, venue (if you have one), the traditions you want to honour, a budget band.
            Reply within one working day, in your language.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 80, alignItems: "start" }}>
          <form onSubmit={submit}>
            <div className="form-grid">
              <div className="field">
                <label>Your name <span className="req">*</span></label>
                <input type="text" required value={form.name} onChange={e => update("name", e.target.value)} />
              </div>
              <div className="field">
                <label>Email <span className="req">*</span></label>
                <input type="email" required value={form.email} onChange={e => update("email", e.target.value)} />
              </div>

              <div className="field">
                <label>Phone or WhatsApp</label>
                <input type="tel" placeholder="+971 ..." value={form.phone} onChange={e => update("phone", e.target.value)} />
              </div>
              <div className="field">
                <label>Wedding date</label>
                <input type="text" placeholder="DD / MM / YYYY (or month)" value={form.date} onChange={e => update("date", e.target.value)} />
              </div>

              <div className="field full">
                <label>Tradition(s) — pick all that apply</label>
                <div className="budget-row">
                  {D.traditions.map(t => (
                    <button key={t.id} type="button"
                      className={`chip ${form.tradition.includes(t.label) ? "on" : ""}`}
                      onClick={() => {
                        const has = form.tradition.includes(t.label);
                        const next = has
                          ? form.tradition.split(",").map(s=>s.trim()).filter(s=>s && s!==t.label).join(", ")
                          : (form.tradition ? form.tradition + ", " : "") + t.label;
                        update("tradition", next);
                      }}>{t.label}</button>
                  ))}
                </div>
              </div>

              <div className="field full">
                <label>Guest count</label>
                <div className="budget-row">
                  {guestBands.map(g => (
                    <button key={g} type="button"
                      className={`chip ${form.guests === g ? "on" : ""}`}
                      onClick={() => update("guests", g)}>{g}</button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Venue (if confirmed)</label>
                <input type="text" placeholder="e.g. Atlantis The Palm" value={form.venue} onChange={e => update("venue", e.target.value)} />
              </div>
              <div className="field">
                <label>Programme of the day(s)</label>
                <input type="text" placeholder="e.g. Mehndi, Sangeet, Pheras…" value={form.program} onChange={e => update("program", e.target.value)} />
              </div>

              <div className="field full">
                <label>Budget band <span style={{ color: "var(--muted-2)", letterSpacing: "0.04em", textTransform: "none", fontWeight: 400 }}>· optional, helps us scope</span></label>
                <div className="budget-row">
                  {budgets.map(b => (
                    <button key={b} type="button"
                      className={`chip ${form.budget === b ? "on" : ""}`}
                      onClick={() => update("budget", b)}>{b}</button>
                  ))}
                </div>
              </div>

              <div className="field full">
                <label>Tell us a little more</label>
                <textarea rows="4" placeholder="Mood, references, anything we should know about your families…" value={form.message} onChange={e => update("message", e.target.value)}></textarea>
              </div>

              <div className="field full" style={{ paddingTop: 12, borderTop: "1px solid var(--border)" }}>
                <p style={{ fontSize: 12, color: "var(--muted-2)", margin: 0, marginBottom: 12 }}>
                  By submitting you agree to our handling your enquiry under our privacy policy. We never share leads. Your reply will arrive within one working day.
                </p>
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
                  <button type="submit" className="btn btn-rose">
                    Send enquiry <span>→</span>
                  </button>
                  <a className="btn btn-ghost" href={b.whatsapp} target="_blank" rel="noopener">
                    Or open WhatsApp ↗
                  </a>
                </div>
              </div>
            </div>
          </form>

          <aside style={{ background: "var(--surface)", padding: 40, position: "sticky", top: 110 }}>
            <h3 className="display" style={{ fontSize: 30, fontWeight: 400, margin: "0 0 24px" }}>Or reach us directly</h3>

            <div style={{ marginBottom: 26 }}>
              <p className="meta" style={{ marginBottom: 6 }}>WhatsApp · Fastest</p>
              <a href={b.whatsapp} style={{ fontSize: 16, color: "var(--text)" }}>{b.phoneMobile}</a>
            </div>
            <div style={{ marginBottom: 26 }}>
              <p className="meta" style={{ marginBottom: 6 }}>Office</p>
              <a href={`tel:${b.phoneOffice.replace(/\s/g,'')}`} style={{ fontSize: 16, color: "var(--text)" }}>{b.phoneOffice}</a>
            </div>
            <div style={{ marginBottom: 26 }}>
              <p className="meta" style={{ marginBottom: 6 }}>Email</p>
              <a href={`mailto:${b.email}`} style={{ fontSize: 16, color: "var(--text)" }}>{b.email}</a>
            </div>

            <div style={{ borderTop: "1px solid var(--border-strong)", paddingTop: 24, marginTop: 28 }}>
              <p className="meta" style={{ marginBottom: 8 }}>Visit</p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--secondary)", margin: 0 }}>
                {b.addressLine1}<br/>
                {b.addressLine2}<br/>
                <span style={{ color: "var(--muted)" }}>{b.addressPO}</span>
              </p>
            </div>

            <div style={{ borderTop: "1px solid var(--border-strong)", paddingTop: 24, marginTop: 28 }}>
              <p className="meta" style={{ marginBottom: 8 }}>We reply in</p>
              <p style={{ fontSize: 14, color: "var(--secondary)" }}>
                English · العربية · Deutsch · Русский · 中文
              </p>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ServicesPage, VenuesPage, AboutPage, TestimonialsPage, ContactPage });