/**
 * Site chrome — header, footer, hero, shared atoms.
 * Exposes components to window for use in pages.jsx + app.jsx
 */

const ASSETS = './assets/';

/* ───────── Header ───────── */
function SiteHeader({ route, onNav }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const items = [
    { id: 'home',     label: 'Home' },
    { id: 'about',    label: 'What We Do' },
    { id: 'why',      label: 'Why' },
    { id: 'clients',  label: 'Clients' },
    { id: 'contact',  label: 'Contact' },
  ];
  const go = (id) => { setMenuOpen(false); onNav(id); };
  // Close menu on route change
  React.useEffect(() => { setMenuOpen(false); }, [route]);
  return (
    <header className="site-header">
      <div className="site-header-inner">
        <a className="site-logo" onClick={() => go('home')}>
          <img src={`${ASSETS}logo-mark-transparent.png`} alt="" />
          <div>
            <div className="name">Black <span className="gold">Frame</span> Media</div>
            <div className="tag">Bringing Brands Into Focus</div>
          </div>
        </a>
        <nav className={`site-nav ${menuOpen ? 'open' : ''}`}>
          {items.map(it => (
            <a key={it.id}
               className={route === it.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); go(it.id); }}>
              {it.label}
            </a>
          ))}
        </nav>
        <button className="site-cta" onClick={() => go('contact')}>Book A Call</button>
        <button className="nav-toggle" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
          {menuOpen ? (
            <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
          ) : (
            <svg viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg>
          )}
        </button>
      </div>
    </header>
  );
}

/* ───────── Footer ───────── */
function SiteFooter({ onNav }) {
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <div className="footer-brand">
          <div className="lock">
            <img src={`${ASSETS}logo-mark-transparent.png`} alt="" />
            <div className="name">Black <span className="yellow">Frame</span><br/>Media</div>
          </div>
          <p>A studio bringing brands into focus. Social media management, content creation, video & brand visibility — built around the way your business actually works.</p>
        </div>
        <div className="footer-col">
          <h5>Services</h5>
          <ul>
            <li><a onClick={() => onNav('why')}>Social Media</a></li>
            <li><a onClick={() => onNav('why')}>Content Creation</a></li>
            <li><a onClick={() => onNav('why')}>Video & Reels</a></li>
            <li><a onClick={() => onNav('why')}>Brand Visibility</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Studio</h5>
          <ul>
            <li><a onClick={() => onNav('about')}>What We Do</a></li>
            <li><a onClick={() => onNav('clients')}>Clients</a></li>
            <li><a onClick={() => onNav('why')}>Our Approach</a></li>
            <li><a onClick={() => onNav('contact')}>Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Follow</h5>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">TikTok</a></li>
            <li><a href="#">LinkedIn</a></li>
            <li><a href="#">Newsletter</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-rule"></div>
      <div className="footer-legal">
        <span>© Black Frame Media — All Rights Reserved</span>
        <span>Bringing Brands Into Focus</span>
      </div>
    </footer>
  );
}

/* ───────── Page Banner (used on inner pages) ───────── */
function PageBanner({ eyebrow, title, titleAlt, subtitle }) {
  return (
    <section className="page-banner">
      <div className="eyebrow"><span></span>{eyebrow}<span></span></div>
      <h1>{title} {titleAlt && <span className="alt">{titleAlt}</span>}</h1>
      {subtitle && <p className="sub">{subtitle}</p>}
    </section>
  );
}

/* ───────── Hero (home only) ───────── */
function HeroBlock({ onNav }) {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div>
          <div className="eyebrow-row">Bringing Brands Into Focus</div>
          <h1>We're <span className="alt">Live.</span></h1>
          <p className="hero-lede">
            We create content and manage social media that helps businesses grow their
            presence, <b>connect</b> with their audience and <b>achieve</b> results.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={() => onNav('contact')}>Book A Call</button>
            <button className="btn btn-outline" onClick={() => onNav('clients')}>See Our Work →</button>
          </div>
        </div>
        <div className="hero-art">
          <div className="marquee"><span className="dot"></span>Now Booking — Q3</div>
          <div className="stamp">
            <img src={`${ASSETS}logo-mark-transparent.png`} alt="" className="mark" />
          </div>
          <div className="label">
            <div className="word">Black <span className="gold">Frame</span> Media</div>
            <div className="tag"><span></span>Bringing Brands Into Focus<span></span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── CTA Strip ───────── */
function CTAStrip({ onNav, headline = ['Let\'s go', 'live.'], punch = "We're ready when you are.", cta = 'Start Your Project' }) {
  return (
    <section className="cta-strip">
      <h2>{headline[0]} <span className="alt">{headline[1]}</span></h2>
      <div className="punch">{punch}</div>
      <button className="btn btn-yellow" onClick={() => onNav('contact')}>{cta}</button>
    </section>
  );
}

/* ───────── Toast ───────── */
function Toast({ message, visible }) {
  return <div className={`toast ${visible ? 'show' : ''}`}>{message}</div>;
}

/* expose */
Object.assign(window, {
  SiteHeader, SiteFooter, PageBanner, HeroBlock, CTAStrip, Toast,
  BFM_ASSETS: ASSETS,
});