// ============================================================
// TSP Website — Shared chrome (multipage): Header, Footer,
// PageHeader (inner-page banner), CTABand
// ============================================================
const PAGES = [
  { key: 'inicio', label: 'Inicio', href: 'index.html' },
  { key: 'servicios', label: 'Servicios', href: 'servicios.html' },
  { key: 'modelo', label: 'Modelo', href: 'modelo.html' },
  { key: 'sectores', label: 'Sectores', href: 'sectores.html' },
  { key: 'equipo', label: 'Equipo', href: 'equipo.html' },
];

function Header({ active }) {
  const [open, setOpen] = useState(false);
  return (
    <header className={'header' + (open ? ' open' : '')}>
      <div className="wrap header-in">
        <a className="brand" href="index.html">
          <img src="assets/tsp-badge.png" alt="TSP" />
          <div className="brand-name">Transformación Social Positiva
            <small>Asuntos públicos · Estrategia · Incidencia</small>
          </div>
        </a>
        <nav className="nav">
          {PAGES.map(p => (
            <a key={p.key} href={p.href} className={active === p.key ? 'active' : ''}>{p.label}</a>
          ))}
          <a className="nav-cta" href="contacto.html">Contactar</a>
        </nav>
        <button className="menu-btn" onClick={() => setOpen(o => !o)} aria-label="Menú">
          <Icon name={open ? 'x' : 'menu'} size={26} />
        </button>
      </div>
      {open && (
        <div className="wrap">
          <div className="mobile-nav">
            {PAGES.map(p => (
              <a key={p.key} href={p.href} className={active === p.key ? 'active' : ''}>{p.label}</a>
            ))}
            <a href="contacto.html">Contactar</a>
          </div>
        </div>
      )}
    </header>
  );
}

// Inner-page banner: eyebrow + title + lead, light band with amber rule
function PageHeader({ eyebrow, title, lead, amberWord }) {
  let titleNode = title;
  if (amberWord && typeof title === 'string' && title.includes(amberWord)) {
    const [a, b] = title.split(amberWord);
    titleNode = <>{a}<span className="amber">{amberWord}</span>{b}</>;
  }
  return (
    <section className="page-header">
      <div className="wrap">
        <span className="eyebrow">{eyebrow}</span>
        <h1>{titleNode}</h1>
        <div className="ph-rule"></div>
        {lead && <p className="lead">{lead}</p>}
      </div>
    </section>
  );
}

// Reusable closing CTA before footer
function CTABand() {
  return (
    <section className="cta-band">
      <div className="wrap cta-band-in">
        <div>
          <span className="eyebrow" style={{ color: 'var(--tsp-amber-bright)' }}>Hablemos</span>
          <h2>Convirtamos su entorno en una ventaja estratégica.</h2>
        </div>
        <div className="cta-band-actions">
          <Button variant="accent" icon="arrowRight" href="contacto.html">Agendar diagnóstico</Button>
          <Button variant="ghost-light" href="servicios.html">Ver servicios</Button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <a className="brand" href="index.html">
              <img src="assets/tsp-badge.png" alt="TSP" style={{ height: '40px' }} />
              <div className="brand-name">Transformación Social Positiva</div>
            </a>
            <p className="footer-blurb">Consultoría boutique en asuntos públicos, estrategia e incidencia. Parte de Grupo Psiquepol.</p>
          </div>
          <div className="footer-col">
            <h5>Servicios</h5>
            <a href="servicios.html">Inteligencia y Análisis</a>
            <a href="servicios.html">Estrategia e Incidencia</a>
            <a href="servicios.html">Gestión de Entornos</a>
          </div>
          <div className="footer-col">
            <h5>Firma</h5>
            <a href="modelo.html">El Modelo TSP</a>
            <a href="sectores.html">Sectores</a>
            <a href="equipo.html">Equipo y principios</a>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <a href="mailto:contacto@tspositiva.com">contacto@tspositiva.com</a>
            <a href="contacto.html">+52 55 0000 0000</a>
            <a href="contacto.html">Ciudad de México</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Transformación Social Positiva · Grupo Psiquepol</span>
          <span>Legalidad · Rigor · Confidencialidad</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, PageHeader, CTABand, Footer });