/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================================
   Logo — image
   ============================================================ */
function Logo({ size = "md" }) {
  return (
    <span className={`logo logo--${size}`}>
      <img src="https://en-for.b-cdn.net/mediastarpress.com/logo_mediastar.png" alt="mediastar press" />
    </span>
  );
}

/* ============================================================
   Icons (inline SVG)
   ============================================================ */
const Icon = {
  asterisk: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M16 4v24M5.5 9.5l21 13M5.5 22.5l21-13" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  ),
  plus: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M16 5v22M5 16h22" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round"/>
    </svg>
  ),
  spark: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M16 3l2 12 12 2-12 2-2 12-2-12-12-2 12-2z" fill="currentColor"/>
    </svg>
  ),
  search: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <circle cx="14" cy="14" r="9" stroke="currentColor" strokeWidth="2.4"/>
      <path d="M21 21l6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  ),
  bot: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <rect x="6" y="10" width="20" height="16" rx="3" stroke="currentColor" strokeWidth="2.2"/>
      <path d="M16 4v6M11 4h10" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <circle cx="12" cy="18" r="1.6" fill="currentColor"/>
      <circle cx="20" cy="18" r="1.6" fill="currentColor"/>
    </svg>
  ),
  pin: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M16 28s10-9 10-16a10 10 0 1 0-20 0c0 7 10 16 10 16z" stroke="currentColor" strokeWidth="2.2"/>
      <circle cx="16" cy="12" r="3.2" stroke="currentColor" strokeWidth="2.2"/>
    </svg>
  ),
  chart: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M5 27h22M9 22V14M15 22V8M21 22V18M27 22V11" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  ),
  doc: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M9 4h11l5 5v18a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round"/>
      <path d="M20 4v6h5M12 16h10M12 21h10M12 26h6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
    </svg>
  ),
  shield: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <path d="M16 4l11 4v10c0 6-5 11-11 12-6-1-11-6-11-12V8z" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round"/>
      <path d="M11 16l4 4 7-8" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  clock: (s = 28) => (
    <svg width={s} height={s} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="2.2"/>
      <path d="M16 9v7l5 3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
    </svg>
  ),
  calendar: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 20 20" fill="none">
      <rect x="3" y="5" width="14" height="12" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M3 9h14M7 3v4M13 3v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  arrowRight: (s = 14) => (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  arrowUpRight: (s = 14) => (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M5 11l6-6M6 5h5v5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  arrowLeft: (s = 14) => (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

/* ============================================================
   Schedule Modal — opens from any "Agenda una estrategia" CTA
   ============================================================ */
const WEBHOOK_URL = "https://n8n.idealatam.com/webhook/577b0bfc-5998-410c-bdb9-fdfab5337ed8";

function ScheduleModal({ open, onClose }) {
  const [form, setForm] = useState({
    name: "", company: "", country: "España", website: "", objective: "Visibilidad en Google (SEO)",
  });
  const [errors, setErrors] = useState({});
  const [status, setStatus] = useState("idle"); // idle | sending | done | error

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);

  useEffect(() => {
    if (!open) { setStatus("idle"); setErrors({}); }
  }, [open]);

  if (!open) return null;

  const u = (k, v) => setForm({ ...form, [k]: v });

  const submit = async () => {
    const errs = {};
    if (!form.name.trim()) errs.name = "Requerido";
    if (!form.company.trim()) errs.company = "Requerido";
    if (!form.website.trim()) errs.website = "Indica tu sitio";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setStatus("sending");
    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,
          origen: "modal-agenda",
        }),
      });
      setStatus("done");
    } catch (err) {
      setStatus("error");
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="modal__head">
          <div>
            <span className="mono" style={{ color: "var(--pop)" }}>Agenda una estrategia</span>
            <h3 style={{ marginTop: 10 }}>
              {status === "done"
                ? <>¡Listo, <em>te contactamos!</em></>
                : <>Posicionamiento <em>editorial</em></>}
            </h3>
            <p className="modal__sub">
              {status === "done"
                ? "Hemos recibido tus datos. Un editor senior te escribirá en menos de 24h con propuesta y horario."
                : "Cuéntanos lo esencial. Te respondemos en menos de 24h con propuesta y horario."}
            </p>
          </div>
          <button className="modal__close" onClick={onClose} aria-label="Cerrar">✕</button>
        </div>

        {status === "done" ? (
          <div className="form" style={{ textAlign: "center", padding: "32px 0 8px" }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>✓</div>
            <p style={{ color: "var(--pop)", fontFamily: "var(--mono)", fontSize: 13 }}>Solicitud enviada</p>
            <button className="btn btn--pop" style={{ marginTop: 28 }} onClick={onClose}>
              Cerrar <span className="btn__arrow">{Icon.arrowUpRight()}</span>
            </button>
          </div>
        ) : (
          <div className="form">
            <div className="field--row">
              <div className="field">
                <label>Nombre</label>
                <input value={form.name} onChange={(e) => u("name", e.target.value)} placeholder="Ana Martínez" disabled={status === "sending"} />
                {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) => u("company", e.target.value)} placeholder="Tu marca" disabled={status === "sending"} />
                {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) => u("country", e.target.value)} disabled={status === "sending"}>
                  <option>España</option><option>México</option><option>Colombia</option>
                  <option>Chile</option><option>Argentina</option><option>Estados Unidos</option>
                  <option>Perú</option><option>Otro</option>
                </select>
              </div>
              <div className="field">
                <label>Sitio web</label>
                <input value={form.website} onChange={(e) => u("website", e.target.value)} placeholder="https://" disabled={status === "sending"} />
                {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) => u("objective", e.target.value)} disabled={status === "sending"}>
                <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>
            {status === "error" && (
              <p style={{ color: "var(--coral)", fontFamily: "var(--mono)", fontSize: 12, marginTop: 4 }}>
                Error al enviar. Inténtalo de nuevo o escríbenos a contacto@mediastarpress.com
              </p>
            )}
            <div className="form__submit">
              <p className="form__legal">Datos usados solo para preparar tu llamada. Nada de spam, nunca.</p>
              <button className="btn btn--pop" onClick={submit} disabled={status === "sending"}>
                {status === "sending" ? "Enviando…" : <>Enviar solicitud <span className="btn__arrow">{Icon.arrowUpRight()}</span></>}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   Nav (with mobile drawer)
   ============================================================ */
function Nav({ route, navigate, openSchedule }) {
  const isActive = (r) => route === r || (r !== "/" && route.startsWith(r));
  const [mobOpen, setMobOpen] = useState(false);

  useEffect(() => { setMobOpen(false); }, [route]);
  useEffect(() => {
    document.body.style.overflow = mobOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobOpen]);

  const go = (path) => (e) => { e.preventDefault(); navigate(path); setMobOpen(false); };

  return (
    <React.Fragment>
      <nav className="nav">
        <div className="shell nav__inner">
          {/* Lado izquierdo — vacío en desktop, ocupa espacio en móvil para centrar logo */}
          <div className="nav__side nav__side--left">
            <div className="nav__links">
              <a href="#/" onClick={go("/")} className={"nav__link " + (route === "/" ? "is-active" : "")}>Inicio</a>
              <div className="nav__dropdown-wrap">
                <a href="#/servicios" onClick={go("/servicios")} className={"nav__link " + (isActive("/servicios") ? "is-active" : "")}>Servicios</a>
                <div className="nav__dropdown">
                  {SERVICES.map((s) => (
                    <a key={s.slug} href={`#/servicios/${s.slug}`} onClick={go(`/servicios/${s.slug}`)} className="nav__d-item">
                      <small>{s.num}</small>
                      <strong>{s.title}</strong>
                    </a>
                  ))}
                </div>
              </div>
              <a href="#/red" onClick={go("/red")} className={"nav__link " + (isActive("/red") ? "is-active" : "")}>Red de medios</a>
              <a href="#/planes" onClick={go("/planes")} className={"nav__link " + (isActive("/planes") ? "is-active" : "")}>Planes</a>
              <a href="#/contacto" onClick={go("/contacto")} className={"nav__link " + (isActive("/contacto") ? "is-active" : "")}>Contacto</a>
            </div>
          </div>

          {/* Centro — logo siempre centrado */}
          <a href="#/" onClick={go("/")} className="nav__logo-wrap">
            <Logo size="md" />
          </a>

          {/* Lado derecho — CTA + burger */}
          <div className="nav__side nav__side--right">
            <a href="#/contacto" onClick={go("/contacto")} className="nav__login">Acceder</a>
            <button onClick={openSchedule} className="btn btn--pop nav__cta-btn">
              Agenda una estrategia
              <span className="btn__arrow">{Icon.calendar(16)}</span>
            </button>
            <button className={"nav__burger " + (mobOpen ? "is-open" : "")} onClick={() => setMobOpen(!mobOpen)} aria-label="Menú">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={"mobile-menu__overlay " + (mobOpen ? "is-open" : "")} onClick={() => setMobOpen(false)} />
      <aside className={"mobile-menu " + (mobOpen ? "is-open" : "")}>
        <a href="#/" onClick={go("/")}>Inicio</a>
        <a href="#/servicios" onClick={go("/servicios")}>Servicios</a>
        {SERVICES.map((s) => (
          <a key={s.slug} href={`#/servicios/${s.slug}`} onClick={go(`/servicios/${s.slug}`)} style={{ paddingLeft: 18, fontSize: 16 }}>
            <span><small style={{ marginRight: 8 }}>{s.num}</small>{s.title}</span>
          </a>
        ))}
        <a href="#/red" onClick={go("/red")}>Red de medios</a>
        <a href="#/planes" onClick={go("/planes")}>Planes</a>
        <a href="#/contacto" onClick={go("/contacto")}>Contacto</a>
        <button onClick={() => { setMobOpen(false); openSchedule(); }} className="btn btn--pop mobile-menu__cta">
          Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
        </button>
      </aside>
    </React.Fragment>
  );
}

/* ============================================================
   Footer (constrained to shell width)
   ============================================================ */
function Footer({ navigate, openSchedule }) {
  return (
    <div className="footer-wrap">
      <div className="shell">
        <footer className="footer">
          <div className="footer__top">
            <div className="footer__col">
              <Logo size="lg" />
              <p style={{ marginTop: 14, maxWidth: 380, fontSize: 14, lineHeight: 1.55, color: "var(--txt-on-dark-mute)" }}>
                Agencia de medios. +50 periodistas publicando en portales asociados de alta autoridad, aprobados por Google News. Visibilidad en Google, Google Maps y respuestas de IA.
              </p>
            </div>
            <div className="footer__col">
              <h5>Servicios</h5>
              {SERVICES.map((s) => (
                <a key={s.slug} href={`#/servicios/${s.slug}`} onClick={(e) => { e.preventDefault(); navigate(`/servicios/${s.slug}`); }}>{s.title}</a>
              ))}
            </div>
            <div className="footer__col">
              <h5>Empresa</h5>
              <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Inicio</a>
              <a href="#/red" onClick={(e) => { e.preventDefault(); navigate("/red"); }}>Red de medios</a>
              <a href="#/planes" onClick={(e) => { e.preventDefault(); navigate("/planes"); }}>Planes</a>
              <a href="#/contacto" onClick={(e) => { e.preventDefault(); navigate("/contacto"); }}>Contacto</a>
            </div>
            <div className="footer__col">
              <h5>Contacto</h5>
              <a href="mailto:contacto@mediastarpress.com">contacto@mediastarpress.com</a>
              <a href="tel:+17543255734">+1 754 325 5734 · EEUU</a>
              <h5 style={{ marginTop: 22 }}>Presentes en</h5>
              <p style={{ fontSize: 14, opacity: 0.85, lineHeight: 1.55 }}>
                Madrid · CDMX · Bogotá<br/>Santiago · Buenos Aires
              </p>
            </div>
          </div>
          <div className="footer__big">
            ¿Listos para <em>aparecer</em>?
          </div>
          <button onClick={openSchedule} className="btn btn--pop footer__cta">
            Agenda una estrategia <span className="btn__arrow">{Icon.calendar(16)}</span>
          </button>
          <div className="footer__base">
            <span>© 2026 mediastar press · Agencia de Medios</span>
            <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
              <a href="#/aviso-legal" onClick={(e) => { e.preventDefault(); navigate("/aviso-legal"); }}>Aviso legal</a>
              <a href="#/privacidad" onClick={(e) => { e.preventDefault(); navigate("/privacidad"); }}>Privacidad</a>
              <a href="#/cookies" onClick={(e) => { e.preventDefault(); navigate("/cookies"); }}>Cookies</a>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}

/* ============================================================
   Data
   ============================================================ */
const SERVICES = [
  {
    slug: "publicacion-en-medios",
    num: "01",
    title: "Publicación en medios",
    short: "Notas de prensa en portales asociados aprobados por Google News.",
    long: "Distribuimos tu marca a través de nuestra red de portales asociados con dominios DA 50+. Publicaciones editoriales reales escritas por periodistas verificados que impulsan tu visibilidad en Google, Discover, respuestas de IA y la ficha de Google Maps.",
    image: "assets/svc-publicacion.jpg",
    benefits: [
      { icon: "doc",   t: "Red de +200 portales",        d: "Cabeceras asociadas con dominios DA 50+ aprobadas por Google News.", feat: true },
      { icon: "shield", t: "Aprobado por Google News",   d: "Cobertura indexada que se distribuye en Discover y AI Overviews." },
      { icon: "asterisk", t: "Periodistas verificados",  d: "Más de 50 redactores en plantilla escriben cada pieza con criterio editorial." },
      { icon: "chart", t: "URLs permanentes",           d: "Enlaces editoriales que se quedan en el medio el tiempo que dure la publicación." },
      { icon: "search", t: "Optimizado para SEO + IA",  d: "Cada artículo optimizado para keywords objetivo y citas en motores generativos." },
      { icon: "clock", t: "Publicación en 14–21 días",  d: "Calendario predecible, sin sorpresas. Reporte semanal de avance." },
    ],
  },
  {
    slug: "investigaciones",
    num: "02",
    title: "Investigaciones",
    short: "Reportajes en profundidad, data journalism y análisis de sector.",
    long: "Nuestra unidad de investigación produce reportajes originales con valor noticioso real: data journalism, entrevistas a fuentes, verificación cruzada y visualización de datos. Material que medios serios quieren publicar y que tu audiencia comparte.",
    image: "assets/svc-investigaciones.jpg",
    benefits: [
      { icon: "search", t: "Investigación original", d: "Equipo dedicado de investigación, fact-checking y verificación interna.", feat: true },
      { icon: "chart", t: "Data journalism",         d: "Visualización de datos, gráficos editoriales y dashboards exportables." },
      { icon: "shield", t: "Bajo NDA por defecto",   d: "Confidencialidad total durante la producción. Embargo coordinado al publicar." },
      { icon: "asterisk", t: "Multi-medio",          d: "Distribución sincronizada en varios portales de la red asociada." },
      { icon: "doc", t: "Material multicanal",       d: "El reportaje se adapta para tu newsletter, redes, deck y website." },
      { icon: "bot", t: "Indexable en IA",           d: "Estructurado para que ChatGPT, Gemini y Perplexity te citen como fuente." },
    ],
  },
  {
    slug: "contenido-editorial",
    num: "03",
    title: "Contenido editorial",
    short: "Artículos firmados, op-eds y series temáticas escritos por nuestro staff.",
    long: "+50 periodistas trabajan diariamente generando piezas con criterio editorial: análisis de industria, op-eds, entrevistas y series. Contenido pensado para construir autoridad de marca a largo plazo y crecer en buscadores e IA generativa.",
    image: "assets/svc-editorial.jpg",
    benefits: [
      { icon: "asterisk", t: "+50 redactores expertos", d: "Periodistas especializados por vertical: finanzas, tech, salud, legal, real estate.", feat: true },
      { icon: "doc", t: "Series y calendarios",         d: "Calendarios editoriales mensuales con series temáticas alineadas al negocio." },
      { icon: "spark", t: "Op-eds firmados",            d: "Coordinamos op-eds firmados por voces relevantes de tu industria." },
      { icon: "search", t: "SEO desde la redacción",    d: "Cada pieza nace con keyword target, entidades y estructura para buscadores." },
      { icon: "bot", t: "Entrenamiento de IA",          d: "Contenido pensado para alimentar Overviews y respuestas generativas." },
      { icon: "shield", t: "Tono de cada cabecera",     d: "Adaptamos el estilo al medio de destino: ninguna pieza parece publirreportaje." },
    ],
  },
  {
    slug: "seo-y-posicionamiento",
    num: "04",
    title: "SEO & posicionamiento",
    short: "Posicionamos tu marca en Google, respuestas de IA y Google Maps.",
    long: "Nuestras publicaciones empujan tu sitio web en los canales que importan: Google, AI Overviews, ChatGPT, Gemini, Perplexity y la ficha de Google Maps. Trabajamos enlaces editoriales contextuales, entidades y E-E-A-T para autoridad sostenible.",
    image: "assets/svc-seo.jpg",
    benefits: [
      { icon: "search", t: "Enlaces editoriales", d: "Backlinks contextuales en cabeceras DA 50+ que transfieren autoridad real.", feat: true },
      { icon: "bot", t: "AI Overviews & ChatGPT", d: "Optimización para que tu marca aparezca en respuestas generativas y agentes." },
      { icon: "pin", t: "Google Maps & SEO local", d: "Refuerzo de tu ficha con menciones de prensa que Google interpreta como prueba." },
      { icon: "shield", t: "E-E-A-T verificable",  d: "Construcción de autoridad, experiencia y trust con citas en medios reconocidos." },
      { icon: "chart", t: "Reporte con métricas",  d: "Posiciones, autoridad de dominio, menciones en IA y conversiones medibles." },
      { icon: "asterisk", t: "Construcción de entidad", d: "Tu marca como entidad reconocida en el knowledge graph de Google." },
    ],
  },
];

const OUTLETS = [
  "El Economista Digital", "Forbes Hoy", "La Voz del Mercado", "Tribuna Empresarial",
  "Diario Innovación", "Capital Press", "Notimedia", "Crónica Financiera",
  "Mundo Marca", "InfoNegocios", "Vanguardia Digital", "Hora Empresa",
  "Reporte Industria", "Latam Business", "Iberia Press", "El Observador Pro",
];

const PROCESS = [
  { num: "01", title: "Briefing", desc: "Entendemos tu marca, ángulo y resultados esperados. Definimos audiencia, medios y mensajes clave.", tag: "Día 1–3" },
  { num: "02", title: "Investigación", desc: "Producimos material original: entrevistas, data, fuentes verificadas y ángulos editoriales con valor noticioso.", tag: "Día 3–10" },
  { num: "03", title: "Redacción", desc: "Periodistas asignados escriben piezas adaptadas al tono de cada cabecera asociada de la red.", tag: "Día 7–14" },
  { num: "04", title: "Distribución", desc: "Publicación coordinada en portales aprobados por Google News. Optimización para Discover y AI Overviews.", tag: "Día 14–18" },
  { num: "05", title: "Reporte", desc: "Entregamos URLs permanentes, métricas de cobertura, impacto SEO y posicionamiento en respuestas de IA.", tag: "Día 21" },
];

const FAQS = [
  { q: "¿Las publicaciones son artículos editoriales reales?", a: "Sí. Cada pieza es redactada por un periodista de nuestra plantilla y publicada en portales asociados con criterio editorial. No son publirreportajes ni granjas de enlaces." },
  { q: "¿Por qué importa que sean medios asociados aprobados por Google News?", a: "Los medios indexados en Google News reciben tratamiento privilegiado en Discover, AI Overviews y la búsqueda principal. Publicar ahí transfiere autoridad real a tu marca, a tu web y a tu ficha de Google Maps." },
  { q: "¿Qué resultados puedo esperar en SEO?", a: "Mejoras medibles en autoridad de dominio, posicionamiento de keywords objetivo, presencia en respuestas de IA (ChatGPT, Gemini, Perplexity) y refuerzo de tu ficha de Google Maps." },
  { q: "¿Trabajan con cualquier sector?", a: "Cubrimos finanzas, tecnología, salud, legal, real estate, ecommerce, lifestyle y B2B. Cada cuenta tiene un editor senior asignado del vertical correspondiente." },
  { q: "¿Cuánto tarda en aparecer una campaña?", a: "Una campaña estándar se publica entre 14 y 21 días después del briefing. Tenemos protocolos express para anuncios urgentes." },
];

const PLANS = [
  {
    name: "Esencial", price: "99€", suffix: "/ mes",
    bullets: [
      "10 publicaciones / mes",
      "Artículos 100% originales (no clonados)",
      "Portales de noticias aprobados por Google News",
      "Diagnóstico, reporte mensual y seguimiento",
      "Soporte por email",
    ],
    cta: "Empezar",
  },
  {
    name: "Crecimiento", price: "399€", suffix: "/ mes", featured: true,
    bullets: [
      "50 publicaciones / mes",
      "Artículos 100% originales (no clonados)",
      "Portales de alta autoridad (DA 50+) aprobados por Google News + Tier 1",
      "Diagnóstico, reporte semanal y seguimiento",
      "AI Overviews + Google Maps",
    ],
    cta: "Empezar",
  },
  {
    name: "Enterprise", price: "Custom", suffix: "",
    bullets: [
      "Campañas a medida con artículos 100% originales (no clonados)",
      "Investigaciones bajo NDA",
      "Embargo multimedio",
      "Director editorial dedicado",
      "Diagnóstico, reporte y seguimiento personalizado",
    ],
    cta: "Agenda una estrategia",
  },
];

const AUTHORS = [
  {
    name: "Adriana Navarro",
    role: "Moda y Belleza",
    bio: "Ha caminado tras bambalinas en las capitales globales del estilo. No escribe sobre vanidad; escribe sobre identidad, rebelión y el profundo empoderamiento emocional que existe en el acto de embellecer nuestra propia piel.",
    photo: "https://en-for.b-cdn.net/periodistas/adriana-navarro.jpg",
  },
  {
    name: "Camila Gutiérrez",
    role: "Gaming y eSports",
    bio: "Se ha sumergido en universos digitales donde millones encuentran comunidad y propósito. Sus crónicas demuestran cómo, a través de avatares y controles, una nueva generación reescribe la narrativa global.",
    photo: "https://en-for.b-cdn.net/periodistas/camila-gutierrez.jpg",
  },
  {
    name: "Luciana Ríos",
    role: "Educación",
    bio: "Ha recorrido escuelas rurales olvidadas y academias de élite buscando la misma respuesta: cómo forjar el futuro. Sus textos hablan de la arquitectura del pensamiento y la lucha de los maestros que siembran luz.",
    photo: "https://en-for.b-cdn.net/periodistas/luciana-rios.jpg",
    feat: true,
  },
  {
    name: "Esteban Rivas",
    role: "Política",
    bio: "Conoce el frío mármol de los pasillos donde se firman los destinos de millones. No se conforma con discursos ensayados; su mirada penetra las máscaras del poder para encontrar el latido humano detrás de la burocracia.",
    photo: "https://en-for.b-cdn.net/periodistas/esteban-rivas.jpg",
  },
];

Object.assign(window, { Nav, Footer, Logo, Icon, ScheduleModal, SERVICES, OUTLETS, PROCESS, FAQS, PLANS, AUTHORS });