/* global React */
const { useState, useEffect, useRef } = React;

/* ---------------- Star (the brand motif) ---------------- */
function Star({ size = 24, fill = "var(--ink)", stroke = "none", className = "", style = {} }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24"
      style={style} aria-hidden="true">
      <path d="M12 1.8c.5 0 .9.3 1.1.8l2.3 5.3 5.7.5c1.1.1 1.5 1.4.7 2.1l-4.3 3.8 1.3 5.6c.2 1-.9 1.8-1.8 1.3L12 18.2l-5 3c-.9.5-2-.3-1.8-1.3l1.3-5.6L2.2 10.5c-.8-.7-.4-2 .7-2.1l5.7-.5L10.9 2.6c.2-.5.6-.8 1.1-.8z"
        fill={fill} stroke={stroke} strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  );
}

/* scattered decorative stars */
function StarField({ stars = [] }) {
  return (
    <div aria-hidden="true" style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
      {stars.map((s, i) => (
        <Star key={i} size={s.size} fill={s.fill || "var(--ink)"}
          className="floaty"
          style={{ position: "absolute", left: s.x, top: s.y, "--rot": (s.rot || 0) + "deg",
            animationDelay: (s.delay || 0) + "s", opacity: s.op ?? 1 }} />
      ))}
    </div>
  );
}

/* ---------------- Icons ---------------- */
const ICONS = {
  ticket: "M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-4ZM9 6v12",
  calendar: "M7 3v3M17 3v3M4 8h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z",
  card: "M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1ZM2 10h20M6 15h4",
  check: "M5 13l4 4L19 6",
  arrow: "M5 12h14M13 6l6 6-6 6",
  clock: "M12 7v5l3 2M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
  pin: "M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11ZM12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
  user: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21a8 8 0 0 1 16 0",
  menu: "M4 7h16M4 12h16M4 17h16",
  x: "M6 6l12 12M18 6 6 18",
  music: "M9 18V5l11-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm11-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
  mask: "M4 5h16v6a8 8 0 0 1-16 0V5ZM8.5 9.5h.01M15.5 9.5h.01M9 13c1.5 1.5 4.5 1.5 6 0",
  heart: "M12 20s-7-4.5-9.2-9C1 7.5 3 4 6.5 4 9 4 12 6.5 12 6.5S15 4 17.5 4C21 4 23 7.5 21.2 11 19 15.5 12 20 12 20Z",
  sparkle: "M12 3v6m0 6v6m-9-9h6m6 0h6M6 6l3 3m6 6 3 3m0-12-3 3m-6 6-3 3",
  chevron: "M9 6l6 6-6 6",
  shield: "M12 3l8 3v6c0 4.5-3.2 7.8-8 9-4.8-1.2-8-4.5-8-9V6l8-3Z",
  play: "M8 5v14l11-7-11-7Z",
  bell: "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
};
function Icon({ name, size = 22, stroke = 2.2, color = "currentColor", fill = "none", className = "" }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill={fill}
      stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {ICONS[name].split("M").filter(Boolean).map((d, i) => <path key={i} d={"M" + d} />)}
    </svg>
  );
}

/* ColorDots — the dot strip from the FTW flyer */
function ColorDots() {
  const colors = ["var(--gold)","var(--teal)","var(--coral)","var(--mint)","var(--sky)","var(--violet)","var(--gold)","var(--teal)","var(--coral)","var(--mint)","var(--sky)","var(--violet)"];
  return (
    <div aria-hidden="true"
      style={{ display:"flex", gap:12, justifyContent:"center", flexWrap:"wrap",
        padding:"18px var(--gut)", borderTop:"var(--bd-ink)", borderBottom:"var(--bd-ink)",
        background:"var(--paper-2)" }}>
      {colors.map((c,i) => (
        <div key={i} style={{ width:18, height:18, borderRadius:"50%",
          background:c, border:"2px solid var(--ink)", flexShrink:0 }} />
      ))}
    </div>
  );
}

/* -------- Logo -------- */
function Logo({ onClick, height = 30 }) {
  return (
    <button onClick={onClick} aria-label="Foothill Theatre Workshop — home"
      style={{ background: "none", border: 0, padding: 0, display: "flex", alignItems: "center" }}>
      <img src="assets/logo.png" alt="Foothill Theatre Workshop" style={{ height }} />
    </button>
  );
}

/* ---------------- Photo placeholder ---------------- */
function Photo({ label, ar = "4 / 3", radius = "var(--r-md)", className = "", style = {}, tint }) {
  return (
    <div className={"ph " + className} style={{ aspectRatio: ar, borderRadius: radius,
      background: tint, ...style }}>
      <span>{label}</span>
    </div>
  );
}

/* ---------------- Nav ---------------- */
const NAV = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "register", label: "Auditions" },
  { id: "hub", label: "Family Hub" },
  { id: "tickets", label: "Tickets" },
  { id: "donate", label: "Donate" },
  { id: "contact", label: "Contact" },
];
function NavBar({ route, navigate, user, onLogout }) {
  const [open, setOpen] = useState(false);
  const [solid, setSolid] = useState(false);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (id) => { navigate(id); setOpen(false); };
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50,
      background: solid ? "rgba(255,247,234,.92)" : "transparent",
      backdropFilter: solid ? "saturate(140%) blur(8px)" : "none",
      borderBottom: solid ? "2.5px solid var(--ink)" : "2.5px solid transparent",
      transition: "background .2s, border-color .2s" }}>
      <div className="wrap row between" style={{ height: 74 }}>
        <Logo onClick={() => go("home")} height={30} />
        <nav className="row gap-8 nav-desktop">
          {NAV.map(n => (
            <button key={n.id} onClick={() => go(n.id)}
              style={{ background: route === n.id ? "var(--gold-tint)" : "none",
                border: route === n.id ? "2px solid var(--ink)" : "2px solid transparent",
                borderRadius: "var(--r-pill)", padding: "8px 15px",
                fontFamily: "var(--display)", fontWeight: 500, fontSize: 16, color: "var(--ink)" }}>
              {n.label}
            </button>
          ))}
          {user ? (
            <div style={{ position: "relative", marginLeft: 8 }}>
              <button onClick={() => setUserMenuOpen(o => !o)}
                style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--white)",
                  border: "var(--bd-ink)", borderRadius: "var(--r-pill)", padding: "7px 14px 7px 8px",
                  fontFamily: "var(--display)", fontWeight: 500, fontSize: 14, cursor: "pointer" }}>
                <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--gold)",
                  border: "var(--bd-ink)", display: "grid", placeItems: "center",
                  fontFamily: "var(--display)", fontWeight: 700, fontSize: 13 }}>
                  {(user.name || user.email || "?")[0].toUpperCase()}
                </div>
                <span>{(user.name || user.email).split(" ")[0]}</span>
                <Icon name="chevron" size={14} stroke={2.5} style={{ transform: userMenuOpen ? "rotate(270deg)" : "rotate(90deg)", transition: "transform .15s" }} />
              </button>
              {userMenuOpen && (
                <div className="card pop" style={{ position: "absolute", right: 0, top: "calc(100% + 8px)",
                  minWidth: 200, padding: 8, zIndex: 100 }}>
                  <div style={{ padding: "8px 12px", fontSize: 13, color: "var(--ink-soft)", borderBottom: "1.5px solid var(--paper-2)", marginBottom: 6 }}>
                    {user.email}
                  </div>
                  <button onClick={() => { go("hub"); setUserMenuOpen(false); }}
                    style={{ display: "block", width: "100%", textAlign: "left", background: 0, border: 0,
                      padding: "9px 12px", fontFamily: "var(--display)", fontWeight: 500, fontSize: 15,
                      borderRadius: 10, cursor: "pointer" }}>
                    <Icon name="calendar" size={15} /> My Family Hub
                  </button>
                  <button onClick={onLogout}
                    style={{ display: "block", width: "100%", textAlign: "left", background: 0, border: 0,
                      padding: "9px 12px", fontFamily: "var(--display)", fontWeight: 500, fontSize: 15,
                      borderRadius: 10, cursor: "pointer", color: "var(--coral-deep)" }}>
                    <Icon name="x" size={15} /> Sign out
                  </button>
                </div>
              )}
            </div>
          ) : (
            <button className="btn btn--gold btn--sm" style={{ marginLeft: 8 }} onClick={() => go("register")}>
              Register <Icon name="arrow" size={16} stroke={2.6} />
            </button>
          )}
        </nav>
        <button className="nav-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu"
          style={{ display: "none", background: "var(--white)", border: "var(--bd-ink)",
            borderRadius: 12, width: 46, height: 46, alignItems: "center", justifyContent: "center" }}>
          <Icon name={open ? "x" : "menu"} />
        </button>
      </div>
      {open && (
        <div className="wrap nav-mobile pop" style={{ paddingBottom: 18 }}>
          <div className="card" style={{ padding: 12, display: "grid", gap: 4 }}>
            {NAV.map(n => (
              <button key={n.id} onClick={() => go(n.id)}
                style={{ textAlign: "left", background: route === n.id ? "var(--gold-tint)" : "none",
                  border: 0, borderRadius: 12, padding: "12px 14px",
                  fontFamily: "var(--display)", fontWeight: 500, fontSize: 18 }}>
                {n.label}
              </button>
            ))}
            <button className="btn btn--gold" style={{ marginTop: 6 }} onClick={() => go("register")}>
              Register for Summer 2026
            </button>
          </div>
        </div>
      )}
    </header>
  );
}

/* ---------------- Footer ---------------- */
function Footer({ navigate }) {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", marginTop: 0 }}>
      <div className="wrap section--tight">
        <div className="foot-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 40 }}>
          <div>
            <img src="assets/logo.png" alt="Foothill Theatre Workshop"
              style={{ height: 30 }} />
            <p style={{ marginTop: 16, maxWidth: 320, color: "#D9CFBE", fontSize: 15 }}>
              A non-profit children's musical theatre summer workshop in the San Gabriel Valley.
              Building confidence, friendship, and stage magic for 20 years.
            </p>
            <div className="row gap-12" style={{ marginTop: 18 }}>
              <span className="tag" style={{ background: "transparent", color: "var(--paper)", borderColor: "var(--paper)" }}>
                <Icon name="pin" size={15} stroke={2.4} /> Pomona, CA
              </span>
            </div>
          </div>
          <div>
            <h4 style={{ fontSize: 17, marginBottom: 14, color: "var(--gold)" }}>Explore</h4>
            <div style={{ display: "grid", gap: 10 }}>
              {NAV.map(n => (
                <button key={n.id} onClick={() => navigate(n.id)}
                  style={{ background: 0, border: 0, color: "#D9CFBE", textAlign: "left",
                    fontFamily: "var(--body)", fontSize: 15, padding: 0 }}>{n.label}</button>
              ))}
            </div>
          </div>
          <div>
            <h4 style={{ fontSize: 17, marginBottom: 14, color: "var(--gold)" }}>Stay in touch</h4>
            <div style={{ display: "grid", gap: 10, color: "#D9CFBE", fontSize: 15 }}>
              <a href="mailto:hello@foothilltheatreworkshop.com">hello@foothilltheatreworkshop.com</a>
              <a href="https://instagram.com/foothilltheatreworkshop">Instagram</a>
              <a href="https://facebook.com/foothilltheatreworkshop">Facebook</a>
            </div>
          </div>
        </div>
        <hr style={{ border: 0, borderTop: "1px solid rgba(255,255,255,.16)", margin: "32px 0 18px" }} />
        <div className="row between foot-bottom" style={{ fontSize: 13.5, color: "#B7AD9C", flexWrap: "wrap", gap: 10 }}>
          <span>© 2026 Foothill Theatre Workshop · 501(c)(3) non-profit</span>
          <span>In partnership with The School of Arts + Enterprise</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Star, StarField, Icon, Logo, Photo, NavBar, Footer, NAV, ColorDots });