/* ════════════════════════════════════════════════════════════
   ACTUARIA ACADEMY — Landing components
   ════════════════════════════════════════════════════════════ */
const { useState } = React;

const ZOOM_URL = "https://us06web.zoom.us/webinar/register/WN_YukE58HuRR6GHuH0yagGgA";
const openZoom = () => window.open(ZOOM_URL, "_blank", "noopener");

/* ---- Lucide-style icon ---- */
function Ico({ paths, size = 24, sw = 1.75, fill = "none" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
    strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths.map((p, i) =>
      p.c ? <circle key={i} cx={p.c[0]} cy={p.c[1]} r={p.c[2]} /> :
      p.r ? <rect key={i} x={p.r[0]} y={p.r[1]} width={p.r[2]} height={p.r[3]} rx={p.r[4] || 0} /> :
      <path key={i} d={p} />
      )}
    </svg>);

}
const I = {
  calendar: [{ r: [3, 4, 18, 18, 2] }, "M16 2v4M8 2v4M3 10h18", "M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"],
  clock: [{ c: [12, 12, 9] }, "M12 7v5l3.5 2"],
  monitor: [{ r: [2, 3.5, 20, 14, 2] }, "M8 21h8M12 17.5V21"],
  check: ["M20 6L9 17l-5-5"],
  arrow: ["M5 12h14M13 6l6 6-6 6"],
  play: ["M7 4.5v15l12-7.5z"],
  video: [{ r: [2, 6, 13, 12, 2] }, "M22 8.5l-7 3.5 7 3.5v-7z"],
  mail: [{ r: [2, 4, 20, 16, 2] }, "M2 7l10 6 10-6"],
  whatsapp: ["M12 3a9 9 0 00-7.8 13.5L3 21l4.7-1.2A9 9 0 1012 3z", "M8.5 8.8c.2-.5.4-.5.6-.5h.5c.2 0 .4 0 .6.5l.6 1.5c.1.2 0 .4-.1.5l-.5.6c-.1.1-.2.3-.1.5.2.5.7 1.2 1.3 1.6.5.4 1 .6 1.3.7.2 0 .3 0 .4-.1l.6-.7c.2-.2.4-.2.6-.1l1.4.7c.2.1.3.3.3.4 0 .4-.2.9-.6 1.1-.4.3-1 .5-1.6.4-1.4-.2-2.8-1-3.9-2.1-1.1-1.1-1.9-2.5-2.1-3.9-.1-.6.1-1.1.3-1.5z"],
  shield: ["M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", "M9 12l2 2 4-4"],
  book: ["M4 5a2 2 0 012-2h13v16H6a2 2 0 00-2 2V5z", "M4 19a2 2 0 012-2h13"],
  chat: ["M21 11.5a8 8 0 01-11.5 7.2L3 21l2.3-6.5A8 8 0 1121 11.5z", "M8.5 12h.01M12 12h.01M15.5 12h.01"],
  chevron: ["M6 9l6 6 6-6"],
  caretL: ["M15 5l-7 7 7 7"],
  caretR: ["M9 5l7 7-7 7"],
  user: ["M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", { c: [12, 8, 4] }],
  spark: ["M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"],
  facebook: ["M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"],
  instagram: [{ r: [2, 2, 20, 20, 5] }, "M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z", "M17.5 6.5h.01"],
  linkedin: ["M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6z", { r: [2, 9, 4, 12, 0] }, { c: [4, 4, 2] }]
};
const Icon = (props) => <Ico paths={I[props.name]} {...props} />;

/* ---- Actuaria iso (sail/compass mark) ---- */
function IsoMark({ size = 34 }) {
  const h = size,w = 27 / 38 * size;
  return (
    <svg width={w} height={h} viewBox="0 0 27 38" fill="none" aria-hidden="true">
      <path d="M0 26.3313H10.2925V7.1817C10.2925 7.1817 8.3217 16.7542 0 26.3313Z" fill="#E0592A" />
      <path d="M12.0833 0C20.4512 2.88006 26.4467 10.1817 26.4467 19.3204C26.4467 21.7758 26.0128 24.1343 25.219 26.3267H12.088V0H12.0833Z" fill="#151f47" />
      <path d="M5.14629 37.6992C12.9095 37.6992 20.6635 33.8499 24.2959 28.1267H5.14629V37.6992Z" fill="#385CAD" />
    </svg>);

}

/* ---- Academy lockup ---- */
function Lockup({ markSize = 36, light = false }) {
  return (
    <div className="lockup">
      <span className="lockup__mark"><IsoMark size={markSize} /></span>
      <span className="lockup__txt">
        <span className="lockup__a" style={light ? { color: "#fff" } : null}>Actuaria</span>
        <span className="lockup__b" style={light ? { color: "#fff" } : null}>Academy</span>
        <span className="lockup__sub">Masterclasses 2026</span>
      </span>
    </div>);

}

/* ---- Actuaria Academy full logo lockup (image) ---- */
function LogoAA({ height = 46, className = "" }) {
  return (
    <img
      className={"logo-aa " + className}
      src={window.__resources && window.__resources.aaLogo || "assets/aa-logo.png"}
      alt="Actuaria Academy · Masterclasses 2026"
      style={{ height, width: "auto", display: "block" }} />);


}

/* ---- Decorative motif (sail shapes + circles, like the invitation) ---- */
function Motif({ variant = "hero", show = true }) {
  if (!show) return null;
  const mist = "#d0d8f5",sky = "#a1b0eb",peach = "#f6dccf",indigo = "#4c64d9";
  if (variant === "hero") {
    return (
      <div className="motif" aria-hidden="true">
        <svg width="520" height="520" style={{ top: -160, right: -120 }} viewBox="0 0 520 520">
          <circle cx="260" cy="260" r="258" fill="none" stroke={mist} strokeWidth="2" />
          <circle cx="260" cy="260" r="180" fill="none" stroke={sky} strokeWidth="2" opacity=".7" />
        </svg>
        <svg width="300" height="300" style={{ bottom: -90, left: -70 }} viewBox="0 0 300 300">
          <circle cx="150" cy="150" r="150" fill={peach} opacity=".55" />
        </svg>
        <svg width="150" height="150" style={{ top: "44%", left: "46%" }} viewBox="0 0 150 150">
          <circle cx="75" cy="75" r="75" fill={mist} opacity=".5" />
        </svg>
        {/* sail shapes */}
        <svg width="120" height="160" style={{ top: 70, right: "34%", transform: "rotate(8deg)" }} viewBox="0 0 27 38">
          <path d="M12.0833 0C20.4512 2.88 26.4467 10.18 26.4467 19.32C26.4467 21.78 26.01 24.13 25.22 26.33H12.09V0H12.08Z" fill={sky} opacity=".4" />
          <path d="M0 26.33H10.29V7.18C10.29 7.18 8.32 16.75 0 26.33Z" fill={peach} opacity=".7" />
        </svg>
        <svg width="80" height="108" style={{ bottom: 40, right: 90, transform: "rotate(-12deg)" }} viewBox="0 0 27 38">
          <path d="M12.0833 0C20.4512 2.88 26.4467 10.18 26.4467 19.32C26.4467 21.78 26.01 24.13 25.22 26.33H12.09V0H12.08Z" fill={indigo} opacity=".18" />
        </svg>
      </div>);

  }
  if (variant === "band") {
    return (
      <div className="motif" aria-hidden="true">
        <svg width="360" height="360" style={{ top: -180, left: -80 }} viewBox="0 0 360 360">
          <circle cx="180" cy="180" r="178" fill="none" stroke="rgba(255,255,255,.18)" strokeWidth="2" />
        </svg>
        <svg width="240" height="240" style={{ bottom: -150, right: 60 }} viewBox="0 0 240 240">
          <circle cx="120" cy="120" r="120" fill="rgba(255,255,255,.06)" />
        </svg>
      </div>);

  }
  return null;
}

/* ════════════════════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════════════════════ */

/* ---- Top nav ---- */
function Nav({ t }) {
  return (
    <header className="site-header">
      <div className="topbar">
        <div className="wrap topbar__inner">
          <span className="topbar__ico"><Icon name="calendar" size={18} sw={2} /></span>
          <span className="topbar__txt">
            <span className="topbar__when">Próxima sesión · {t.fecha}</span>
            <span className="topbar__sep">—</span>
            <span className="topbar__title">{t.titulo}</span>
          </span>
          <span className="topbar__spacer" />
          <button className="btn btn-accent topbar__btn" onClick={openZoom}>Inscríbete Ahora</button>
        </div>
      </div>
    </header>);

}

/* ---- Hero (centrado, jerarquía tipo referencia) ---- */
function Hero({ t }) {
  const trama = t.heroStyle === "shapes";
  return (
    <section className={"hero" + (trama ? " hero--trama" : "")}>
      <div className="wrap hero__center">
        <LogoAA height={210} className="hero__logo" />
        <span className="hero__pill">Masterclass en vivo · Sin costo</span>
        <h1><span className="hl">El conocimiento técnico que estabas buscando</span><span className="hl">para <span className="accent">blindar</span> la estrategia de tu empresa.</span></h1>
        <p className="hero__sub">
          Sesiones en vivo dictadas por la empresa de consultoría actuarial líder en el país.
          Domina normativas, mitiga pasivos laborales y decide con analítica de primer nivel.
        </p>
        <button className="btn btn-accent btn-lg hero__btn" onClick={() => { const el = document.getElementById('eventos'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }}>
          Conoce nuestros eventos <Icon name="arrow" size={18} />
        </button>
      </div>
    </section>);

}

/* ---- Info band ---- */
function Band({ t }) {
  const items = [
  { ico: "calendar", k: "Fecha", v: t.fecha },
  { ico: "clock", k: "Horario", v: t.hora },
  { ico: "monitor", k: "Modalidad", v: "Online vía Zoom", sub: "Acceso sin costo" }];

  return (
    <section className="band">
      <Motif variant="band" show={t.heroStyle === "shapes"} />
      <div className="wrap band__grid">
        {items.map((it) =>
        <div className="band__item" key={it.k}>
            <span className="band__ico"><Icon name={it.ico} size={40} sw={1.5} /></span>
            <span>
              <span className="band__k">{it.k}</span>
              <span className="band__v">{it.v}{it.sub && <small>{it.sub}</small>}</span>
            </span>
          </div>
        )}
      </div>
    </section>);

}

/* ---- Bienvenida ---- */
function Welcome() {
  return (
    <section className="block">
      <div className="wrap welcome">
        <div className="welcome__body">
          <p className="eyebrow">Bienvenido a <b>Actuaria Academy</b></p>
          <h2 style={{ fontSize: 36, lineHeight: "44px", fontWeight: 700, letterSpacing: "-.7px", color: "var(--acad-navy)", margin: "14px 0 0" }}>
            Nuestro espacio de transferencia de conocimiento para la comunidad corporativa.
          </h2>
          <p>
            Una serie de sesiones en vivo, diseñadas para dominar normativas, mitigar pasivos
            laborales y liderar la toma de decisiones estratégicas. Conocimiento técnico
            de alto nivel, directo de quienes lo aplican todos los días.
          </p>
        </div>
        <div className="welcome__chips">
          <div className="chip-card">
            <span className="chip-card__ico" style={{ background: "var(--fill-brand-weak)", border: "1px solid var(--stroke-brand-weak)", color: "var(--acad-indigo)" }}>
              <Icon name="video" size={24} />
            </span>
            <span>
              <span className="chip-card__k">Modalidad:</span>
              <span className="chip-card__v">Online · en vivo vía Zoom</span>
            </span>
          </div>
          <div className="chip-card">
            <span className="chip-card__ico" style={{ background: "rgba(224,89,42,.1)", border: "1px solid rgba(224,89,42,.25)", color: "var(--acad-orange)" }}>
              <Icon name="shield" size={24} />
            </span>
            <span>
              <span className="chip-card__k">Acceso:</span>
              <span className="chip-card__v">Exclusivo para clientes y comunidad</span>
            </span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---- Lo que obtienes ---- */
function Benefits() {
  const items = [
  { n: "01", ico: "book", t: "Actualización normativa", d: "Analiza las exigencias contables y legales, como las NIIF o las reformas de seguridad social, sin errores de interpretación." },
  { n: "02", ico: "shield", t: "Casos prácticos de aplicación", d: "Ve la teoría actuarial aplicada a problemas reales y actuales del mercado corporativo ecuatoriano." },
  { n: "03", ico: "chat", t: "Espacio de consultoría en vivo", d: "Interactúa directamente con expertos en sesiones exclusivas de Q&A al finalizar cada ponencia." }];

  return (
    <section className="block block--paper block--pb-sm">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">Por qué sumarte</p>
          <h2>Lo que obtienes al sumarte a nuestras sesiones</h2>
          <div className="rule" />
        </div>
        <div className="benefits">
          {items.map((b) =>
          <div className="benefit" key={b.n}>
              <span className="benefit__edge" />
              <span className="benefit__num">{b.n}</span>
              <span className="benefit__ico"><Icon name={b.ico} size={26} /></span>
              <h3>{b.t}</h3>
              <p>{b.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---- Eventos (carrusel — arte subido por el equipo gráfico) ---- */
function Eventos() {
  const slides = [
  { id: "evt-1", src: window.__resources && window.__resources.evt1 || "assets/eventos/webinar-pasivo.png", href: ZOOM_URL },
  { id: "evt-2", src: window.__resources && window.__resources.evt2 || "assets/eventos/webinar-tributario.png", href: "https://us06web.zoom.us/webinar/register/WN_cbuEiWDERDu4DYRHrZ_6Bw" }];

  const [i, setI] = useState(0);
  const n = slides.length;
  const go = (d) => setI((p) => (p + d + n) % n);

  return (
    <section className="block block--pt-sm" id="eventos">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">Agenda</p>
          <h2>Próximos Eventos</h2>
          <div className="rule" />
          <p className="lead">Explora nuestros eventos actuales y próximos. Haz clic en el evento que más te interese para inscribirte.</p>
        </div>

        <div className="carousel">
          <button className="carousel__arrow" onClick={() => go(-1)} aria-label="Evento anterior">
            <Icon name="caretL" size={26} sw={2} />
          </button>

          <div className="carousel__viewport">
            <div className="carousel__track" style={{ transform: `translateX(-${i * 100}%)` }}>
              {slides.map((s, idx) => {
                const slot =
                  <image-slot
                    id={s.id}
                    src={s.src || undefined}
                    shape="rounded"
                    radius="22"
                    fit="contain"
                    placeholder="Sube aquí el arte de tu evento">
                  </image-slot>;
                return (
                  <div className={"carousel__slide" + (idx === i ? " is-active" : "")} key={s.id}>
                    <a className="carousel__link" href={s.href} target="_blank" rel="noopener" aria-label="Inscríbete en este evento">{slot}</a>
                  </div>);

              })}
            </div>
          </div>

          <button className="carousel__arrow" onClick={() => go(1)} aria-label="Evento siguiente">
            <Icon name="caretR" size={26} sw={2} />
          </button>
        </div>

        <div className="carousel__dots">
          {slides.map((s, idx) =>
          <button
            key={s.id}
            className={"carousel__dot" + (idx === i ? " is-active" : "")}
            onClick={() => setI(idx)}
            aria-label={`Ir al evento ${idx + 1}`}>
          </button>
          )}
        </div>
      </div>
    </section>);

}

/* ---- Firma líder (40 años) ---- */
function Firma() {
  return (
    <section className="block block--paper">
      <div className="wrap firma">
        <div className="firma__stat">
          <Motif variant="band" show={false} />
          <div className="firma__big">40<small>AÑOS</small></div>
          <div className="firma__lbl">Liderando el mundo actuarial</div>
          <div className="firma__divider" />
          <div className="firma__mini">
            <div><div className="n">+11.000</div><div className="d">Clientes Satisfechos</div></div>
          </div>
        </div>
        <div className="firma__body">
          <h2>Aprende de la empresa de consultoría actuarial líder del país.</h2>
          <p>
            El panel de expertos de <b>Actuaria Academy</b> está integrado por <b>especialistas de Actuaria</b>.
            Profesionales con amplia trayectoria asesorando a las empresas más importantes del país.
          </p>
        </div>
      </div>
    </section>);

}

/* ---- FAQ ---- */
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  { q: "¿Las sesiones de Actuaria Academy tienen algún costo?", a: "No. Como parte de nuestro compromiso de transferencia de valor para clientes y la comunidad profesional, el acceso a estas masterclasses en vivo es completamente gratuito." },
  { q: "¿Puedo asistir a más de una sesión?", a: "Sí. Sin embargo, para asegurar tu espacio debes registrarte de forma independiente en cada evento al que desees asistir dentro de esta página." },
  { q: "¿Qué pasa si me registro y no puedo conectarme en vivo?", a: "Los profesionales registrados a la sesión tendrán la posibilidad de recibir las memorias o materiales específicos compartidos por los expositores tras la finalización del encuentro." }];

  return (
    <section className="block">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">Resolvemos tus dudas</p>
          <h2>Preguntas frecuentes</h2>
          <div className="rule" />
        </div>
        <div className="faq">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div className="faq__item" key={i}>
                <button className="faq__q" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span className="ix">{i + 1}</span>
                  <span>{it.q}</span>
                  <span className="chev"><Icon name="chevron" size={20} /></span>
                </button>
                <div className="faq__a" data-open={isOpen} style={{ maxHeight: isOpen ? 280 : 0 }}>
                  <div className="faq__a-inner">{it.a}</div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ---- ¿Tienes dudas? (contacto) ---- */
function Dudas() {
  return (
    <section className="block block--paper block--pt-sm block--pb-sm">
      <div className="wrap dudas">
        <div className="sec-head" style={{ marginBottom: 0 }}>
          <p className="eyebrow">Contacto</p>
          <h2>¿Tienes dudas?</h2>
          <div className="rule" />
          <p className="lead">
            Si necesitas más información sobre nuestros eventos, ponte en contacto con nosotros a
            través de nuestros canales oficiales.
          </p>
        </div>
        <div className="dudas__cards">
          <a className="contact-card" href="mailto:info@actuaria.com">
            <span className="contact-card__ico" style={{ background: "var(--acad-indigo)" }}><Icon name="mail" size={24} /></span>
            <span><span className="contact-card__k">Correo:</span><span className="contact-card__v">info@actuaria.com</span></span>
          </a>
          <a className="contact-card" href="https://api.whatsapp.com/send?phone=593979133351&text=Hola%2C%20quiero%20solicitar%20una%20asesor%C3%ADa." target="_blank" rel="noopener">
            <span className="contact-card__ico" style={{ background: "#25D366" }}><Icon name="whatsapp" size={24} sw={1.6} /></span>
            <span><span className="contact-card__k">WhatsApp:</span><span className="contact-card__v">0979133351</span></span>
          </a>
        </div>
      </div>
    </section>);

}

/* ---- Footer ---- */
function Footer() {
  const socials = [
  { name: "linkedin", label: "LinkedIn", href: "https://www.linkedin.com/company/2412258/admin/feed/posts/" },
  { name: "facebook", label: "Facebook", href: "https://www.facebook.com/actuariaconsultores" },
  { name: "instagram", label: "Instagram", href: "https://www.instagram.com/actuaria_ec/?hl=es-la" }];

  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__inner">
          <img className="footer__logo" src={window.__resources && window.__resources.footerLogo || "assets/logos/actuaria-negativo.svg"} alt="Actuaria Consultores" />
          <div className="footer__social">
            {socials.map((s) =>
            <a key={s.name} className="footer__social-ico" href={s.href} target="_blank" rel="noopener" aria-label={s.label}>
                <Icon name={s.name} size={22} sw={1.8} />
              </a>
            )}
          </div>
        </div>
        <div className="footer__bottom">
          <p className="footer__legal">© 2026 Actuaria Consultores</p>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  ZOOM_URL, openZoom, Icon, IsoMark, Lockup, LogoAA, Motif,
  Nav, Hero, Band, Welcome, Benefits, Eventos, Firma, FAQ, Dudas, Footer
});