/* global React, ReactDOM, IK,
   RealWeddingsSection, CaseStudy,
   DestinationsSection, ServicesSection, PressSection, AboutSection,
   PackagesSection, EnquirySection, Footer, Wordmark,
   TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks */
const { useState, useEffect, useRef } = React;

// === NAV ===
function Nav({ lang, onLang, onEnquire }) {
  const T = IK.t[lang];
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    ["real-weddings", T.nav[0]],
    ["destinations",  T.nav[1]],
    ["services",      T.nav[2]],
    ["about",         T.nav[3]],
    ["press",         T.nav[4]],
    ["contact",       T.nav[5]],
  ];
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 78,
      }}>
        <a href="#top" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <Wordmark />
        </a>

        <nav className="desktop-only" style={{ display: "flex", gap: 36 }}>
          {items.map(([id, label]) => (
            <a key={id} href={`#${id}`} style={{
              fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 500,
              color: "var(--ink)", padding: "8px 0", position: "relative",
            }}>{label}</a>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <div className="desktop-only" style={{ display: "flex", gap: 6, alignItems: "center", borderRight: "1px solid var(--line)", paddingRight: 14 }}>
            {["en","ar"].map(L => (
              <button key={L} onClick={() => onLang(L)}
                style={{
                  background: "transparent", border: 0, cursor: "pointer",
                  padding: "4px 8px", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase",
                  color: lang === L ? "var(--ink)" : "var(--muted)",
                  fontWeight: lang === L ? 700 : 500,
                  borderBottom: lang === L ? "1px solid var(--rose)" : "1px solid transparent",
                }}>{L === "en" ? "EN" : "ع"}</button>
            ))}
          </div>
          <a className="btn btn-primary desktop-only" href="#contact" style={{ padding: "12px 18px", fontSize: 11 }}>
            {T.enquire}
          </a>
          <button className="mobile-nav-btn" onClick={() => setOpen(true)}
            style={{ background: "transparent", border: "1px solid var(--ink)", padding: "8px 12px", fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase" }}>
            Menu
          </button>
        </div>
      </div>

      {open && (
        <div onClick={() => setOpen(false)} style={{
          position: "fixed", inset: 0, background: "rgba(251,247,242,.98)", zIndex: 100,
          padding: 40, display: "flex", flexDirection: "column", gap: 32,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Wordmark />
            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: 0, fontSize: 24 }}>✕</button>
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {items.map(([id, label]) => (
              <a key={id} href={`#${id}`} onClick={() => setOpen(false)} className="display" style={{ fontSize: 38 }}>
                {label}
              </a>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}

// === HERO ===
function Hero({ lang }) {
  const T = IK.t[lang];
  const [imgIdx, setImgIdx] = useState(0);
  const heroImages = [
    "media/wedding-shiv-jessica-decor.webp",
    "media/hero-portfolio-sahl3228.webp",
    "media/wedding-phuket-beach-mandap.webp",
    "media/destination-greece-01.webp",
  ];
  useEffect(() => {
    const t = setInterval(() => setImgIdx(i => (i + 1) % heroImages.length), 6500);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="top" data-screen-label="section-hero" style={{
      position: "relative", padding: 0, height: "min(100vh, 940px)", minHeight: 680, overflow: "hidden",
      background: "var(--noir)",
    }}>
      {heroImages.map((src, i) => (
        <img key={src} src={src} alt="" aria-hidden={i !== imgIdx}
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%", objectFit: "cover",
            opacity: i === imgIdx ? 1 : 0,
            transition: "opacity 1.4s ease",
          }} />
      ))}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(14,12,11,.72) 0%, rgba(14,12,11,.42) 28%, rgba(14,12,11,.42) 50%, rgba(14,12,11,.88) 100%)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 80% 70% at 25% 88%, rgba(14,12,11,.78) 0%, rgba(14,12,11,0) 65%)",
        pointerEvents: "none",
      }} />

      <div className="wrap" style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        paddingBottom: 84, color: "var(--paper)",
      }}>
        <div className="fade-in" style={{ maxWidth: 1180 }}>
          <div className="eyebrow" style={{ color: "rgba(251,247,242,.78)", marginBottom: 28 }}>
            <span className="rule" /> &nbsp; {T.heroEyebrow}
          </div>
          <h1 className="display balance" style={{
            fontSize: "clamp(58px, 8.6vw, 132px)",
            color: "var(--paper)",
            letterSpacing: "-0.012em",
            textShadow: "0 2px 30px rgba(0,0,0,.35)",
          }}>
            {T.heroTitleA}{" "}
            <em style={{ fontFamily: "var(--f-script)", fontStyle: "normal", color: "#F0CFA8" }}>{T.heroTitleB}</em>
            <br/>{T.heroTitleC}
          </h1>
          <p className="pretty" style={{
            color: "rgba(251,247,242,.92)", maxWidth: 620,
            marginTop: 28, fontSize: 17, lineHeight: 1.6,
            textShadow: "0 1px 14px rgba(0,0,0,.45)",
          }}>{T.heroSub}</p>

          <div style={{ marginTop: 40, display: "flex", flexWrap: "wrap", gap: 14 }}>
            <a className="btn btn-rose" href="#contact">{T.enquire} <span className="arrow">→</span></a>
            <a className="btn btn-ghost-paper" href="#contact">{T.checkDate}</a>
          </div>
        </div>
      </div>

      {/* hero meta corners */}
      <div style={{ position: "absolute", left: 40, top: 110, display: "flex", flexDirection: "column", gap: 6, color: "rgba(251,247,242,.55)" }}>
        <span className="cap" style={{ color: "rgba(251,247,242,.55)" }}>00 — Home</span>
      </div>
      <div style={{ position: "absolute", right: 40, bottom: 84, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10, color: "rgba(251,247,242,.55)" }}>
        <span className="cap" style={{ color: "rgba(251,247,242,.55)" }}>
          {String(imgIdx + 1).padStart(2,"0")} / {String(heroImages.length).padStart(2,"0")}
        </span>
        <div style={{ display: "flex", gap: 6 }}>
          {heroImages.map((_, i) => (
            <button key={i} onClick={() => setImgIdx(i)}
              aria-label={`Hero slide ${i+1}`}
              style={{
                width: i === imgIdx ? 28 : 12, height: 2, padding: 0, border: 0,
                background: i === imgIdx ? "var(--paper)" : "rgba(251,247,242,.35)",
                transition: "all .4s ease", cursor: "pointer",
              }}/>
          ))}
        </div>
      </div>
    </section>
  );
}

// === IKIGAI INTRO ===
function IntroSection({ lang }) {
  return (
    <section data-screen-label="section-intro" style={{ background: "var(--paper)", padding: "120px 0 80px" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div className="eyebrow"><span className="rule" /> &nbsp; 01 — Philosophy</div>
          <div>
            <h2 className="display pretty" style={{ fontSize: "clamp(34px, 4.2vw, 56px)", lineHeight: 1.18 }}>
              <em className="ikigai">Ikigai</em> — the Japanese idea of <em style={{ fontFamily: "var(--f-display)", fontStyle: "italic", color: "var(--rose-deep)" }}>a reason for being.</em>
              &nbsp;For us, that's standing beside a couple at four in the morning — before the first guest arrives, and again after the last one leaves.
            </h2>
            <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.7, marginTop: 28, maxWidth: 640 }} className="pretty">
              We weave South-Asian, multicultural and destination weddings — Haldi to reception, Phuket to Kefalonia.
              We don't sell packages on a card. We listen, we propose, we hold the calendar, the budget and the difficult
              conversation about cousins. The rest is your story, told slowly.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// === FEATURED WEDDING (editorial double-feature) ===
function FeaturedWedding({ lang, onOpen }) {
  const w = IK.weddings[0]; // Greece
  return (
    <section data-screen-label="section-featured" style={{ background: "var(--paper)", padding: "20px 0 120px" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "7fr 5fr", gap: 56, alignItems: "center" }}>
          <button onClick={() => onOpen(w.slug)}
            className="imghover cardlift"
            style={{ padding: 0, border: 0, background: "var(--blush)", overflow: "hidden", aspectRatio: "5 / 4", cursor: "pointer" }}>
            <img src={w.hero} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </button>
          <div>
            <div className="cap" style={{ color: "var(--rose-deep)" }}>Featured story · 2024</div>
            <h2 className="display balance" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", marginTop: 16, lineHeight: 1.05 }}>
              {w.title[lang]}.
            </h2>
            <p style={{ color: "var(--muted)", marginTop: 22, fontSize: 16, lineHeight: 1.7, maxWidth: 460 }} className="pretty">
              {w.excerpt[lang]} Two ceremonies, four functions and one very long, very joyful Sunday lunch above the Aegean.
            </p>
            <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 8 }}>
              {w.functions.map(f =>
                <span key={f} style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em", color: "var(--muted)", padding: "6px 0 6px 14px", borderLeft: "1px solid var(--line)" }}>{f}</span>
              )}
            </div>
            <div style={{ marginTop: 36 }}>
              <button className="btn btn-ghost-ink" onClick={() => onOpen(w.slug)}>Read the case study <span className="arrow">→</span></button>
            </div>
            <div style={{ marginTop: 24 }}>
              <span className="consent-ribbon">Consent + photographer credit pending</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === TWEAKS ===
const PALETTES = {
  "Rose & Ivory":   { rose: "#C98B86", roseDeep: "#A56862", paper: "#FBF7F2", paper2: "#F6EFE7", blush: "#F2E6E4", line: "#E7DDD2", ink: "#1C1A19", swatch: ["#C98B86","#FBF7F2","#1C1A19"] },
  "Marigold":       { rose: "#C46A2E", roseDeep: "#8E4717", paper: "#FBF6EC", paper2: "#F4ECDC", blush: "#F1E2C8", line: "#E5D6B8", ink: "#1F1810", swatch: ["#C46A2E","#FBF6EC","#1F1810"] },
  "Henna":          { rose: "#8B3E2F", roseDeep: "#5D2519", paper: "#F8F1E8", paper2: "#EFE2D2", blush: "#E8D3C2", line: "#D6BFA8", ink: "#1A100A", swatch: ["#8B3E2F","#F8F1E8","#1A100A"] },
  "Sage & Cream":   { rose: "#7A8F76", roseDeep: "#4E6549", paper: "#F8F5EE", paper2: "#EEEAE0", blush: "#E0E2D5", line: "#D0D2C0", ink: "#1A1C18", swatch: ["#7A8F76","#F8F5EE","#1A1C18"] },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "palette": "Rose & Ivory",
  "dense": false,
  "showConsent": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute("dir", t.lang === "ar" ? "rtl" : "ltr");
  root.setAttribute("lang", t.lang);
  window.__ikLang = t.lang;
  const p = PALETTES[t.palette] || PALETTES["Rose & Ivory"];
  root.style.setProperty("--rose", p.rose);
  root.style.setProperty("--rose-deep", p.roseDeep);
  root.style.setProperty("--paper", p.paper);
  root.style.setProperty("--paper-2", p.paper2);
  root.style.setProperty("--blush", p.blush);
  root.style.setProperty("--line", p.line);
  root.style.setProperty("--ink", p.ink);
  document.body.style.fontSize = t.dense ? "15px" : "16px";
  // expose consent flag for components
  window.__ikShowConsent = t.showConsent;
}

// === ROOT ===
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang;
  const [openCase, setOpenCase] = useState(null);

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <React.Fragment>
      <Nav lang={lang} onLang={(v) => setTweak("lang", v)} />
      <main>
        <Hero lang={lang} />
        <IntroSection lang={lang} />
        <FeaturedWedding lang={lang} onOpen={setOpenCase} />
        <RealWeddingsSection lang={lang} onOpen={setOpenCase} />
        <DestinationsSection lang={lang} />
        <ServicesSection lang={lang} />
        <PressSection lang={lang} />
        <AboutSection lang={lang} />
        <PackagesSection lang={lang} />
        <EnquirySection lang={lang} />
      </main>
      <Footer lang={lang} />

      {/* WhatsApp FAB */}
      <a className="fab" href="https://wa.me/971552873665" target="_blank" rel="noreferrer" aria-label="WhatsApp">
        <span style={{
          width: 22, height: 22, borderRadius: "50%", background: "#fff",
          display: "grid", placeItems: "center", color: "#25D366", fontWeight: 800, fontSize: 14,
        }}>✓</span>
        WhatsApp
      </a>

      {openCase && <CaseStudy slug={openCase} lang={lang} onClose={() => setOpenCase(null)} />}

      <TweaksPanel title="Ikigaii — Tweaks">
        <TweakSection label="Language / direction">
          <TweakRadio
            label="Locale"
            value={t.lang}
            onChange={(v) => setTweak("lang", v)}
            options={[
              { value: "en", label: "EN" },
              { value: "ar", label: "العربية" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Brand palette">
          <TweakColor
            label="Palette"
            value={PALETTES[t.palette].swatch}
            onChange={(swatch) => {
              const name = Object.keys(PALETTES).find(k => JSON.stringify(PALETTES[k].swatch) === JSON.stringify(swatch));
              if (name) setTweak("palette", name);
            }}
            options={Object.values(PALETTES).map(p => p.swatch)}
          />
          <div style={{ marginTop: 6, fontSize: 11, color: "var(--muted)", padding: "0 4px" }}>
            {t.palette}
          </div>
        </TweakSection>
        <TweakSection label="Density">
          <TweakToggle label="Compact body type" value={t.dense} onChange={(v) => setTweak("dense", v)} />
        </TweakSection>
        <TweakSection label="Consent ribbons">
          <TweakToggle label="Show on cards" value={t.showConsent} onChange={(v) => setTweak("showConsent", v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);