const { Button, Card, Badge, Icon, Destacado, Tag } = window.SURASegurosDesignSystem_faeb0e;
const { PlanCard, BenefitList } = window.SURASegurosDesignSystem_faeb0e;

function Hero({ go }) {
  const a = window.SURA_DATA.asesora;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--fondo-azul)' }}>
      <div className="hero-bg-panel" style={{ position: 'absolute', top: 0, right: 0, width: '46%', height: '100%', background: 'var(--azul-vivo)', borderBottomLeftRadius: '42% 70%' }} />
      <div className="r-grid" style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-16) var(--space-6) var(--space-20)', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-12)', alignItems: 'center' }}>
        <div>
          <div className="sura-overline">Asesora del Canal Especializado en Salud</div>
          <h1 className="sura-display" style={{ marginTop: 'var(--space-4)' }}>{a.nombre}</h1>
          <p className="sura-lead" style={{ marginTop: 'var(--space-5)', maxWidth: '44ch', color: 'var(--gris-700)' }}>
            Con más de 9 años de experiencia, acompaño a personas, familias y empresas en la elección de Planes Voluntarios de Salud y EPS; brindando una orientación clara, personalizada y cercana. Te ayudo a comprender las coberturas, beneficios y opciones que complementan tu EPS, acompañándote antes y después de la afiliación.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap' }}>
            <Button size="lg" onClick={() => go('planes')}>Ver los planes que manejo</Button>
            <Button size="lg" variant="secondary" onClick={() => go('cotizar')}>Comenzar asesoría</Button>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-6)', marginTop: 'var(--space-10)', flexWrap: 'wrap', color: 'var(--gris-700)', fontSize: 'var(--fs-small)' }}>
            {[['nav/phone-call', a.telefono], ['nav/contact-book', a.correo], ['nav/location-pin', a.ciudad], ['nav/globe-network', 'Afiliación para todas las ciudades con cobertura']].map(([ic, t]) => (
              <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
                <span style={{ color: 'var(--azul-vivo)' }}><Icon name={ic} size={20} basePath={IC} /></span>{t}
              </span>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
          <img src="./assets/fotos/mariangel-hero.jpg" alt={a.nombre} className="gallery-trigger" title="Ver galería de fotos"
            onClick={() => window.__abrirGaleria && window.__abrirGaleria(0)}
            style={{ width: '100%', maxWidth: 360, aspectRatio: '4 / 5', objectFit: 'cover', objectPosition: '50% 32%', borderRadius: '46% 46% 8% 8% / 22% 22% 6% 6%', boxShadow: 'var(--shadow-lg)', cursor: 'pointer' }} />
          <button className="gallery-badge" title="Ver galería de fotos" aria-label="Ver galería de fotos"
            onClick={() => window.__abrirGaleria && window.__abrirGaleria(0)}
            style={{ position: 'absolute', top: 22, right: 'calc(50% - 160px)' }}>
            <Icon name="nav/image" size={18} basePath={IC} />
          </button>
          <div style={{ position: 'absolute', bottom: 18, left: 'calc(50% - 180px)', background: 'var(--amarillo-alegre)', color: 'var(--aqua-sura)', borderRadius: 'var(--radius-pill)', padding: 'var(--space-3) var(--space-5)', fontSize: 'var(--fs-small)', fontWeight: 'var(--fw-extrabold)', boxShadow: 'var(--shadow-md)' }}>
            Asesoría sin costo
          </div>
        </div>
      </div>
      <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--space-6) var(--space-8)' }}>
        <p style={{ margin: 0, fontSize: 'var(--fs-caption)', color: 'var(--gris-700)', maxWidth: '86ch' }}>
          Sitio personal de la asesora autorizada del Canal Especializado en Salud Mariangel Pérez.
        </p>
      </div>
    </section>
  );
}

function Razones() {
  const r = window.SURA_DATA.razones;
  return (
    <Section tone="roto">
      <div className="r-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-16)', alignItems: 'start' }}>
        <div>
          <Destacado shape="square" color="azul-vivo" size={180} basePath={DEST} contentStyle={{ fontSize: 'var(--fs-body)' }}>
            <span style={{ fontSize: 56, display: 'block', lineHeight: 1 }}>7</span>
            características
          </Destacado>
          <h2 style={{ marginTop: 'var(--space-8)' }}>Lo que hace único al Plan de Salud Modular</h2>
          <p style={{ marginTop: 'var(--space-4)', color: 'var(--text-muted)' }}>
            Siete razones que lo diferencian en el mercado, tomadas del comparativo oficial de planes de salud SURA.
          </p>
        </div>
        <div className="r-grid-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
          {r.map((x) => (
            <Card key={x.titulo} padding="var(--space-6)" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <span style={{ color: 'var(--azul-vivo)' }}><Icon name={x.icon} size={32} basePath={IC} /></span>
              <h4 style={{ fontSize: 'var(--fs-body)' }}>{x.titulo}</h4>
              <p style={{ margin: 0, fontSize: 'var(--fs-small)', color: 'var(--text-muted)', lineHeight: 'var(--lh-snug)' }}>{x.texto}</p>
            </Card>
          ))}
        </div>
      </div>
    </Section>
  );
}

const PLAN_BG = {
  modular: 'var(--fondo-azul)',
  preferencial: 'var(--fondo-gris-aqua)',
  plus: 'var(--fondo-lima)',
  sesenta: 'var(--fondo-aqua)'
};

function PlanesDestacados({ go }) {
  const planes = window.SURA_DATA.planes;
  return (
    <Section>
      <SectionHead overline="Las soluciones en salud que tengo para ti" title="Cuatro caminos, una sola idea: cuidarte" lead="Cada producto resuelve necesidades distintas según tu momento de vida." />
      <div className="r-grid-plans" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,minmax(0,1fr))', gap: 'var(--space-5)', alignItems: 'stretch' }}>
        {planes.map((p) => (
          <PlanCard key={p.id} name={p.nombre} description={p.audiencia}
            price={p.precio} priceNote={p.nota}
            ctaLabel="Ver coberturas" basePath={IC}
            style={{ background: PLAN_BG[p.id] || 'var(--fondo-azul)', border: '1px solid transparent' }}
            onSelect={() => go('detalle', p.id)} />
        ))}
      </div>
      <div style={{ marginTop: 'var(--space-8)', display: 'flex', justifyContent: 'center' }}>
        <Button variant="secondary" size="lg" onClick={() => go('comparador')}>Comparar dos planes lado a lado</Button>
      </div>
    </Section>
  );
}

function Directorio() {
  const d = window.SURA_DATA;
  return (
    <Section tone="aqua">
      <div className="r-grid r-reverse" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-12)', alignItems: 'center' }}>
        <div style={{ display: 'grid', placeItems: 'end center' }}>
          <img src={TIGRE + 'tigre-mostrando.png'} alt="" style={{ width: '72%', maxWidth: 240 }} />
        </div>
        <div>
          <div className="sura-overline">Red de atención</div>
          <h2 style={{ marginTop: 'var(--space-3)' }}>Directorio médico</h2>
          <p className="sura-lead" style={{ marginTop: 'var(--space-4)', color: 'var(--gris-700)', maxWidth: '46ch' }}>
            Verifica la red de atención de cada plan por ciudad y por cobertura:
          </p>
          <div style={{ marginTop: 'var(--space-5)' }}>
            <BenefitList columns={2} basePath={IC} items={[
              { text: 'Listado de especialistas', icon: 'salud/stethoscope' },
              { text: 'Red de urgencias', icon: 'salud/ambulance' },
              { text: 'Convenios para habitación individual', icon: 'salud/hospital-bed' },
              { text: 'Directorio de atención domiciliaria', icon: 'salud/home-care' }
            ]} />
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap', alignItems: 'center' }}>
            <Button href={d.directorio} target="_blank" rel="noopener" iconRight={<Icon name="nav/globe-network" size={18} basePath={IC} />}>
              Abrir el directorio médico
            </Button>
            <span style={{ fontSize: 'var(--fs-caption)', color: 'var(--gris-700)' }}>directoriomedico.segurossura.com.co</span>
          </div>
        </div>
      </div>
    </Section>
  );
}

function Pasos({ go }) {
  const pasos = ['Elegimos juntos el plan ideal', 'Recibes la cotización en tu correo', 'Realizas la firma virtual de aceptación', 'SURA confirma tu afiliación', 'Te explico cómo pagar y usar tu plan'];
  return (
    <section style={{ background: 'var(--azul-vivo)', color: 'var(--blanco)', padding: 'var(--section-y) 0' }}>
      <div className="r-grid r-reverse" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--space-6)', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
        <img src={ILU + 'seguro-activo-4-pasos.png'} alt="" style={{ width: '100%', borderRadius: 'var(--radius-xl)' }} />
        <div>
          <h2 style={{ color: 'var(--blanco)' }}>¡Afiliarte es muy fácil! Yo te acompaño paso a paso</h2>
          <ol style={{ listStyle: 'none', padding: 0, margin: 'var(--space-8) 0 0', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            {pasos.map((p, i) => (
              <li key={p} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', fontSize: 'var(--fs-lead)' }}>
                <span style={{ width: 36, height: 36, flex: '0 0 auto', borderRadius: 'var(--radius-pill)', background: 'var(--amarillo-alegre)', color: 'var(--aqua-sura)', display: 'grid', placeItems: 'center', fontWeight: 'var(--fw-extrabold)' }}>{i + 1}</span>
                {p}
              </li>
            ))}
          </ol>
          <div className="sura-tagline" style={{ fontSize: 'var(--fs-h3)', color: 'var(--amarillo-alegre)', marginTop: 'var(--space-8)' }}>Todo el proceso es virtual y se realiza vía correo electrónico</div>
          <div style={{ marginTop: 'var(--space-8)' }}>
            <Button variant="inverse" size="lg" onClick={() => go('cotizar')}>Empezar ahora</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Asesora({ go }) {
  const a = window.SURA_DATA.asesora;
  return (
    <Section tone="suave">
      <div className="r-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
        <div>
          <div className="sura-overline">¿Por qué debería ser tu asesora?</div>
          <h2 style={{ marginTop: 'var(--space-3)' }}>Una asesora, no un formulario</h2>
          <p className="sura-lead" style={{ marginTop: 'var(--space-4)', color: 'var(--gris-700)', maxWidth: '44ch' }}>
            No se trata solo de tener un plan de salud, sino de saber cómo aprovecharlo. Con mi asesoría entenderás bien los servicios de tu EPS y tu plan para utilizarlos de manera adecuada cuando más lo necesites.
          </p>
          <div style={{ marginTop: 'var(--space-6)' }}>
            <BenefitList basePath={IC} items={[
              { text: 'Comparación honesta entre los planes de salud', icon: 'nav/check-double' },
              { text: 'Acompañamiento en la afiliación y posterior uso del plan', icon: 'salud/first-aid-kit' },
              { text: 'Acompañamiento y orientación por WhatsApp o llamada', icon: 'nav/phone-call' }
            ]} />
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap' }}>
            <Button onClick={() => go('cotizar')}>Comenzar asesoría</Button>
          </div>
        </div>
        <div style={{ display: 'grid', placeItems: 'center' }}>
          <img src="./assets/fotos/mariangel-asesora.jpg" alt={a.nombre} style={{ width: '100%', maxWidth: 320, aspectRatio: '4 / 5', objectFit: 'cover', objectPosition: '50% 26%', borderRadius: 'var(--radius-2xl)', boxShadow: 'var(--shadow-md)' }} />
        </div>
      </div>
    </Section>
  );
}

const VIDEOS = [
  { id: 'IwNHPQBq1jQ', titulo: 'Conoce el NUEVO PLAN de SURA Salud para Todos' },
  { id: 'BcvxP99Dw3I', titulo: '¡Plan Salud para Todos: Ahorra un mes al año!' },
  { id: 'pYdZu-fuQZI', titulo: 'Diferencias entre el Plan Salud para Todos y Salud para Dos' },
  { id: 'KJgQIlwFN1k', titulo: '¿No te puedes asegurar después de los 60?' }
];

function Videos() {
  const a = window.SURA_DATA.asesora;
  return (
    <Section tone="suave">
      <SectionHead overline="Mi canal" title="Míralo en video" lead="Explico los planes y resuelvo dudas frecuentes en mi canal de YouTube." />
      <div className="r-grid-videos" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,minmax(0,1fr))', gap: 'var(--space-5)' }}>
        {VIDEOS.map((v) => (
          <div key={v.id}>
            <div style={{ position: 'relative', width: '100%', aspectRatio: '9 / 16', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', background: '#000' }}>
              <iframe src={'https://www.youtube.com/embed/' + v.id} title={v.titulo} loading="lazy"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }} />
            </div>
            <p style={{ marginTop: 'var(--space-3)', fontSize: 'var(--fs-small)', color: 'var(--text-body)', lineHeight: 'var(--lh-snug)' }}>{v.titulo}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'var(--space-8)', display: 'flex', justifyContent: 'center' }}>
        <Button variant="secondary" size="lg" href={a.youtube} target="_blank" rel="noopener" iconRight={<Icon name="nav/globe-network" size={18} basePath={IC} />}>
          Ver más videos en YouTube
        </Button>
      </div>
    </Section>
  );
}

const LOGROS_LAYOUT = {
  'logro-premio-escenario.jpg': 'tall',
  'logro-reconocimiento-sanandres.jpg': 'wide',
  'logro-bienvenida-juandolio.jpg': 'wide'
};

function Logros() {
  const galeria = window.SURA_DATA.galeria;
  const logros = galeria.filter((f) => f.file.startsWith('logro-'));
  return (
    <Section tone="roto">
      <SectionHead overline="Trayectoria" title="Reconocimientos y logros" lead="Más de 9 años acompañando personas y familias, reconocidos por SURA a nivel nacional. Toca una foto para ver la galería completa." />
      <div className="logros-grid">
        {logros.map((l) => {
          const layout = LOGROS_LAYOUT[l.file];
          const globalIndex = galeria.findIndex((g) => g.file === l.file);
          return (
            <div key={l.file} className={'logro-item' + (layout ? ' ' + layout : '')}
              onClick={() => window.__abrirGaleria && window.__abrirGaleria(globalIndex)}>
              <img src={'./assets/fotos/' + l.file} alt={l.cap} loading="lazy" />
              <span className="logro-cap">{l.cap}</span>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

function Home({ go }) {
  return (
    <div>
      <Hero go={go} />
      <PlanesDestacados go={go} />
      <Razones />
      <Directorio />
      <Pasos go={go} />
      <Asesora go={go} />
      <Videos />
      <Logros />
    </div>
  );
}

Object.assign(window, { Home, Hero, Razones, PlanesDestacados, Directorio, Pasos, Asesora, Videos, Logros });