// Shared chrome and primitives.
const { useState, useEffect, useRef, useCallback } = React;

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// Bespoke wordmark — original SVG re-draw (does not reproduce client's exact lockup).
// A simple elegant typographic mark.
function Wordmark({ small = false, light = false }) {
  const fs = small ? 22 : 28;
  const color = light ? "var(--paper)" : "var(--ink)";
  return (
    <a href="#home" className="wordmark" style={{ display: "inline-flex", alignItems: "baseline", gap: 8, color }}>
      <span className="serif" style={{
        fontSize: fs, fontWeight: 400, fontStyle: "italic", lineHeight: 1,
        letterSpacing: "-0.02em",
      }}>Carousel</span>
      <span style={{
        fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.32em",
        textTransform: "uppercase", fontWeight: 500, opacity: 0.7,
        transform: "translateY(-2px)",
      }}>EVENTS</span>
    </a>
  );
}

function Nav({ route, onRoute, onEnquire, locale, onLocale, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 16);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  // All current routes open with a dark image hero; nav rides light over it until scroll.
  const onHero = !scrolled;
  const links = [
    { k: "home", l: t.portfolio === "أعمالنا" ? "الرئيسية" : "Home" },
    { k: "weddings", l: t.weddings },
    { k: "corporate", l: t.corporate },
    { k: "social", l: t.social },
    { k: "approach", l: t.approach },
    { k: "story", l: t.story },
    { k: "accolades", l: t.accolades },
    { k: "contact", l: t.contact },
  ];
  return (
    <header data-on-hero={onHero ? "1" : "0"} style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 80,
      background: scrolled ? "color-mix(in oklab, var(--paper) 92%, transparent)" : "linear-gradient(180deg, rgba(16,12,10,0.35) 0%, rgba(16,12,10,0) 100%)",
      backdropFilter: scrolled ? "saturate(140%) blur(10px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(140%) blur(10px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      color: onHero ? "#FBF8F4" : "var(--ink)",
      transition: "background 0.35s ease, color 0.35s ease, border-color 0.35s ease",
    }}>
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: (scrolled ? "16px " : "24px ") + "var(--gutter)",
        transition: "padding 0.3s ease",
      }}>
        <Wordmark small={scrolled} light={onHero} />
        <nav className="nav-root" style={{ display: "flex", gap: 22, alignItems: "center" }}>
          <div className="nav-links">
            {links.slice(1, 7).map((it) => (
              <button key={it.k} onClick={() => onRoute(it.k === "weddings" ? "weddings" : it.k === "home" ? "home" : "stub:" + it.k)}
                className="nav-link"
                style={{
                  color: route === it.k ? "var(--accent-soft)" : "inherit",
                  opacity: route === it.k ? 1 : 0.92,
                }}
                onMouseEnter={(e) => { if (route !== it.k) e.currentTarget.style.color = "var(--accent-soft)"; }}
                onMouseLeave={(e) => { if (route !== it.k) e.currentTarget.style.color = "inherit"; }}
              >
                {it.l}
              </button>
            ))}
          </div>
          <LocaleToggle locale={locale} onLocale={onLocale} onHero={onHero} />
          <button className="btn nav-enquire" onClick={onEnquire}
            style={{
              background: onHero ? "#FBF8F4" : "var(--ink)",
              color: onHero ? "var(--noir)" : "var(--paper)",
            }}>
            {t.enquire}
            <Arrow />
          </button>
        </nav>
      </div>
    </header>
  );
}

function LocaleToggle({ locale, onLocale, onHero }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 0,
      border: "1px solid " + (onHero ? "rgba(255,255,255,0.4)" : "var(--line-strong)"),
      borderRadius: 999, padding: 2,
      fontSize: 11, letterSpacing: "0.18em", fontWeight: 500,
    }}>
      {[["en", "EN"], ["ar", "AR"]].map(([k, l]) => (
        <button key={k} onClick={() => onLocale(k)}
          style={{
            padding: "6px 12px", borderRadius: 999,
            background: locale === k ? (onHero ? "#FBF8F4" : "var(--ink)") : "transparent",
            color: locale === k ? (onHero ? "var(--noir)" : "var(--paper)") : "inherit",
            transition: "all 0.2s ease",
          }}>{l}</button>
      ))}
    </div>
  );
}

function Arrow({ size = 14, dir = "right" }) {
  const rot = dir === "left" ? 180 : dir === "down" ? 90 : 0;
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ transform: `rotate(${rot}deg)`, transition: "transform 0.2s" }}>
      <path d="M2 8 H13 M9 4 L13 8 L9 12" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SectionEyebrow({ label, num }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 14,
      marginBottom: 28,
    }}>
      {num && <span className="mono-tiny" style={{ color: "var(--muted-2)" }}>{num}</span>}
      <span style={{ flex: "0 0 36px", height: 1, background: "var(--accent)" }} />
      <span className="mono-tiny" style={{ color: "var(--ink)" }}>{label}</span>
    </div>
  );
}

function Footer({ t, onEnquire }) {
  return (
    <footer style={{
      background: "var(--noir)", color: "var(--paper)",
      paddingTop: 120, paddingBottom: 40, marginTop: 0,
    }}>
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 64, paddingBottom: 80, borderBottom: "1px solid rgba(255,255,255,0.12)",
        }}>
          <div>
            <div className="serif" style={{ fontSize: 44, fontStyle: "italic", lineHeight: 1.05, marginBottom: 18 }}>
              Let's plan something<br />of true distinction.
            </div>
            <p style={{ color: "rgba(255,255,255,0.65)", maxWidth: 380, marginBottom: 28 }}>
              We respond to every enquiry personally, within two working days.
            </p>
            <button className="btn btn-primary" onClick={onEnquire}
              style={{ background: "var(--accent)", color: "var(--noir)" }}>
              {t.requestProposal}<Arrow />
            </button>
          </div>
          <FooterCol title="Studio" items={[
            "Dubai Studio City",
            "Building 4, Office 510",
            "Dubai, United Arab Emirates",
          ]} />
          <FooterCol title="Contact" items={[
            { l: "+971 4 433 4363", href: "tel:+97144334363" },
            { l: "info@carousel.ae", href: "mailto:info@carousel.ae" },
            { l: "Mon — Fri, by appointment" },
          ]} />
          <FooterCol title="Follow" items={[
            { l: "Instagram", href: "#" },
            { l: "Pinterest", href: "#" },
            { l: "Vimeo", href: "#" },
          ]} />
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 32, color: "rgba(255,255,255,0.5)", fontSize: 12, letterSpacing: "0.06em",
        }}>
          <div>© 2008 — 2026 Carousel Events FZ-LLC</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Image rights</a>
            <a href="#">Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="mono-tiny" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((it, i) => {
          const obj = typeof it === "string" ? { l: it } : it;
          return (
            <li key={i} style={{ color: "rgba(255,255,255,0.85)", fontSize: 14 }}>
              {obj.href ? <a href={obj.href} style={{ borderBottom: "1px solid transparent" }}
                onMouseEnter={e => e.currentTarget.style.borderBottomColor = "var(--accent)"}
                onMouseLeave={e => e.currentTarget.style.borderBottomColor = "transparent"}>{obj.l}</a> : obj.l}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

// Sticky bottom CTA for mobile-feel persistent surface
function StickyEnquireBar({ onEnquire, t, route }) {
  if (route === "case") return null; // case study has its own CTA band
  return (
    <div style={{
      position: "fixed", bottom: 22,
      right: 22,
      zIndex: 70,
      display: "flex", gap: 10,
    }}>
      <button className="btn btn-primary" onClick={onEnquire}
        style={{
          padding: "16px 24px",
          boxShadow: "0 16px 40px rgba(0,0,0,0.18)",
          background: "var(--ink)",
        }}>
        {t.requestProposal}
        <Arrow />
      </button>
    </div>
  );
}

// Image with photographer credit overlay
function CreditedImage({ src, alt, credit, ratio = "4/5", style, className }) {
  return (
    <div className={className} style={{ position: "relative", aspectRatio: ratio, overflow: "hidden", background: "var(--ivory)", ...style }}>
      <img src={src} alt={alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      {credit && (
        <div style={{
          position: "absolute", bottom: 10, right: 12,
          fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.85)", fontWeight: 500,
          textShadow: "0 1px 8px rgba(0,0,0,0.5)",
        }}>© {credit}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  Nav, Footer, Wordmark, useReveal, SectionEyebrow, Arrow, StickyEnquireBar, CreditedImage,
});
