/* Shared UI components for Sham-e-Mehfil */
const { useState, useEffect, useRef } = React;

/* ---- Inline icons (thin, editorial) ---- */
const Icon = {
  arrow: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  arrowUp: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><path d="M7 17L17 7M9 7h8v8"/></svg>,
  quote: (p) => <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M9.5 7C6.5 7 5 9.5 5 12.5V17h5v-5H7.5C7.5 9.8 8.3 9 9.5 9V7zm9 0c-3 0-4.5 2.5-4.5 5.5V17h5v-5H16c0-2.2.8-3 2-3V7z"/></svg>,
  feather: (p) => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><path d="M20.2 4A6.5 6.5 0 0 0 9 8.5V14l-5 5 2 2 5-5h5.5A6.5 6.5 0 0 0 20.2 4zM9 14l6-6"/></svg>,
  check: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 12.5l4.5 4.5L19 6.5"/></svg>,
  pin: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z"/><circle cx="12" cy="10" r="2.4"/></svg>,
  clock: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  seat: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 11V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5M4 11h16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4zM7 19v2M17 19v2"/></svg>,
  ig: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>,
};

/* ---- Editorial image (real photo) or placeholder ---- */
function Ph({ label, pic, src, alt, dark, style, className = "", ratio, w = 1100, overlay }) {
  const s = { ...(ratio ? { aspectRatio: ratio } : {}), ...style };
  const imgSrc = src ? src : (pic ? (pic.indexOf("/") >= 0 ? pic : IMG(pic, w)) : null);
  if (imgSrc) {
    return (
      <div className={`ph ${className}`} style={{ ...s, background: "var(--beige-deep)" }}>
        <img src={imgSrc} alt={alt || label || ""}
             style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        {overlay && <div style={{ position: "absolute", inset: 0, background: overlay }}></div>}
      </div>
    );
  }
  return (
    <div className={`ph ${dark ? "ph-dark" : ""} ${className}`} style={s}>
      <svg className="ph-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1"
           style={{ color: dark ? "rgba(244,239,230,0.4)" : "rgba(52,40,29,0.4)" }}>
        <path d="M3 17l5-5 4 4 4-6 5 7M3 8h.01"/><rect x="2" y="3" width="20" height="18" rx="2"/>
      </svg>
      {label && <span className="ph-label">{label}</span>}
    </div>
  );
}

/* ---- Classical Indian ornamental divider (lotus + line) ---- */
function Ornament({ color = "var(--gold)", width = 240, style }) {
  return (
    <svg width={width} height="26" viewBox="0 0 240 26" fill="none" style={{ display: "block", color, ...style }}>
      <line x1="0" y1="13" x2="92" y2="13" stroke="currentColor" strokeWidth="1" opacity="0.5"/>
      <line x1="148" y1="13" x2="240" y2="13" stroke="currentColor" strokeWidth="1" opacity="0.5"/>
      <circle cx="100" cy="13" r="2" fill="currentColor"/>
      <circle cx="140" cy="13" r="2" fill="currentColor"/>
      {/* central paisley/lotus */}
      <g stroke="currentColor" strokeWidth="1.1" fill="none">
        <path d="M120 4 C126 8 126 18 120 22 C114 18 114 8 120 4 Z"/>
        <path d="M111 13 C115 9 125 9 129 13 C125 17 115 17 111 13 Z"/>
        <circle cx="120" cy="13" r="2.2" fill="currentColor" stroke="none"/>
      </g>
    </svg>
  );
}

/* ---- Mughal cusped arch outline (decorative frame top) ---- */
function ArchTop({ color = "var(--gold)", style, w = 320 }) {
  return (
    <svg width={w} height={w * 0.34} viewBox="0 0 320 110" fill="none" preserveAspectRatio="xMidYMax meet" style={{ color, ...style }}>
      <path d="M8 108 L8 70 C8 36 40 36 50 50 C58 30 70 20 86 30 C96 8 130 4 160 4 C190 4 224 8 234 30 C250 20 262 30 270 50 C280 36 312 36 312 70 L312 108"
            stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.85"/>
      <circle cx="160" cy="4" r="3" fill="currentColor"/>
    </svg>
  );
}

/* ---- Scroll reveal hook ---- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    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" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---- Eyebrow label ---- */
function Eyebrow({ children, ink, style }) {
  return <div className={`eyebrow ${ink ? "ink" : ""}`} style={style}>{children}</div>;
}

/* ---- Section heading block ---- */
function SectionHead({ eyebrow, title, lede, align = "left", max }) {
  return (
    <div className="reveal" style={{ textAlign: align, maxWidth: max, marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0 }}>
      {eyebrow && <Eyebrow style={{ marginBottom: 18 }}>{eyebrow}</Eyebrow>}
      <h2 className="h-lg" style={{ marginBottom: lede ? 22 : 0 }}>{title}</h2>
      {lede && <p className="lede" style={{ maxWidth: 620, marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0 }}>{lede}</p>}
    </div>
  );
}

/* ---- Status pill for events ---- */
function SeatPill({ status, seats }) {
  if (status === "wait") return <span className="tag"><span className="dot" style={{ background: "var(--muted)" }}></span> Waitlist</span>;
  if (status === "few") return <span className="tag"><span className="dot few"></span> {seats} seats left</span>;
  return <span className="tag"><span className="dot live"></span> {seats} seats</span>;
}

/* ---- Event card ---- */
function EventCard({ ev, onRegister, d }) {
  return (
    <article className="card reveal" data-d={d} style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <Ph pic={ev.pic} alt={ev.title} ratio="16/10" />
      <div style={{ padding: "26px 26px 28px", display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <Eyebrow>{ev.theme}</Eyebrow>
          <SeatPill status={ev.status} seats={ev.seats} />
        </div>
        <h3 className="h-sm" style={{ marginBottom: 10 }}>{ev.title}</h3>
        <p className="muted" style={{ fontSize: "0.95rem", marginBottom: 22 }}>{ev.blurb}</p>
        <div style={{ marginTop: "auto" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px 18px", fontSize: "0.86rem", color: "var(--ink-soft)", marginBottom: 22 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon.clock /> {ev.date} · {ev.time}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon.pin /> {ev.venue}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 18, borderTop: "1px solid var(--line-soft)" }}>
            <span className="serif" style={{ fontSize: "1.5rem" }}>{ev.price}</span>
            <button className={ev.status === "wait" ? "btn btn-ghost" : "btn btn-primary"} onClick={() => onRegister(ev)}>
              {ev.status === "wait" ? "Join waitlist" : "Reserve"} <Icon.arrow className="arr" />
            </button>
          </div>
        </div>
      </div>
    </article>
  );
}

/* ---- Navigation ---- */
const NAV_ITEMS = [
  { to: "events", label: "Events" }, { to: "poets", label: "Poets" },
  { to: "journal", label: "Journal" }, { to: "library", label: "Library" },
  { to: "membership", label: "Membership" }, { to: "about", label: "About" },
];
const DRAWER_ITEMS = [...NAV_ITEMS, { to: "community", label: "Community" }, { to: "perform", label: "Perform" }, { to: "partners", label: "Partners" }, { to: "contact", label: "Contact" }];

function Nav({ route, go }) {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);
  const overHero = route === "home" && !solid && !open;
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    onScroll(); window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);
  const nav = (to) => { go(to); setOpen(false); };
  return (
    <React.Fragment>
      <header className={`nav ${solid || open ? "solid" : ""} ${overHero ? "on-dark" : ""}`}>
        <div className="shell-wide nav-inner">
          <a className="brand" onClick={() => nav("home")} style={{ cursor: "pointer" }}>Sham<span className="amp">-e-</span>Mehfil</a>
          <nav className="nav-links">
            {NAV_ITEMS.map((i) => (
              <a key={i.to} className={`nav-link ${route === i.to ? "active" : ""}`} onClick={() => nav(i.to)} style={{ cursor: "pointer" }}>{i.label}</a>
            ))}
          </nav>
          <div className="nav-right">
            <button className={`btn ${overHero ? "btn-light" : "btn-primary"}`} onClick={() => nav("events")}>Attend next mehfil <Icon.arrow className="arr" /></button>
            <button className={`menu-btn ${open ? "open" : ""}`} onClick={() => setOpen(!open)} aria-label="Menu">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </header>
      <div className={`drawer ${open ? "open" : ""}`}>
        {DRAWER_ITEMS.map((i, k) => (
          <a key={i.to} onClick={() => nav(i.to)}><span className="num">{String(k + 1).padStart(2, "0")}</span>{i.label}</a>
        ))}
      </div>
    </React.Fragment>
  );
}

/* ---- Footer ---- */
function Footer({ go }) {
  const cols = [
    { h: "Attend", links: [["events", "Upcoming events"], ["membership", "Membership"], ["community", "Community"]] },
    { h: "Read", links: [["journal", "Stories & Journal"], ["library", "Shayari library"], ["poets", "Featured poets"]] },
    { h: "Take part", links: [["perform", "Perform at SEM"], ["partners", "Partnerships"], ["contact", "Contact"]] },
  ];
  return (
    <footer className="footer">
      <div className="jali footer-jali"></div>
      <div className="shell-wide" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 40 }} className="footer-grid">
          <div>
            <div className="brand" style={{ fontSize: "2rem", marginBottom: 18 }}>Sham<span className="amp">-e-</span>Mehfil</div>
            <p style={{ color: "rgba(251,249,244,0.62)", maxWidth: 300, lineHeight: 1.6 }}>Where words meet people. A cultural community built on poetry, storytelling and the long-lost art of conversation.</p>
            <button className="btn btn-gold" style={{ marginTop: 26 }} onClick={() => go("membership")}>Join the community <Icon.arrow className="arr" /></button>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <Eyebrow style={{ marginBottom: 18 }}>{c.h}</Eyebrow>
              {c.links.map(([to, l]) => <a key={to} onClick={() => go(to)} style={{ cursor: "pointer" }}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-rule"></div>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontSize: "0.82rem", color: "rgba(251,249,244,0.5)" }}>
          <span>© 2026 Sham-e-Mehfil · Gurugram · Delhi · NCR</span>
          <span style={{ display: "flex", gap: 24 }}>
            <a onClick={() => go("contact")} style={{ display: "inline", cursor: "pointer" }}>Instagram</a>
            <a onClick={() => go("contact")} style={{ display: "inline", cursor: "pointer" }}>Newsletter</a>
            <a onClick={() => go("contact")} style={{ display: "inline", cursor: "pointer" }}>Privacy</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Ph, Ornament, ArchTop, useReveal, Eyebrow, SectionHead, SeatPill, EventCard, Nav, Footer });
