/* Bahá'ís of Dublin — shared shell, ornament, nav. */

const NavLinks = ({ active, onNavigate, variant = "desktop" }) => {
  const items = [
    { id: "home", label: "Home" },
    { id: "community", label: "Community Life" },
    { id: "events", label: "Events" },
    { id: "prayers", label: "Prayers & Quotes" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className={`bd-nav bd-nav--${variant}`}>
      {items.map((it) => (
        <a
          key={it.id}
          href={`#${it.id}`}
          onClick={(e) => { e.preventDefault(); onNavigate?.(it.id); }}
          className={`bd-nav__link ${active === it.id ? "is-active" : ""}`}
        >
          {it.label}
        </a>
      ))}
    </nav>
  );
};

/* Nine-pointed star — thin line ornament. Bahá'í symbol drawn from 9 evenly spaced points. */
const NineStar = ({ size = 28, stroke = "currentColor", strokeWidth = 1 }) => {
  const r = 50;
  const cx = 60, cy = 60;
  const points = [];
  for (let i = 0; i < 9; i++) {
    const a = (Math.PI * 2 * i) / 9 - Math.PI / 2;
    points.push([cx + r * Math.cos(a), cy + r * Math.sin(a)]);
  }
  // Connect each point to the one 4 steps away to draw the star's interior lines.
  const lines = [];
  for (let i = 0; i < 9; i++) {
    const j = (i + 4) % 9;
    lines.push([points[i], points[j]]);
  }
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" aria-hidden="true">
      {lines.map(([a, b], i) => (
        <line key={i} x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]} stroke={stroke} strokeWidth={strokeWidth} />
      ))}
    </svg>
  );
};

/* A small centered ornamental rule: hairline – star – hairline. */
const OrnamentRule = ({ width = 220, color = "var(--bd-gold)" }) => (
  <div className="bd-ornament" aria-hidden="true">
    <span className="bd-ornament__line" style={{ width: width / 2 - 18 }} />
    <NineStar size={18} stroke={color} strokeWidth={0.9} />
    <span className="bd-ornament__line" style={{ width: width / 2 - 18 }} />
  </div>
);

/* Header with wordmark + nav. */
const SiteHeader = ({ active, onNavigate, mobile }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <header className={`bd-header ${mobile ? "bd-header--mobile" : ""}`}>
      <a href="#home" onClick={(e) => { e.preventDefault(); onNavigate?.("home"); setMenuOpen(false); }} className="bd-wordmark">
        <NineStar size={mobile ? 22 : 26} stroke="var(--bd-primary)" strokeWidth={1} />
        <span className="bd-wordmark__text">
          <span className="bd-wordmark__top">The Bahá'ís of</span>
          <span className="bd-wordmark__bot">Dublin, California</span>
        </span>
      </a>
      {mobile ? (
        <>
          <button
            className="bd-menu-btn"
            onClick={() => setMenuOpen((v) => !v)}
            aria-label="Menu"
          >
            <span /><span /><span />
          </button>
          {menuOpen && (
            <div className="bd-mobile-menu">
              <NavLinks active={active} onNavigate={(id) => { onNavigate?.(id); setMenuOpen(false); }} variant="mobile" />
            </div>
          )}
        </>
      ) : (
        <NavLinks active={active} onNavigate={onNavigate} />
      )}
    </header>
  );
};

const SiteFooter = ({ onNavigate }) => (
  <footer className="bd-footer">
    <div className="bd-footer__grid">
      <div>
        <h4 className="bd-footer__h">Looking for more?</h4>
        <ul className="bd-footer__list">
          <li><a href="https://www.bahai.org" target="_blank" rel="noreferrer">bahai.org</a></li>
          <li><a href="https://www.bahai.us" target="_blank" rel="noreferrer">bahai.us</a></li>
          <li><a href="https://www.bahai.org/library/" target="_blank" rel="noreferrer">Bahá'í Reference Library</a></li>
        </ul>
      </div>
      <div>
        <h4 className="bd-footer__h">Get in touch</h4>
        <ul className="bd-footer__list">
          <li><a href="mailto:hello@dublincabahais.org">hello@dublincabahais.org</a></li>
          <li>
            <a href="#contact" onClick={(e) => { e.preventDefault(); onNavigate?.("contact"); }}>
              Contact form →
            </a>
          </li>
        </ul>
      </div>
      <div className="bd-footer__star">
        <NineStar size={36} stroke="var(--bd-gold)" strokeWidth={0.8} />
      </div>
    </div>
    <p className="bd-footer__note">
      The Bahá'ís of Dublin, California are part of the worldwide Bahá'í community.
    </p>
  </footer>
);

/* Artwork placeholder slot — designed for child/youth artwork to drop in later. */
const Artwork = ({ ratio = "tall", tone = "default", caption, src, alt }) => {
  const cls = `bd-art bd-art--${ratio} ${tone !== "default" ? `bd-art--${tone}` : ""}`;
  if (src) return <img className={cls} src={src} alt={alt || caption} />;
  return (
    <div className={cls} role="img" aria-label={caption}>
      <span className="bd-art__caption">{caption}</span>
    </div>
  );
};

Object.assign(window, { NavLinks, NineStar, OrnamentRule, SiteHeader, SiteFooter, Artwork });