/* =====================================================================
   ed-sections.jsx — vistas: Hub, Páginas Web, explicador de Plataforma,
   Contenido, LinkedIn, SEO, Email. Reciben { go } para navegar.
   ===================================================================== */

/* ---- HUB ---- */
function Hub() {
  const ED = window.ED;
  return (
    <div className="ed-view">
      {/* Hero */}
      <section style={{ position: "relative", overflow: "hidden", paddingTop: 72, paddingBottom: 64 }}>
        <div aria-hidden="true" style={{ position: "absolute", right: -140, top: 40, width: 460, height: 460, background: "var(--gold)", opacity: 0.07, clipPath: 'path("M260 0 C 320 0, 360 40, 360 100 L 360 180 C 400 180, 440 200, 440 240 C 440 280, 400 300, 360 300 L 360 380 C 360 440, 320 480, 260 480 L 80 480 C 40 480, 0 440, 0 380 L 0 260 C 40 260, 80 240, 80 200 C 80 160, 40 140, 0 140 L 0 80 C 0 40, 40 0, 80 0 Z")', pointerEvents: "none" }} />
        <div className="ed-container" style={{ position: "relative", maxWidth: 880, textAlign: "center", margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 18 }}>Ecosistemas Digitales · Sell-U</Eyebrow>
          <h1 style={{ fontSize: 54, lineHeight: "60px", fontWeight: 600, letterSpacing: "-0.025em" }}>
            ¿Tu negocio existe en internet…<br />o solo en tu cabeza?
          </h1>
          <p style={{ marginTop: 22, fontSize: 20, lineHeight: "30px", color: "var(--fg-secondary)", maxWidth: 620, marginInline: "auto" }}>
            Sin presencia digital profesional, estás perdiendo clientes frente a competidores que sí aparecen.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Btn kind="gold" size="lg" iconRight="arrow-down" onClick={() => { const el = document.getElementById("ed-categorias"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>Explorar soluciones</Btn>
            <Btn kind="navy" size="lg" href="#/paginas-web" iconRight="arrow-right">Cotizar ahora</Btn>
          </div>
          <div style={{ marginTop: 34, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            {ED.trust.map((t, i) => <Badge key={i} icon={t.icon}>{t.label}</Badge>)}
          </div>
        </div>
      </section>

      {/* Grilla de 5 categorías */}
      <section id="ed-categorias" style={{ paddingTop: 32, paddingBottom: 88 }}>
        <div className="ed-container">
          <SectionHead eyebrow="Cinco frentes" title="Todo tu ecosistema digital, en un solo lugar" lead="Elige por dónde empezar. Cada frente resuelve un dolor concreto de tu negocio." align="center" max={620} />
          <div className="ed-stagger" style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
            {ED.categories.map((c, i) => <CategoryCard key={c.key} cat={c} big={i === 0} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

function CategoryCard({ cat }) {
  const [hover, setHover] = useS(false);
  return (
    <a href={cat.route} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", flexDirection: "column", background: "var(--surface)", borderRadius: "var(--r-lg)", padding: "26px 24px",
        border: "1.5px solid " + (hover ? "var(--navy-300)" : "var(--border)"), boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transition: "all 200ms var(--ease-out)" }}>
      <span style={{ width: 48, height: 48, borderRadius: "var(--r-md)", background: "var(--navy-50)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
        <Icon name={cat.icon} size={24} color="var(--navy-900)" />
      </span>
      <h3 style={{ fontSize: 20, fontWeight: 600 }}>{cat.title}</h3>
      <p style={{ marginTop: 8, fontSize: 14.5, lineHeight: "21px", color: "var(--fg-secondary)" }}>{cat.desc}</p>
      <div style={{ marginTop: 16, display: "flex", flexWrap: "wrap", gap: 6 }}>
        {cat.sub.map(s => <span key={s} style={{ fontSize: 12, fontWeight: 500, color: "var(--fg-tertiary)", background: "var(--paper-2)", borderRadius: "var(--r-pill)", padding: "4px 10px" }}>{s}</span>)}
      </div>
      <span style={{ marginTop: "auto", paddingTop: 18, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, fontWeight: 600, color: "var(--navy-900)" }}>
        Explorar <Icon name="arrow-right" size={15} color="var(--navy-900)" style={{ transform: hover ? "translateX(3px)" : "none", transition: "transform 200ms var(--ease-out)" }} />
      </span>
    </a>
  );
}

/* ---- PÁGINAS WEB (3 sub-tarjetas) ---- */
function PaginasWeb() {
  const ED = window.ED;
  return (
    <div className="ed-view">
      <div className="ed-container" style={{ paddingTop: 28 }}>
        <Breadcrumb trail={[{ label: "Ecosistemas Digitales", href: "#/" }, { label: "Páginas Web" }]} />
        <div style={{ marginTop: 24, maxWidth: 680 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Páginas Web</Eyebrow>
          <h1 style={{ fontSize: 42, lineHeight: "48px", fontWeight: 600 }}>Sitios que trabajan para vender, no para decorar.</h1>
          <p style={{ marginTop: 16, fontSize: 18, lineHeight: "27px", color: "var(--fg-secondary)" }}>Elige el tipo de página según lo que tu negocio necesita lograr.</p>
        </div>
        <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 18, paddingBottom: 72 }}>
          {ED.webTypes.map(w => <WebTypeCard key={w.key} w={w} />)}
        </div>
      </div>
    </div>
  );
}

function WebTypeCard({ w }) {
  const platforms = w.platforms.map(k => window.ED.platforms[k]);
  return (
    <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-xl)", padding: 0, boxShadow: "var(--shadow-sm)", overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)", gap: 0 }} className="ed-webcard-grid">
        <div style={{ padding: "30px 32px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 44, height: 44, borderRadius: "var(--r-md)", background: "var(--navy-900)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={w.icon} size={22} color="var(--white)" /></span>
            <h2 style={{ fontSize: 24, fontWeight: 600 }}><a href={"#/tipo/" + w.key} style={{ color: "inherit" }} className="ed-type-title">{w.title}</a></h2>
          </div>
          <PainQuote style={{ marginTop: 18 }}>{w.dolor}</PainQuote>
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 10 }}>Ideal para</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {w.idealPara.map(p => <span key={p} style={{ fontSize: 13.5, fontWeight: 500, color: "var(--navy-900)", background: "var(--navy-50)", borderRadius: "var(--r-pill)", padding: "6px 13px" }}>{p}</span>)}
            </div>
          </div>
          <a href={"#/tipo/" + w.key} style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 20, fontSize: 14, fontWeight: 600, color: "var(--navy-900)" }} className="ed-type-link">
            <Icon name="play-circle" size={17} color="var(--gold-700)" /> Qué es y ver video
            <Icon name="arrow-right" size={15} color="var(--navy-900)" />
          </a>
        </div>
        <div style={{ padding: "30px 32px", background: "var(--paper-2)", borderLeft: "1px solid var(--border)" }} className="ed-webcard-side">
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 12 }}>Plataformas</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {platforms.map((p, i) => (
              <a key={w.platforms[i]} href={"#/plataforma/" + w.platforms[i]} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", padding: "11px 14px", boxShadow: "var(--shadow-xs)" }} className="ed-platform-link">
                <span style={{ fontSize: 14.5, fontWeight: 600, color: "var(--navy-900)" }}>{p.label}</span>
                <Icon name="arrow-up-right" size={16} color="var(--fg-tertiary)" />
              </a>
            ))}
          </div>
          <Btn kind="gold" href={"#/cotizador/" + w.cotizador} iconRight="arrow-right" style={{ width: "100%", marginTop: 20 }}>{w.cta}</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---- EXPLICADOR DE TIPO DE PÁGINA (Landing / Ventas / Embudo) + VSL ---- */
function TipoView({ tkey }) {
  const w = (window.ED.webTypes || []).find(x => x.key === tkey);
  if (!w) return <NotFound />;
  const platforms = w.platforms.map(k => window.ED.platforms[k]);
  return (
    <div className="ed-view">
      <div className="ed-container" style={{ paddingTop: 28, paddingBottom: 72, maxWidth: 920 }}>
        <Breadcrumb trail={[{ label: "Ecosistemas Digitales", href: "#/" }, { label: "Páginas Web", href: "#/paginas-web" }, { label: w.title }]} />
        <div style={{ marginTop: 24 }}><BackBtn href="#/paginas-web" label="Volver a Páginas Web" /></div>

        <div style={{ marginTop: 18, maxWidth: 680 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <span style={{ width: 44, height: 44, borderRadius: "var(--r-md)", background: "var(--navy-900)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={w.icon} size={22} color="var(--white)" /></span>
            <Eyebrow>Páginas Web</Eyebrow>
          </div>
          <h1 style={{ fontSize: 40, lineHeight: "46px", fontWeight: 600 }}>¿Qué es una {w.title.toLowerCase()}?</h1>
          <p style={{ marginTop: 16, fontSize: 18, lineHeight: "28px", color: "var(--fg-secondary)" }}>{w.quees}</p>
        </div>

        {/* VSL */}
        <div style={{ marginTop: 32 }}>
          <VslSlot label="VSL" duration="2 min" title={w.title + " — cómo la construimos"} caption="Mira cómo funciona" />
        </div>

        <PainQuote style={{ marginTop: 28, maxWidth: 760 }}>{w.dolor}</PainQuote>

        {/* Ideal para + plataformas */}
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
          <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "24px 24px", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 12 }}>Ideal para</div>
            <CheckList items={w.idealPara} />
          </div>
          <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "24px 24px", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 12 }}>Plataformas</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {platforms.map((p, i) => (
                <a key={w.platforms[i]} href={"#/plataforma/" + w.platforms[i]} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", padding: "11px 14px", boxShadow: "var(--shadow-xs)" }} className="ed-platform-link">
                  <span style={{ fontSize: 14.5, fontWeight: 600, color: "var(--navy-900)" }}>{p.label}</span>
                  <Icon name="arrow-up-right" size={16} color="var(--fg-tertiary)" />
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* CTA */}
        <div style={{ marginTop: 32, background: "var(--navy-900)", borderRadius: "var(--r-xl)", padding: "32px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div>
            <h3 style={{ fontSize: 22, fontWeight: 600, color: "var(--white)" }}>¿Listo para tu {w.title.toLowerCase()}?</h3>
            <p style={{ marginTop: 6, fontSize: 15, color: "rgba(238,241,246,0.75)" }}>Recibe un estimado en menos de un minuto.</p>
          </div>
          <Btn kind="gold" size="lg" href={"#/cotizador/" + w.cotizador} iconRight="arrow-right">{w.cta}</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---- EXPLICADOR DE PLATAFORMA ---- */
function PlatformView({ pkey }) {
  const p = window.ED.platforms[pkey];
  if (!p) return <NotFound />;
  const groupLabel = { landing: "Landing Page", ventas: "Página de Ventas", embudo: "Embudo de Ventas" }[p.group];
  return (
    <div className="ed-view">
      <div className="ed-container" style={{ paddingTop: 28, paddingBottom: 72, maxWidth: 920 }}>
        <Breadcrumb trail={[{ label: "Ecosistemas Digitales", href: "#/" }, { label: "Páginas Web", href: "#/paginas-web" }, { label: p.label }]} />
        <div style={{ marginTop: 24 }}>
          <BackBtn href="#/paginas-web" label="Volver a Páginas Web" />
        </div>

        <div style={{ marginTop: 18, maxWidth: 680 }}>
          <Eyebrow style={{ marginBottom: 14 }}>{p.accent}</Eyebrow>
          <h1 style={{ fontSize: 40, lineHeight: "46px", fontWeight: 600 }}>{p.painTitle || p.headline}</h1>
          {p.painTitle && <p style={{ marginTop: 14, fontSize: 17, fontWeight: 600, color: "var(--navy-700)" }}>{p.headline}</p>}
          <PainQuote style={{ marginTop: 22 }}>{p.dolor}</PainQuote>
        </div>

        {/* En palabras simples (para todos los públicos) */}
        {p.simple && (
          <div style={{ marginTop: 24, maxWidth: 760, display: "flex", gap: 16, alignItems: "flex-start", background: "var(--gold-50)", border: "1px solid var(--gold-100)", borderRadius: "var(--r-lg)", padding: "22px 24px" }}>
            <span style={{ flex: "none", width: 40, height: 40, borderRadius: "var(--r-md)", background: "var(--gold)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="lightbulb" size={20} color="var(--navy-900)" /></span>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gold-700)", marginBottom: 8 }}>En palabras simples</div>
              <p style={{ fontSize: 16, lineHeight: "24px", color: "var(--fg-secondary)" }}>{p.simple}</p>
              {p.analogia && <p style={{ marginTop: 10, fontSize: 15.5, fontWeight: 600, color: "var(--navy-900)" }}>{p.analogia}</p>}
            </div>
          </div>
        )}

        {/* Beneficios */}
        <div style={{ marginTop: 44 }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 18 }}>Beneficios</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", overflow: "hidden" }}>
            {p.benefits.map((b, i) => (
              <div key={i} style={{ background: "var(--surface)", padding: "24px 24px", display: "flex", flexDirection: "column", gap: 10 }}>
                <Icon name={b.icon} size={24} color="var(--navy-800)" />
                <h4 style={{ fontSize: 17, fontWeight: 600, marginTop: 6 }}>{b.h}</h4>
                <p style={{ fontSize: 14, lineHeight: "21px", color: "var(--fg-secondary)" }}>{b.p}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Comparativa + cuándo sí / no */}
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
          <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "24px 24px", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}><Icon name="scale" size={18} color="var(--navy-700)" /><span style={{ fontSize: 15, fontWeight: 600, color: "var(--navy-900)" }}>Comparativa rápida</span></div>
            <p style={{ fontSize: 14.5, lineHeight: "22px", color: "var(--fg-secondary)" }}>{p.comparativa}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ background: "var(--success-bg)", borderRadius: "var(--r-lg)", padding: "20px 22px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}><Icon name="thumbs-up" size={17} color="var(--success-fg)" /><span style={{ fontSize: 14, fontWeight: 600, color: "var(--success-fg)" }}>Cuándo SÍ usarla</span></div>
              <CheckList items={p.cuandoSi} color="var(--success)" />
            </div>
            <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "20px 22px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}><Icon name="hand" size={17} color="var(--fg-tertiary)" /><span style={{ fontSize: 14, fontWeight: 600, color: "var(--fg-tertiary)" }}>Cuándo NO</span></div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {p.cuandoNo.map((it, i) => <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5, lineHeight: "21px", color: "var(--fg-secondary)" }}><Icon name="x" size={16} color="var(--fg-muted)" strokeWidth={2.5} style={{ marginTop: 2, flex: "none" }} />{it}</li>)}
              </ul>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div style={{ marginTop: 36, background: "var(--navy-900)", borderRadius: "var(--r-xl)", padding: "32px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div>
            <h3 style={{ fontSize: 22, fontWeight: 600, color: "var(--white)" }}>¿Listo para tu {groupLabel.toLowerCase()} en {p.label}?</h3>
            <p style={{ marginTop: 6, fontSize: 15, color: "rgba(238,241,246,0.75)" }}>Recibe un estimado en menos de un minuto.</p>
          </div>
          <Btn kind="gold" size="lg" href={"#/cotizador/" + p.cotizador} iconRight="arrow-right">Cotizar con {p.label}</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---- CONTENIDO ---- */
function Contenido() {
  const s = window.ED.services.contenido;
  return (
    <div className="ed-view">
      <div className="ed-container" style={{ paddingTop: 28, paddingBottom: 72, maxWidth: 980 }}>
        <Breadcrumb trail={[{ label: "Ecosistemas Digitales", href: "#/" }, { label: "Creación de Contenido" }]} />
        <div style={{ marginTop: 24, maxWidth: 680 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Creación de Contenido</Eyebrow>
          <h1 style={{ fontSize: 42, lineHeight: "48px", fontWeight: 600 }}>Video que vende, sin productora costosa.</h1>
        </div>
        <div style={{ marginTop: 28, maxWidth: 760 }}>
          <VslSlot label="VSL" duration="2 min" title="Creación de Contenido — nuestro proceso" caption="Mira cómo creamos tu contenido" />
        </div>
        <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 24 }}>
          {s.sub.map(sub => (
            <div key={sub.key} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-xl)", padding: "30px 32px", boxShadow: "var(--shadow-sm)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 44, height: 44, borderRadius: "var(--r-md)", background: "var(--navy-50)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={sub.icon} size={22} color="var(--navy-900)" /></span>
                <h2 style={{ fontSize: 24, fontWeight: 600 }}>{sub.title}</h2>
              </div>
              <PainQuote style={{ marginTop: 18 }}>{sub.dolor}</PainQuote>
              <div style={{ marginTop: 24 }}>
                <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 12 }}>Qué incluye</div>
                <CheckList items={sub.incluye} style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "10px 28px" }} />
              </div>
              {sub.paquetes.length > 0 && (
                <div style={{ marginTop: 28 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 14 }}>Paquetes</div>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16 }}>
                    {sub.paquetes.map(pq => <PriceCard key={pq.label} {...pq} />)}
                  </div>
                </div>
              )}
              <div style={{ marginTop: 24 }}>
                <Btn kind="gold" iconRight="arrow-right" onClick={() => window.__edCal(sub.title)}>{sub.cta}</Btn>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- LINKEDIN ---- */
function LinkedInView() {
  const s = window.ED.services.linkedin;
  return <ServicePage s={s} eyebrow="Campañas LinkedIn" title="Llega a los decisores que sí compran."
    extra={<div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 18 }}>{s.resultados.map(r => <Badge key={r} tone="gold" icon="trending-up">{r}</Badge>)}</div>} />;
}

/* ---- SEO ---- */
function SeoView() {
  const s = window.ED.services.seo;
  return <ServicePage s={s} eyebrow="SEO & Posicionamiento" title="Aparecer primero cuando te buscan."
    extra={<div style={{ marginTop: 18 }}><Badge tone="navy" icon="clock">Plazos reales: {s.plazos}</Badge></div>} />;
}

/* ---- EMAIL ---- */
function EmailView() {
  const s = window.ED.services.email;
  return <ServicePage s={s} eyebrow="Email Marketing" title="Tu lista es dinero. Hazla trabajar."
    extra={<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 18, alignItems: "center" }}><span style={{ fontSize: 13, color: "var(--fg-tertiary)", fontWeight: 500 }}>Herramientas:</span>{s.herramientas.map(h => <span key={h} style={{ fontSize: 13, fontWeight: 600, color: "var(--navy-900)", background: "var(--navy-50)", borderRadius: "var(--r-pill)", padding: "5px 12px" }}>{h}</span>)}</div>} />;
}

/* ---- Plantilla compartida para servicios (LinkedIn / SEO / Email) ---- */
function ServicePage({ s, eyebrow, title, extra }) {
  const items = s.ofrecemos || s.incluye;
  const offeredLabel = s.ofrecemos ? "Qué ofrecemos" : "Qué incluye";
  return (
    <div className="ed-view">
      <div className="ed-container" style={{ paddingTop: 28, paddingBottom: 72, maxWidth: 960 }}>
        <Breadcrumb trail={[{ label: "Ecosistemas Digitales", href: "#/" }, { label: s.title }]} />
        <div style={{ marginTop: 24, maxWidth: 700 }}>
          <Eyebrow style={{ marginBottom: 14 }}>{eyebrow}</Eyebrow>
          <h1 style={{ fontSize: 42, lineHeight: "48px", fontWeight: 600 }}>{title}</h1>
          <PainQuote style={{ marginTop: 22 }}>{s.dolor}</PainQuote>
          {extra}
        </div>

        <div style={{ marginTop: 32, maxWidth: 760 }}>
          <VslSlot label="VSL" duration="2 min" title={s.title} caption="Mira cómo lo hacemos" />
        </div>

        <div style={{ marginTop: 44 }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 18 }}>{offeredLabel}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", overflow: "hidden" }}>
            {items.map((it, i) => (
              <div key={i} style={{ background: "var(--surface)", padding: "22px 22px", display: "flex", flexDirection: "column", gap: 9 }}>
                <Icon name={it.icon} size={22} color="var(--navy-800)" />
                <h4 style={{ fontSize: 16, fontWeight: 600, marginTop: 4 }}>{it.h}</h4>
                <p style={{ fontSize: 13.5, lineHeight: "20px", color: "var(--fg-secondary)" }}>{it.p}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Paquetes */}
        <div style={{ marginTop: 36 }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-tertiary)", marginBottom: 18 }}>Paquetes</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
            {s.paquetes.map(pq => <PriceCard key={pq.label} {...pq} />)}
          </div>
        </div>

        <div style={{ marginTop: 32, textAlign: "center" }}>
          <Btn kind="gold" size="lg" iconRight="arrow-right" onClick={() => window.__edCal(s.title)}>{s.cta}</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---- 404 ---- */
function NotFound() {
  return (
    <div className="ed-view ed-container" style={{ padding: "96px 24px", textAlign: "center" }}>
      <span style={{ width: 56, height: 56, borderRadius: 999, background: "var(--paper-2)", color: "var(--fg-tertiary)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}><Icon name="compass" size={26} color="var(--fg-tertiary)" /></span>
      <h2 style={{ fontSize: 26, fontWeight: 600 }}>Esta página no existe</h2>
      <p style={{ marginTop: 8, color: "var(--fg-secondary)" }}>Vuelve al inicio para explorar el ecosistema.</p>
      <Btn kind="navy" href="#/" style={{ marginTop: 20 }} iconRight="arrow-right">Ir al inicio</Btn>
    </div>
  );
}

Object.assign(window, { Hub, PaginasWeb, TipoView, PlatformView, Contenido, LinkedInView, SeoView, EmailView, NotFound });
