/* JAM — Home page */

function HomePage({ setRoute, openWedding }) {
  const D = window.JAM;
  const featured = D.weddings.slice(0, 3);
  const t = D.testimonials[0];

  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="hero-media" style={{ backgroundImage: `url(media/wedding-decor-08.webp)` }}></div>
        <div className="hero-content">
          <div className="wrap" style={{ padding: 0 }}>
            <span className="eyebrow hero-eyebrow">Since 2006 · Dubai · German Creative Direction</span>
            <h1>
              Multicultural weddings,<br/>
              <em>cinematically</em> staged.
            </h1>
            <p className="hero-sub">
              Jam is a luxury wedding planning, production and design company — Arabic, South Asian,
              Chinese, Iranian and European weddings, plus destination weddings beyond the UAE. One
              eleven-person in-house team for planning, design, florals, entertainment, photography
              and logistics.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-rose" onClick={() => setRoute("contact")}>
                Book a free consultation
                <span aria-hidden="true">→</span>
              </button>
              <button className="btn-ghost-light" onClick={() => setRoute("real-weddings")}>
                See real weddings
              </button>
            </div>
          </div>
        </div>
        <div className="hero-foot">
          <span>01 / Home</span>
          <span className="hero-scroll">Scroll <span style={{ display: "inline-block", width: 30, height: 1, background: "rgba(255,255,255,0.5)" }}></span></span>
        </div>
      </section>

      {/* INTRO STATEMENT */}
      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 80, alignItems: "start" }}>
          <div>
            <span className="eyebrow eyebrow-rose">01 · Approach</span>
            <LotusDivider width="60px" />
          </div>
          <div>
            <p className="display" style={{ fontSize: "clamp(34px, 3.5vw, 56px)", lineHeight: 1.12, fontWeight: 300, color: "var(--text)", margin: 0, maxWidth: "22ch" }}>
              We don't plan generic luxury. We plan <em className="display-italic" style={{ color: "var(--primary-ink)" }}>your</em> wedding —
              in the language, the tradition and the colour palette that already belong to you.
            </p>
            <p className="lead" style={{ marginTop: 36, maxWidth: "58ch" }}>
              Three nights of an Indian shaadi. A single sunset ceremony on the Burj Al Arab terrace.
              A Chinese tea ceremony at dawn and a banquet at dusk. A sofreh aghd dressed in pale blue
              and silver. We've staged weddings in five languages and twelve traditions — every one
              of them designed end-to-end, in-house, and rendered in 3D before a flower is ordered.
            </p>
            <div style={{ display: "flex", gap: 28, marginTop: 36, flexWrap: "wrap" }}>
              <div>
                <div className="kicker-num">01</div>
                <strong style={{ fontSize: 14, letterSpacing: "0.04em" }}>Planning &amp; Production</strong>
                <p style={{ color: "var(--muted)", fontSize: 13, margin: "6px 0 0", maxWidth: "32ch" }}>From the first call to the final farewell. Unlimited on-site coordination.</p>
              </div>
              <div>
                <div className="kicker-num">02</div>
                <strong style={{ fontSize: 14, letterSpacing: "0.04em" }}>Design &amp; 3D Rendering</strong>
                <p style={{ color: "var(--muted)", fontSize: 13, margin: "6px 0 0", maxWidth: "32ch" }}>Every room rendered to scale. No surprises on the day.</p>
              </div>
              <div>
                <div className="kicker-num">03</div>
                <strong style={{ fontSize: 14, letterSpacing: "0.04em" }}>Guest Experience</strong>
                <p style={{ color: "var(--muted)", fontSize: 13, margin: "6px 0 0", maxWidth: "32ch" }}>Hostesses, hair and make-up, transfers, security. End-to-end.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRADITIONS BAND */}
      <section style={{ background: "var(--surface)", padding: "120px 0" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, flexWrap: "wrap", gap: 20 }}>
            <div>
              <span className="eyebrow eyebrow-rose">02 · Traditions we plan</span>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 60px)", margin: "12px 0 0", fontWeight: 300, maxWidth: "18ch" }}>
                Six traditions. <em className="display-italic" style={{ color: "var(--primary-ink)" }}>One</em> in-house team.
              </h2>
            </div>
            <a className="btn-link" href="#/real-weddings" onClick={() => setRoute("real-weddings")}>
              All real weddings <span>→</span>
            </a>
          </div>

          <div className="tradition-grid">
            {D.traditions.map(t => (
              <button key={t.id} className="tradition-tile" onClick={() => { setRoute("real-weddings"); window.__JAMFilter = t.id; }}>
                <img src={t.img} alt={t.label} />
                <span className="label">
                  {t.label}
                  <small>{t.sub}</small>
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED WEDDINGS */}
      <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">03 · Featured stories</span>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 60px)", margin: "12px 0 0", fontWeight: 300, maxWidth: "20ch" }}>
                Real weddings, told <em className="display-italic" style={{ color: "var(--primary-ink)" }}>properly</em>.
              </h2>
              <p className="lead" style={{ marginTop: 18, maxWidth: "60ch" }}>
                Each story: the tradition, the venue, the functions covered, the design moves we made
                and a gallery — every image consent-gated and credited.
              </p>
            </div>
            <ConsentNote text="Demo imagery · live site shows consenting couples only" />
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 22 }}>
            {featured.map((w, i) => (
              <article key={w.id} className="tile tile-grad" style={{ aspectRatio: i === 0 ? "4/5" : "3/4", cursor: "pointer" }} onClick={() => openWedding(w.id)}>
                <img src={w.cover} alt={w.title} />
                <div className="tile-caption">
                  <div className="tradition">{w.traditionLabel} · {w.year}</div>
                  <div className="title">{w.title}</div>
                  <div style={{ fontSize: 12, marginTop: 8, color: "rgba(255,255,255,0.75)", letterSpacing: "0.08em" }}>{w.venue} · {w.guestBand}</div>
                </div>
              </article>
            ))}
          </div>
          <div style={{ marginTop: 56, textAlign: "center" }}>
            <a className="btn btn-ghost" href="#/real-weddings" onClick={() => setRoute("real-weddings")}>
              Browse all real weddings <span>→</span>
            </a>
          </div>
        </div>
      </section>

      {/* MARQUEE STRIP — venues we've worked at */}
      <div className="strip">
        <div className="strip-track">
          {[1,2].map(k => (
            <React.Fragment key={k}>
              {["Madinat Jumeirah","Four Seasons","Burj Al Arab","Atlantis The Palm","Ritz-Carlton JBR","One&Only","Armani Hotel","FIVE Palm","Maldives","Seychelles","Riviera","Marrakech"].map((v,i)=>(
                <React.Fragment key={i}>
                  <span>{v}</span>
                  <span className="dot">◆</span>
                </React.Fragment>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* SERVICES STRIP */}
      <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">04 · What we do</span>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 60px)", margin: "12px 0 0", fontWeight: 300, maxWidth: "20ch" }}>
                The whole wedding,<br/><em className="display-italic" style={{ color: "var(--primary-ink)" }}>under one roof</em>.
              </h2>
            </div>
            <a className="btn-link" href="#/services" onClick={() => setRoute("services")}>
              Full services <span>→</span>
            </a>
          </div>

          <div className="svc-grid">
            {D.services.map((s, i) => (
              <div key={s.group} className="svc-card">
                <span className="meta">0{i+1} · {s.group}</span>
                <h3>{s.tagline}</h3>
                <p>{s.blurb}</p>
                <ul>
                  {s.items.slice(0,5).map(it => (<li key={it}>{it}<span style={{ color: "var(--accent)" }}>+</span></li>))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ABOUT FOUNDER SPLIT */}
      <section style={{ background: "var(--ink)", color: "#FBF6F2", padding: "140px 0" }}>
        <div className="wrap">
          <div className="split">
            <div className="split-img" style={{ aspectRatio: "5/6" }}>
              <img src="media/about-stefanie-heller.webp" alt="Stefanie Heller — Founder, CEO & Creative Director" />
            </div>
            <div>
              <span className="eyebrow" style={{ color: "rgba(251,246,242,0.6)" }}>05 · The founder</span>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: "16px 0 28px", fontWeight: 300, maxWidth: "18ch" }}>
                Stefanie Heller — <em className="display-italic" style={{ color: "var(--accent)" }}>CEO &amp; Creative Director</em>.
              </h2>
              <p style={{ color: "rgba(251,246,242,0.78)", fontSize: 18, lineHeight: 1.6, fontWeight: 300, maxWidth: "54ch" }}>
                German by training, Dubai by choice. Stefanie founded Jam in 2006 and has spent over
                seventeen years on the planner's side of weddings in the UAE — long enough to know
                where every loading dock is, and short enough to still believe weddings should feel
                like the couple who threw them.
              </p>
              <p style={{ color: "rgba(251,246,242,0.6)", fontSize: 15, marginTop: 24, maxWidth: "52ch", fontStyle: "italic" }}>
                "Achieving my clients' goals is my aim, exceeding their expectations my mission."
              </p>
              <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap" }}>
                <a className="btn btn-rose" href="#/about" onClick={() => setRoute("about")}>Meet the team <span>→</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section className="section-loose">
        <div className="wrap-narrow" style={{ textAlign: "center" }}>
          <Lotus size={28} color="var(--primary)" />
          <p className="t-quote" style={{ margin: "32px 0 36px" }}>
            "{t.quote}"
          </p>
          <p className="t-attrib">{t.attrib}</p>
          <div style={{ marginTop: 48 }}>
            <a className="btn-link" href="#/testimonials" onClick={() => setRoute("testimonials")}>
              Read more couple stories <span>→</span>
            </a>
          </div>
        </div>
      </section>

      {/* CONSULTATION CTA BAND */}
      <section style={{ background: "var(--surface)", padding: "120px 0", borderTop: "1px solid var(--border)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <span className="eyebrow eyebrow-rose">06 · The first step</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.5vw, 68px)", margin: "16px 0 24px", fontWeight: 300, maxWidth: "16ch", lineHeight: 1.05 }}>
              A conversation — <em className="display-italic" style={{ color: "var(--primary-ink)" }}>free</em>, in confidence, in your language.
            </h2>
            <p className="lead" style={{ maxWidth: "54ch" }}>
              Tell us the date you're holding, the traditions you want to honour and the room you're
              imagining. We'll come back within 24 hours — in English, Arabic, German, Russian, or
              Mandarin.
            </p>
          </div>
          <div style={{ borderLeft: "1px solid var(--border-strong)", paddingLeft: 60 }}>
            <p className="meta" style={{ marginBottom: 18 }}>Two ways to begin</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <a className="btn btn-rose" href="#/contact" onClick={() => setRoute("contact")}>
                Book a free consultation <span>→</span>
              </a>
              <a className="btn btn-ghost" href={window.JAM.brand.whatsapp} target="_blank" rel="noopener">
                WhatsApp · {window.JAM.brand.phoneMobile.replace("+971 ","+971 ")} <span>↗</span>
              </a>
            </div>
            <p style={{ color: "var(--muted)", fontSize: 12, marginTop: 28, letterSpacing: "0.04em" }}>
              Or call the office on {window.JAM.brand.phoneOffice}<br/>
              Mon–Sat, response usually within 24h.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage });