// Home view
const { useEffect: useEffectH, useState: useStateH } = React;

function Home({ onRoute, onEnquire, t, locale }) {
  return (
    <div data-screen-label="01 Home">
      <HomeHero t={t} onEnquire={onEnquire} />
      <HomeManifesto t={t} />
      <HomeSectors onRoute={onRoute} onEnquire={onEnquire} t={t} />
      <HomeFeatured onRoute={onRoute} t={t} />
      <HomeApproach t={t} />
      <HomePress />
      <HomeFounder t={t} />
      <HomeCTA t={t} onEnquire={onEnquire} />
    </div>
  );
}

function HomeHero({ t, onEnquire }) {
  const [scroll, setScroll] = useStateH(0);
  useEffectH(() => {
    const on = () => setScroll(window.scrollY);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const py = Math.min(scroll * 0.3, 220);
  return (
    <section style={{
      position: "relative", height: "100vh", minHeight: 720, overflow: "hidden",
      color: "var(--paper)",
    }}>
      <div style={{
        position: "absolute", inset: 0, transform: `translateY(${py * 0.4}px) scale(1.05)`,
        backgroundImage: "url(media/home-hero.webp)",
        backgroundSize: "cover", backgroundPosition: "center 30%",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(16,12,10,0.65) 0%, rgba(16,12,10,0.4) 40%, rgba(16,12,10,0.85) 100%)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 30% 35%, rgba(16,12,10,0) 0%, rgba(16,12,10,0.35) 70%)",
      }} />
      <div className="container" style={{
        position: "relative", height: "100%", display: "flex", flexDirection: "column",
        justifyContent: "space-between", padding: "120px var(--gutter) 60px",
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        }}>
          <div className="mono-tiny" style={{ opacity: 0.85, transform: `translateY(${-py * 0.1}px)` }}>
            {t.sinceLine}
          </div>
          <div style={{ textAlign: "right", transform: `translateY(${-py * 0.1}px)` }}>
            <div className="mono-tiny" style={{ opacity: 0.7, marginBottom: 6 }}>Currently planning</div>
            <div className="serif" style={{ fontSize: 18, fontStyle: "italic" }}>23 events · 4 countries</div>
          </div>
        </div>

        <div style={{ maxWidth: 1100, transform: `translateY(${-py * 0.15}px)`, opacity: 1 - py / 700 }}>
          <h1 className="serif" style={{
            fontSize: "clamp(56px, 9vw, 148px)", lineHeight: 0.96, fontWeight: 300,
            letterSpacing: "-0.025em", margin: "0 0 28px",
          }}>
            Luxury<br />
            <span style={{ fontStyle: "italic", fontWeight: 300 }}>Events</span> &amp; Living.
          </h1>
          <p style={{
            fontSize: "clamp(16px, 1.4vw, 20px)", maxWidth: 540, lineHeight: 1.5,
            color: "rgba(255,255,255,0.85)", marginBottom: 36,
          }}>
            Bespoke event design and wedding planning in Dubai, since 2008. Design, production and management — all in-house.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <button className="btn" onClick={onEnquire} style={{ background: "var(--paper)", color: "var(--ink)" }}>
              {t.requestProposal}<Arrow />
            </button>
            <a href="#sectors" className="btn-link" style={{ color: "var(--paper)" }}>
              <span>Selected work</span><span className="arrow">↓</span>
            </a>
          </div>
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          fontSize: 12, color: "rgba(255,255,255,0.7)", letterSpacing: "0.06em",
        }}>
          <div>Reception · DEN Banquet · Dubai · 2023</div>
          <div>© Carousel Studio</div>
        </div>
      </div>
    </section>
  );
}

function HomeManifesto({ t }) {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0 var(--space-block)" }}>
      <div className="container" style={{
        display: "grid", gridTemplateColumns: "1fr 2.2fr", gap: 80, alignItems: "flex-start",
      }}>
        <div>
          <SectionEyebrow label="The studio" num="01" />
          <div className="serif" style={{
            fontSize: 14, letterSpacing: "0.04em", color: "var(--muted-2)",
            fontStyle: "italic", marginTop: 12,
          }}>Dubai · UAE</div>
        </div>
        <div>
          <h2 className="serif" style={{
            fontSize: "clamp(34px, 4.6vw, 66px)", lineHeight: 1.08, fontWeight: 300,
            margin: 0, letterSpacing: "-0.015em", textWrap: "balance",
          }}>
            We design events of <em style={{ color: "var(--accent)" }}>true distinction</em> — inspired by glittering lights, lush flowers, and elevated experiences for the few who notice the detail.
          </h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
            marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--line)",
          }}>
            {[
              ["18", "years in practice"],
              ["340+", "events delivered"],
              ["12", "countries"],
              ["100%", "in-house team"],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: 44, fontWeight: 300, lineHeight: 1, marginBottom: 8 }}>{n}</div>
                <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeSectors({ onRoute, onEnquire, t }) {
  const r = useReveal();
  const tiles = [
    { k: "weddings", t: "Weddings", n: "i", count: "30 projects", desc: "Ceremony, reception and the days around them. Locally and on destination.", img: "media/weddings-hero.webp", onClick: () => onRoute("weddings") },
    { k: "corporate", t: "Corporate", n: "ii", count: "Brand activations", desc: "Galas, launches, exhibitions and in-store activations.", img: "media/corporate-tile.webp", onClick: () => onRoute("stub:corporate") },
    { k: "social", t: "Social", n: "iii", count: "Private celebrations", desc: "Milestones, anniversaries, intimate dinners and the moments in between.", img: "media/social-tile.webp", onClick: () => onRoute("stub:social") },
  ];
  return (
    <section id="sectors" ref={r} className="reveal" style={{ padding: "var(--space-block) 0 var(--space-section)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 24 }}>
          <div>
            <SectionEyebrow label="Three pillars" num="02" />
            <h2 className="serif" style={{ fontSize: "clamp(38px, 5vw, 72px)", lineHeight: 1, fontWeight: 300, margin: 0, letterSpacing: "-0.02em" }}>
              What we plan.
            </h2>
          </div>
          <div className="serif" style={{ fontSize: 18, fontStyle: "italic", color: "var(--muted)", maxWidth: 380 }}>
            Three sectors. One studio. The same design vocabulary, deepened by who you are.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
          {tiles.map((tl, i) => (
            <SectorTile key={tl.k} {...tl} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function SectorTile({ t, n, count, desc, img, onClick, index }) {
  const [hover, setHover] = useStateH(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "block", textAlign: "left", overflow: "hidden",
        background: "var(--ivory)", position: "relative",
      }}>
      <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden" }}>
        <img src={img} alt={t} style={{
          width: "100%", height: "100%", objectFit: "cover",
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "transform 0.8s cubic-bezier(0.22,1,0.36,1)",
        }} />
        <div style={{
          position: "absolute", top: 18, left: 18,
          color: "rgba(255,255,255,0.9)", fontSize: 11, letterSpacing: "0.2em", fontWeight: 500,
        }}>{n.toUpperCase()}</div>
        <div style={{
          position: "absolute", bottom: 18, left: 18,
          color: "rgba(255,255,255,0.85)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
        }}>{count}</div>
      </div>
      <div style={{ padding: "24px 22px 26px", display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16 }}>
        <div>
          <h3 className="serif" style={{
            fontSize: 32, fontWeight: 400, margin: "0 0 6px",
            color: hover ? "var(--accent)" : "var(--ink)",
            transition: "color 0.3s",
          }}>{t}</h3>
          <p style={{ margin: 0, color: "var(--muted)", fontSize: 14, lineHeight: 1.5, maxWidth: 280 }}>{desc}</p>
        </div>
        <div style={{
          width: 40, height: 40, borderRadius: 999, border: "1px solid var(--line-strong)",
          display: "flex", alignItems: "center", justifyContent: "center",
          background: hover ? "var(--ink)" : "transparent",
          color: hover ? "var(--paper)" : "var(--ink)",
          transition: "all 0.3s",
          flex: "0 0 40px",
        }}>
          <Arrow size={14} />
        </div>
      </div>
    </button>
  );
}

function HomeFeatured({ onRoute, t }) {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0", background: "var(--ivory)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ position: "relative" }}>
            <CreditedImage src="media/case-albustan-hero.webp" alt="Al Bustan Palace reception" credit="Varna Studios" ratio="4/5" />
            <div style={{
              position: "absolute", left: -40, top: 32,
              background: "var(--paper)", padding: "14px 22px", border: "1px solid var(--line-strong)",
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
            }}>Featured · 2023</div>
          </div>
          <div>
            <SectionEyebrow label="Selected case study" num="03" />
            <h2 className="serif" style={{ fontSize: "clamp(42px, 5.4vw, 78px)", lineHeight: 1.02, margin: "0 0 12px", fontWeight: 300, letterSpacing: "-0.02em" }}>
              Marble &amp; <em style={{ color: "var(--accent)" }}>Magnolia.</em>
            </h2>
            <div style={{ fontSize: 14, color: "var(--muted)", marginBottom: 28, letterSpacing: "0.04em" }}>
              Al Bustan Palace · Muscat · 420 guests · 2023
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.7, marginBottom: 32, color: "var(--ink)", maxWidth: 460 }}>
              A three-day destination wedding rendered in ivory silk and Omani magnolia. Concept to clean-up in seven months, with 1,400 hand-set candles, an in-house floral team of fourteen, and a single ballroom transformed twice between dinner and after-party.
            </p>
            <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
              <button className="btn btn-ghost" onClick={() => onRoute("case")}>
                Read the case study<Arrow />
              </button>
              <span className="mono-tiny" style={{ color: "var(--muted)" }}>Photographer · Varna Studios</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeApproach({ t }) {
  const r = useReveal();
  const phases = [
    { n: "01", k: "Design", d: "Concept renderings, floor plans, floral and décor selections — built from a long conversation with you, not a brief template." },
    { n: "02", k: "Production", d: "An in-house team works tirelessly before, and discreetly behind the scenes during. Production Manager, Floral Designer, Event Designer, Coordinators." },
    { n: "03", k: "Management", d: "Every detail accounted for, every team member on time, every guest looked after. Including travel and guest guidance." },
  ];
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, marginBottom: 80 }}>
          <div>
            <SectionEyebrow label="Methodology" num="04" />
            <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.02, fontWeight: 300, margin: 0, letterSpacing: "-0.02em" }}>
              Three phases.<br />
              <em style={{ color: "var(--accent)" }}>One studio.</em>
            </h2>
          </div>
          <p className="serif" style={{
            fontSize: "clamp(20px, 2vw, 28px)", lineHeight: 1.45, fontStyle: "italic",
            color: "var(--muted)", margin: "auto 0 0", fontWeight: 300, maxWidth: 540,
          }}>
            From first sketch to final guest farewell — we keep design, production and management under one roof so the vision survives the room change.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, borderTop: "1px solid var(--line)", paddingTop: 48 }}>
          {phases.map((p) => (
            <div key={p.k} style={{ position: "relative" }}>
              <div className="mono-tiny" style={{ color: "var(--accent)", marginBottom: 16 }}>{p.n} · Phase</div>
              <h3 className="serif" style={{ fontSize: 36, fontWeight: 400, margin: "0 0 16px" }}>{p.k}</h3>
              <p style={{ margin: 0, color: "var(--muted)", fontSize: 15, lineHeight: 1.6 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePress() {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-block) 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40, flexWrap: "wrap" }}>
          <div className="mono-tiny" style={{ color: "var(--muted)", flex: "0 0 auto" }}>As featured in</div>
          <div style={{ display: "flex", gap: "clamp(24px, 4vw, 56px)", alignItems: "center", flexWrap: "wrap" }}>
            {PRESS.map((p) => (
              <span key={p} className="serif" style={{
                fontSize: "clamp(16px, 1.6vw, 22px)", fontStyle: "italic",
                color: "var(--ink)", whiteSpace: "nowrap", opacity: 0.85,
              }}>{p}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeFounder({ t }) {
  const r = useReveal();
  return (
    <section ref={r} className="reveal" style={{ padding: "var(--space-section) 0" }}>
      <div className="container" style={{
        display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center",
      }}>
        <div>
          <SectionEyebrow label="Founder" num="05" />
          <div className="serif" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1, fontWeight: 300, marginBottom: 6, letterSpacing: "-0.02em" }}>
            Zainab<br /><em>Alsalih.</em>
          </div>
          <div style={{ fontSize: 14, color: "var(--muted)", letterSpacing: "0.04em", marginBottom: 32 }}>
            Founder &amp; Creative Director · Carousel Events, est. 2008
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--ink)", marginBottom: 18, maxWidth: 520 }}>
            Zainab left a banking career to start Carousel in 2008. Multi-lingual, multi-cultural and an author, she is a regular voice at global event summits and works personally on every project the studio takes on.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--muted)", marginBottom: 32, maxWidth: 520 }}>
            "We adapt to various cultures and traditions — re-defining a truly luxurious experience for each family that trusts us with it."
          </p>
          <a href="#" onClick={(e) => e.preventDefault()} className="btn-link">
            <span>Read her story</span><span className="arrow">→</span>
          </a>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{
            aspectRatio: "4/5", background: "var(--ivory)", overflow: "hidden",
            position: "relative",
          }}>
            <img src="media/founder.webp" alt="Zainab Alsalih" style={{
              width: "100%", height: "100%", objectFit: "cover",
              filter: "grayscale(0.15) contrast(1.02)",
            }} />
          </div>
          <div style={{
            position: "absolute", right: -28, bottom: 32,
            background: "var(--paper)", padding: "22px 26px", border: "1px solid var(--line)",
            maxWidth: 280,
          }}>
            <div className="serif" style={{ fontSize: 20, fontStyle: "italic", lineHeight: 1.3, marginBottom: 8 }}>
              "One of the Middle East's leading female entrepreneurs."
            </div>
            <div className="mono-tiny" style={{ color: "var(--muted)" }}>— Harper's Bazaar Arabia*</div>
            <div style={{ fontSize: 11, color: "var(--muted-2)", marginTop: 8, fontStyle: "italic" }}>*Attributed press claim; quote pending publisher confirmation.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeCTA({ t, onEnquire }) {
  return (
    <section style={{
      position: "relative", padding: "var(--space-section) 0",
      backgroundImage: "linear-gradient(180deg, rgba(16,12,10,0.55), rgba(16,12,10,0.7)), url(media/wedding-eko-3.webp)",
      backgroundSize: "cover", backgroundPosition: "center",
      color: "var(--paper)",
    }}>
      <div className="container" style={{ textAlign: "center", maxWidth: 900 }}>
        <SectionEyebrow label="Begin a project" num="06" />
        <h2 className="serif" style={{
          fontSize: "clamp(44px, 6.6vw, 96px)", lineHeight: 1.04, fontWeight: 300,
          margin: "0 auto 28px", letterSpacing: "-0.02em",
        }}>
          When the brief is <em style={{ color: "var(--accent-soft)" }}>unrepeatable</em>, the planning ought to be too.
        </h2>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.78)", maxWidth: 580, margin: "0 auto 40px", lineHeight: 1.6 }}>
          We accept a small number of weddings each year. Tell us about yours, and a designer will be in touch personally.
        </p>
        <button className="btn" onClick={onEnquire} style={{ background: "var(--accent)", color: "var(--noir)", padding: "18px 28px" }}>
          {t.requestProposal}<Arrow />
        </button>
      </div>
    </section>
  );
}

Object.assign(window, { Home });