// Pages — Home, Real Weddings index, Wedding Story (case study), Services, Destinations, About, Enquire.

// ────────── HOME ──────────
function Home({ tweaks }) {
  const featured = REAL_WEDDINGS.filter((w) => w.featured);
  const heroImg =
    tweaks.heroTreatment === "mosaic"
      ? "media/decor-mandap.webp"
      : tweaks.heroTreatment === "split"
      ? "media/decor-entrance.webp"
      : "media/decor-mandap.webp";

  return (
    <div className="page-shell">
      <HomeHero treatment={tweaks.heroTreatment} />

      <TrustStrip />

      {/* Philosophy / intro */}
      <section className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "center" }}>
          <div>
            <span className="ornament eyebrow"><span>The Studio</span></span>
            <h2 className="serif" style={{ marginTop: 22, fontWeight: 300, fontStyle: "italic", textWrap: "balance" }}>
              Every wedding has a different emotion.
            </h2>
            <p className="lede" style={{ marginTop: 28, color: "var(--muted)" }}>
              Events by Saniya was born in Dubai in 2014 — first as Selvatico, then under the
              name of its founder. Ten years and more than two hundred and fifty celebrations
              later, the brief is unchanged: bring the wedding inside a couple's head into the
              room they are standing in.
            </p>
            <p className="lede" style={{ marginTop: 18, color: "var(--muted)" }}>
              We design and run weddings across the UAE, India, Greece, Thailand, Sri Lanka,
              the United Kingdom and beyond — alongside corporate, gala and private events.
            </p>
            <a href="#/about" className="btn-link" style={{ display: "inline-block", marginTop: 36 }}>
              About Saniya
            </a>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, alignItems: "center" }}>
            <div className="img-frame" style={{ aspectRatio: "3/4" }}>
              <img src="media/decor-mandap.webp" alt="" />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="img-frame" style={{ aspectRatio: "1/1" }}>
                <img src="media/decor-mehndi.webp" alt="" />
              </div>
              <div className="img-frame" style={{ aspectRatio: "3/4" }}>
                <img src="media/decor-haldi-ceremony.webp" alt="" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Real weddings teaser */}
      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 24 }}>
            <div style={{ maxWidth: 560 }}>
              <span className="ornament eyebrow"><span>Real Weddings</span></span>
              <h2 className="serif" style={{ marginTop: 20, fontWeight: 400 }}>
                Couples we've had the privilege of holding.
              </h2>
            </div>
            <a href="#/real-weddings" className="btn-link">All real weddings →</a>
          </div>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr 1fr",
              gap: 32,
              alignItems: "start",
            }}
          >
            <WeddingCard wedding={featured[0]} size="lg" />
            <div style={{ display: "flex", flexDirection: "column", gap: 48, paddingTop: 40 }}>
              <WeddingCard wedding={featured[1]} />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 48, paddingTop: 100 }}>
              <WeddingCard wedding={REAL_WEDDINGS[3]} />
            </div>
          </div>
        </div>
      </section>

      {/* Services strip */}
      <ServicesPreview tweaks={tweaks} />

      {/* Destinations strip */}
      <DestinationsPreview />

      {/* Founder block */}
      <FounderBlock />

      {/* Testimonials */}
      <TestimonialsBlock />

      <CtaBand />
    </div>
  );
}

function HomeHero({ treatment = "full" }) {
  if (treatment === "split") return <HeroSplit />;
  if (treatment === "mosaic") return <HeroMosaic />;
  return <HeroFull />;
}

function HeroFull() {
  return (
    <section
      style={{
        position: "relative",
        height: "100vh",
        minHeight: 680,
        color: "#FBF6F1",
        overflow: "hidden",
        marginTop: 0,
      }}
    >
      <img
        src="media/decor-mandap.webp"
        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.6) 0%, rgba(22,17,18,0.4) 35%, rgba(22,17,18,0.72) 100%)",
        }}
      />
      <div
        className="container"
        style={{
          position: "relative",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          paddingBottom: 80,
        }}
      >
        <span className="ornament" style={{ color: "rgba(251,246,241,0.85)", fontSize: 13, letterSpacing: "0.24em", textTransform: "uppercase", fontFamily: "var(--font-body)" }}>
          <span>Dubai · India · Worldwide</span>
        </span>
        <h1
          className="serif fade-in"
          style={{
            fontWeight: 300,
            color: "#FBF6F1",
            marginTop: 28,
            marginBottom: 32,
            letterSpacing: "-0.02em",
            maxWidth: 1000,
            textWrap: "balance",
          }}
        >
          Weddings with the{" "}
          <span className="script" style={{ color: "#F5A593", fontSize: "1.15em", lineHeight: 0.85, verticalAlign: "baseline", marginRight: 6, marginLeft: 6 }}>
            quiet
          </span>{" "}
          of a story well told.
        </h1>
        <p className="lede" style={{ color: "rgba(251,246,241,0.85)", maxWidth: 540, marginBottom: 40 }}>
          Luxury wedding & event planning, design and management. Ten years, more than two
          hundred and fifty celebrations, across the UAE, India and the world.
        </p>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <a href="#/enquire" className="btn btn-light-solid">Book a Consultation</a>
          <a href="#/real-weddings" className="btn btn-light">See Real Weddings</a>
        </div>
      </div>

      {/* scroll indicator */}
      <div
        style={{
          position: "absolute",
          bottom: 28,
          left: "50%",
          transform: "translateX(-50%)",
          color: "rgba(251,246,241,0.6)",
          fontSize: 10,
          letterSpacing: "0.3em",
          textTransform: "uppercase",
          writingMode: "vertical-rl",
        }}
      >
        Scroll
      </div>
    </section>
  );
}

function HeroSplit() {
  return (
    <section style={{ paddingTop: 110, paddingBottom: 0 }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center", minHeight: "80vh" }}>
        <div>
          <span className="ornament eyebrow"><span>Dubai · India · Worldwide</span></span>
          <h1 className="serif" style={{ marginTop: 28, fontWeight: 300, letterSpacing: "-0.02em" }}>
            Weddings with the
            <br />
            <em className="script" style={{ color: "var(--secondary)", fontSize: "1.3em", lineHeight: 0.7 }}>quiet</em>{" "}
            of a story
            <br />well told.
          </h1>
          <p className="lede" style={{ color: "var(--muted)", maxWidth: 480, marginTop: 36 }}>
            Luxury wedding & event planning, design and management. Ten years, more than two
            hundred and fifty celebrations.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 40 }}>
            <a href="#/enquire" className="btn btn-primary">Book a Consultation</a>
            <a href="#/real-weddings" className="btn btn-ghost">See Real Weddings</a>
          </div>
        </div>
        <div className="img-frame" style={{ aspectRatio: "4/5" }}>
          <img src="media/decor-entrance.webp" alt="" />
        </div>
      </div>
    </section>
  );
}

function HeroMosaic() {
  const imgs = ["media/decor-mandap.webp","media/decor-mehndi.webp","media/decor-haldi-ceremony.webp","media/decor-wedding-stage.webp","media/decor-sangeet.webp"];
  return (
    <section style={{ paddingTop: 130, paddingBottom: 60 }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 900, margin: "0 auto 60px" }}>
          <span className="ornament eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}><span>Dubai · India · Worldwide</span></span>
          <h1 className="serif" style={{ marginTop: 28, fontWeight: 300 }}>
            Weddings with the <em className="script" style={{ color: "var(--secondary)", fontSize: "1.3em", lineHeight: 0.7 }}>quiet</em> of a story well told.
          </h1>
          <div style={{ display: "flex", gap: 14, marginTop: 36, justifyContent: "center" }}>
            <a href="#/enquire" className="btn btn-primary">Book a Consultation</a>
            <a href="#/real-weddings" className="btn btn-ghost">See Real Weddings</a>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {imgs.map((src, i) => (
            <div key={i} className="img-frame" style={{ aspectRatio: i === 2 ? "3/4" : "4/5", marginTop: i % 2 ? 32 : 0 }}>
              <img src={src} alt="" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <section style={{ padding: "48px 0", borderBottom: "1px solid var(--hairline)", borderTop: "1px solid var(--hairline)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, textAlign: "center" }}>
        {[
          { num: "10+", label: "Years" },
          { num: "250+", label: "Events" },
          { num: "10", label: "Countries" },
          { num: "@eventsbysaniya", label: "On Instagram", small: true },
        ].map((s) => (
          <div key={s.label}>
            <div
              className="serif"
              style={{
                fontSize: s.small ? "clamp(18px, 1.6vw, 22px)" : "clamp(36px, 3vw, 44px)",
                fontWeight: 400,
                color: "var(--primary)",
                lineHeight: 1,
                marginBottom: 10,
                fontStyle: s.small ? "italic" : "normal",
              }}
            >
              {s.num}
            </div>
            <div className="micro">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ServicesPreview({ tweaks }) {
  return (
    <section className="section">
      <div className="container">
        <SectionHeader
          eyebrow="What We Do"
          heading="Six lines of work, one studio."
          kicker="A single, in-house team designs the wedding, runs the wedding, and quietly carries the corporate and private events in between."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--hairline)", border: "1px solid var(--hairline)" }}>
          {SERVICES.map((s, i) => (
            <a key={s.id} href={`#/services#${s.id}`} className="service-tile" style={{
              padding: 40,
              background: "var(--bg)",
              display: "flex",
              flexDirection: "column",
              minHeight: 280,
              transition: "background .3s",
            }}>
              <div className="micro" style={{ color: "var(--accent-deep)" }}>{String(i + 1).padStart(2, "0")} / 06</div>
              <h3 className="serif" style={{ marginTop: 18, marginBottom: 14, fontWeight: 400 }}>
                {s.title}
              </h3>
              <p className="small" style={{ flex: 1 }}>{s.short}</p>
              <span className="btn-link" style={{ marginTop: 20, alignSelf: "flex-start" }}>Explore →</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function DestinationsPreview() {
  return (
    <section className="section" style={{ background: "var(--surface)" }}>
      <div className="container">
        <SectionHeader
          eyebrow="Where We Work"
          heading="Destinations we've called home for a weekend."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {DESTINATIONS.slice(0, 8).map((d) => (
            <a key={d.short} href={`#/destinations`} className="dest-tile">
              <div className="img-frame" style={{ aspectRatio: "3/4", marginBottom: 14 }}>
                <img src={d.img} alt="" />
              </div>
              <div className="micro" style={{ color: "var(--accent-deep)" }}>{d.count} weddings</div>
              <h4 className="serif" style={{ marginTop: 6, fontStyle: "italic", fontWeight: 400 }}>
                {d.name}
              </h4>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function FounderBlock() {
  return (
    <section className="section">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }}>
        <div className="img-frame" style={{ aspectRatio: "4/5", maxWidth: 520 }}>
          <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, fontWeight: 300 }}>
            Planning dreams for people is{" "}
            <em className="script" style={{ color: "var(--secondary)", fontSize: "1.4em", lineHeight: 0.7 }}>my dream</em>.
          </h2>
          <p className="lede" style={{ color: "var(--muted)", marginTop: 28 }}>
            Saniya Wahi began at twenty-two, under the name Selvatico, planning her first
            weddings out of an apartment in Dubai. A decade and a rebrand later, the studio
            now spans two countries and a global guest list.
          </p>
          <p className="lede" style={{ color: "var(--muted)", marginTop: 18 }}>
            Her stated background in psychology shapes the way the studio works — slow first
            conversations, careful listening, an instinct for the families behind the
            paperwork.
          </p>
          <a href="#/about" className="btn-link" style={{ display: "inline-block", marginTop: 36 }}>
            Saniya's story →
          </a>
        </div>
      </div>
    </section>
  );
}

function TestimonialsBlock() {
  const [idx, setIdx] = useState(0);
  const t = TESTIMONIALS[idx];
  return (
    <section className="section" style={{ background: "var(--surface)" }}>
      <div className="container" style={{ maxWidth: 880, textAlign: "center", marginInline: "auto" }}>
        <span className="ornament eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>
          <span>Words from Families</span>
        </span>
        <blockquote
          className="serif"
          style={{
            fontSize: "clamp(24px, 2.4vw, 34px)",
            lineHeight: 1.35,
            fontStyle: "italic",
            fontWeight: 300,
            margin: "40px 0 30px",
            textWrap: "balance",
          }}
        >
          “{t.body}”
        </blockquote>
        <div className="micro" style={{ color: "var(--accent-deep)" }}>
          {t.attribution} · {t.locale}
        </div>
        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 36 }}>
          {TESTIMONIALS.map((_, i) => (
            <button
              key={i}
              onClick={() => setIdx(i)}
              aria-label={`Testimonial ${i + 1}`}
              style={{
                width: 28,
                height: 2,
                background: i === idx ? "var(--primary)" : "var(--hairline)",
                border: 0,
                padding: 0,
              }}
            />
          ))}
        </div>
        <p className="small" style={{ marginTop: 36, color: "var(--muted)", fontStyle: "italic" }}>
          Couple testimonials are consent-gated and shown without identifying details unless
          families have given permission.
        </p>
      </div>
    </section>
  );
}

window.HomePages = { Home };
Object.assign(window, { Home });