// ===========================================================================
// EVA MGMT — Sections
// ===========================================================================

const ArrowUR = ({ size = 14, className = "arrow" }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Sparkle = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 0L8.2 5.8L14 7L8.2 8.2L7 14L5.8 8.2L0 7L5.8 5.8L7 0Z" fill="currentColor"/>
  </svg>
);

// External application form
const APPLY_URL = "https://forms.gle/mDXVqiWeYEFNQBBb8";
const openApply = (e) => {
  if (e) e.preventDefault();
  window.open(APPLY_URL, '_blank', 'noopener,noreferrer');
};

// ===========================================================================
// APPLE — the forbidden fruit
// ===========================================================================
const Apple = ({ withBite = true, mini = false }) => {
  const id = React.useMemo(() => 'a' + Math.random().toString(36).slice(2, 8), []);
  return (
    <svg viewBox="0 0 500 540" xmlns="http://www.w3.org/2000/svg" className={mini ? "apple-mini" : ""}>
      <defs>
        <radialGradient id={`body-${id}`} cx="36%" cy="32%" r="85%">
          <stop offset="0%" stopColor="#FFE6E6" />
          <stop offset="12%" stopColor="#FFAFB8" />
          <stop offset="38%" stopColor="#E63950" />
          <stop offset="72%" stopColor="#A21030" />
          <stop offset="100%" stopColor="#4A0D1F" />
        </radialGradient>
        <radialGradient id={`bite-${id}`} cx="50%" cy="40%" r="70%">
          <stop offset="0%" stopColor="#FFEFE4" />
          <stop offset="55%" stopColor="#F5C7A8" />
          <stop offset="100%" stopColor="#B23B5C" />
        </radialGradient>
        <linearGradient id={`leaf-${id}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#5BA378" />
          <stop offset="100%" stopColor="#1F4D34" />
        </linearGradient>
        <mask id={`bm-${id}`}>
          <rect width="100%" height="100%" fill="white" />
          {withBite && (
            <>
              {/* bite curve — irregular semicircle eaten from right side */}
              <path d="M 395 175
                       C 415 200, 425 240, 415 280
                       C 405 315, 380 335, 350 330
                       C 365 305, 365 270, 350 245
                       C 335 220, 320 205, 340 185
                       C 360 170, 380 168, 395 175 Z" fill="black" />
            </>
          )}
        </mask>
        <filter id={`gloss-${id}`}>
          <feGaussianBlur stdDeviation="2" />
        </filter>
      </defs>

      {/* APPLE BODY */}
      <g mask={`url(#bm-${id})`}>
        <path d="M 250 110
                 C 200 80, 130 95, 95 155
                 C 60 220, 65 340, 110 420
                 C 145 480, 200 510, 250 495
                 C 300 510, 355 480, 390 420
                 C 435 340, 440 220, 405 155
                 C 370 95, 300 80, 250 110 Z"
              fill={`url(#body-${id})`} />
        {/* gloss highlight top-left */}
        <ellipse cx="170" cy="200" rx="50" ry="90" fill="rgba(255,255,255,0.32)" filter={`url(#gloss-${id})`} />
        <ellipse cx="155" cy="170" rx="22" ry="40" fill="rgba(255,255,255,0.55)" />
        {/* shadow bottom-right */}
        <path d="M 380 350 Q 410 400 360 470 Q 330 490 290 488 Q 360 460 380 350 Z"
              fill="rgba(26,7,38,0.28)" />
        {/* dimple at top center */}
        <ellipse cx="250" cy="115" rx="24" ry="8" fill="rgba(26,7,38,0.18)" />
      </g>

      {/* BITE — inner flesh visible */}
      {withBite && (
        <g>
          <path d="M 395 175
                   C 415 200, 425 240, 415 280
                   C 405 315, 380 335, 350 330
                   C 365 305, 365 270, 350 245
                   C 335 220, 320 205, 340 185
                   C 360 170, 380 168, 395 175 Z"
                fill={`url(#bite-${id})`} />
          {/* tooth marks — small scallops on bite edge */}
          <path d="M 372 170 q 6 8 12 0 q 6 8 12 4"
                stroke="rgba(74,13,38,0.4)" strokeWidth="2" fill="none" strokeLinecap="round" />
          {/* seed */}
          <ellipse cx="378" cy="260" rx="4" ry="7" fill="#2A0B14" transform="rotate(20 378 260)" />
        </g>
      )}

      {/* STEM */}
      <path d="M 245 110 Q 252 70 270 60"
            stroke="#2A0B14" strokeWidth="9" fill="none" strokeLinecap="round" />

      {/* LEAF */}
      <path d="M 270 60
               Q 320 38 365 65
               Q 380 82 358 100
               Q 320 108 285 88
               Q 268 78 270 60 Z"
            fill={`url(#leaf-${id})`} />
      <path d="M 285 88 Q 320 78 358 100"
            stroke="rgba(26,7,38,0.35)" strokeWidth="1.5" fill="none" />
    </svg>
  );
};

// Serpent — sinuous decorative shape
const Serpent = () => (
  <svg viewBox="0 0 200 380" xmlns="http://www.w3.org/2000/svg" fill="none">
    <defs>
      <linearGradient id="snake" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#6F0E1F" />
        <stop offset="50%" stopColor="#E63950" />
        <stop offset="100%" stopColor="#FF6F8E" />
      </linearGradient>
    </defs>
    <path d="M 100 20
             Q 30 60, 60 130
             Q 120 180, 70 240
             Q 20 290, 80 350
             Q 110 365, 130 360"
          stroke="url(#snake)" strokeWidth="14" strokeLinecap="round" fill="none"
          strokeDasharray="2 0" opacity="0.7" />
    {/* head */}
    <ellipse cx="130" cy="360" rx="18" ry="11" fill="url(#snake)" opacity="0.85" />
    {/* eye */}
    <circle cx="138" cy="358" r="2.5" fill="#1F060C" />
    {/* tongue */}
    <path d="M 148 360 l 10 -2 m -10 2 l 10 2" stroke="#FF6F8E" strokeWidth="2" strokeLinecap="round" />
    {/* scales pattern — small dashes */}
    <g opacity="0.4" stroke="#FF6F8E" strokeWidth="1.5" strokeLinecap="round">
      <line x1="78" y1="78" x2="84" y2="74" />
      <line x1="92" y1="158" x2="98" y2="154" />
      <line x1="56" y1="248" x2="62" y2="244" />
      <line x1="82" y1="328" x2="88" y2="324" />
    </g>
  </svg>
);

// ===========================================================================
// NAV
// ===========================================================================
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <Apple mini />
          <span>eva<em style={{fontStyle:'italic'}}>·</em>mgmt</span>
        </a>
        <div className="nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#porque">Por qué Eva</a>
          <a href="#proceso">Proceso</a>
          <a href="#historias">Historias</a>
          <a href="#faq">Preguntas</a>
        </div>
        <a href={APPLY_URL} target="_blank" rel="noopener noreferrer" className="nav-cta">
          Aplicar <ArrowUR size={11} className="" />
        </a>
      </div>
    </nav>
  );
}

// ===========================================================================
// HERO
// ===========================================================================
function Hero() {
  const sparks = [
    { top: "12%", left: "10%", size: 14, rot: 0 },
    { top: "22%", left: "85%", size: 22, rot: 15 },
    { top: "62%", left: "8%", size: 16, rot: -10 },
    { top: "70%", left: "92%", size: 12, rot: 25 },
    { top: "40%", left: "16%", size: 10, rot: 0 },
    { top: "50%", left: "82%", size: 18, rot: -5 },
  ];

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="apple-halo" />
      <div className="serpent"><Serpent /></div>
      <div className="apple-stage"><Apple /></div>

      {sparks.map((s, i) => (
        <div key={i} className="spark" style={{
          top: s.top, left: s.left, width: s.size, height: s.size,
          transform: `rotate(${s.rot}deg)`,
          color: i % 2 ? 'var(--crimson)' : 'var(--royal)'
        }}>
          <Sparkle size={s.size} />
        </div>
      ))}

      <div className="container">
        <div className="hero-top">
          <div className="col">
            <div className="eyebrow" style={{marginBottom: 10}}>✦ El jardín te espera</div>
            <strong>Algunas mujeres esperan invitación.</strong> Otras muerden la fruta.
          </div>
          <div className="col col-right">
            <div className="eyebrow" style={{marginBottom: 10}}>Roster — jardín cerrado</div>
            <strong>Solo 12 creadoras a la vez.</strong> Edén privado, no fábrica.
          </div>
        </div>

        <h1 className="hero-wordmark">
          e<span className="em">v</span>a<span className="tm">™</span>
        </h1>

        <div className="hero-bottom">
          <div className="pitch">
            Agencia <em className="italic" style={{color:'var(--royal)'}}>boutique</em> para creadoras que entienden que lo prohibido no es lo que se les niega — es lo que aún no se atreven a <em className="italic" style={{color:'var(--crimson)'}}>cobrar</em>.
          </div>
          <div className="stat">
            <div className="v">$<em>50M</em>+</div>
            <div className="l">Cosechados para talento en 12 países</div>
          </div>
          <div className="cta-row">
            <a className="btn-primary" href={APPLY_URL} target="_blank" rel="noopener noreferrer">
              Aplicar a Eva <ArrowUR size={12} />
            </a>
            <a className="btn-ghost" href="#porque">
              Conoce el Edén →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===========================================================================
// TICKER
// ===========================================================================
function Ticker() {
  const items = [
    <>Fruta Prohibida</>,
    <em>✦</em>,
    <>El Jardín 24/7</>,
    <em>✦</em>,
    <>Roster Boutique</>,
    <em>✦</em>,
    <>Talento <em>Primero</em></>,
    <em>✦</em>,
    <>Visión Eterna</>,
    <em>✦</em>,
    <>Datos <em>Sagrados</em></>,
    <em>✦</em>,
  ];
  const block = (
    <span>
      {items.map((it, i) => <React.Fragment key={i}>{it}</React.Fragment>)}
      <span className="star">✦</span>
    </span>
  );
  return (
    <div className="ticker">
      <div className="ticker-track">
        {block}{block}{block}{block}
      </div>
    </div>
  );
}

// ===========================================================================
// MANIFESTO
// ===========================================================================
function Manifesto() {
  return (
    <section id="filosofia" className="container manifesto" data-screen-label="02 Manifesto">
      <div className="eyebrow">— 01 / El Evangelio Eva</div>
      <div className="lead">
        Hace milenios le dijeron que <em>no tocara</em> la fruta.
        <br/>Tocó.
        <br/>Y construyó cada <span className="pink">civilización</span> que vino después.
        <br/><em>Esta agencia es para sus herederas.</em>
      </div>
      <div className="aside">
        <p>Le dijeron que se cubriera. Cobró por enseñarlo.</p>
        <p>Le dijeron que esperara. Mordió primero.</p>
        <p>Esto es lo que pasa cuando una mujer decide que su jardín le pertenece.</p>
        <p style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase', marginTop: 32, color: 'var(--crimson)'}}>
          ✦ — el evangelio eva
        </p>
      </div>
    </section>
  );
}

// ===========================================================================
// SERVICES
// ===========================================================================
function Services() {
  const list = [
    {
      n: "01",
      tag: "Aquí vive el dinero",
      t: <>Chat <em>24/7</em></>,
      d: "Un equipo entrenado seduciendo en tus DMs mientras tú duermes. No solo respondemos — construimos obsesiones, vendemos PPVs, y convertimos suscriptores en devotos que vuelven cada noche.",
    },
    {
      n: "02",
      tag: "Top of funnel sagrado",
      t: <>Tráfico <em>&amp; crecimiento</em></>,
      d: "Funnels multicanal en Instagram, TikTok, Reddit y X. Atraemos miradas al jardín — y las convertimos en seguidoras del culto que no se quieren ir.",
    },
    {
      n: "03",
      tag: "Menos filmar, más reinar",
      t: <>Estrategia <em>de contenido</em></>,
      d: "Calendarios editoriales, shoots temáticos y hooks virales diseñados con tu estética. Planeamos un mes en un día para que filmes una vez y reines durante semanas.",
    },
    {
      n: "04",
      tag: "Algo que perdure",
      t: <>Construcción <em>de marca</em></>,
      d: "Posicionamiento, voz, identidad visual. Tu marca es tu mito — y los mitos cobran 3 a 5 veces más que cualquier commodity, en cualquier plataforma.",
    },
    {
      n: "05",
      tag: "Conocimiento sagrado",
      t: <>Datos <em>&amp; optimización</em></>,
      d: "Cada precio de PPV, cada funnel, cada turno de chatter rastreado. Probamos hasta tu techo. Luego lo rompemos. Repetimos.",
    },
    {
      n: "06",
      tag: "Protegida. Siempre.",
      t: <>Privacidad <em>&amp; protección</em></>,
      d: "Monitoreo DMCA, takedowns de leaks, protección de identidad. Tu santuario es intocable. Punto.",
    },
  ];

  return (
    <section id="servicios" className="services">
      <div className="container">
        <div className="section-head">
          <div className="index">— 02 / Qué cultivamos</div>
          <h2 className="title">Cada fruto del jardín, <em>tuyo.</em></h2>
        </div>
        <p className="section-sub">
          No prometemos crecimiento. Lo provocamos. Seis pilares trabajando como uno, para que tú solo hagas lo único que solo tú puedes hacer: <em>ser irresistible.</em>
        </p>
      </div>
      <div className="svc-grid">
        {list.map((s, i) => (
          <div key={i} className="svc">
            <div className="num">{s.n}</div>
            <div className="arrow-tag"><ArrowUR size={14} className="" /></div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            <div className="svc-tag">✦ {s.tag}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ===========================================================================
// METRICS
// ===========================================================================
function Metrics() {
  const ms = [
    { big: <><em>3.4</em><span className="sm">×</span></>, l: "Crecimiento promedio en los primeros 90 días después del onboarding." },
    { big: <><em>$50</em><span className="sm">M+</span></>, l: "Cosechados para nuestro talento desde que abrimos el jardín." },
    { big: <><em>96</em><span className="sm">%</span></>, l: "Retención del jardín. La industria quema, nosotras cuidamos." },
    { big: <><em>12</em><span className="sm">+</span></>, l: "Países donde florecen creadoras del roster Eva." },
  ];
  return (
    <section className="metrics">
      <div className="container">
        <div className="section-head" style={{padding: '0 0 20px'}}>
          <div className="index">— 03 / Las cifras del jardín</div>
          <h2 className="title">Frutos que no susurran — <em>gritan.</em></h2>
        </div>
        <div className="metrics-grid">
          {ms.map((m, i) => (
            <div key={i} className="metric">
              <div className="big">{m.big}</div>
              <div className="lbl">{m.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===========================================================================
// POR QUÉ EVA
// ===========================================================================
function PorQue() {
  const reasons = [
    {
      n: "01",
      t: <>Jardín <em>por diseño</em></>,
      d: "Limitamos el roster a propósito. Menos creadoras, más cuidado. Aquí tienes socias, no un lugar más en una hoja de cálculo. Si no cabes, te lo decimos. Si entras, te lo demostramos.",
    },
    {
      n: "02",
      t: <>Obsesionadas con la <em>retención</em></>,
      d: "La industria quema creadoras en 18 meses. Nuestra alianza promedio dura más de 3 años — porque medimos el éxito por tu carrera, no por la cosecha del trimestre.",
    },
    {
      n: "03",
      t: <>Transparencia <em>total</em></>,
      d: "Tú eres dueña de tus cuentas. Ves cada métrica. Dashboards en tiempo real, splits por desempeño, contratos que se rompen — no que atrapan.",
    },
    {
      n: "04",
      t: <>Diseñado para <em>escala internacional</em></>,
      d: "Equipos bilingües, cobertura multi-zona horaria, tecnología propia. Te lanzamos al mercado de Estados Unidos — la audiencia que mejor paga del mundo — desde el día uno.",
    },
  ];
  return (
    <section id="porque" className="porque" data-screen-label="04 Por qué Eva">
      <div className="container">
        <div className="section-head">
          <div className="index">— 04 / Por qué Eva</div>
          <h2 className="title">No otra agencia. Un <em>santuario.</em></h2>
        </div>
        <p className="section-sub">
          La mayoría de las agencias se copian entre sí. <em>Nosotras escribimos las reglas</em> — porque el talento que traes merece más que un huerto cualquiera.
        </p>
        <div className="porque-grid">
          {reasons.map((r, i) => (
            <div key={i} className="reason">
              <div className="num">{r.n}</div>
              <h3>{r.t}</h3>
              <p>{r.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===========================================================================
// TESTIMONIALS
// ===========================================================================
function Testimonials() {
  const ts = [
    {
      quote: "Llegué quemada, trabajando 14 horas al día. Seis meses después gano 4 veces más y llevo meses sin tocar un DM. Me regresaron mi vida. Me regresaron mi tiempo.",
      name: "Sofía R.",
      meta: "Desde Ago 2024",
      featured: false,
    },
    {
      quote: "Eva no me trata como producto. Me tratan como negocio. Y a ese negocio lo tratan como si dependiera de él. Esa diferencia se siente desde el primer día. Se cobra desde el primer mes.",
      name: "Valeria M.",
      meta: "Top 0.3% Creadora · +487% crecimiento · 14 meses en el jardín",
      featured: true,
    },
    {
      quote: "Pasé de cambiar de agencia cada seis meses a por fin construir algo. Solo el trabajo de estrategia ya valía todo — pero el equipo lo hace pasar todos los días.",
      name: "Ana L.",
      meta: "Desde Mar 2024",
      featured: false,
    },
  ];
  return (
    <section id="historias" className="container testimonials" data-screen-label="05 Historias">
      <div className="section-head">
        <div className="index">— 05 / Historias</div>
        <h2 className="title">Palabras desde el <em>jardín.</em></h2>
      </div>
      <p className="section-sub">Lo que dicen las que <em>sí mordieron.</em></p>
      <div className="testi-grid">
        {ts.map((t, i) => (
          <figure key={i} className={`testi ${t.featured ? 'featured' : ''}`}>
            <div className="quote-mark">"</div>
            <blockquote>{t.quote}</blockquote>
            <figcaption>
              <div className="name">{t.name}</div>
              <div className="meta">{t.meta}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

// ===========================================================================
// STEPS — Proceso (4 steps)
// ===========================================================================
function Steps() {
  const steps = [
    { n: "I", t: <>Muerdes</>, d: "Dos minutos. Cuéntanos quién eres, qué quieres, dónde vas." },
    { n: "II", t: <>Conversamos</>, d: "Una llamada de 30 minutos. Match mutuo. Sin presión, sin pitch. Si no encajamos, lo decimos." },
    { n: "III", t: <>Plantamos</>, d: "Sesión de estrategia. Match con tu equipo. Dashboards activos. Primeros 14 días listas para producir." },
    { n: "IV", t: <>Florecemos</>, d: "La máquina arranca. Tú creas. Nosotras componemos. Revisiones cada 30 días — porque lo que no se mide, se descompone." },
  ];
  return (
    <section id="proceso" className="container steps">
      <div className="section-head">
        <div className="index">— 06 / Cómo funciona</div>
        <h2 className="title">De la primera mordida al <em>imperio</em>, en cuatro pasos.</h2>
      </div>
      <p className="section-sub">
        Un camino claro. Sin sorpresas. Nos movemos rápido — pero nunca a costa de hacerlo bien.
      </p>
      <div className="steps-list">
        {steps.map((s, i) => (
          <div key={i} className="step">
            <div className="num">{s.n}</div>
            <div className="ttl">{s.t}</div>
            <div className="desc">{s.d}</div>
            <div className="arrow">→</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ===========================================================================
// CTA FINAL — before form
// ===========================================================================
function CtaFinal() {
  return (
    <section className="cta-final" data-screen-label="07 CTA">
      <div className="container">
        <div className="eyebrow">— Última llamada</div>
        <h2>Muerde.</h2>
        <p>
          Si llegaste hasta aquí, no es accidente. <em>Da el paso.</em> Una conversación. Cero compromiso. Sabrás si Eva es tu casa antes de colgar.
        </p>
        <div className="cta-final-row">
          <a className="btn-primary" href={APPLY_URL} target="_blank" rel="noopener noreferrer">
            Aplicar a Eva <ArrowUR size={12} />
          </a>
          <a className="btn-ghost" href="#faq">
            ¿Todavía tienes dudas? →
          </a>
        </div>
      </div>
    </section>
  );
}

// ===========================================================================
// APPLY
// ===========================================================================
function Apply() {
  return (
    <section id="apply" className="apply" data-screen-label="08 Apply">
      <div className="apply-orb" />
      <div className="container apply-only" style={{position:'relative'}}>
        <div className="eyebrow" style={{color:'rgba(255,255,255,0.5)', marginBottom: 24}}>— 08 / Aplicar</div>
        <h2>Cuéntanos <em>de ti.</em></h2>
        <p className="sub">
          Dos minutos. Cero compromiso. Si hay alineación, te contactamos en menos de <strong style={{color:'#fff'}}>48 horas</strong> para agendar tu llamada.
        </p>

        <a href={APPLY_URL} target="_blank" rel="noopener noreferrer" className="apply-big-btn">
          <span className="lbl">Aplicar a Eva</span>
          <span className="arr"><ArrowUR size={20} className="" /></span>
        </a>

        <div className="apply-checklist">
          <div>✦ Aplicación revisada personalmente — nada de bots</div>
          <div>✦ 100% confidencial y discreto</div>
          <div>✦ Respuesta en 48 horas, garantizada</div>
          <div>✦ La llamada es gratis — sin compromiso de firmar</div>
        </div>
      </div>
    </section>
  );
}

// ===========================================================================
// APPLY MODAL
// ===========================================================================
function ApplyModal() {
  const [open, setOpen] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", stage: "", email: "", country: "", revenue: "", handle: "", goal: ""
  });

  React.useEffect(() => {
    const h = () => { setOpen(true); setSubmitted(false); };
    window.addEventListener('eva-open-apply', h);
    return () => window.removeEventListener('eva-open-apply', h);
  }, []);

  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
      const onEsc = (e) => e.key === 'Escape' && setOpen(false);
      window.addEventListener('keydown', onEsc);
      return () => {
        document.body.style.overflow = '';
        window.removeEventListener('keydown', onEsc);
      };
    }
  }, [open]);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={() => setOpen(false)}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="modal-close" onClick={() => setOpen(false)} aria-label="Cerrar">
          ✕
        </button>

        {!submitted ? (
          <>
            <div className="modal-head">
              <div className="modal-eyebrow">Paso 1 de 1 · Tu aplicación</div>
              <h3 className="modal-title">
                Cuéntanos <em>de ti.</em>
              </h3>
              <p className="modal-sub">
                Dos minutos. Si hay alineación, te contactamos en 48 horas.
              </p>
            </div>

            <form className="modal-form" onSubmit={submit}>
              <div className="row2">
                <div className="field">
                  <label>Nombre</label>
                  <input required value={form.name} onChange={e=>setForm({...form, name:e.target.value})} placeholder="Tu nombre" />
                </div>
                <div className="field">
                  <label>Nombre artístico</label>
                  <input value={form.stage} onChange={e=>setForm({...form, stage:e.target.value})} placeholder="Si es distinto" />
                </div>
              </div>
              <div className="field">
                <label>Correo</label>
                <input required type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} placeholder="tu@correo.com" />
              </div>
              <div className="row2">
                <div className="field">
                  <label>País</label>
                  <select required value={form.country} onChange={e=>setForm({...form, country:e.target.value})}>
                    <option value="">Elige…</option>
                    <option>México</option>
                    <option>Estados Unidos</option>
                    <option>Colombia</option>
                    <option>Argentina</option>
                    <option>España</option>
                    <option>Otro LATAM</option>
                    <option>Otro</option>
                  </select>
                </div>
                <div className="field">
                  <label>Ingreso mensual</label>
                  <select required value={form.revenue} onChange={e=>setForm({...form, revenue:e.target.value})}>
                    <option value="">Elige un rango</option>
                    <option>Aún no monetizo</option>
                    <option>$0 – $2k USD</option>
                    <option>$2k – $10k USD</option>
                    <option>$10k – $30k USD</option>
                    <option>$30k+ USD</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Tu usuario principal</label>
                <input required value={form.handle} onChange={e=>setForm({...form, handle:e.target.value})} placeholder="@tuhandle" />
              </div>
              <div className="field">
                <label>¿Cuál es tu meta más grande ahora?</label>
                <textarea required rows={3} value={form.goal} onChange={e=>setForm({...form, goal:e.target.value})} placeholder="Sé específica — entre más sepamos, mejor podemos ayudarte." />
              </div>
              <button type="submit" className="modal-submit">
                Enviar aplicación <ArrowUR size={14} className="" />
              </button>
              <p className="modal-disclaimer">
                Al enviar, confirmas que tienes 18+ años y estás verificada en tu plataforma. Toda la información se trata con total confidencialidad.
              </p>
            </form>
          </>
        ) : (
          <div className="modal-success">
            <div className="success-apple"><Apple /></div>
            <div className="success-eyebrow">✓ Recibido</div>
            <h3>Pronto te <em>contactamos.</em></h3>
            <p>Revisamos cada aplicación a mano. Recibirás un correo en las próximas 48 horas.</p>
            <button type="button" className="modal-close-btn" onClick={() => setOpen(false)}>
              Cerrar
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ===========================================================================
// FAQ
// ===========================================================================
function FAQ() {
  const qs = [
    {
      q: "¿Qué requisitos hay para aplicar a Eva?",
      a: "18 años o más, verificada en tu plataforma. Más allá: ambición, profesionalismo y visión de largo plazo. No pedimos ingreso mínimo — pedimos hambre real de construir algo grande."
    },
    {
      q: "¿Cómo funcionan los splits?",
      a: "Siempre por desempeño. Solo ganamos cuando tú ganas. El porcentaje exacto se discute en tu llamada — depende del nivel de involucramiento. Sin pagos iniciales. Sin cargos sorpresa. Jamás."
    },
    {
      q: "¿Pierdo el control de mis cuentas?",
      a: "Nunca. Tus cuentas, tu contenido y tu audiencia son tuyos — siempre. Operamos con acceso compartido transparente. Revisas cada acción. Te vas cuando quieras."
    },
    {
      q: "¿Puedo trabajar con ustedes desde México o LATAM?",
      a: "Por supuesto. Somos una agencia internacional por diseño. Equipos bilingües, cobertura multi-zona horaria, y experiencia específica escalando talento LATAM al mercado de Estados Unidos — la audiencia que mejor paga del mundo."
    },
    {
      q: "¿Y si apenas estoy empezando?",
      a: "Trabajamos con creadoras establecidas y con recién llegadas con ambición. Lo que importa es la alineación, no el tamaño actual. Si traes drive, profesionalismo y un 'sí' claro a que este es tu camino — el resto lo construimos juntas."
    },
    {
      q: "¿Cuánto dura el contrato?",
      a: "Trabajamos con acuerdos renovables, no candados. Nuestra alianza promedio dura 3+ años — pero porque las creadoras eligen quedarse, no porque estén atrapadas. Las cláusulas de salida son claras y siempre a favor de la creadora."
    },
    {
      q: "¿Qué tan rápido voy a ver resultados?",
      a: "La mayoría ve crecimiento significativo en los primeros 30 días. La optimización completa llega a los 2-3 meses. Nuestra creadora promedio crece 3 a 4 veces en sus primeros 90 días. Te decimos expectativas reales en tu llamada — no te vendemos sueños."
    },
  ];
  return (
    <section id="faq" className="container faq" data-screen-label="09 FAQ">
      <div className="section-head" style={{padding: 0}}>
        <div className="index">— 09 / Preguntas</div>
        <h2 className="title">Lo que todas <em>quieren saber.</em></h2>
      </div>
      <div className="faq-list">
        {qs.map((q, i) => (
          <details key={i} className="faq-item" {...(i === 0 ? { open: true } : {})}>
            <summary>
              <span>{q.q}</span>
              <span className="plus">+</span>
            </summary>
            <div className="a">{q.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

// ===========================================================================
// LEGAL — Términos & Privacidad
// ===========================================================================
function Legal() {
  const today = "25 de mayo de 2026";
  const terminos = [
    ["1. Información general.", "Eva Management™ (\"Eva\", \"nosotras\") es una agencia boutique de management que ofrece servicios de representación, estrategia y operación a creadoras de contenido. Estos términos rigen el acceso y uso del sitio evamgmt.com, registro.evamgmt.com y cualquier subdominio asociado."],
    ["2. Edad mínima y elegibilidad.", "El acceso al sitio y la aplicación al programa está reservado a personas mayores de 18 años. Para aplicar como creadora debes contar con verificación de identidad y mayoría de edad en tu plataforma actual (OnlyFans, Fansly u otras equivalentes)."],
    ["3. Proceso de aplicación.", "La aplicación se realiza a través de un formulario externo. Aplicar no constituye un contrato ni una promesa de servicio. Cada aplicación se revisa manualmente y nos reservamos el derecho de aceptar o rechazar a cualquier candidata, sin necesidad de justificación. Si hay alineación, te contactamos en un plazo aproximado de 48 horas hábiles para agendar una llamada."],
    ["4. Naturaleza de los servicios.", "Eva opera bajo un modelo basado en desempeño: solo cobramos cuando la creadora genera ingresos como resultado directo del trabajo conjunto. El porcentaje exacto y las condiciones específicas se definen en un contrato individual posterior a la llamada de alineación. No solicitamos pagos por adelantado ni cobramos cuotas de inscripción."],
    ["5. Propiedad y control de cuentas.", "Las cuentas de plataforma, el contenido y la audiencia son y serán siempre propiedad exclusiva de la creadora. Eva opera bajo un modelo de acceso compartido transparente: todas las acciones realizadas son visibles y revisables por la creadora. La salida del programa es libre, conforme a las cláusulas pactadas en el contrato individual."],
    ["6. Confidencialidad.", "Toda la información proporcionada por la creadora o aspirante se considera confidencial y es tratada con discreción absoluta. El equipo de Eva firma acuerdos internos de confidencialidad y limita el acceso a la información a las personas estrictamente necesarias."],
    ["7. Propiedad intelectual.", "Los textos, imágenes, código, diseño visual y elementos gráficos del sitio son propiedad de Eva Management™ o están licenciados a Eva. Su reproducción total o parcial requiere autorización por escrito. El nombre \"Eva Management\", su logotipo y derivados están protegidos como signos distintivos."],
    ["8. Disponibilidad y modificaciones.", "Eva puede modificar, suspender o eliminar el sitio, sus contenidos o estos términos en cualquier momento sin previo aviso. Las modificaciones entran en vigor desde su publicación. El uso continuado del sitio constituye aceptación de la versión vigente."],
    ["9. Limitación de responsabilidad.", "El sitio se proporciona \"tal cual\". No garantizamos resultados específicos en ingresos, audiencia o crecimiento; los testimonios y métricas mostradas son ejemplos reales y no constituyen una promesa de desempeño replicable. Eva no se responsabiliza por interrupciones temporales, errores técnicos o pérdidas indirectas asociadas al uso del sitio."],
    ["10. Vínculos a terceros.", "El sitio puede contener enlaces a servicios de terceros (Google Forms, plataformas de creadoras, redes sociales, entre otros). Eva no se responsabiliza del contenido ni de las políticas de esos servicios."],
    ["11. Legislación aplicable.", "Estos términos se rigen por las leyes vigentes en los Estados Unidos Mexicanos. Cualquier controversia será resuelta ante los tribunales competentes de la Ciudad de México, renunciando a cualquier otro fuero que pudiera corresponder."],
    ["12. Contacto.", "Para dudas sobre estos términos escribe a hola@evamgmt.com."],
  ];
  const privacidad = [
    ["1. Responsable del tratamiento.", "Eva Management™ (\"Eva\") es responsable del tratamiento de los datos personales recabados a través de evamgmt.com, registro.evamgmt.com, el formulario de aplicación y cualquier canal de contacto. Domicilio para efectos de este aviso: México. Contacto: hola@evamgmt.com."],
    ["2. Datos personales que recabamos.", "Datos de contacto (nombre, correo electrónico, teléfono, redes sociales y perfiles en plataformas de creadoras), datos profesionales que voluntariamente proporciones sobre tu actividad como creadora (plataformas, métricas, experiencia, expectativas) y datos de navegación (dirección IP, dispositivo, navegador y comportamiento agregado) recabados mediante cookies técnicas y servicios analíticos."],
    ["3. Finalidades del tratamiento.", "Primarias: evaluar tu aplicación, contactarte para agendar la llamada, formalizar un acuerdo de management si hay alineación y prestar los servicios contratados. Secundarias: análisis estadístico, mejora del sitio y comunicación de novedades del programa. Para las finalidades secundarias puedes oponerte enviando un correo a hola@evamgmt.com."],
    ["4. Transferencias y encargados.", "Tus datos pueden ser tratados por proveedores tecnológicos que apoyan nuestra operación, en particular: Google LLC (Google Forms, recepción de aplicaciones), Vercel Inc. (hosting del sitio) y GoDaddy LLC (registro del dominio). No vendemos ni rentamos tus datos. Las transferencias se realizan solo con proveedores sujetos a obligaciones de confidencialidad y protección equivalentes."],
    ["5. Derechos ARCO.", "Como titular puedes ejercer en cualquier momento tus derechos de Acceso, Rectificación, Cancelación u Oposición (ARCO), así como revocar tu consentimiento. Para hacerlo escribe a hola@evamgmt.com con el asunto \"Derechos ARCO\" e identificación oficial. Respondemos dentro de los plazos previstos en la legislación aplicable."],
    ["6. Conservación de datos.", "Conservamos tus datos solo por el tiempo necesario para cumplir las finalidades descritas y las obligaciones legales aplicables. Las aplicaciones no aceptadas se eliminan o anonimizan dentro de los 24 meses posteriores a su recepción."],
    ["7. Seguridad.", "Aplicamos medidas administrativas, técnicas y físicas razonables para proteger tus datos personales contra pérdida, uso indebido o acceso no autorizado."],
    ["8. Cookies y tecnologías similares.", "El sitio utiliza cookies técnicas necesarias para su funcionamiento y, opcionalmente, cookies analíticas para entender el uso agregado del sitio. Puedes desactivarlas desde la configuración de tu navegador."],
    ["9. Menores de edad.", "El sitio y los servicios están dirigidos exclusivamente a personas mayores de 18 años. No recabamos conscientemente datos personales de menores de edad."],
    ["10. Cambios al aviso.", "Este aviso puede actualizarse. Cuando haya cambios sustanciales lo notificaremos en el sitio. Última actualización: " + today + "."],
    ["11. Contacto.", "Para ejercer tus derechos o resolver cualquier duda sobre privacidad escribe a hola@evamgmt.com."],
  ];

  const renderBlock = (rows) => (
    <div className="a legal-body">
      {rows.map(([h, p], i) => (
        <p key={i}><strong>{h}</strong> {p}</p>
      ))}
    </div>
  );

  return (
    <section id="legal" className="container faq legal" data-screen-label="10 Legal">
      <div className="section-head" style={{padding: 0}}>
        <div className="index">— 10 / Legal</div>
        <h2 className="title">Lo formal. <em>Sin letra chica.</em></h2>
      </div>
      <div className="faq-list">
        <details id="terminos" className="faq-item">
          <summary>
            <span>Términos y Condiciones</span>
            <span className="plus">+</span>
          </summary>
          {renderBlock(terminos)}
        </details>
        <details id="privacidad" className="faq-item">
          <summary>
            <span>Aviso de Privacidad</span>
            <span className="plus">+</span>
          </summary>
          {renderBlock(privacidad)}
        </details>
        <details id="cookies" className="faq-item">
          <summary>
            <span>Cookies</span>
            <span className="plus">+</span>
          </summary>
          <div className="a legal-body">
            <p>Usamos cookies estrictamente necesarias para el funcionamiento del sitio (preferencias de tema y sesión) y, opcionalmente, cookies analíticas anónimas para entender el uso agregado del sitio. No usamos cookies publicitarias ni de seguimiento de terceros. Puedes desactivar cualquier cookie desde la configuración de tu navegador sin afectar tu acceso al sitio.</p>
          </div>
        </details>
      </div>
      <div className="legal-foot">Última actualización: {today} · hola@evamgmt.com</div>
    </section>
  );
}

// ===========================================================================
// FOOTER
// ===========================================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-big">e<em>v</em>a</div>
        <div className="footer-quote">
          "Eva fue la primera. Tú no tienes que ser la última."
        </div>
        <div className="footer-cols">
          <div>
            <h4>Eva Management™</h4>
            <p>Agencia boutique de management para creadoras que entienden cómo se construye un imperio: <em>una mordida a la vez.</em></p>
            <p style={{marginTop: 16}}>hola@evamgmt.com</p>
          </div>
          <div>
            <h4>Agencia</h4>
            <ul>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#porque">Por qué Eva</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#historias">Historias</a></li>
            </ul>
          </div>
          <div>
            <h4>Para creadoras</h4>
            <ul>
              <li><a href={APPLY_URL} target="_blank" rel="noopener noreferrer">Aplicar</a></li>
              <li><a href="#faq">Preguntas frecuentes</a></li>
              <li><a href="/legal#terminos">Términos</a></li>
              <li><a href="/legal#privacidad">Privacidad & Seguridad</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href="mailto:hola@evamgmt.com">hola@evamgmt.com</a></li>
              <li><a href="#">Prensa</a></li>
              <li><a href="#">Vacantes</a></li>
              <li><a href="#">Alianzas</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Eva Management — Cultivado con intención</span>
          <span><a href="/legal#privacidad">Privacidad</a> · <a href="/legal#terminos">Términos</a> · <a href="/legal#cookies">Cookies</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, Ticker, Manifesto, Services, Metrics, PorQue, Testimonials, Steps, CtaFinal, Apply, ApplyModal, FAQ, Legal, Footer
});
