const IC = './assets/icons/';
const DEST = './assets/destacados/';
const LOGO = './assets/logo/';
const ILU = './assets/illustrations/';
const BRAND = './assets/brand/';
const TIGRE = './assets/tigre/';
const { Button, IconButton, Logo, Icon, Badge } = window.SURASegurosDesignSystem_faeb0e;

const NAV = [
  { id: 'inicio', label: 'Inicio' },
  { id: 'planes', label: 'Planes' },
  { id: 'comparador', label: 'Comparador' },
  { id: 'faq', label: 'Preguntas', screen: 'planes', anchor: 'preguntas-frecuentes' },
  { id: 'cotizar', label: 'Cotizar' }
];

function Header({ screen, go }) {
  const a = window.SURA_DATA.asesora;
  const [open, setOpen] = React.useState(false);
  const nav = (n) => {
    setOpen(false);
    if (n.anchor) {
      go(n.screen);
      setTimeout(() => {
        const el = document.getElementById(n.anchor);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 120);
    } else {
      go(n.id);
    }
  };
  const isActive = (id) => screen === id || (id === 'planes' && screen === 'detalle');
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 20, background: 'oklch(1 0 0 / 0.93)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--space-6)', height: 80, display: 'flex', alignItems: 'center', gap: 'var(--space-8)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', minWidth: 0 }}>
          <img src={a.foto} alt="Ver galería de fotos" className="gallery-trigger" title="Ver galería de fotos"
            onClick={() => window.__abrirGaleria && window.__abrirGaleria(0)}
            style={{ width: 44, height: 44, borderRadius: 'var(--radius-pill)', objectFit: 'cover', objectPosition: '50% 22%', flex: '0 0 auto', cursor: 'pointer' }} />
          <a href="#inicio" onClick={(e) => { e.preventDefault(); nav({ id: 'inicio' }); }} style={{ textDecoration: 'none', minWidth: 0 }}>
            <span style={{ display: 'block', fontSize: 'var(--fs-body)', fontWeight: 'var(--fw-extrabold)', color: 'var(--aqua-sura)', lineHeight: 1.1 }}>{a.nombre}</span>
            <span className="header-subtitle" style={{ display: 'block', fontSize: 'var(--fs-caption)', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Asesora del Canal Especializado en Salud</span>
          </a>
        </div>
        <div className="desktop-nav-group" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-8)', marginLeft: 'auto' }}>
          <nav style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center' }}>
            {NAV.map((n) => (
              <a key={n.id} href={'#' + n.id} onClick={(e) => { e.preventDefault(); nav(n); }}
                style={{ fontSize: 'var(--fs-small)', fontWeight: isActive(n.id) ? 'var(--fw-extrabold)' : 'var(--fw-medium)', color: isActive(n.id) ? 'var(--azul-vivo)' : 'var(--gris-700)', textDecoration: 'none', paddingBottom: 2, borderBottom: `2px solid ${isActive(n.id) ? 'var(--azul-vivo)' : 'transparent'}` }}>
                {n.label}
              </a>
            ))}
          </nav>
          <Button size="sm" variant="accent" onClick={() => go('cotizar')}
            iconLeft={<Icon name="nav/phone-call" size={16} basePath={IC} />}>Escríbeme</Button>
          {/* El logosímbolo SURA va en la parte superior, al costado derecho (Guía de logotipo, p. 7) */}
          <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', paddingLeft: 'var(--space-4)', borderLeft: '1px solid var(--border-default)' }}>
            <span style={{ fontSize: 'var(--fs-overline)', fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-overline)', textTransform: 'uppercase', color: 'var(--text-muted)', lineHeight: 1.3, textAlign: 'right' }}>Asesora<br />autorizada</span>
            <SuraLogoLink direction="down"><Logo width={84} basePath={LOGO} /></SuraLogoLink>
          </span>
        </div>
        <button className="mobile-toggle" aria-label={open ? 'Cerrar menú' : 'Abrir menú'} onClick={() => setOpen((o) => !o)}
          style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', width: 40, height: 40, flex: '0 0 auto' }}>
          <Icon name={open ? 'nav/close' : 'nav/dots-vertical'} size={26} basePath={IC} />
        </button>
      </div>
      {open ? (
        <div className="mobile-nav-panel">
          {NAV.map((n) => (
            <a key={n.id} href={'#' + n.id} onClick={(e) => { e.preventDefault(); nav(n); }}
              style={{ fontSize: 'var(--fs-body)', fontWeight: isActive(n.id) ? 'var(--fw-extrabold)' : 'var(--fw-semibold)', color: isActive(n.id) ? 'var(--azul-vivo)' : 'var(--text-body)', textDecoration: 'none', padding: 'var(--space-3) 0', borderBottom: '1px solid var(--border-subtle)' }}>
              {n.label}
            </a>
          ))}
          <Button variant="accent" onClick={() => { setOpen(false); go('cotizar'); }} style={{ marginTop: 'var(--space-4)' }}
            iconLeft={<Icon name="nav/phone-call" size={16} basePath={IC} />}>Escríbeme por WhatsApp</Button>
        </div>
      ) : null}
    </header>
  );
}

function Footer({ go }) {
  const d = window.SURA_DATA;
  const a = d.asesora;
  return (
    <footer style={{ background: 'var(--aqua-sura)', color: 'var(--blanco)', marginTop: 'var(--space-24)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-16) var(--space-6) var(--space-10)', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 'var(--space-12)' }}>
        <div>
          <div style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-extrabold)', color: 'var(--blanco)' }}>{a.nombre}</div>
          <p style={{ marginTop: 'var(--space-4)', maxWidth: '38ch', color: 'oklch(1 0 0 / 0.82)' }}>
            Asesora autorizada de Seguros SURA · Planes voluntarios de salud para {a.ciudad} y todo el país.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginTop: 'var(--space-6)' }}>
            <SuraLogoLink direction="up"><Logo color="blanco" width={96} basePath={LOGO} /></SuraLogoLink>
            <span className="sura-tagline" style={{ fontSize: 'var(--fs-h4)', color: 'var(--amarillo-alegre)' }}>Asegúrate de vivir</span>
          </div>
        </div>
        <div>
          <div className="sura-overline" style={{ color: 'var(--comp-azul-claro)' }}>Planes que manejo</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 'var(--space-4) 0 0', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
            {d.familias.map((f) => (
              <li key={f.id}><a href="#planes" onClick={(e) => { e.preventDefault(); go('planes'); }} style={{ color: 'var(--blanco)' }}>{f.label}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <div className="sura-overline" style={{ color: 'var(--comp-azul-claro)' }}>Contacto</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 'var(--space-4) 0 0', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', color: 'oklch(1 0 0 / 0.86)' }}>
            <li><a href={a.whatsapp} target="_blank" rel="noopener" style={{ color: 'var(--blanco)' }}>WhatsApp {a.telefono}</a></li>
            <li><a href={a.instagram} target="_blank" rel="noopener" style={{ color: 'var(--blanco)' }}>Instagram: {a.instagramHandle}</a></li>
            <li><a href={a.youtube} target="_blank" rel="noopener" style={{ color: 'var(--blanco)' }}>YouTube: Mariangel Asesora SURA</a></li>
            <li><a href={a.tiktok} target="_blank" rel="noopener" style={{ color: 'var(--blanco)' }}>TikTok: {a.tiktokHandle}</a></li>
            <li><a href={'mailto:' + a.correo} style={{ color: 'var(--blanco)' }}>{a.correo}</a></li>
            <li><a href={d.directorio} target="_blank" rel="noopener" style={{ color: 'var(--amarillo-alegre)' }}>Directorio médico SURA</a></li>
          </ul>
        </div>
      </div>
      <div style={{ borderTop: '1px solid oklch(1 0 0 / 0.16)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-6) var(--space-6) var(--space-12)', fontSize: 'var(--fs-caption)', color: 'oklch(1 0 0 / 0.66)', display: 'grid', gap: 'var(--space-3)' }}>
          <span>{d.disclaimer}</span>
          <span>Tarifas 2026 en pesos colombianos, incluyen IVA y aplican a partir del 01 de enero de 2026. · sura.co/seguros</span>
        </div>
      </div>
    </footer>
  );
}

function Section({ children, tone = 'blanco', style }) {
  const bg = { blanco: 'var(--blanco)', suave: 'var(--fondo-azul)', roto: 'var(--fondo-blanco)', aqua: 'var(--fondo-aqua)', azul: 'var(--azul-vivo)' }[tone];
  return (
    <section style={{ background: bg, padding: 'var(--section-y) 0', ...style }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--space-6)' }}>{children}</div>
    </section>
  );
}

function SectionHead({ overline, title, lead, align = 'left' }) {
  return (
    <div style={{ maxWidth: align === 'center' ? '60ch' : '46ch', margin: align === 'center' ? '0 auto var(--space-12)' : '0 0 var(--space-12)', textAlign: align }}>
      {overline ? <div className="sura-overline">{overline}</div> : null}
      <h2 style={{ marginTop: 'var(--space-3)' }}>{title}</h2>
      {lead ? <p className="sura-lead" style={{ marginTop: 'var(--space-4)', color: 'var(--text-muted)' }}>{lead}</p> : null}
    </div>
  );
}

function GalleryModal() {
  const [open, setOpen] = React.useState(false);
  const [index, setIndex] = React.useState(0);
  const fotos = window.SURA_DATA.galeria;

  React.useEffect(() => {
    window.__abrirGaleria = (i) => { setIndex(i || 0); setOpen(true); };
    return () => { delete window.__abrirGaleria; };
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setOpen(false);
      if (e.key === 'ArrowRight') setIndex((i) => (i + 1) % fotos.length);
      if (e.key === 'ArrowLeft') setIndex((i) => (i - 1 + fotos.length) % fotos.length);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, fotos.length]);

  if (!open) return null;
  const foto = fotos[index];

  return (
    <div className="gallery-modal" role="dialog" aria-modal="true" aria-label="Galería de fotos" onClick={() => setOpen(false)}>
      <button className="gallery-close" aria-label="Cerrar galería" onClick={(e) => { e.stopPropagation(); setOpen(false); }}>
        <Icon name="nav/close" size={22} basePath={IC} />
      </button>
      <button className="gallery-arrow left" aria-label="Foto anterior"
        onClick={(e) => { e.stopPropagation(); setIndex((i) => (i - 1 + fotos.length) % fotos.length); }}>‹</button>
      <figure className="gallery-figure" onClick={(e) => e.stopPropagation()}>
        <img src={'./assets/fotos/' + foto.file} alt={foto.cap} />
        <figcaption>{foto.cap}<span className="gallery-count">{index + 1} / {fotos.length}</span></figcaption>
      </figure>
      <button className="gallery-arrow right" aria-label="Foto siguiente"
        onClick={(e) => { e.stopPropagation(); setIndex((i) => (i + 1) % fotos.length); }}>›</button>
    </div>
  );
}

function SuraLogoLink({ children, direction = 'down' }) {
  return (
    <a href="https://www.sura.co/" target="_blank" rel="noopener"
      className="sura-logo-link" aria-label="Ir a la página principal de SURA">
      {children}
      <span className={'sura-logo-tooltip ' + direction}>¿Ir a la página principal de SURA?</span>
    </a>
  );
}

Object.assign(window, { Header, Footer, Section, SectionHead, GalleryModal, SuraLogoLink, IC, DEST, LOGO, ILU, BRAND, TIGRE, NAV });