// Shared components — Nav, Footer, Icon, Button

const Icon = ({ name, size = 20, style }) => (
  <i data-lucide={name} style={{ width: size, height: size, ...style }}></i>
);

const Button = ({ children, variant = 'primary', size, href, onClick, icon, iconRight, type, ...rest }) => {
  const cls = ['btn', `btn-${variant}`, size === 'lg' && 'btn-lg'].filter(Boolean).join(' ');
  const Tag = href ? 'a' : 'button';
  return (
    <Tag className={cls} href={href} onClick={onClick} type={type} {...rest}>
      {icon && <Icon name={icon} size={16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={16} />}
    </Tag>
  );
};

const Nav = ({ currentPage, onNav }) => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); }, [open]);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const go = (key) => { setOpen(false); onNav(key); };

  return (
    <React.Fragment>
      <nav className={`nav ${open ? 'is-open' : ''}`}>
        <div className="container nav-inner">
          <a onClick={() => go('home')} style={{ cursor: 'pointer' }}>
            <img className="logo" src="assets/logo-sc-horizontal.jpg" alt="Soul Center" />
          </a>
          <ul className="nav-links">
            {SC_PAGES.map((p) => (
              <li key={p.key}>
                <a
                  className={currentPage === p.key ? 'active' : ''}
                  onClick={() => go(p.key)}
                >
                  {p.label}
                </a>
              </li>
            ))}
          </ul>
          <div className="nav-right">
            <Button variant="primary" icon="heart" onClick={() => go('dedications')}>
              Dedicate a Space
            </Button>
          </div>
          <button
            type="button"
            className="nav-toggle"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            <Icon name={open ? 'x' : 'menu'} size={26} />
          </button>
        </div>
      </nav>
      {/* Rendered as sibling of <nav> — the nav uses backdrop-filter which traps fixed descendants */}
      <div className={`nav-sheet ${open ? 'is-open' : ''}`} onClick={() => setOpen(false)}>
        <div className="nav-sheet-panel" onClick={e => e.stopPropagation()}>
          <ul>
            {SC_PAGES.map((p) => (
              <li key={p.key}>
                <a
                  className={currentPage === p.key ? 'active' : ''}
                  onClick={() => go(p.key)}
                >
                  {p.label}
                </a>
              </li>
            ))}
          </ul>
          <Button variant="primary" size="lg" icon="heart" onClick={() => go('dedications')}>
            Dedicate a Space
          </Button>
        </div>
      </div>
    </React.Fragment>
  );
};

const Footer = ({ onNav }) => {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">Soul<em>Center</em></div>
            <p className="footer-about">
              Transforming lives through opportunity and inclusion. A project of Friendship Circle of New Jersey.
            </p>
          </div>
          <div>
            <h5>Explore</h5>
            <ul>
              {SC_PAGES.map((p) => (
                <li key={p.key}><a onClick={() => onNav(p.key)}>{p.label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>Get Involved</h5>
            <ul>
              <li><a onClick={() => onNav('dedications')}>Dedicate a space</a></li>
              <li><a href="https://fcnj.com" target="_blank" rel="noopener">Friendship Circle NJ</a></li>
              <li><a href="https://lifetown.com" target="_blank" rel="noopener">LifeTown</a></li>
              <li><a onClick={() => onNav('contact')}>Contact us</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li>16 Microlab Road</li>
              <li>Livingston, NJ 07039</li>
              <li>(973) 251-0200</li>
              <li><a href="mailto:info@soulcenternj.com">info@soulcenternj.com</a></li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <div>© 2026 Soul Center · A project of Friendship Circle NJ · 501(c)(3)</div>
          <div><a>Privacy</a> &nbsp;·&nbsp; <a>Terms</a></div>
        </div>
      </div>
    </footer>
  );
};

const PageHero = ({ eyebrow, title, titleAccent, lead, crumbs, bg }) => (
  <section className={`page-hero ${bg ? 'has-bg' : ''}`}>
    {bg && <div className="page-hero-bg"><img src={bg} alt="" /><div className="page-hero-scrim" /></div>}
    <div className="container">
      {crumbs && <div className="crumbs">{crumbs}</div>}
      <h1>
        {title} {titleAccent && <em>{titleAccent}</em>}
      </h1>
      {lead && <p className="lead">{lead}</p>}
    </div>
  </section>
);

const QuotePull = ({ quote, name, role }) => (
  <div className="quote-pull">
    <div>
      <blockquote>&ldquo;{quote}&rdquo;</blockquote>
      <div className="who"><strong>{name}</strong> · {role}</div>
    </div>
    <div className="portrait">[ portrait photo ]</div>
  </div>
);

const CTABand = ({ title, body, primary, secondary, onNav }) => (
  <div className="cta-band">
    <h2>{title}</h2>
    <p>{body}</p>
    <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
      {primary && <Button variant="secondary" size="lg" icon={primary.icon} onClick={() => onNav(primary.to)}>{primary.label}</Button>}
      {secondary && <Button variant="ghost-light" size="lg" onClick={() => onNav(secondary.to)}>{secondary.label}</Button>}
    </div>
  </div>
);

const fmtMoney = (n) => {
  if (n >= 1000000) return '$' + (n / 1000000) + 'M';
  if (n >= 1000) return '$' + (n / 1000).toLocaleString('en-US', { maximumFractionDigits: 1 }) + 'K';
  return '$' + n.toLocaleString();
};
const fmtMoneyFull = (n) => '$' + n.toLocaleString();

Object.assign(window, { Icon, Button, Nav, Footer, PageHero, QuotePull, CTABand, fmtMoney, fmtMoneyFull });