/* eslint-disable */
/* global React, Nav, Footer, Reveal, Arrow, Check, waLink, SUB_LINKS */

function PHero({ eyebrow, title, sub, ctaText, ctaHref, ctaTarget }){
  return (
    <header className="phero">
      <div className="phero__glow"></div>
      <div className="wrap">
        <Reveal>
          <a className="phero__back" href="/">← volver al inicio</a>
          <div className="eyebrow">{eyebrow}</div>
          <h1 className="phero__title">{title}</h1>
          <p className="phero__sub">{sub}</p>
          {ctaText && (
          <div className="phero__cta">
            <a className="btn btn--lg" href={ctaHref} target={ctaTarget} rel={ctaTarget?"noreferrer":undefined}>{ctaText} <Arrow/></a>
          </div>
          )}
        </Reveal>
      </div>
    </header>
  );
}

function Lead({ children }){
  return (
    <section className="lead"><div className="wrap"><Reveal><p className="lead__q">{children}</p></Reveal></div></section>
  );
}

function PList({ idx, title, items }){
  return (
    <section className="section">
      <div className="wrap">
        <Reveal className="shead">
          <div className="shead__idx">{idx}</div>
          <h2 className="shead__title">{title}</h2>
        </Reveal>
        <div className="plist">
          {items.map(([n,t,d]) => (
            <Reveal key={n} className="pitem">
              <div className="pitem__n">{n}</div>
              <div><h3 className="pitem__t">{t}</h3><p className="pitem__d">{d}</p></div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function TwoCol({ a, b }){
  const Col = ({ h, items }) => (
    <div className="twocol__c">
      <h3 className="twocol__h">{h}</h3>
      <div className="checks">
        {items.map((it,i) => <div className="check" key={i}><span className="check__b"><Check/></span><span>{it}</span></div>)}
      </div>
    </div>
  );
  return (
    <section className="section--tight"><div className="wrap"><Reveal className="twocol"><Col {...a}/><Col {...b}/></Reveal></div></section>
  );
}

function PriceCard({ label, value, note, title, desc }){
  return (
    <section className="section--tight"><div className="wrap"><Reveal className="price">
      <div className="price__l"><h3 className="price__t">{title}</h3><p className="price__d">{desc}</p></div>
      <div className="price__r"><span className="price__label">{label}</span><span className="price__v">{value}</span><span className="price__n">{note}</span></div>
    </Reveal></div></section>
  );
}

function CtaBand({ title, desc, ctaText, ctaHref, ctaTarget }){
  const ext = (ctaTarget||'_blank') === '_blank';
  return (
    <section className="ctaband"><div className="wrap"><Reveal>
      <h2 className="ctaband__t">{title}</h2>
      <p className="ctaband__d">{desc}</p>
      <a className="btn btn--lg" href={ctaHref} target={ctaTarget||'_blank'} rel={ext?'noreferrer':undefined}>{ctaText} <Arrow/></a>
    </Reveal></div></section>
  );
}

/* ===================== AUDITORÍA ===================== */
const AUD_PROBLEMS = [
  ['Píxel duplicado o mal configurado','El ROAS que ves puede estar inflado hasta un 128%. Todas las decisiones de optimización se basan en datos falsos.'],
  ['Presupuesto mal distribuido','Campañas que consumen el 60% del presupuesto pero generan solo el 18% de los resultados. Dinero que se pierde cada día.'],
  ['Creatividades agotadas','Frecuencia mayor a 5x, CTR en caída. Tu audiencia ya vio los mismos anuncios demasiadas veces y dejó de reaccionar.'],
  ['Estructura fragmentada','Demasiados conjuntos con poco presupuesto cada uno. Ninguno sale de la fase de aprendizaje del algoritmo.'],
];
const AUD_AREAS = [
  ['01','Píxel y Tracking','Eventos, CAPI, deduplicación, Advanced Matching'],
  ['02','Configuración técnica','Business Manager, atribución, dominio verificado'],
  ['03','Nomenclatura','Organización, trazabilidad, convención de nombres'],
  ['04','Estructura de campañas','Funnel, CBO/ABO, objetivos, Advantage+'],
  ['05','Inversión y costos','SOI vs SOR, distribución por funnel, tendencias MoM'],
  ['06','Audiencias','Temperatura, solapamiento, segmentación demográfica'],
  ['07','Creatividades','Fatiga, CTR, top y bottom performers, rotación'],
  ['08','Hallazgos y plan','Priorización + roadmap a 90 días'],
];
const AUD_CROSSES = [
  ['SOI vs SOR','Dónde está la plata vs dónde están los resultados. El cruce más revelador de la auditoría.'],
  ['Demográfico','Edad y género cruzados con tasa de conversión y costo de adquisición real.'],
  ['Geográfico','Rendimiento por país con clasificación en Tiers para saber dónde escalar.'],
  ['Creativos','Qué anuncios realmente venden vs cuáles solo gastan presupuesto.'],
  ['Temperatura','Frío, tibio, caliente: cómo convierte cada nivel de audiencia.'],
  ['Temporal','Días y horarios con mejor rendimiento para optimizar la entrega.'],
];
const AUD_FINDINGS = [
  ['Píxel duplica eventos','crit','Crítico'],
  ['SOI 62% / SOR 18%','crit','Crítico'],
  ['Frecuencia 7.2x','alto','Alto'],
  ['Sin CAPI activo','alto','Alto'],
  ['Copies TOFU débiles','medio','Medio'],
];
const AUD_DELIVS = [
  ['Documento','Reporte técnico completo','Análisis detallado de las 8 áreas, métricas mes a mes, tablas de cruces estratégicos y hallazgos priorizados.'],
  ['Deck','Presentación ejecutiva','Hallazgos principales, oportunidades concretas y los números que importan. Listo para compartir con tu equipo.'],
  ['Planilla','Excel de hallazgos','Cada hallazgo documentado: observación, impacto, recomendación, prioridad, plazo y responsable.'],
  ['Roadmap','Plan de acción a 90 días','Acciones inmediatas (0-7 días), optimizaciones clave (7-30 días) y estrategia de escala (30-90 días).'],
];
const AUD_AUDIENCE = [
  ['Dueños de negocio que gestionan sus campañas','Invertís en Meta Ads pero no sabés si lo estás haciendo bien. Necesitás que alguien con experiencia mire tu cuenta con ojos frescos y te diga qué mejorar.'],
  ['Negocios que vienen de otra agencia o freelancer','Sentís que los resultados no son los que deberían. Querés una segunda opinión profesional e independiente antes de tu próximo paso.'],
  ['Marcas que invierten +USD 600/mes y quieren escalar','Tenés presupuesto pero podrías sacarle más jugo. Antes de escalar, asegurate de que la estructura, el tracking y la distribución estén bien.'],
  ['Equipos de marketing que necesitan claridad','Tu equipo corre campañas pero falta una mirada estratégica externa. La auditoría les da diagnóstico claro y un plan con prioridades.'],
];
const AUD_STEPS = [
  ['01','Consultás','Escribime por WhatsApp, contame sobre tu negocio y qué necesitás. Te respondo con el plan ideal y los pasos para arrancar.'],
  ['02','Acceso','Me das acceso a tu Business Suite y completás un brief corto con información clave del negocio.'],
  ['03','Análisis','Ejecuto las 8 fases de auditoría y los cruces estratégicos. Documento cada hallazgo con su impacto.'],
  ['04','Entrega','Recibís todos los documentos listos para implementar. Si es Premium, incluye un video explicativo recorriendo los hallazgos.'],
];

function AuditoriaPage(){
  return (
    <>
      <Nav links={SUB_LINKS}/>
      <main>
        <PHero
          eyebrow="Servicio de auditoría"
          title={<>Tu cuenta publicitaria tiene <span className="mk">dinero escondido</span></>}
          sub="Auditoría profesional de Meta Ads con diagnóstico completo, cruces estratégicos y plan de acción a 90 días. Descubrí exactamente dónde se pierde presupuesto y cómo recuperarlo."
          ctaText="Ver planes y precios"
          ctaHref="#planes"
        />
        <div className="wrap">
          <Reveal className="ahstats">
            <div className="ahstat"><div className="ahstat__v">20–40%</div><div className="ahstat__l">del presupuesto se desperdicia en cuentas sin auditar</div></div>
            <div className="ahstat"><div className="ahstat__v">128%</div><div className="ahstat__l">de inflación en ROAS por píxel mal configurado</div></div>
            <div className="ahstat"><div className="ahstat__v">+100</div><div className="ahstat__l">marcas auditadas y gestionadas</div></div>
          </Reveal>
        </div>

        {/* PROBLEMA */}
        <section className="section">
          <div className="wrap">
            <SectionHead idx="01 — El problema" title={<>Estás tomando decisiones<br/>sobre datos incorrectos</>}
              lead="La mayoría de las cuentas tienen problemas invisibles desde el panel de Ads Manager. Sin una auditoría, estás optimizando a ciegas." />
            <div className="probs">
              {AUD_PROBLEMS.map(([t,d]) => (
                <Reveal key={t} className="prob"><span className="prob__k">Problema invisible</span><h3 className="prob__t">{t}</h3><p className="prob__d">{d}</p></Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* METODOLOGÍA */}
        <section className="section">
          <div className="wrap">
            <SectionHead idx="02 — Metodología" title="8 áreas bajo la lupa"
              lead="No es un chequeo superficial. Revisamos cada capa de tu cuenta con una metodología profesional de 8 fases." />
            <div className="areas">
              {AUD_AREAS.map(([n,t,d]) => (
                <Reveal key={n} className="area"><div className="area__n">{n}</div><h3 className="area__t">{t}</h3><p className="area__d">{d}</p></Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* CRUCES */}
        <section className="section">
          <div className="wrap">
            <SectionHead idx="03 — Análisis avanzado" title="6 cruces estratégicos"
              lead="No alcanza con mirar métricas aisladas. Cruzamos los datos para encontrar oportunidades que otros no ven." />
            <div className="crosses">
              {AUD_CROSSES.map(([t,d]) => (
                <Reveal key={t} className="cross"><h3 className="cross__t">{t}</h3><p className="cross__d">{d}</p></Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* ENTREGABLES */}
        <section className="section">
          <div className="wrap">
            <SectionHead idx="04 — Entregables" title="Qué recibís al final"
              lead="No es un PDF genérico. Son entregables profesionales, accionables y listos para implementar." />
            <Reveal className="findings" style={{marginBottom:'20px'}}>
              <div className="findings__h"><span className="findings__title">Muestra de hallazgos</span><span className="findings__tag">Cuenta real · anonimizada</span></div>
              {AUD_FINDINGS.map(([t,sev,label]) => (
                <div className="finding" key={t}><span className="finding__t">{t}</span><span className={"sev sev--"+sev}>{label}</span></div>
              ))}
              <div className="sois">
                <div className="soi"><div className="soi__l">SOI · Share of investment</div><div className="soi__v">62%</div><div className="soi__bar"><span className="soi__fill" style={{width:'62%'}}></span></div></div>
                <div className="soi"><div className="soi__l">SOR · Share of results</div><div className="soi__v">18%</div><div className="soi__bar"><span className="soi__fill" style={{width:'18%'}}></span></div></div>
              </div>
            </Reveal>
            <div className="delivs">
              {AUD_DELIVS.map(([k,t,d]) => (
                <Reveal key={t} className="deliv"><span className="deliv__k">{k}</span><h3 className="deliv__t">{t}</h3><p className="deliv__d">{d}</p></Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* PLANES */}
        <section className="section" id="planes">
          <div className="wrap">
            <SectionHead idx="05 — La auditoría" title="Una auditoría que lo cubre todo"
              lead="Un solo nivel, sin recortes. Abro tu cuenta, analizo cada área y nos sentamos a repasar los hallazgos y el plan de acción, juntas." />
            <Reveal className="plans plans--single">
              <div className="plan plan--solo">
                <h3 className="plan__name">Auditoría Premium</h3>
                <p className="plan__tag">El arsenal completo</p>
                <div className="plan__price"><span className="plan__cur">USD</span><span className="plan__v">897</span><span className="plan__ars">pago único · ARS 600.000</span></div>
                <div className="plan__feats">
                  {['8 fases de análisis completas','6 cruces estratégicos','Reporte Word + Deck ejecutivo','Excel interactivo de hallazgos','Plan de acción a 90 días','Reunión 1 a 1 para repasar todos los hallazgos y el plan'].map(f => (
                    <div className="plan__f" key={f}><span className="check__b"><Check/></span><span>{f}</span></div>
                  ))}
                </div>
                <span className="plan__entrega">Entrega: 7-10 días hábiles</span>
                <a className="btn" href={waLink("Hola Mariela! Me interesa la Auditoría Premium.")} target="_blank" rel="noreferrer">Solicitar <Arrow/></a>
              </div>
            </Reveal>
            <Reveal className="downsell">
              <div className="downsell__txt">
                <h3 className="downsell__t">¿No necesitás una auditoría completa?</h3>
                <p className="downsell__d">Si tu cuenta recién arranca o querés aprender a leer tus propios números, una asesoría 1 a 1 puede ser todo lo que necesitás.</p>
              </div>
              <a className="btn btn--ghost" href="/asesoria">Ver la asesoría <Arrow/></a>
            </Reveal>
          </div>
        </section>

        {/* PARA QUIÉN */}
        <section className="section">
          <div className="wrap">
            <SectionHead idx="06 — ¿Es para vos?" title="Para quién es ideal" />
            <div className="aud">
              {AUD_AUDIENCE.map(([t,d]) => (
                <Reveal key={t} className="aud__c"><h3 className="aud__t">{t}</h3><p className="aud__d">{d}</p></Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* PROCESO */}
        <section className="section proc">
          <div className="proc__ghost" aria-hidden="true">Cómo</div>
          <div className="wrap">
            <SectionHead idx="07 — Proceso" title="Cómo funciona" />
            <div className="steps">
              {AUD_STEPS.map(([n,t,d],i) => (
                <Reveal key={n} className="step" delay={i*100}><div className="step__n">{n}</div><h3 className="step__t">{t}</h3><p className="step__d">{d}</p></Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* CTA FINAL */}
        <section className="ctaband"><div className="wrap"><Reveal>
          <h2 className="ctaband__t">Cada día sin auditar es dinero que se pierde. <span className="mk">Hablemos.</span></h2>
          <p className="ctaband__d">Respondemos dentro de las 24 horas.</p>
          <div className="phero__cta" style={{marginTop:0}}>
            <a className="btn btn--lg" href={waLink("Hola Mariela! Me interesa el servicio de auditoría.")} target="_blank" rel="noreferrer">Escribime por WhatsApp <Arrow/></a>
            <a className="btn btn--ghost btn--lg" href="mailto:info@marielagrossi.com?subject=Consulta%20Auditoría%20Meta%20Ads">Enviar email <Arrow/></a>
          </div>
        </Reveal></div></section>
      </main>
      <Footer/>
    </>
  );
}

/* ===================== ASESORÍA ===================== */
function AsesoriaPage(){
  return (
    <>
      <Nav links={SUB_LINKS}/>
      <main>
        <PHero
          eyebrow="Servicio · Asesoría 1 a 1"
          title={<>Asesoría 1 a 1 de Meta Ads</>}
          sub="¿Ya corrés campañas por tu cuenta pero querés sacarles más jugo? En sesiones uno a uno te enseño a gestionar tu propia publicidad con confianza, con tu cuenta y tu negocio reales sobre la mesa."
          ctaText="Quiero una asesoría"
          ctaHref={waLink("Hola Mariela! Quiero tomar una asesoría 1 a 1.")}
          ctaTarget="_blank"
        />
        <Lead>Te enseño a <span className="mk">gestionar tus propias campañas</span> sin depender de nadie.</Lead>
        <PList idx="01 — Qué vemos" title="Lo que trabajamos juntas" items={[
          ['01','Tu cuenta, en vivo','Entramos a tu Business Manager y trabajamos sobre tus campañas reales, no sobre ejemplos genéricos.'],
          ['02','Estrategia y funnel','Cómo pensar tus audiencias, tu embudo y tus objetivos según el momento de tu negocio.'],
          ['03','Lectura de métricas','Aprendés a leer tus números y tomar decisiones sin marearte con los datos.'],
          ['04','Tus dudas puntuales','Traés tus preguntas concretas y las resolvemos. Es tu sesión, la usamos para lo que necesitás.'],
        ]}/>
        <TwoCol
          a={{ h:'Cómo funciona', items:[
            'Sesión 1 a 1 por videollamada.',
            'Trabajamos sobre tu cuenta y tu caso real.',
            'Te quedás con accionables claros para aplicar.',
            '100% remoto, coordinamos por WhatsApp.',
          ]}}
          b={{ h:'Para quién es', items:[
            'Ya hacés publicidad pero querés profesionalizarte.',
            'Preferís aprender a hacerlo vos en lugar de delegar.',
            'Necesitás desbloquear algo puntual de tus campañas.',
            'Estás arrancando y querés partir bien parada.',
          ]}}
        />
        <PriceCard label="Inversión" value="USD 300" note="pago único · ARS 200.000"
          title="Una sesión, tu cuenta, tus preguntas"
          desc="Una asesoría puntual enfocada en lo que vos necesitás resolver. Si después querés seguir, podemos armar un plan de varias sesiones." />
        <CtaBand title="Aprendé a invertir, no a gastar." desc="Si querés entender Meta Ads desde adentro y dejar de tirar plata a la nada, escribime y coordinamos tu asesoría."
          ctaText="Quiero una asesoría" ctaHref={waLink("Hola Mariela! Quiero tomar una asesoría.")} />
      </main>
      <Footer/>
    </>
  );
}

/* ===================== RECURSOS ===================== */
const TUTO_HREF = "https://marielagrossi.com/tutoriales/";

/* ── Lead capture ──────────────────────────────────────────────
   Apunta al guardar-lead.php que está en la raíz de public_html
   (el mismo que ya usás y que agrega la fila a leads-tutoriales.csv).
   Ruta absoluta para que funcione desde cualquier página del sitio. */
const LEAD_ENDPOINT = "/guardar-lead.php";
function saveLead(lead){
  try {
    const prev = JSON.parse(localStorage.getItem('mg_leads') || '[]');
    prev.push(lead);
    localStorage.setItem('mg_leads', JSON.stringify(prev));
  } catch(e){}
  if (LEAD_ENDPOINT) {
    try {
      const body = new URLSearchParams({ fecha: lead.fecha, nombre: lead.nombre, email: lead.email, recurso: lead.recurso });
      fetch(LEAD_ENDPOINT, { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body });
    } catch(e){}
  }
}

function TutorialGate({ tutorial, onClose }){
  const [f, setF] = React.useState({ nombre:'', email:'' });
  const [view, setView] = React.useState('form');
  const [err, setErr] = React.useState('');
  React.useEffect(() => {
    if (localStorage.getItem('mg_unlocked_'+tutorial.id) === '1') setView('video');
  }, []);
  React.useEffect(() => {
    const onKey = (e) => { if(e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const submit = (e) => {
    e.preventDefault();
    const nombre = f.nombre.trim(), email = f.email.trim();
    if(!nombre || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)){ setErr('Completá tu nombre y un email válido.'); return; }
    const now = new Date();
    const p = (n) => String(n).padStart(2,'0');
    const fecha = `${p(now.getDate())}/${p(now.getMonth()+1)}/${now.getFullYear()} ${p(now.getHours())}:${p(now.getMinutes())}`;
    saveLead({ fecha, nombre, email, recurso: tutorial.id });
    localStorage.setItem('mg_unlocked_'+tutorial.id, '1');
    setView('video');
  };
  return (
    <div className="modal" onClick={onClose} role="dialog" aria-modal="true">
      <div className="modal__card" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar">×</button>
        {view === 'form' ? (
          <div className="gate">
            <span className="gate__eyebrow">{tutorial.cat} · Gratuito</span>
            <h3 className="gate__t">Accedé al tutorial gratis</h3>
            <p className="gate__d">Dejame tu nombre y email y lo ves ahora mismo.</p>
            <form className="gate__form" onSubmit={submit}>
              <input className="gate__input" placeholder="Tu nombre" value={f.nombre} onChange={(e) => setF({...f, nombre:e.target.value})} />
              <input className="gate__input" type="email" placeholder="Tu email" value={f.email} onChange={(e) => setF({...f, email:e.target.value})} />
              {err && <span className="gate__err">{err}</span>}
              <button className="btn btn--lg gate__btn" type="submit">Ver tutorial ahora <Arrow/></button>
              <span className="gate__note">No spam. Solo contenido de valor.</span>
            </form>
          </div>
        ) : (
          <div className="gate">
            <span className="gate__eyebrow">{tutorial.cat}</span>
            <h3 className="gate__t">{tutorial.t}</h3>
            <div className="gate__video">
              <iframe src={"https://www.youtube.com/embed/"+tutorial.video+"?autoplay=1&rel=0"} title={tutorial.t} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </div>
            <p className="gate__d">Si te sirvió, compartilo con alguien que lo necesite.</p>
          </div>
        )}
      </div>
    </div>
  );
}

const RESOURCES = [
  { cat:'Carruseles', t:'Carruseles profesionales con Claude Code', d:'Te muestro paso a paso cómo uso inteligencia artificial para crear carruseles de Instagram con estética profesional.', meta:'Video · 20 min · acceso con email', id:'claudecode', video:'N34WTX3Rdbw', live:true },
  { cat:'Métricas', t:'Leé tus métricas sin marearte', d:'Qué mirar de verdad en tu cuenta: CPL, CPA, ROAS y CTR explicados en criollo.', live:false },
  { cat:'Campañas', t:'Estructura de campaña que convierte', d:'La forma de armar tus campañas para que el algoritmo trabaje a tu favor.', live:false },
];
function RecursosPage(){
  const IG = "https://instagram.com/marielagrossi_";
  const [openTut, setOpenTut] = React.useState(null);
  return (
    <>
      <Nav links={SUB_LINKS}/>
      <main>
        <PHero
          eyebrow="Recursos · Aprendé"
          title={<>Herramientas para tu negocio</>}
          sub="Tutoriales y contenido sobre comunicación, diseño, inteligencia artificial y publicidad digital. Herramientas reales que aplico todos los días para hacer crecer un negocio, ahora para vos."
        />
        <section className="section">
          <div className="wrap">
            <Reveal className="shead">
              <div className="shead__idx">01 — Biblioteca</div>
              <h2 className="shead__title">Lo que vas a<br/>encontrar</h2>
              <p className="shead__lead">Empiezo con el tutorial de carruseles con IA, ya disponible. Voy sumando el resto del material que aplico todos los días con mis clientes.</p>
            </Reveal>
            <div className="rgrid">
              {RESOURCES.map((r,i) => (
                r.live ? (
                  <Reveal key={r.t} className="rcard rcard--live" as="a" href={TUTO_HREF} onClick={(e) => { e.preventDefault(); setOpenTut(r); }} delay={(i%3)*80}>
                    <span className="rcard__free">Gratuito</span>
                    <span className="rcard__cat">{r.cat}</span>
                    <h3 className="rcard__t">{r.t}</h3>
                    <p className="rcard__d">{r.d}</p>
                    <span className="rcard__meta">{r.meta}</span>
                    <span className="rcard__go">Ver tutorial <Arrow/></span>
                  </Reveal>
                ) : (
                  <Reveal key={r.t} className="rcard rcard--soon" delay={(i%3)*80}>
                    <span className="rcard__cat">{r.cat}</span>
                    <h3 className="rcard__t">{r.t}</h3>
                    <p className="rcard__d">{r.d}</p>
                    <span className="rcard__soon">Próximamente</span>
                  </Reveal>
                )
              ))}
            </div>
            <p className="note">Voy publicando los tutoriales nuevos en Instagram. <a href={IG} target="_blank" rel="noreferrer">Seguime ahí</a> para enterarte cuando sale cada uno.</p>
          </div>
        </section>
        <CtaBand title="¿Preferís que lo haga por vos?" desc="Si en vez de aprender querés delegar y que me encargue de tus campañas, completá el formulario y armamos un plan a medida."
          ctaText="Solicitar presupuesto" ctaHref="/#contacto" ctaTarget="_self" />
      </main>
      {openTut && <TutorialGate tutorial={openTut} onClose={() => setOpenTut(null)} />}
      <Footer/>
    </>
  );
}

Object.assign(window, {
  PHero, Lead, PList, TwoCol, PriceCard, CtaBand,
  AuditoriaPage, AsesoriaPage, RecursosPage,
});