/* global React, Logo, Icon, SERVICES, OUTLETS, PROCESS, FAQS, PLANS, AUTHORS, WEBHOOK_URL */
const { useState } = React;

const COUNTRIES = ["España", "México", "Colombia", "Chile", "Argentina", "Estados Unidos", "Perú", "Otro"];

/* ============================================================
   HOME
   ============================================================ */
function HomePage({ navigate, openSchedule }) {
  const quotes = [
    { t: "“Pasamos de no aparecer a ser citados por ChatGPT en tres meses.”", a: "Director de marketing · SaaS B2B" },
    { t: "“+300% de tráfico orgánico desde la campaña inicial en medios asociados.”", a: "CMO · Real Estate" },
    { t: "“Hoy la marca aparece en respuestas de Gemini y en la ficha de Maps.”", a: "Fundador · Clínica privada" },
  ];
  const [qi, setQi] = useState(0);

  return (
    <main className="page-enter" data-screen-label="Home">
      {/* ============ HERO ============ */}
      <section className="hero">
        <div className="shell">
          <div className="hero__panel">
            <div className="hero__copy">
              <div>
                <h1 className="hero__heading hero__heading-stack">
                  <span>Sé visible.</span>
                  <span>Sé creíble.</span>
                  <span>Sé <em className="pop">citado.</em></span>
                </h1>
                <p className="hero__sub">
                  Ayudamos a marcas y empresas a ganar visibilidad en{" "}
                  <strong style={{ color: "var(--paper)", fontWeight: 600 }}>Google, Google Maps, respuestas de IA y medios de alta autoridad</strong>{" "}
                  mediante una red de portales periodísticos asociados aprobados por Google News.
                </p>
                <div className="hero__cta">
                  <button onClick={openSchedule} className="btn btn--pop">
                    Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
                  </button>
                  <a href="#/servicios" onClick={(e) => { e.preventDefault(); navigate("/servicios"); }} className="btn btn--ghost-dk">
                    Ver servicios
                  </a>
                </div>
              </div>
            </div>

            <div className="hero__visual hero__visual--image">
              <img className="hero__photo" src="https://en-for.b-cdn.net/mediastarpress.com/head.png" alt="" />
              <div className="hero-figure__caption">En vivo · Redacción</div>
            </div>
          </div>


        </div>
      </section>

      {/* ============ BIENVENIDOS + COST OF INACTION ============ */}
      <section className="hero">
        <div className="shell">
          <div className="slab">
            <div className="intro">
              <div className="intro__left">
                <span className="pill pill--ghost-lt">Agencia de medios</span>
                <h2 className="intro__heading">
                  No publicar hoy te <em style={{ color: "var(--pop-2)" }}>cuesta visibilidad</em> en 6 meses.
                </h2>
                <p style={{ color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.55, maxWidth: "50ch" }}>
                  Cada mes que pasa sin publicar en medios de alta autoridad, los competidores ganan terreno en Google,
                  Google Maps y las respuestas de IA. Recuperarlo después cuesta entre 3 y 5 veces más.
                </p>
                <button onClick={openSchedule} className="btn btn--dark" style={{ alignSelf: "flex-start" }}>
                  Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
                </button>
              </div>

              <div className="coi-grid">
                <div className="coi-card coi-card--pop">
                  <span className="coi-card__tag">Coste de no publicar</span>
                  <span className="coi-card__value">3–5×</span>
                  <span className="coi-card__label">más caro recuperar autoridad después de 6 meses sin presencia editorial.</span>
                </div>
                <div className="coi-card">
                  <span className="coi-card__tag">AI Overviews</span>
                  <span className="coi-card__value">68%</span>
                  <span className="coi-card__label">de las búsquedas en 2026 ya muestran respuestas generadas por IA antes que tu web.</span>
                </div>
                <div className="coi-card">
                  <span className="coi-card__tag">Tu competencia</span>
                  <span className="coi-card__value">−42%</span>
                  <span className="coi-card__label">tráfico orgánico promedio de empresas sin cobertura editorial en su sector.</span>
                </div>
                <div className="coi-card" style={{ background: "var(--bg-elev)" }}>
                  <span className="coi-card__tag">Google Maps</span>
                  <span className="coi-card__value">7×</span>
                  <span className="coi-card__label">más clics en fichas con menciones de prensa frente a las que no las tienen.</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ FEATURE GRID (dark) ============ */}
      <section className="hero">
        <div className="shell">
          <div className="featgrid">
            <div className="fcard">
              <span className="fcard__icon" style={{ color: "var(--pop)" }}>{Icon.asterisk(36)}</span>
              <span className="fcard__text">Periodistas con al menos 5 años de experiencia editorial.</span>
            </div>

            <div className="fcard fcard--pop">
              <span className="fcard__icon">{Icon.plus(36)}</span>
              <span className="fcard__text" style={{ fontWeight: 600 }}>Equipo de verificación y fact-checking interno.</span>
            </div>

            <div className="fcard fcard--brand" style={{ gridColumn: "span 2", gridRow: "span 2", background: "var(--bg)" }}>
              <Logo size="lg" />
              <div style={{ marginTop: 16, color: "var(--pop)", fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.16em" }}>
                press · agencia de medios
              </div>
            </div>

            <div className="fcard">
              <span className="fcard__icon" style={{ color: "var(--pop)" }}>{Icon.bot(36)}</span>
              <span className="fcard__text">Cobertura indexada en Google News, Discover y AI Overviews.</span>
            </div>

            <div className="fcard">
              <span className="fcard__text">Casos en finanzas, tech, salud, legal, real estate y B2B.</span>
            </div>

            <div className="fcard fcard--outline">
              <div className="fcard__num-row">
                <span className="fcard__big">+50</span>
                <span className="fcard__suffix">periodistas<br/>en plantilla</span>
              </div>
            </div>

            <div className="fcard">
              <span className="fcard__text">Bajo NDA cuando lo necesitas. Confidencialidad por defecto.</span>
            </div>

            <div className="fcard">
              <span className="fcard__icon" style={{ color: "var(--pop)" }}>{Icon.clock(36)}</span>
              <span className="fcard__text">Reportes con impacto SEO en tiempo real.</span>
            </div>

            <div className="fcard fcard--pop">
              <span className="fcard__text" style={{ fontWeight: 600 }}>Distribución coordinada con embargos multi-medio.</span>
            </div>

            <div className="fcard">
              <div className="fcard__num-row">
                <span className="fcard__big">500M</span>
                <span className="fcard__suffix">impresiones<br/>al mes</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ TICKER ============ */}
      <section className="hero" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "10px 0", overflow: "hidden" }}>
            <div className="ticker">
              <div className="ticker__track">
                {[...OUTLETS, ...OUTLETS].map((o, i) => <span key={i}>{o}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ PROCESS ============ */}
      <section className="hero">
        <div className="shell">
          <div className="slab--dark" style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "clamp(28px, 5vw, 64px)" }}>
            <div className="sec-head">
              <div className="sec-head__row">
                <div>
                  <span className="pill pill--ghost-dk">El proceso</span>
                  <h2 style={{ marginTop: 18 }}>Del briefing a los <em>titulares</em>.</h2>
                </div>
                <p className="sec-head__sub" style={{ color: "var(--txt-on-dark-mute)" }}>
                  5 fases en 21 días. Editor senior dedicado. Resultados verificables al cierre.
                </p>
              </div>
            </div>
            <div className="process-list">
              {PROCESS.map((p) => (
                <div key={p.num} className="proc">
                  <span className="proc__num">{p.num}</span>
                  <span className="proc__title">{p.title}</span>
                  <span className="proc__desc">{p.desc}</span>
                  <span className="proc__tag">{p.tag}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ SERVICES — real images ============ */}
      <section className="hero">
        <div className="shell">
          <div className="slab">
            <div className="sec-head">
              <div className="sec-head__row">
                <div>
                  <span className="pill pill--ghost-lt">Servicios</span>
                  <h2 style={{ marginTop: 18 }}>Una redacción.<br/>Cuatro servicios.</h2>
                </div>
                <a href="#/servicios" onClick={(e) => { e.preventDefault(); navigate("/servicios"); }} className="btn btn--dark">
                  Ver todos <span className="btn__arrow">{Icon.arrowUpRight()}</span>
                </a>
              </div>
            </div>
            <div className="svc-img-grid">
              {SERVICES.map((s) => (
                <a key={s.slug} href={`#/servicios/${s.slug}`}
                   onClick={(e) => { e.preventDefault(); navigate(`/servicios/${s.slug}`); }}
                   className="svc-img">
                  <img className="svc-img__photo" src={s.image} alt={s.title} />
                  <div className="svc-img__overlay" />
                  <div className="svc-img__top">
                    <span className="pill">{s.num} · Servicio</span>
                    <span className="svc-img__corner">{Icon.arrowUpRight()}</span>
                  </div>
                  <div className="svc-img__caption">
                    <h3>{s.title}</h3>
                    <p>{s.short}</p>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ AUTHORS ============ */}
      <section className="hero">
        <div className="shell">
          <div className="slab--dark" style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "clamp(28px, 5vw, 64px)" }}>
            <div className="sec-head">
              <div className="sec-head__row">
                <div>
                  <span className="pill pill--ghost-dk">Quién firma</span>
                  <h2 style={{ marginTop: 18 }}>Periodistas <em>reales</em>.<br/>Con nombre y trayectoria.</h2>
                </div>
                <p className="sec-head__sub" style={{ color: "var(--txt-on-dark-mute)" }}>
                  Cada artículo lleva firma. Cada firma tiene historial verificable. Sin pseudónimos ni cuentas fantasma.
                </p>
              </div>
            </div>
            <div className="authors-grid">
              {AUTHORS.map((a) => (
                <div key={a.name} className={"author-card " + (a.feat ? "author-card--feat" : "")}>
                  {a.photo
                    ? <img className="author-card__photo" src={a.photo} alt={a.name} style={{ width: 96, height: 96, borderRadius: "50%", objectFit: "cover", objectPosition: "center top" }} />
                    : <AvatarCircle name={a.name} hue={a.hue || 200} />
                  }
                  <div>
                    <div className="author-card__name">{a.name}</div>
                    <div className="author-card__role">{a.role}</div>
                  </div>
                  <p className="author-card__bio">{a.bio}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ FAQ ============ */}
      <section className="hero">
        <div className="shell">
          <div className="slab--dark" style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "clamp(28px, 5vw, 64px)" }}>
            <div className="sec-head">
              <div className="sec-head__row">
                <div>
                  <span className="pill pill--ghost-dk">Preguntas frecuentes</span>
                  <h2 style={{ marginTop: 18 }}>Lo que siempre<br/>nos preguntan.</h2>
                </div>
              </div>
            </div>
            <FaqList items={FAQS} />
          </div>
        </div>
      </section>

      {/* ============ CTA BLOCK ============ */}
      <section className="hero">
        <div className="shell">
          <div className="cta-block">
            <h2>Aparece donde tus clientes <em>te buscan</em>.</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <p style={{ fontSize: 16, lineHeight: 1.5, maxWidth: "38ch" }}>
                Google, Google Maps, ChatGPT, Gemini, Perplexity y medios de alta autoridad. Una sola estrategia.
              </p>
              <button onClick={openSchedule} className="btn btn--dark">
                Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------- Helpers ---------- */
function AvatarCircle({ name, hue }) {
  // SVG avatar: gradient circle with initials — used as photo placeholder
  const initials = name.split(" ").map(w => w[0]).slice(0, 2).join("");
  return (
    <svg className="author-card__photo" width={96} height={96} viewBox="0 0 96 96" aria-hidden="true">
      <defs>
        <radialGradient id={`g-${hue}`} cx="35%" cy="30%" r="80%">
          <stop offset="0%" stopColor={`hsl(${hue}, 70%, 65%)`}/>
          <stop offset="100%" stopColor={`hsl(${(hue + 40) % 360}, 50%, 35%)`}/>
        </radialGradient>
      </defs>
      <circle cx="48" cy="48" r="44" fill={`url(#g-${hue})`}/>
      <text x="48" y="58" textAnchor="middle" fill="#F4EFE3" fontSize="32" fontFamily="Sora, sans-serif" fontWeight="700" letterSpacing="-0.04em">{initials}</text>
    </svg>
  );
}

function FaqList({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div>
      {items.map((f, i) => (
        <div key={i} className={"faq-item " + (open === i ? "is-open" : "")}>
          <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{f.q}</span>
            <span className="faq-q__icon">+</span>
          </div>
          <div className="faq-a">{f.a}</div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   SERVICIOS overview
   ============================================================ */
function ServiciosPage({ navigate, openSchedule }) {
  return (
    <main className="page-enter" data-screen-label="Servicios">
      <div className="shell">
        <section className="detail-hero">
          <div>
            <div className="crumb">
              <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
              <span className="sep">/</span>
              <span>Servicios</span>
            </div>
            <h1>Cuatro <em>servicios</em>.<br/>Una redacción.</h1>
          </div>
          <p className="detail-hero__side">
            Cada cuenta tiene un editor senior asignado y un pool de periodistas
            especializados. Investigación, redacción y distribución en una sola
            operación.
          </p>
        </section>

        <section className="hero">
          <div className="slab">
            <div className="svc-img-grid svc-img-grid--4">
              {SERVICES.map((s) => (
                <a key={s.slug} href={`#/servicios/${s.slug}`}
                   onClick={(e) => { e.preventDefault(); navigate(`/servicios/${s.slug}`); }}
                   className="svc-img svc-img--portrait">
                  <img className="svc-img__photo" src={s.image} alt={s.title} />
                  <div className="svc-img__overlay" />
                  <div className="svc-img__top">
                    <span className="pill">{s.num} · Servicio</span>
                    <span className="svc-img__corner">{Icon.arrowUpRight()}</span>
                  </div>
                  <div className="svc-img__caption">
                    <h3 style={{ fontSize: 22 }}>{s.title}</h3>
                    <p>{s.short}</p>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>

        <section className="hero">
          <div className="cta-block">
            <h2>Una llamada de <em>30 minutos</em> para definir tu estrategia.</h2>
            <div>
              <button onClick={openSchedule} className="btn btn--dark">
                Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
              </button>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

/* ============================================================
   SERVICIO DETAIL
   ============================================================ */
function ServicioDetail({ slug, navigate, openSchedule }) {
  const svc = SERVICES.find((s) => s.slug === slug);
  if (!svc) return <NotFound navigate={navigate} />;
  const idx = SERVICES.findIndex((s) => s.slug === slug);
  const next = SERVICES[(idx + 1) % SERVICES.length];

  return (
    <main className="page-enter" data-screen-label={`Servicio: ${svc.title}`}>
      <div className="shell">
        <section className="detail-hero">
          <div>
            <div className="crumb">
              <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
              <span className="sep">/</span>
              <a href="#/servicios" onClick={(e) => { e.preventDefault(); navigate("/servicios"); }}>Servicios</a>
              <span className="sep">/</span>
              <span>{svc.title}</span>
            </div>
            <span className="mono" style={{ color: "var(--pop)" }}>{svc.num} · Servicio</span>
            <h1 style={{ marginTop: 12 }}>
              {svc.title.split(" ").map((w, i, a) => i === a.length - 1 ? <em key={i}>{w}</em> : <span key={i}>{w} </span>)}
            </h1>
            <div style={{ marginTop: 28 }}>
              <button onClick={openSchedule} className="btn btn--pop">
                Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
              </button>
            </div>
          </div>
          <p className="detail-hero__side">{svc.long}</p>
        </section>

        {/* BENEFITS — replaces 4-image gallery */}
        <section className="hero">
          <div className="slab--dark" style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "clamp(28px, 5vw, 64px)" }}>
            <div className="sec-head">
              <div className="sec-head__row">
                <div>
                  <span className="pill pill--ghost-dk">Qué incluye</span>
                  <h2 style={{ marginTop: 18 }}>Beneficios <em>concretos</em>.</h2>
                </div>
                <p className="sec-head__sub" style={{ color: "var(--txt-on-dark-mute)" }}>
                  No promesas. Cada elemento es entregable, medible y reportable a tu equipo.
                </p>
              </div>
            </div>
            <div className="benefits-grid">
              {svc.benefits.map((b, i) => (
                <div key={i} className={"benefit " + (b.feat ? "benefit--feat" : "")}>
                  <span className="benefit__icon">{Icon[b.icon] ? Icon[b.icon](32) : Icon.asterisk(32)}</span>
                  <span className="benefit__title">{b.t}</span>
                  <span className="benefit__desc">{b.d}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* COST OF INACTION reused on detail */}
        <section className="hero">
          <div className="slab">
            <div className="intro">
              <div className="intro__left">
                <span className="pill pill--ghost-lt">Por qué importa ya</span>
                <h2 className="intro__heading">
                  Cada mes sin publicar es <em style={{ color: "var(--coral)" }}>terreno cedido</em> a tu competencia.
                </h2>
                <p style={{ color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.55, maxWidth: "50ch" }}>
                  La autoridad editorial se construye con tiempo. Cuanto más tardes, más caro y lento será aparecer
                  en Google, en respuestas de IA y en la ficha de Google Maps.
                </p>
                <button onClick={openSchedule} className="btn btn--dark" style={{ alignSelf: "flex-start" }}>
                  Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
                </button>
              </div>
              <div className="coi-grid">
                <div className="coi-card coi-card--pop">
                  <span className="coi-card__tag">Autoridad</span>
                  <span className="coi-card__value">6m</span>
                  <span className="coi-card__label">tiempo medio para empezar a aparecer en respuestas de IA tras publicar en alta autoridad.</span>
                </div>
                <div className="coi-card">
                  <span className="coi-card__tag">Coste</span>
                  <span className="coi-card__value">3–5×</span>
                  <span className="coi-card__label">más caro recuperar visibilidad si lo intentas dentro de un año.</span>
                </div>
                <div className="coi-card">
                  <span className="coi-card__tag">Citas en IA</span>
                  <span className="coi-card__value">+148%</span>
                  <span className="coi-card__label">marcas con cobertura editorial son citadas más por ChatGPT y Gemini.</span>
                </div>
                <div className="coi-card" style={{ background: "var(--bg-elev)" }}>
                  <span className="coi-card__tag">SEO</span>
                  <span className="coi-card__value">DA 50+</span>
                  <span className="coi-card__label">autoridad mínima de los portales asociados de la red de mediastar press.</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* NEXT */}
        <section className="hero">
          <div className="slab--dark" style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "clamp(28px, 5vw, 64px)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <span className="mono" style={{ color: "var(--txt-on-dark-mute)" }}>Siguiente servicio</span>
            <a href={`#/servicios/${next.slug}`}
               onClick={(e) => { e.preventDefault(); navigate(`/servicios/${next.slug}`); }}
               style={{ fontSize: "clamp(36px, 5vw, 64px)", fontWeight: 800, letterSpacing: "-0.04em", display: "inline-flex", alignItems: "center", gap: 18 }}>
              {next.title} <span style={{ color: "var(--pop)" }}>→</span>
            </a>
          </div>
        </section>
      </div>
    </main>
  );
}

/* ============================================================
   RED de medios
   ============================================================ */
function RedPage({ navigate, openSchedule }) {
  const moreOutlets = [
    ...OUTLETS,
    "Estrategia Hoy", "Pulso Económico", "Marca & Mercado", "Reporte Digital",
    "Sector Pro", "El Heraldo Empresa", "Tecnopress", "Líderes Latam",
    "Visión Económica", "Diario Marca", "El Cronista Pro", "Press Iberia",
  ];
  return (
    <main className="page-enter" data-screen-label="Red de medios">
      <div className="shell">
        <section className="detail-hero">
          <div>
            <div className="crumb">
              <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
              <span className="sep">/</span>
              <span>Red de medios</span>
            </div>
            <h1>+200 portales <em>asociados</em>.</h1>
          </div>
          <p className="detail-hero__side">
            Cabeceras con dominios DA 50+ aprobadas por Google News, distribuidas
            en España, Latinoamérica y Estados Unidos. Verticales: negocios,
            tecnología, finanzas, salud, lifestyle y B2B.
          </p>
        </section>

        <section className="hero">
          <div className="featgrid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            {[
              { v: "+200", l: "Portales asociados", tag: "Red" },
              { v: "60+",  l: "DA promedio (alta autoridad)", tag: "Calidad" },
              { v: "08",   l: "Países de cobertura", tag: "Alcance" },
              { v: "+50",  l: "Periodistas en plantilla", tag: "Equipo" },
            ].map((m, i) => (
              <div key={i} className="fcard" style={{ minHeight: 180 }}>
                <span className="mono" style={{ color: "var(--pop)" }}>{m.tag}</span>
                <div>
                  <div className="fcard__big" style={{ color: "var(--paper)" }}>{m.v}</div>
                  <div className="fcard__suffix">{m.l}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="hero">
          <div className="slab--dark" style={{ background: "var(--bg-2)", borderRadius: "var(--r-xl)", padding: "clamp(28px, 5vw, 56px)" }}>
            <div className="sec-head">
              <span className="pill pill--ghost-dk">Listado parcial</span>
              <h2 style={{ marginTop: 18 }}>Cabeceras donde <em>aparecerás</em>.</h2>
            </div>
            <div className="logos-strip">
              {moreOutlets.map((o) => (
                <div key={o} className="logos-strip__cell">{o}</div>
              ))}
            </div>
            <p className="mono" style={{ marginTop: 18, color: "var(--txt-on-dark-mute)" }}>
              ✦ Lista completa bajo NDA durante el briefing
            </p>
          </div>
        </section>

        <section className="hero">
          <div className="cta-block">
            <h2>¿Tu marca, en estos titulares?</h2>
            <div>
              <button onClick={openSchedule} className="btn btn--dark">
                Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
              </button>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

/* ============================================================
   PLANES
   ============================================================ */
function PlanesPage({ navigate, openSchedule }) {
  return (
    <main className="page-enter" data-screen-label="Planes">
      <div className="shell">
        <section className="detail-hero">
          <div>
            <div className="crumb">
              <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
              <span className="sep">/</span>
              <span>Planes</span>
            </div>
            <h1>Planes <em>simples</em>.<br/>Resultados medibles.</h1>
          </div>
          <p className="detail-hero__side">
            Tres planes pensados para etapas distintas. Sin contratos largos.
            Cambias o cancelas cuando quieras. Diagnóstico inicial sin coste.
          </p>
        </section>

        <section className="hero">
          <div className="plan-grid">
            {PLANS.map((p) => (
              <div key={p.name} className={"plan " + (p.featured ? "plan--feat" : "")}>
                <span className="plan__name">{p.name}</span>
                <div className="plan__price">{p.price}<sup>{p.suffix}</sup></div>
                <ul className="plan__bullets">
                  {p.bullets.map((b) => <li key={b}>{b}</li>)}
                </ul>
                <button onClick={openSchedule} className={p.featured ? "btn btn--dark" : "btn btn--ghost-dk"} style={{ marginTop: "auto", alignSelf: "stretch", justifyContent: "space-between" }}>
                  {p.cta} <span className="btn__arrow">{Icon.calendar(16)}</span>
                </button>
              </div>
            ))}
          </div>
        </section>

        <section className="hero">
          <div className="cta-block">
            <h2>¿No estás seguro qué plan <em>necesitas</em>?</h2>
            <div>
              <button onClick={openSchedule} className="btn btn--dark">
                Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
              </button>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

/* ============================================================
   CONTACTO
   ============================================================ */
function ContactoPage({ navigate, openSchedule }) {
  const [form, setForm] = useState({
    name: "", company: "", country: "España", website: "",
    objective: "Visibilidad en Google (SEO)", message: "",
  });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [errors, setErrors] = useState({});

  const update = (k, v) => setForm({ ...form, [k]: v });
  const onSubmit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name) errs.name = "Requerido";
    if (!form.company) errs.company = "Requerido";
    if (!form.website) errs.website = "Indica tu sitio";
    if (!form.message || form.message.length < 10) errs.message = "Cuéntanos algo más (mín. 10 caracteres)";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSending(true);
    try {
      await fetch(WEBHOOK_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          nombre: form.name,
          empresa: form.company,
          pais: form.country,
          sitio_web: form.website,
          objetivo: form.objective,
          mensaje: form.message,
          origen: "formulario-contacto",
        }),
      });
    } catch (_) {}
    setSending(false);
    setSent(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <main className="page-enter" data-screen-label="Contacto">
      <div className="shell">
        <section className="detail-hero">
          <div>
            <div className="crumb">
              <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
              <span className="sep">/</span>
              <span>Contacto</span>
            </div>
            <h1>Cuéntanos tu <em>proyecto</em>.</h1>
          </div>
          <p className="detail-hero__side">
            Te respondemos en menos de 24h con propuesta editorial,
            presupuesto y calendario. ¿Prefieres directamente una llamada?
            Agenda en 2 clicks.
          </p>
        </section>

        <section className="hero">
          <div style={{ display: "flex", marginBottom: 20 }}>
            <button onClick={openSchedule} className="btn btn--pop">
              Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
            </button>
          </div>

          <div className="contact-grid">
            {sent ? (
              <div className="success">
                <span className="mono">★ Enviado</span>
                <h3 style={{ marginTop: 12 }}>Gracias, {form.name.split(" ")[0]}.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.5 }}>
                  Hemos recibido tu mensaje. Un editor senior te contactará en
                  menos de 24 horas con propuesta inicial y posibles fechas para
                  el primer briefing.
                </p>
                <button className="btn btn--dark" style={{ marginTop: 18, alignSelf: "flex-start" }}
                  onClick={() => { setSent(false); setForm({ name: "", company: "", country: "España", website: "", objective: "Visibilidad en Google (SEO)", message: "" }); }}>
                  Enviar otra consulta <span className="btn__arrow">{Icon.arrowUpRight()}</span>
                </button>
              </div>
            ) : (
              <div className="form-card">
                <form className="form" onSubmit={onSubmit} noValidate>
                  <div className="field--row">
                    <div className="field">
                      <label>Nombre</label>
                      <input value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="Ana Martínez" />
                      {errors.name && <small style={{ color: "var(--coral)", fontFamily: "var(--mono)", fontSize: 11 }}>{errors.name}</small>}
                    </div>
                    <div className="field">
                      <label>Empresa</label>
                      <input value={form.company} onChange={(e) => update("company", e.target.value)} placeholder="Tu marca" />
                      {errors.company && <small style={{ color: "var(--coral)", fontFamily: "var(--mono)", fontSize: 11 }}>{errors.company}</small>}
                    </div>
                  </div>
                  <div className="field--row">
                    <div className="field">
                      <label>País</label>
                      <select value={form.country} onChange={(e) => update("country", e.target.value)}>
                        {COUNTRIES.map((c) => <option key={c}>{c}</option>)}
                      </select>
                    </div>
                    <div className="field">
                      <label>Sitio web</label>
                      <input value={form.website} onChange={(e) => update("website", e.target.value)} placeholder="https://" />
                      {errors.website && <small style={{ color: "var(--coral)", fontFamily: "var(--mono)", fontSize: 11 }}>{errors.website}</small>}
                    </div>
                  </div>
                  <div className="field">
                    <label>Objetivo principal</label>
                    <select value={form.objective} onChange={(e) => update("objective", e.target.value)}>
                      <option>Visibilidad en Google (SEO)</option>
                      <option>Aparecer en respuestas de IA (ChatGPT, Gemini, Perplexity)</option>
                      <option>Posicionar ficha de Google Maps</option>
                      <option>Publicar en medios de alta autoridad</option>
                      <option>Reputación y autoridad de marca</option>
                      <option>Una mezcla de varios objetivos</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Cuéntanos tu proyecto</label>
                    <textarea value={form.message} onChange={(e) => update("message", e.target.value)} placeholder="Audiencia, mercados, mensaje, plazos, KPIs..." />
                    {errors.message && <small style={{ color: "var(--coral)", fontFamily: "var(--mono)", fontSize: 11 }}>{errors.message}</small>}
                  </div>
                  <div className="form__submit">
                    <p className="form__legal">
                      Al enviar aceptas nuestra política de privacidad. No usamos tus datos para nada más.
                    </p>
                    <button type="submit" className="btn btn--pop" disabled={sending}>
                      {sending ? "Enviando…" : <React.Fragment>Enviar <span className="btn__arrow">{Icon.arrowUpRight()}</span></React.Fragment>}
                    </button>
                  </div>
                </form>
              </div>
            )}

            <aside className="contact-side">
              <div className="contact-card">
                <h5>Email</h5>
                <p>contacto@mediastarpress.com</p>
              </div>
              <div className="contact-card">
                <h5>Teléfono</h5>
                <p>+1 754 325 5734</p>
                <small>EEUU · L–V · 09:00 — 18:00</small>
              </div>
              <div className="contact-card">
                <h5>Presentes en</h5>
                <p>Madrid · CDMX · Bogotá · Santiago · Buenos Aires</p>
              </div>
              <div className="map-skel">
                <div className="map-skel__pin" style={{ top: "38%", left: "44%" }} />
                <div className="map-skel__pin" style={{ top: "62%", left: "18%", animationDelay: "0.6s" }} />
                <div className="map-skel__pin" style={{ top: "68%", left: "26%", animationDelay: "1.2s" }} />
                <div className="map-skel__pin" style={{ top: "72%", left: "30%", animationDelay: "1.8s" }} />
                <div className="map-skel__pin" style={{ top: "74%", left: "34%", animationDelay: "2.4s" }} />
              </div>
            </aside>
          </div>
        </section>
      </div>
    </main>
  );
}

/* ============================================================
   LEGAL PAGE — empty template (Aviso legal / Privacidad / Cookies)
   ============================================================ */
/* ============================================================
   LEGAL CONTENT DATA
   ============================================================ */
const LEGAL_CONTENT = {
  "aviso-legal": {
    title: "Aviso Legal",
    crumb: "Aviso legal",
    updated: "Enero 2026",
    sections: [
      {
        id: "informacion-general",
        num: "01",
        title: "Información General",
        content: (
          <React.Fragment>
            <p>El presente Aviso Legal regula el acceso, navegación y uso del sitio web operado por <strong>Media Star</strong>. En cumplimiento con la normativa reguladora de los servicios de la sociedad de la información y de comercio electrónico, se exponen los datos de contacto y operacionales de la plataforma:</p>
            <ul>
              <li><strong>Nombre Comercial:</strong> Media Star</li>
              <li><strong>Correo Electrónico de Contacto:</strong> <a href="mailto:contacto@mediastarpress.com">contacto@mediastarpress.com</a></li>
              <li><strong>Teléfono de Contacto:</strong> +1 754 325 5734</li>
            </ul>
            <p>Media Star opera como una agencia B2B de medios y posicionamiento editorial, especializada en la distribución de contenido, investigaciones periodísticas y gestión de autoridad digital a través de portales asociados.</p>
          </React.Fragment>
        ),
      },
      {
        id: "objeto-condiciones",
        num: "02",
        title: "Objeto y Condiciones de Uso",
        content: (
          <React.Fragment>
            <p>El acceso, navegación y utilización del sitio web atribuye la condición de Usuario e implica la aceptación expresa, íntegra y sin reservas de todas las disposiciones incluidas en el presente documento.</p>
            <p>El sitio web tiene como finalidad exclusiva proporcionar información estructurada sobre los servicios de Media Star. Esto incluye los procesos de investigación, redacción, distribución y reporte para la optimización en motores de búsqueda, Google News y motores de respuesta generativa (ChatGPT, Gemini, Perplexity). La adquisición de servicios, modelos de suscripción o campañas editoriales personalizadas se encuentra sujeta a la firma de acuerdos comerciales independientes y, cuando el cliente lo exija, Acuerdos de Confidencialidad (NDA).</p>
          </React.Fragment>
        ),
      },
      {
        id: "propiedad-intelectual",
        num: "03",
        title: "Propiedad Intelectual e Industrial",
        content: (
          <React.Fragment>
            <p>La totalidad de los elementos que conforman este sitio web —incluyendo textos, estructura de navegación, diseño, logotipos, código fuente, metodologías de posicionamiento (estrategias E-E-A-T) y flujos operativos— constituyen propiedad intelectual e industrial exclusiva de Media Star o de terceros que han otorgado la correspondiente licencia de uso.</p>
            <p>Queda terminantemente prohibida la reproducción, distribución, comunicación pública, transformación o cualquier otra forma de explotación comercial de los contenidos sin la autorización previa, expresa y por escrito de la dirección de Media Star.</p>
          </React.Fragment>
        ),
      },
      {
        id: "responsabilidad",
        num: "04",
        title: "Responsabilidad y Limitación de Garantías",
        content: (
          <React.Fragment>
            <p>Media Star aplica estándares técnicos y operativos para garantizar la disponibilidad y seguridad del sitio web. No obstante, se excluye cualquier responsabilidad derivada de:</p>
            <ul>
              <li>Fallas técnicas, interrupciones de conectividad o caídas de servidor ajenas al control directo de la infraestructura de Media Star.</li>
              <li>El uso indebido, negligente o ilícito de la información proporcionada en la plataforma por parte de los Usuarios.</li>
              <li>Fluctuaciones en los resultados de posicionamiento. Las decisiones algorítmicas de indexación y visibilidad dependen de entidades externas (Google, OpenAI, entre otros), sobre las cuales la agencia no ejerce control absoluto.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "enlaces-externos",
        num: "05",
        title: "Enlaces Externos",
        content: (
          <p>La plataforma puede albergar hipervínculos que redirijan a sitios web gestionados por terceros, incluyendo ejemplos de nuestra red de más de 200 medios asociados. Media Star no asume responsabilidad alguna por el contenido, políticas de privacidad, términos comerciales o disponibilidad técnica de dichas páginas externas.</p>
        ),
      },
      {
        id: "actualizacion",
        num: "06",
        title: "Actualización y Modificaciones",
        content: (
          <p>Media Star se reserva la facultad de efectuar, en cualquier momento y sin necesidad de previo aviso, modificaciones o actualizaciones tanto en la información contenida en el sitio web como en la configuración, presentación y condiciones de acceso del presente Aviso Legal, para su adaptación a cambios normativos, técnicos o de estrategia corporativa.</p>
        ),
      },
    ],
  },

  "privacidad": {
    title: "Política de Privacidad",
    crumb: "Privacidad",
    updated: "Enero 2026",
    sections: [
      {
        id: "identidad-responsable",
        num: "01",
        title: "Identidad del Responsable del Tratamiento",
        content: (
          <React.Fragment>
            <p>La presente Política de Privacidad establece los términos en que <strong>Media Star</strong> (en adelante, "la Agencia") recopila, utiliza, procesa y protege la información proporcionada por los usuarios y clientes B2B.</p>
            <ul>
              <li><strong>Nombre Comercial:</strong> Media Star</li>
              <li><strong>Correo Electrónico:</strong> <a href="mailto:contacto@mediastarpress.com">contacto@mediastarpress.com</a></li>
              <li><strong>Teléfono:</strong> +1 754 325 5734</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "datos-recopilados",
        num: "02",
        title: "Datos Recopilados",
        content: (
          <React.Fragment>
            <p>Para el desarrollo de nuestras operaciones de posicionamiento editorial, investigación periodística y gestión de autoridad digital, recopilamos las siguientes categorías de información:</p>
            <ul>
              <li><strong>Datos de Contacto y Corporativos:</strong> Nombres, correos electrónicos, números de teléfono, roles corporativos y datos de facturación necesarios para la gestión de modelos de suscripción y campañas.</li>
              <li><strong>Datos Operativos y Estratégicos:</strong> Información confidencial de la empresa compartida durante la fase de briefing, lineamientos de marca y documentación específica requerida para el fact-checking interno y la construcción de la entidad digital.</li>
              <li><strong>Datos Técnicos:</strong> Direcciones IP, metadatos de interacción y patrones de navegación dentro de nuestra plataforma.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "finalidad",
        num: "03",
        title: "Finalidad del Tratamiento de los Datos",
        content: (
          <React.Fragment>
            <p>La información recopilada es utilizada de manera exclusiva y estructurada para los siguientes propósitos:</p>
            <ul>
              <li><strong>Ejecución del Servicio:</strong> Coordinación operativa de las cinco fases de campaña (briefing, investigación, redacción, distribución y reporte), asegurando la precisión del contenido editorial.</li>
              <li><strong>Gestión Comercial:</strong> Administración de los modelos de suscripción mensual, facturación, y comunicación técnica con el cliente.</li>
              <li><strong>Mejora de la Plataforma:</strong> Análisis de patrones de navegación para la optimización de la arquitectura de la información y la experiencia del usuario B2B.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "base-legitimacion",
        num: "04",
        title: "Base de Legitimación",
        content: (
          <React.Fragment>
            <p>El tratamiento de los datos personales se fundamenta en:</p>
            <ul>
              <li><strong>Ejecución contractual:</strong> Cuando los datos son indispensables para la prestación de los servicios contratados.</li>
              <li><strong>Consentimiento explícito:</strong> Cuando el usuario proporciona voluntariamente sus datos a través de formularios de contacto o solicitud de información.</li>
              <li><strong>Interés legítimo:</strong> Para la mejora continua de los servicios y la comunicación comercial con clientes activos.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "conservacion",
        num: "05",
        title: "Conservación de los Datos",
        content: (
          <p>Los datos personales serán conservados mientras se mantenga la relación contractual activa con el cliente. Tras la finalización del vínculo comercial, los datos privados serán bloqueados y suprimidos. Cabe destacar que, por la naturaleza del servicio, las URLs permanentes y el contenido editorial público distribuido en la red de medios mantendrán su vigencia digital en los motores de búsqueda de manera indefinida.</p>
        ),
      },
      {
        id: "derechos",
        num: "06",
        title: "Derechos del Usuario",
        content: (
          <React.Fragment>
            <p>El usuario titular de los datos ejerce control total sobre su información y tiene derecho a:</p>
            <ul>
              <li><strong>Acceder</strong> a los datos que la Agencia custodia.</li>
              <li><strong>Rectificar</strong> cualquier información inexacta, incompleta o desactualizada.</li>
              <li><strong>Solicitar la supresión</strong> de sus datos operativos de nuestras bases internas.</li>
              <li><strong>Oponerse</strong> o solicitar la limitación temporal del tratamiento de sus datos.</li>
            </ul>
            <p>Para materializar cualquiera de estos derechos, el titular debe remitir una solicitud formal por escrito a <a href="mailto:contacto@mediastarpress.com">contacto@mediastarpress.com</a>, especificando la acción requerida.</p>
          </React.Fragment>
        ),
      },
      {
        id: "seguridad",
        num: "07",
        title: "Seguridad de la Información",
        content: (
          <p>La Agencia implementa protocolos técnicos y administrativos rigurosos orientados a proteger la información contra accesos no autorizados, alteraciones, sustracción o destrucción. Todo el flujo de datos para campañas multicanal y reportes SEO se realiza bajo estándares de seguridad digital.</p>
        ),
      },
      {
        id: "modificaciones-privacidad",
        num: "08",
        title: "Modificaciones a la Política",
        content: (
          <p>Media Star posee la facultad de actualizar la presente Política de Privacidad para adecuarla a nuevas normativas, implementaciones tecnológicas o cambios en los procesos de optimización para motores de respuesta generativa. Toda actualización entrará en vigor de manera inmediata al ser publicada en esta plataforma.</p>
        ),
      },
    ],
  },

  "cookies": {
    title: "Política de Cookies",
    crumb: "Cookies",
    updated: "Enero 2026",
    sections: [
      {
        id: "definicion",
        num: "01",
        title: "Definición y Función",
        content: (
          <p>Una cookie es un fichero estructurado que se descarga en el dispositivo del Usuario al acceder a determinadas páginas web. Las cookies permiten a <strong>Media Star</strong>, entre otras funciones operativas, almacenar y recuperar información sobre los hábitos de navegación de un equipo, garantizar el correcto funcionamiento técnico de la plataforma y recopilar métricas esenciales para la mejora de la arquitectura de la información y la experiencia B2B.</p>
        ),
      },
      {
        id: "tipologia",
        num: "02",
        title: "Tipología de Cookies Utilizadas",
        content: (
          <React.Fragment>
            <p>Esta plataforma emplea arquitecturas de rastreo y almacenamiento local necesarias para su operatividad técnica y para el análisis de tráfico. Se clasifican de la siguiente manera:</p>
            <ul>
              <li><strong>Cookies Técnicas (Estrictamente Necesarias):</strong> Permiten al Usuario la navegación fluida y segura a través del sitio web. Son imprescindibles para la estructura del sitio y la gestión de sesiones operativas; no pueden ser desactivadas en los sistemas de la Agencia.</li>
              <li><strong>Cookies de Análisis o Medición:</strong> Facilitan la cuantificación del impacto y análisis del comportamiento de los Usuarios. La información recogida se utiliza para medir la actividad del portal e introducir mejoras basadas en el análisis de datos.</li>
              <li><strong>Cookies de Personalización:</strong> Permiten recordar información técnica para que el Usuario acceda al servicio con determinadas características que pueden diferenciar su experiencia (por ejemplo, configuración regional o visualización).</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "cookies-terceros",
        num: "03",
        title: "Cookies de Terceros",
        content: (
          <p>El ecosistema digital de Media Star puede integrar servicios analíticos y operativos de terceros que recopilarán información con fines estadísticos y de rendimiento web. El procesamiento de estos datos se realiza conforme a las políticas de privacidad y directrices técnicas estipuladas por dichos proveedores externos, operando de manera independiente a la infraestructura de la Agencia.</p>
        ),
      },
      {
        id: "administracion",
        num: "04",
        title: "Administración y Bloqueo de Cookies",
        content: (
          <React.Fragment>
            <p>El Usuario posee el control total para permitir, restringir, bloquear o eliminar las cookies instaladas en su equipo de navegación. Se advierte que la desactivación de cookies técnicas puede comprometer el rendimiento de la plataforma web o inhabilitar secciones específicas.</p>
            <p>Rutas de configuración en los principales navegadores:</p>
            <ul>
              <li><strong>Google Chrome:</strong> Configuración &gt; Privacidad y seguridad &gt; Cookies y otros datos de sitios.</li>
              <li><strong>Mozilla Firefox:</strong> Ajustes &gt; Privacidad y seguridad &gt; Cookies y datos del sitio.</li>
              <li><strong>Safari:</strong> Preferencias &gt; Privacidad &gt; Bloquear cookies.</li>
              <li><strong>Microsoft Edge:</strong> Configuración &gt; Cookies y permisos del sitio.</li>
            </ul>
          </React.Fragment>
        ),
      },
      {
        id: "actualizaciones-cookies",
        num: "05",
        title: "Actualizaciones de la Política",
        content: (
          <React.Fragment>
            <p>Media Star mantiene la autoridad para modificar la presente Política de Cookies en respuesta a actualizaciones normativas, exigencias operativas o implementaciones técnicas. Cualquier modificación será publicada de forma inmediata en esta misma sección.</p>
            <p>Para requerimientos técnicos u operativos sobre el tratamiento de rastreadores:</p>
            <ul>
              <li><strong>Correo Electrónico:</strong> <a href="mailto:contacto@mediastarpress.com">contacto@mediastarpress.com</a></li>
              <li><strong>Teléfono:</strong> +1 754 325 5734</li>
            </ul>
          </React.Fragment>
        ),
      },
    ],
  },
};

/* ============================================================
   LEGAL PAGE
   ============================================================ */
function LegalPage({ kind, navigate }) {
  const doc = LEGAL_CONTENT[kind] || LEGAL_CONTENT["aviso-legal"];

  return (
    <main className="page-enter" data-screen-label={`Legal: ${doc.title}`}>
      <div className="shell">
        <div className="legal">
          <div className="legal__head">
            <div>
              <div className="crumb" style={{ background: "rgba(5,7,13,0.05)" }}>
                <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
                <span className="sep">/</span>
                <span>{doc.crumb}</span>
              </div>
              <h1 className="legal__title">{doc.title}</h1>
            </div>
            <div className="legal__meta">
              <div>Última actualización</div>
              <div style={{ color: "var(--ink)", marginTop: 4 }}>{doc.updated}</div>
            </div>
          </div>

          <div className="legal__layout">
            <aside className="legal__toc">
              <h5>Índice</h5>
              {doc.sections.map((s) => (
                <a key={s.id} href={`#${s.id}`} onClick={(e) => {
                  e.preventDefault();
                  const el = document.getElementById(s.id);
                  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
                }}>
                  {s.num} · {s.title}
                </a>
              ))}
            </aside>

            <div className="legal__body">
              {doc.sections.map((s) => (
                <section key={s.id} id={s.id} className="legal__section">
                  <span className="mono" style={{ color: "var(--ink-soft)" }}>{s.num} · Sección</span>
                  <h2>{s.title}</h2>
                  {s.content}
                </section>
              ))}

              <div style={{ borderTop: "1px solid var(--rule-lt-2)", paddingTop: 24, marginTop: 24 }}>
                <p style={{ color: "var(--ink-soft)", fontSize: 13 }}>
                  Para más información puedes escribirnos a <strong style={{ color: "var(--ink)" }}>contacto@mediastarpress.com</strong>.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

/* ============================================================
   404
   ============================================================ */
function NotFound({ navigate }) {
  return (
    <main className="page-enter" style={{ padding: "120px 0" }}>
      <div className="shell">
        <span className="mono" style={{ color: "var(--pop)" }}>404</span>
        <h1 style={{ marginTop: 18 }}>Página no encontrada.</h1>
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }} className="btn btn--pop" style={{ marginTop: 24 }}>
          Volver al inicio <span className="btn__arrow">{Icon.arrowUpRight()}</span>
        </a>
      </div>
    </main>
  );
}

Object.assign(window, { HomePage, ServiciosPage, ServicioDetail, RedPage, PlanesPage, ContactoPage, LegalPage, NotFound });