// sections.jsx — Serendeepity sections

// ─── Reusable atoms ───────────────────────────────────────────────────────

const Eyebrow = ({ num, label }) => (
  <div className="eyebrow">
    {num && <span className="num">{num}</span>}
    {num && <span className="dash" />}
    <span>{label}</span>
  </div>
);

const StarGlyph = ({ size = 24, color }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ color: color || 'currentColor', display: 'block' }}>
    <path d="M12 1 L13.2 10.8 L23 12 L13.2 13.2 L12 23 L10.8 13.2 L1 12 L10.8 10.8 Z"
      fill="currentColor" />
  </svg>
);

const StarOutline = ({ size = 40 }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={{ display: 'block' }}>
    <path d="M20 2 L21.5 18.5 L38 20 L21.5 21.5 L20 38 L18.5 21.5 L2 20 L18.5 18.5 Z"
      stroke="currentColor" strokeWidth="0.6" fill="none" />
    <circle cx="20" cy="20" r="2.4" fill="currentColor" opacity="0.6" />
  </svg>
);

const Divider = () => (
  <div className="divider">
    <span className="line" />
    <StarGlyph size={10} />
    <span className="line" />
  </div>
);

// ─── HERO ────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section className="hero page" data-screen-label="01 Umbral">

      {/* Imagen pegada al nav — absoluta derecha */}
      <div style={{ position: 'absolute', top: 0, right: 0, width: '40%', height: '100%', zIndex: 0 }}>
        <img
          src="header2.png"
          alt="Serendeepity — consultoría de marca personal"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '30% top', display: 'block' }}
        />
        {/* Gradiente que difumina la imagen hacia la izquierda */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, var(--ink) 0%, transparent 40%)' }} />
      </div>

      {/* Contenido — 60% izquierdo */}
      <div className="hero-inner" style={{ position: 'relative', zIndex: 1, width: '60%' }}>
        <div className="hero-eyebrow" style={{ marginBottom: 'clamp(20px, 3vw, 40px)' }}>
          <Eyebrow label="Cuando tu marca no te representa, el mercado tampoco" />
          <span className="right">Tu negocio · tu reflejo</span>
        </div>

        <h1 className="hero-headline" style={{ fontSize: 'clamp(42px, 7.6vw, 118px)' }}>
          Tu marca personal<br />
          es el <em>activo</em> más<br />
          rentable de tu negocio.
        </h1>

        <div className="hero-sub" style={{ marginTop: 'clamp(24px, 3vw, 44px)' }}>
          <p>
            La desconexión entre quién eres y cómo te presentas tiene un costo
            que no aparece en ninguna métrica — pero lo sientes cada vez que
            intentas vender algo que no te refleja. Serendeepity es el camino
            de regreso: hacia adentro primero, luego hacia afuera, siempre
            en movimiento.
          </p>
          <div className="hero-cta">
            <a href="https://serendeepity.mx/test/" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              Descubre tu perfil de liderazgo
              <span className="arrow">→</span>
            </a>
            <a href="#conciencia" className="btn">
              Por qué importa
            </a>
          </div>
        </div>
      </div>

      <div className="hero-foot" style={{ justifyContent: 'center' }}>
        <div className="col center" style={{ textAlign: 'center' }}>
          <span className="reflect" style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--bone-mute)', fontStyle: 'normal' }}>
            Consultoría en Desarrollo de Marca Personal
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── CONSCIENCIA ─────────────────────────────────────────────────────────

function Consciencia() {
  return (
    <section className="section page" id="conciencia" data-screen-label="02 Consciencia">
      <div className="section-head">
        <Eyebrow num="01" label="Consciencia · La ventaja sostenible" />
        <div />
      </div>

      <p className="conscience-quote">
        Si tú <em>eres tu negocio</em>, la desconexión contigo
        mismo tiene un costo directo.
      </p>

      <div className="conscience-grid">
        <div className="col">
          <h4>El costo de no ser tú</h4>
          <ul>
            <li>
              <span className="bullet">—</span>
              <span>Cuando intentas encajar en fórmulas externas, pierdes credibilidad y energía.</span>
            </li>
            <li>
              <span className="bullet">—</span>
              <span>Las marcas que se ven bien pero no te reflejan terminan costándote clientes.</span>
            </li>
            <li>
              <span className="bullet">—</span>
              <span>El mercado te define antes de que tú te definas — y compites por precio en vez de por valor.</span>
            </li>
            <li>
              <span className="bullet">—</span>
              <span>Procesos que trabajan el ser pero no aterrizan en nada concreto.</span>
            </li>
          </ul>
        </div>
        <div className="col col-light">
          <h4>La congruencia como ventaja</h4>
          <ul>
            <li>
              <span className="bullet">✶</span>
              <span>En un mercado saturado, lo único que no se puede copiar es quién eres.</span>
            </li>
            <li>
              <span className="bullet">✶</span>
              <span>La verdadera ventaja competitiva no es técnica: es la congruencia entre lo que eres y lo que proyectas.</span>
            </li>
            <li>
              <span className="bullet">✶</span>
              <span>Una marca que parte de ti no caduca con la tendencia — y deja de necesitar ser vendida.</span>
            </li>
            <li>
              <span className="bullet">✶</span>
              <span>Habitarte es el activo más rentable a largo plazo.</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─── SER ID ──────────────────────────────────────────────────────────────

const SESSIONS = [
  {
    num: '00',
    label: 'Kick-off',
    title: 'Alineación · Diagnóstico de objetivos, proyecto y visión del viaje.',
    detail: 'Antes de empezar, el mapa. Acordamos hacia dónde vamos y qué quedará claro al final.',
    chips: ['Encuadre', 'Objetivos', 'Visión'],
    align: true,
  },
  {
    num: '01',
    label: 'Sesión 1',
    title: 'Numerología, FODA personal y tirada de tarot como fotografía del momento.',
    detail: 'Tres lentes distintos sobre el mismo presente. Un retrato técnico de dónde estás parado.',
    chips: ['Numerología', 'FODA', 'Diagnóstico'],
  },
  {
    num: '02',
    label: 'Sesión 2',
    title: 'Arquetipo de marca — luz, sombra y retos.',
    detail: 'Tu arquetipo no es etiqueta: es lenguaje. Sales con vocabulario propio para hablar de quien eres.',
    chips: ['Arquetipo', 'Luz · Sombra', 'Tarot'],
  },
  {
    num: '03',
    label: 'Sesión 3',
    title: 'Propuesta de valor diferenciada y tono de comunicación.',
    detail: 'Lo que ofreces, pero dicho como sólo tú podrías decirlo. Diferenciación sostenida en esencia.',
    chips: ['Propuesta de valor', 'Tono', 'Voz'],
  },
  {
    num: '04',
    label: 'Sesión 4',
    title: 'Manual esencial de marca — logotipo y línea gráfica sustentada en el ser.',
    detail: 'Diseño visual que no envejece con la tendencia: nace de quien eres, no de lo que está de moda.',
    chips: ['Identidad visual', 'Logotipo', 'Sistema'],
  },
  {
    num: '05',
    label: 'Sesión 5',
    title: 'Ajustes finales y ruta de plataformas para el lanzamiento.',
    detail: 'El puente entre el proceso interno y la acción externa: dónde, cómo y con qué cadencia mostrarte.',
    chips: ['Plataformas', 'Lanzamiento', 'Ritmo'],
  },
  {
    num: '06',
    label: 'Sesión 6',
    title: 'Cierre, objetivos SMART y entrega del SER-ID.',
    detail: 'Una brújula afinada y un ancla simbólica que cargas contigo. El programa termina; el camino sigue.',
    chips: ['SMART', 'Brújula', 'Entrega'],
  },
];

const DELIVERABLES = [
  { n: '01', name: 'Tu Diseño Original', desc: 'Análisis de numerología con FODA personal aplicado al negocio.' },
  { n: '02', name: 'Tu Arquetipo Revelado', desc: 'Arquetipo, luz, sombra y la fotografía del momento.' },
  { n: '03', name: 'Tu Voz', desc: 'Propuesta de valor diferenciada y tono de comunicación.' },
  { n: '04', name: 'Tu Forma', desc: 'Manual esencial de marca — logotipo y línea gráfica.' },
  { n: '05', name: 'Tu Presencia', desc: 'Ruta de plataformas y plan de lanzamiento.' },
  { n: '06', name: 'SER-ID', desc: 'Identidad esencial — un ancla para cargar contigo.' },
  { n: '07', name: 'Tu Brújula', desc: 'Objetivos SMART y siguientes pasos concretos.' },
];

function Sessions() {
  const [open, setOpen] = React.useState(1);
  return (
    <ol className="sessions" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
      {SESSIONS.map((s, i) => (
        <li
          key={s.num}
          className={`session ${s.align ? 'alignment' : ''} ${open === i ? 'open' : ''}`}
          onClick={() => setOpen(open === i ? -1 : i)}
        >
          <span className="num">{s.num}</span>
          <span className="label">{s.label}</span>
          <h4>{s.title}</h4>
          <span className="meta">{open === i ? '— Cerrar' : '+ Abrir'}</span>
          <div className="detail">
            <div>{s.detail}</div>
            <div className="chips">
              {s.chips.map((c) => <span key={c} className="chip">{c}</span>)}
            </div>
          </div>
        </li>
      ))}
    </ol>
  );
}

const DELIV_ICONS = {
  '01': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><circle cx="18" cy="18" r="14" stroke="currentColor" strokeWidth="0.6" /><path d="M4 18 L32 18 M18 4 L18 32" stroke="currentColor" strokeWidth="0.6" /><circle cx="18" cy="18" r="4" stroke="currentColor" strokeWidth="0.6" /></svg>),
  '02': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M18 2 L18 34" stroke="currentColor" strokeWidth="0.6" /><circle cx="18" cy="11" r="9" stroke="currentColor" strokeWidth="0.6" /><circle cx="18" cy="25" r="9" stroke="currentColor" strokeWidth="0.6" opacity="0.5" /></svg>),
  '03': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M4 8 L32 8 M4 14 L26 14 M4 20 L30 20 M4 26 L20 26" stroke="currentColor" strokeWidth="0.6" /></svg>),
  '04': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="6" y="6" width="24" height="24" stroke="currentColor" strokeWidth="0.6" /><rect x="12" y="12" width="12" height="12" stroke="currentColor" strokeWidth="0.6" /></svg>),
  '05': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><circle cx="18" cy="18" r="2" fill="currentColor" /><circle cx="6" cy="6" r="2" fill="currentColor" /><circle cx="30" cy="6" r="2" fill="currentColor" /><circle cx="6" cy="30" r="2" fill="currentColor" /><circle cx="30" cy="30" r="2" fill="currentColor" /><path d="M18 18 L6 6 M18 18 L30 6 M18 18 L6 30 M18 18 L30 30" stroke="currentColor" strokeWidth="0.4" /></svg>),
  '06': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M18 2 L19.8 16.2 L34 18 L19.8 19.8 L18 34 L16.2 19.8 L2 18 L16.2 16.2 Z" stroke="currentColor" strokeWidth="0.6" fill="none" /><circle cx="18" cy="18" r="3" fill="currentColor" /></svg>),
  '07': (<svg width="36" height="36" viewBox="0 0 36 36" fill="none"><circle cx="18" cy="18" r="14" stroke="currentColor" strokeWidth="0.6" /><path d="M18 4 L20 18 L18 32 L16 18 Z" fill="currentColor" /><path d="M18 18 L26 12" stroke="currentColor" strokeWidth="0.8" /></svg>),
};

function SerID() {
  return (
    <section className="section page" id="serid" data-screen-label="03 SER ID">
      <div className="serid-hero">
        <div className="left">
          <div className="badge">
            <StarGlyph size={10} />
            Servicio estrella
          </div>
          <h2>
            <em>SER ID</em><br />
            Convierte tu esencia<br />
            en una marca que <em>abra caminos.</em>
          </h2>
        </div>
        <div className="right">
          <p>
            No es un curso de marketing. Es una consultoría de
            identidad con acompañamiento consciente — un proceso
            estructurado para que te veas, te definas y te muestres
            al mundo con autoridad y sin poses.
          </p>
          <p className="faint" style={{ fontSize: 14 }}>
            Programa online · 6 sesiones semanales de 120 minutos
            + 1 sesión de alineación inicial.
          </p>
          <div className="stats">
            <div className="stat"><div className="n">07</div><div className="l">Encuentros</div></div>
            <div className="stat"><div className="n">07</div><div className="l">Semanas</div></div>
            <div className="stat"><div className="n">07</div><div className="l">Entregables</div></div>
          </div>
        </div>
      </div>

      <Sessions />

      <div className="deliverables">
        <div className="deliverables-head">
          <h3>Lo que <em>te llevas</em></h3>
          <span className="mono-label">07 entregables · activos para habitar</span>
        </div>
        <div className="deliverables-grid">
          {DELIVERABLES.map((d) => (
            <div key={d.n} className="deliverable">
              <div className="d-num">{d.n}</div>
              <h5>{d.name}</h5>
              <p>{d.desc}</p>
              <div className="icon">{DELIV_ICONS[d.n]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


// ─── BANNER ──────────────────────────────────────────────────────────────

function Banner() {
  return (
    <div style={{ width: '100%', lineHeight: 0 }}>
      <img
        src="banner.jpeg"
        alt="Serendeepity"
        style={{ width: '100%', display: 'block', objectFit: 'cover' }}
      />
    </div>
  );
}

// ─── DIAGNÓSTICO ─────────────────────────────────────────────────────────

const TEAL = 'var(--teal)';

function Diagnostico() {
  const items = [
    'Tus patrones de identidad y comunicación',
    'Lo que te impulsa — y lo que te frena',
    'Tu propuesta de valor desde tu esencia',
    'Tu arquetipo y lo que comunica sobre ti',
    'Tu siguiente paso con dirección real',
  ];

  return (
    <section className="section page" id="diagnostico" data-screen-label="04 Diagnóstico">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 'clamp(40px, 6vw, 100px)',
        alignItems: 'start',
      }}>

        {/* Columna izquierda */}
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: TEAL, marginBottom: 32 }}>
            El primer paso · Gratuito
          </div>
          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 'clamp(42px, 5vw, 72px)', lineHeight: 1.05, letterSpacing: '-0.025em', color: 'var(--bone)', margin: '0 0 28px' }}>
            Empieza por <em style={{ color: TEAL, fontStyle: 'italic' }}>verte.</em>
          </h2>
          <p style={{ fontFamily: 'var(--sans)', color: 'var(--bone-dim)', fontSize: 'clamp(15px, 1.2vw, 18px)', lineHeight: 1.65, maxWidth: '50ch', margin: '0 0 44px' }}>
            Antes de cualquier estrategia, antes de cualquier forma visible — el primer
            movimiento es reconocerte. El diagnóstico es gratuito, toma 5 minutos y ya
            en él descubres algo que no habías podido nombrar.
          </p>
          <a href="https://serendeepity.mx/test/" target="_blank" rel="noopener noreferrer" style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            background: 'var(--star)', color: 'var(--ink)',
            border: 'none', borderRadius: 4,
            padding: '18px 32px',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            textDecoration: 'none', fontWeight: 600, cursor: 'pointer',
            transition: 'opacity 200ms ease',
          }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >
            Hacer el diagnóstico →
          </a>
        </div>

        {/* Columna derecha */}
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: TEAL, marginBottom: 32 }}>
            Qué descubres
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 44px', display: 'flex', flexDirection: 'column', gap: 24 }}>
            {items.map((item) => (
              <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 18, fontFamily: 'var(--sans)', color: 'var(--bone)', fontSize: 'clamp(15px, 1.15vw, 18px)', lineHeight: 1.4 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: TEAL, flexShrink: 0 }} />
                {item}
              </li>
            ))}
          </ul>
          <p style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--bone-mute)', margin: 0 }}>
            Sin registro · Sin costo · Resultado inmediato
          </p>
        </div>

      </div>
    </section>
  );
}

// ─── TESTIMONIALES ────────────────────────────────────────────────────────

const SHORTS = [
  { id: 'o0XcHIYRHH4', quote: 'Un proceso que te ve antes de etiquetarte.' },
  { id: 'deDyWnETy_M', quote: 'Por primera vez mi marca se siente mía.' },
  { id: 'flSPk5AgssY', quote: 'Salí con claridad, no solo con un logo.' },
];

function Testimoniales() {
  return (
    <section className="section page" id="testimoniales" data-screen-label="04 Voces">
      <div className="section-head">
        <Eyebrow num="✶" label="Voces del camino" />
        <div />
      </div>
      <h2 className="testimonials-heading">
        Lo que dicen quienes <em>lo vivieron.</em>
      </h2>
      <div className="testimonials-grid">
        {SHORTS.map((s) => (
          <div key={s.id} className="testimonial-col">
            <div className="testimonial-embed">
              <iframe
                src={`https://www.youtube.com/embed/${s.id}`}
                title="Testimonio Serendeepity"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </div>
            <div className="testimonial-footer">
              <p className="testimonial-quote"><em>{s.quote}</em></p>
              <span className="testimonial-attr">— Participante SER ID</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── SOBRE SERENDEEPITY ──────────────────────────────────────────────────────────────────────────────

const SOBRE_STATS = [
  { n: '+3', l: 'Años de proceso' },
  { n: '07', l: 'Entregables por cliente' },
  { n: '100%', l: 'Online · MX' },
];

function SobreSerendeepity() {
  return (
    <section className="section page" id="sobre" data-screen-label="05 Sobre">
      <div className="sobre-inner">
        <div className="mono-label">Sobre Serendeepity</div>
        <blockquote className="sobre-manifesto">
          "Primero adentro → luego afuera<br />
          → siempre en <em>espiral."</em>
        </blockquote>
        <p className="sobre-body">
          Serendeepity es un ecosistema donde emprendedores, líderes y profesionales
          construyen una identidad de marca que los refleja — desde adentro hacia afuera.
        </p>
        <Divider />
        <div className="sobre-stats">
          {SOBRE_STATS.map((s) => (
            <div key={s.n} className="sobre-stat">
              <div className="n">{s.n}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CIERRE ──────────────────────────────────────────────────────────────

function ContactForm() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');

    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        access_key: '3d107425-e994-4337-8a69-14083ed0b199',
        subject: 'Nueva sesión — Home Serendeepity',
        from_name: 'Serendeepity App',
        replyto: data.email,
        Nombre: data.nombre,
        Email: data.email,
        Telefono: data.telefono || '—',
        Mensaje: data.mensaje,
      }),
    });

    setStatus(res.ok ? 'ok' : 'error');
  };

  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    background: 'rgba(244,241,234,0.06)', border: '1px solid rgba(244,241,234,0.15)',
    borderRadius: 8, padding: '16px 18px',
    fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--bone)',
    outline: 'none', transition: 'border-color 200ms',
  };

  const btnStyle = {
    background: 'var(--star)', color: 'var(--ink)', border: 'none', borderRadius: 6,
    padding: '16px 32px', fontFamily: 'var(--mono)', fontSize: 11,
    letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600,
    cursor: status === 'sending' ? 'wait' : 'pointer',
    opacity: status === 'sending' ? 0.7 : 1, transition: 'opacity 200ms',
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <input name="nombre" type="text" placeholder="Nombre completo" required style={inputStyle} />
        <input name="email" type="email" placeholder="Correo electrónico" required style={inputStyle} />
      </div>
      <input name="telefono" type="tel" placeholder="Teléfono (opcional)" style={inputStyle} />
      <textarea name="mensaje" rows={5} placeholder="¿Qué quieres trabajar en tu sesión?" required style={{ ...inputStyle, resize: 'vertical' }} />

      <div>
        <button type="submit" disabled={status === 'sending'} style={btnStyle}>
          {status === 'sending' ? 'Enviando…' : 'Agendar sesión →'}
        </button>
      </div>

      {status === 'ok' && (
        <p style={{ color: TEAL, fontFamily: 'var(--mono)', fontSize: 13, margin: 0 }}>
          ✓ ¡Listo! Te contactamos pronto.
        </p>
      )}
      {status === 'error' && (
        <p style={{ color: '#e07070', fontFamily: 'var(--mono)', fontSize: 13, margin: 0 }}>
          Algo falló. Escríbenos a contacto@serendeepity.mx
        </p>
      )}
    </form>
  );
}

function Closer() {
  return (
    <section className="closer page" id="cierre" data-screen-label="07 Cierre">

      {/* Bloque principal — logo + formulario */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 'clamp(40px, 6vw, 100px)', alignItems: 'start',
        paddingBottom: 'clamp(60px, 8vw, 120px)',
        borderBottom: '1px solid var(--line)',
      }}>

        {/* Izquierda — logo + texto */}
        <div>
          <img src="logo.png" alt="Serendeepity" style={{ height: 80, width: 'auto', marginBottom: 32 }} />
          <h2 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 'clamp(32px, 4vw, 56px)', lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--bone)', margin: '0 0 20px' }}>
            Empieza con<br />
            una <em style={{ color: TEAL, fontStyle: 'italic' }}>conversación.</em>
          </h2>
          <p style={{ fontFamily: 'var(--sans)', color: 'var(--bone-dim)', fontSize: 16, lineHeight: 1.65, margin: 0, maxWidth: '44ch' }}>
            Sin fórmulas, sin guion. Solo el comienzo de la traducción entre quien eres y cómo te muestras al mundo.
          </p>
        </div>

        {/* Derecha — formulario */}
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: TEAL, marginBottom: 28 }}>
            Agenda tu sesión
          </div>
          <ContactForm />
        </div>
      </div>

      {/* Footer bar */}
      <div className="page foot" style={{ paddingLeft: 0, paddingRight: 0, marginTop: 'clamp(40px, 5vw, 64px)' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--bone-mute)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          Serendeepity · MX<br />
          contacto@serendeepity.mx
        </div>
        <div className="center">
          <a href="#serid" style={{ color: 'var(--bone-mute)' }}>SER ID</a>
          <span style={{ padding: '0 12px', color: 'var(--bone-faint)' }}>·</span>
          <a href="#diagnostico" style={{ color: 'var(--bone-mute)' }}>El primer paso</a>
        </div>
        <div className="right" style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--bone-mute)', letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'right' }}>
          #SíHayYBien<br />
          © 2026
        </div>
      </div>
      <div style={{ paddingTop: 16, borderTop: '1px solid var(--line)', display: 'flex', gap: 24, justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <a href="aviso-privacidad.html" style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--bone-mute)', textDecoration: 'none' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--star)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--bone-mute)'}
          >Aviso de Privacidad</a>
          <span style={{ color: 'var(--bone-faint)', fontFamily: 'var(--mono)', fontSize: 10 }}>·</span>
          <a href="terminos-condiciones.html" style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--bone-mute)', textDecoration: 'none' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--star)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--bone-mute)'}
          >Términos y Condiciones</a>
        </div>
        <a href="https://sergioaburto.com/" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--bone-mute)', textDecoration: 'none' }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--star)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--bone-mute)'}
        >SA • IA con sentido</a>
      </div>
    </section>
  );
}

// ─── NAV ─────────────────────────────────────────────────────────────────

function NavBar() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const close = () => setMobileOpen(false);

  return (
    <React.Fragment>
      <nav className={`nav-bar ${scrolled ? 'scrolled' : ''}`}>
        <a href="#" className="brand">
          <img src="logo.png" alt="Serendeepity" style={{ height: 72, width: 'auto', display: 'block' }} />
        </a>
        <div className="nav-links">
          <a href="#conciencia">Consciencia</a>
          <a href="#serid">SER ID</a>
          <a href="#diagnostico">El primer paso</a>
        </div>
        <a href="#cierre" className="btn nav-cta" style={{ padding: '10px 16px', fontSize: 10, background: 'var(--star)', color: 'var(--ink)', borderColor: 'var(--star)' }}>
          Empezar
          <span className="arrow">→</span>
        </a>
        <button className="nav-hamburger" aria-label="Abrir menú" onClick={() => setMobileOpen(true)}>
          <span /><span /><span />
        </button>
      </nav>

      {mobileOpen && (
        <div className="nav-mobile-overlay" onClick={close}>
          <div className="nav-mobile-menu" onClick={e => e.stopPropagation()}>
            <button className="nav-mobile-close" onClick={close} aria-label="Cerrar">✕</button>
            <a href="#conciencia" onClick={close}>Consciencia</a>
            <a href="#serid" onClick={close}>SER ID</a>
            <a href="#diagnostico" onClick={close}>El primer paso</a>
            <a href="#cierre" onClick={close} className="btn btn-primary">
              Empezar <span className="arrow">→</span>
            </a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

// Expose to window
Object.assign(window, {
  Hero, Consciencia, SerID, Banner, Diagnostico, Closer, NavBar,
  Testimoniales, SobreSerendeepity,
});
