// Shared components — navbar, footer, mark, FAB, building blocks.

const { useState, useEffect, useRef } = React;

// EBS monogram — original interpretation (not the supplied logo, which is too low-res / placeholder).
// A flourished "S" framed within a hairline diamond. Renders in currentColor so it adapts to nav state.
function Mark({ size = 36 }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} role="img" aria-label="Events by Saniya">
      <defs>
        <linearGradient id="mk-g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="currentColor" stopOpacity="0.9" />
          <stop offset="1" stopColor="currentColor" stopOpacity="0.6" />
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="30" fill="none" stroke="currentColor" strokeOpacity="0.25" strokeWidth="0.5" />
      <path
        d="M44 21 C 41 17, 35 16, 30 18 C 24 20, 22 25, 25 29 C 28 33, 36 33, 38 36 C 40 39, 38 43, 33 45 C 28 47, 23 46, 20 43"
        fill="none"
        stroke="url(#mk-g)"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
      <text
        x="32"
        y="58"
        textAnchor="middle"
        fontFamily="'Cormorant Garamond', serif"
        fontSize="6"
        letterSpacing="3"
        fill="currentColor"
        opacity="0.7"
      >
        EBS
      </text>
    </svg>
  );
}

function LogoLockup({ light }) {
  return (
    <a href="#/" className="nav-logo" style={{ color: light ? "#FBF6F1" : "var(--text)" }}>
      <Mark size={38} />
      <span className="nav-logo-text">
        Events by <em>Saniya</em>
      </span>
    </a>
  );
}

function LocaleToggle({ locale, setLocale }) {
  return (
    <div className="locale-toggle" aria-label="Language">
      {["EN", "AR", "HI"].map((l) => (
        <button
          key={l}
          className={locale === l ? "on" : ""}
          onClick={() => setLocale(l)}
          aria-pressed={locale === l}
        >
          {l}
        </button>
      ))}
    </div>
  );
}

function Navbar({ route, locale, setLocale }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const overHero = route === "home" && !scrolled;
  return (
    <header className={`nav ${overHero ? "over-hero" : ""} ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-row">
        <LogoLockup light={overHero} />
        <nav className="nav-links" aria-label="Primary">
          {NAV_ITEMS.filter((n) => n.id !== "home" && n.id !== "enquire").map((n) => (
            <a key={n.id} href={n.href} className={route === n.id ? "active" : ""}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="nav-actions">
          <LocaleToggle locale={locale} setLocale={setLocale} />
          <a
            href="#/enquire"
            className={overHero ? "btn btn-light hide-mobile" : "btn btn-primary hide-mobile"}
            style={{ padding: "11px 22px" }}
          >
            Enquire
          </a>
        </div>
      </div>
    </header>
  );
}

function WhatsAppFab() {
  return (
    <a
      href="https://wa.me/971542457826?text=Hi%20Events%20by%20Saniya%2C%20we'd%20like%20to%20enquire%20about..."
      target="_blank"
      rel="noopener"
      className="wa-fab"
      aria-label="Chat on WhatsApp"
    >
      <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor">
        <path d="M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.6.1-.3-.1-1.2-.5-2.3-1.5-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.2-.3.4-.4.1-.1.2-.2.3-.4.1-.2 0-.4 0-.5l-.9-2.1c-.2-.6-.5-.5-.6-.5h-.5c-.2 0-.5.1-.7.4-.2.3-.9.9-.9 2.2 0 1.3.9 2.5 1 2.7.1.2 1.8 2.8 4.4 3.9.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z" />
      </svg>
    </a>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(280px, 1.4fr) repeat(3, 1fr)",
            gap: 56,
            alignItems: "start",
          }}
        >
          <div>
            <LogoLockup />
            <p className="small" style={{ marginTop: 18, maxWidth: 320 }}>
              Bespoke wedding and event planning, design and management. Dubai · Gurgaon ·
              Global.
            </p>
            <div className="small" style={{ marginTop: 22, lineHeight: 2 }}>
              <div>
                <strong style={{ color: "var(--text)", fontWeight: 500 }}>Dubai</strong> · PO
                Box 450450, UAE
              </div>
              <div>
                <strong style={{ color: "var(--text)", fontWeight: 500 }}>Gurgaon</strong> ·
                DLF Phase 1, PO Box 122002, India
              </div>
            </div>
          </div>

          <FooterCol
            title="Discover"
            links={[
              { label: "Home", href: "#/" },
              { label: "Real Weddings", href: "#/real-weddings" },
              { label: "Services", href: "#/services" },
              { label: "Destinations", href: "#/destinations" },
              { label: "About Saniya", href: "#/about" },
            ]}
          />

          <FooterCol
            title="Contact"
            links={[
              { label: "+971 54 245 7826", href: "tel:+971542457826" },
              { label: "info@eventsbysaniya.com", href: "mailto:info@eventsbysaniya.com" },
              { label: "WhatsApp", href: "https://wa.me/971542457826" },
              { label: "Enquire", href: "#/enquire" },
            ]}
          />

          <FooterCol
            title="Follow"
            links={[
              { label: "Instagram · @eventsbysaniya", href: "#" },
              { label: "Facebook · eventsbysaniya", href: "#" },
              { label: "YouTube", href: "#" },
            ]}
          />
        </div>

        <hr className="rule" style={{ margin: "56px 0 24px" }} />
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 16,
          }}
          className="small"
        >
          <div>© {new Date().getFullYear()} Events by Saniya. All rights reserved.</div>
          <div style={{ color: "var(--muted)" }}>
            Founded as Selvatico, 2014. Rebranded as Events by Saniya. 10+ years · 250+ events.
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 18 }}>
        {title}
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map((l) => (
          <li key={l.label}>
            <a href={l.href} className="small" style={{ color: "var(--text)" }}>
              {l.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// CTA band — for end of pages
function CtaBand({ heading = "Plan your wedding with us", sub = "Tell us about your celebration. We'll come back with a single, considered point of view." }) {
  return (
    <section className="section" style={{ background: "var(--surface)", marginTop: "var(--rhythm)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <span className="ornament eyebrow"><span>Begin</span></span>
        <h2 className="serif" style={{ marginTop: 18, marginBottom: 18, fontStyle: "italic", fontWeight: 300 }}>
          {heading}
        </h2>
        <p className="lede" style={{ maxWidth: 620, margin: "0 auto 36px", color: "var(--muted)" }}>
          {sub}
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="#/enquire" className="btn btn-primary">Book a Consultation</a>
          <a
            href="https://wa.me/971542457826"
            target="_blank"
            rel="noopener"
            className="btn btn-ghost"
          >
            Chat on WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

// Section header — eyebrow + ornament + heading + optional kicker
function SectionHeader({ eyebrow, heading, kicker, align = "left" }) {
  return (
    <div style={{ textAlign: align, marginBottom: 56, maxWidth: align === "center" ? 720 : "none", marginInline: align === "center" ? "auto" : 0 }}>
      <span className="ornament eyebrow" style={{ justifyContent: align === "center" ? "center" : "flex-start", display: "inline-flex" }}>
        <span>{eyebrow}</span>
      </span>
      <h2 className="serif" style={{ marginTop: 20, marginBottom: kicker ? 18 : 0, fontWeight: 400, letterSpacing: "-0.015em" }}>
        {heading}
      </h2>
      {kicker && (
        <p className="lede" style={{ color: "var(--muted)", maxWidth: 620, marginInline: align === "center" ? "auto" : 0 }}>
          {kicker}
        </p>
      )}
    </div>
  );
}

// Real wedding card — used on home + index
function WeddingCard({ wedding, size = "md" }) {
  const isLarge = size === "lg";
  return (
    <a
      href={`#/real-weddings/${wedding.slug}`}
      className="wedding-card"
      style={{
        display: "block",
        color: "inherit",
      }}
    >
      <div
        className="img-frame"
        style={{ aspectRatio: isLarge ? "4/5" : "3/4", marginBottom: 18 }}
      >
        <img src={wedding.hero} alt="" loading="lazy" />
        <div
          style={{
            position: "absolute",
            top: 14,
            left: 14,
            background: "rgba(251,246,241,0.92)",
            color: "var(--text)",
            padding: "6px 12px",
            fontSize: 10,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            fontWeight: 500,
            backdropFilter: "blur(8px)",
          }}
        >
          {wedding.destination}
        </div>
      </div>
      <div className="micro" style={{ color: "var(--accent-deep)", marginBottom: 6 }}>
        {wedding.location} · {wedding.year}
      </div>
      <h3
        className="serif"
        style={{ fontWeight: 400, fontSize: isLarge ? "clamp(28px, 3vw, 38px)" : "clamp(22px, 2vw, 28px)", marginBottom: 8, fontStyle: "italic" }}
      >
        {wedding.display}
      </h3>
      <p className="small" style={{ marginBottom: 12 }}>
        {wedding.events} events · {wedding.days} days · {wedding.guests} guests
      </p>
      <span className="btn-link" style={{ display: "inline-block" }}>
        Read the story →
      </span>
    </a>
  );
}

Object.assign(window, {
  Mark,
  LogoLockup,
  Navbar,
  Footer,
  WhatsAppFab,
  CtaBand,
  SectionHeader,
  WeddingCard,
  LocaleToggle,
});