// Volare Terapeutas — versión final combinada
// Estructura: Jardín (botánico, blobs, hojas, cards redondeadas)
// Tipografía: Cormorant Garamond + Inter
// Paleta: salvia (Jardín) + lavanda/morado (Vuelo), sin rosado.

const V = {
  cream: '#f4f0e8',
  sand: '#e8dfcc',
  ink: '#2d3a2a',
  inkSoft: 'rgba(45,58,42,0.7)',
  sage: '#7a8a6a',
  sageDeep: '#536048',
  lav: '#b5a8d4',
  lavDeep: '#7d6ba8',
  olive: '#a59548',
};

const F_SERIF = '"Cormorant Garamond", Georgia, serif';
const F_SANS  = 'Inter, system-ui, sans-serif';
const F_MONO  = 'ui-monospace, "SF Mono", Menlo, monospace';

function Leaf({ size = 80, color = V.sage, rotate = 0, opacity = 1 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ transform: `rotate(${rotate}deg)`, opacity }}>
      <path d="M50,10 C25,25 18,55 35,80 C42,92 58,92 65,80 C82,55 75,25 50,10 Z" fill={color} opacity="0.85" />
      <path d="M50,15 L50,85" stroke={V.cream} strokeWidth="1.2" opacity="0.5" />
    </svg>
  );
}

function Placeholder({ label, ratio = '4/5', round = false, tone = 'sand' }) {
  const bgColor = tone === 'lav' ? '#dcd3ea' : tone === 'sage' ? '#cdd4c1' : V.sand;
  const tint = tone === 'lav' ? 'rgba(125,107,168,0.18)' : 'rgba(122,138,106,0.18)';
  return (
    <div style={{
      aspectRatio: ratio, background: bgColor, position: 'relative',
      borderRadius: round ? 9999 : '160px 24px 160px 24px',
      backgroundImage: `radial-gradient(circle at 30% 20%, ${tint}, transparent 50%), repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(45,58,42,0.04) 18px, rgba(45,58,42,0.04) 19px)`,
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12,
        color: V.sageDeep, opacity: 0.6,
      }}>
        <Leaf size={48} color={tone === 'lav' ? V.lavDeep : V.sageDeep} />
        <span style={{ fontFamily: F_MONO, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase' }}>
          {label}
        </span>
      </div>
    </div>
  );
}

const servicios = [
  { icon: 'Ψ', t: 'Psicoterapia', d: 'Individual, pareja y familiar. Presencial en Bogotá o virtual.', tone: V.sageDeep },
  { icon: '∞', t: 'Procesos de cuidado', d: 'Trayectos sostenidos de 8 a 12 sesiones para duelos y transiciones.', tone: V.lavDeep },
  { icon: '◯', t: 'Retiros', d: 'Encuentros presenciales en naturaleza. Cuatro días para reconectar.', tone: V.sage },
  { icon: '△', t: 'Consultorías', d: 'Cultura del cuidado para equipos y organizaciones.', tone: V.olive },
  { icon: '✦', t: 'Cuidado colectivo', d: 'Círculos de mujeres, parejas y grupos de apoyo.', tone: V.lav },
  { icon: '✶', t: 'Formación', d: 'Talleres y diplomados en bienestar emocional.', tone: V.sageDeep },
];

const NAV = ['Inicio', 'Nosotras', 'Servicios', 'Recursos', 'Contacto'];
const NAV_IDS = ['inicio', 'nosotras', 'servicios', 'recursos', 'contacto'];

function App() {
  const [active, setActive] = React.useState('inicio');

  React.useEffect(() => {
    const sections = NAV_IDS
      .map((id) => document.getElementById(id))
      .filter(Boolean);
    const obs = new IntersectionObserver(
      (entries) => {
        // Pick the entry nearest the top that is sufficiently in view.
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: '-45% 0px -50% 0px', threshold: 0 }
    );
    sections.forEach((s) => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  return (
    <div style={{
      background: V.cream, color: V.ink, fontFamily: F_SANS,
      fontSize: 15, lineHeight: 1.6, minHeight: '100vh',
    }}>
      {/* NAV */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 56px', position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(244,240,232,0.85)', backdropFilter: 'blur(12px)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' }}>
          <Leaf size={28} color={V.sageDeep} />
          <span style={{ fontFamily: F_SERIF, fontStyle: 'italic', fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>
            Volare
          </span>
          <span style={{ fontFamily: F_SANS, fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: V.inkSoft, marginLeft: 4 }}>
            terapeutas
          </span>
        </div>
        <nav style={{
          display: 'flex', gap: 2, fontSize: 14, background: 'rgba(255,255,255,0.5)',
          padding: 5, borderRadius: 999,
        }}>
          {NAV.map((n, i) => {
            const id = NAV_IDS[i];
            const isActive = active === id;
            return (
              <a key={n} href={`#${id}`} style={{
                padding: '8px 14px', borderRadius: 999, cursor: 'pointer',
                background: isActive ? V.ink : 'transparent',
                color: isActive ? V.cream : V.ink, textDecoration: 'none',
                transition: 'background 0.25s ease, color 0.25s ease',
              }}>{n}</a>
            );
          })}
        </nav>
        <a href="#contacto" style={{
          background: V.lavDeep, color: V.cream, padding: '10px 18px',
          borderRadius: 999, fontSize: 13, textDecoration: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
        }}>Escríbenos →</a>
      </header>

      {/* HERO */}
      <section id="inicio" style={{ padding: '40px 56px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 60, right: 80, opacity: 0.6 }}>
          <Leaf size={120} color={V.lav} rotate={25} />
        </div>
        <div style={{ position: 'absolute', bottom: 80, left: 180, opacity: 0.55 }}>
          <Leaf size={80} color={V.sage} rotate={-45} />
        </div>
        <div style={{ position: 'absolute', top: 200, left: 60, opacity: 0.4 }}>
          <Leaf size={50} color={V.olive} rotate={70} />
        </div>

        <div style={{ textAlign: 'center', maxWidth: 940, margin: '0 auto', position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px',
            background: 'rgba(125,107,168,0.15)', borderRadius: 999,
            fontSize: 12, letterSpacing: '0.05em', color: V.lavDeep,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: V.lavDeep }} />
            Aceptando nuevos procesos · 2026
          </div>
          <h1 style={{
            fontFamily: F_SERIF, fontWeight: 400,
            fontSize: 96, lineHeight: 1, margin: '24px 0 0', letterSpacing: '-0.025em',
          }}>
            Abre puertas,<br />
            <em style={{ color: V.sageDeep }}>cierra ciclos</em>,<br />
            descubre lo que <em style={{ color: V.lavDeep }}>ha de venir</em>.
          </h1>
          <p style={{ fontSize: 18, color: V.inkSoft, maxWidth: 580, margin: '32px auto 0' }}>
            Somos dos psicólogas terapeutas que acompañan procesos hacia el bienestar,
            el amor y la felicidad. Construyendo posibilidades, extendiendo las alas.
          </p>
          <div style={{ marginTop: 36, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="#contacto" style={{
              background: V.ink, color: V.cream, padding: '15px 26px',
              borderRadius: 999, fontSize: 14, textDecoration: 'none', cursor: 'pointer',
            }}>Agenda tu primera sesión</a>
            <a href="#servicios" style={{
              border: `1.5px solid ${V.ink}`, padding: '13px 24px',
              borderRadius: 999, fontSize: 14, color: V.ink, textDecoration: 'none', cursor: 'pointer',
            }}>Conoce los servicios</a>
          </div>
        </div>

        {/* fotos hero — ocultas hasta tener imágenes reales */}
      </section>

      {/* MARQUEE LINE */}
      <div style={{
        borderTop: '1px solid rgba(45,58,42,0.12)',
        borderBottom: '1px solid rgba(45,58,42,0.12)',
        padding: '24px 56px', display: 'flex', gap: 48,
        fontFamily: F_SERIF, fontStyle: 'italic', fontSize: 24,
        color: V.inkSoft, justifyContent: 'space-between', flexWrap: 'wrap',
      }}>
        <span>juntanzas</span>
        <span style={{ color: V.lavDeep }}>·</span>
        <span>sueños compartidos</span>
        <span style={{ color: V.lavDeep }}>·</span>
        <span>transformaciones</span>
        <span style={{ color: V.lavDeep }}>·</span>
        <span>impermanencia</span>
        <span style={{ color: V.lavDeep }}>·</span>
        <span>compromiso</span>
      </div>

      {/* NOSOTRAS */}
      <section id="nosotras" style={{ background: V.sand, padding: '96px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, opacity: 0.35 }}>
          <Leaf size={240} color={V.sage} rotate={30} />
        </div>
        <div style={{ position: 'absolute', bottom: 40, left: -30, opacity: 0.3 }}>
          <Leaf size={160} color={V.lav} rotate={-15} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
          <div>
            <div style={{ fontFamily: F_MONO, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: V.lavDeep }}>
              Nuestra historia
            </div>
            <h2 style={{ fontFamily: F_SERIF, fontWeight: 400, fontSize: 56, margin: '12px 0 0', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              Nos unimos para <em style={{ color: V.sageDeep }}>recorrer</em><br />nuevos caminos.
            </h2>
            <p style={{ fontSize: 17, color: V.inkSoft, marginTop: 24 }}>
              Volare Terapeutas es el encuentro de dos psicólogas que, en el camino
              de la vida, se unieron para construir posibilidades y crear estrategias
              que acompañen procesos hacia el bienestar.
            </p>
            <p style={{ fontSize: 15, color: V.inkSoft }}>
              Las juntanzas, los sueños compartidos, las transformaciones, la
              impermanencia y el deseo de extender las alas para volar son nuestra
              inspiración para aportar un granito de arena hacia mejores mundos posibles.
            </p>
            <a href="#contacto" style={{
              display: 'inline-block', marginTop: 24, background: 'transparent',
              border: `1.5px solid ${V.ink}`, padding: '12px 22px', borderRadius: 999,
              fontSize: 14, cursor: 'pointer', color: V.ink, textDecoration: 'none',
            }}>Conoce a Johanna y María Camila →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <Placeholder label="Johanna" tone="sage" />
              <div style={{ marginTop: 14 }}>
                <div style={{ fontFamily: F_SERIF, fontSize: 24, lineHeight: 1.1 }}>Johanna González</div>
                <div style={{ fontSize: 12, color: V.sageDeep, marginTop: 4 }}>Terapeuta sistémica</div>
                <a href="https://wa.me/573132293467?text=Hola%2C%20me%20gustar%C3%ADa%20conocer%20m%C3%A1s%20sobre%20Volare%20Terapeutas" target="_blank" rel="noopener" style={{ fontSize: 12, color: V.lavDeep, marginTop: 6, fontFamily: F_MONO, display: 'inline-block', textDecoration: 'none' }}>Escribir por WhatsApp →</a>
              </div>
            </div>
            <div style={{ marginTop: 40 }}>
              <Placeholder label="María Camila" tone="lav" />
              <div style={{ marginTop: 14 }}>
                <div style={{ fontFamily: F_SERIF, fontSize: 24, lineHeight: 1.1 }}>María Camila Restrepo</div>
                <div style={{ fontSize: 12, color: V.sageDeep, marginTop: 4 }}>Procesos de cuidado</div>
                <a href="https://wa.me/573043644367?text=Hola%2C%20me%20gustar%C3%ADa%20conocer%20m%C3%A1s%20sobre%20Volare%20Terapeutas" target="_blank" rel="noopener" style={{ fontSize: 12, color: V.lavDeep, marginTop: 6, fontFamily: F_MONO, display: 'inline-block', textDecoration: 'none' }}>Escribir por WhatsApp →</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICIOS */}
      <section id="servicios" style={{ padding: '96px 56px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontFamily: F_MONO, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: V.lavDeep }}>
            Seis caminos
          </div>
          <h2 style={{ fontFamily: F_SERIF, fontWeight: 400, fontSize: 56, margin: '12px 0 0', letterSpacing: '-0.02em', lineHeight: 1.05 }}>
            <em>Descubramos</em> juntxs la energía,<br />el sentido y el camino.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {servicios.map((s) => (
            <article key={s.t} style={{
              background: V.sand, padding: '32px 28px', borderRadius: 28,
              display: 'flex', flexDirection: 'column', minHeight: 240,
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%', background: s.tone,
                color: V.cream, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: F_SERIF, fontSize: 28, fontStyle: 'italic', marginBottom: 20,
              }}>{s.icon}</div>
              <h3 style={{ fontFamily: F_SERIF, fontWeight: 500, fontSize: 28, margin: 0, lineHeight: 1.1 }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: V.inkSoft, marginTop: 8, flex: 1 }}>{s.d}</p>
              <div style={{ fontSize: 13, color: s.tone, marginTop: 16, fontWeight: 500 }}>Saber más →</div>
            </article>
          ))}
        </div>
      </section>

      {/* RETIRO — oculto hasta tener fechas confirmadas */}
      <section id="retiros" style={{ display: 'none' }}>
        <div style={{
          background: V.sageDeep, color: V.cream, borderRadius: 36,
          padding: '64px 56px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56,
          alignItems: 'center', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -30, right: -30, opacity: 0.18 }}>
            <Leaf size={260} color={V.cream} rotate={40} />
          </div>
          <div style={{ position: 'absolute', bottom: -20, left: 200, opacity: 0.12 }}>
            <Leaf size={140} color={V.lav} rotate={-20} />
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: F_MONO, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: V.lav }}>
              Próximo retiro
            </div>
            <h2 style={{ fontFamily: F_SERIF, fontWeight: 400, fontSize: 52, margin: '12px 0 16px', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              <em>Volar</em> · Cuatro días<br />en la montaña.
            </h2>
            <p style={{ fontSize: 16, opacity: 0.85, maxWidth: 480 }}>
              Un encuentro presencial para reconectar con el cuerpo, la palabra y
              el silencio. Naturaleza, prácticas somáticas y círculo de cuidado
              colectivo en La Vega, Cundinamarca.
            </p>
            <div style={{ display: 'flex', gap: 32, marginTop: 28, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontFamily: F_SERIF, fontSize: 24, fontStyle: 'italic' }}>14–17 Mar</div>
                <div style={{ fontSize: 12, opacity: 0.7 }}>Fechas 2026</div>
              </div>
              <div>
                <div style={{ fontFamily: F_SERIF, fontSize: 24, fontStyle: 'italic' }}>12 cupos</div>
                <div style={{ fontSize: 12, opacity: 0.7 }}>Grupo reducido</div>
              </div>
              <div>
                <div style={{ fontFamily: F_SERIF, fontSize: 24, fontStyle: 'italic' }}>La Vega</div>
                <div style={{ fontSize: 12, opacity: 0.7 }}>Cundinamarca</div>
              </div>
            </div>
            <a href="#contacto" style={{
              display: 'inline-block', marginTop: 28, background: V.cream, color: V.ink,
              padding: '14px 24px', borderRadius: 999, fontSize: 14, textDecoration: 'none', cursor: 'pointer',
            }}>Reserva tu cupo →</a>
          </div>
          <Placeholder label="Retiro Volar" ratio="4/5" tone="lav" />
        </div>
      </section>

      {/* RECURSOS */}
      <section id="recursos" style={{ padding: '0 56px 96px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <h2 style={{ fontFamily: F_SERIF, fontWeight: 400, fontSize: 48, margin: 0, letterSpacing: '-0.02em' }}>
            Recursos <em style={{ color: V.lavDeep }}>gratuitos</em>
          </h2>
          <a style={{ fontSize: 13, color: V.sageDeep, cursor: 'pointer', textDecoration: 'none' }}>Ver biblioteca completa →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
            { type: 'Ejercicio', title: 'Respiración 4-7-8 para regular la ansiedad', dur: '4 min', tone: 'sage' },
            { type: 'Video', title: 'Identificar relaciones de dependencia emocional', dur: '12 min', tone: 'lav' },
            { type: 'Tip', title: 'Tres preguntas para cerrar bien un ciclo', dur: '2 min', tone: 'sage' },
          ].map((r, i) => (
            <article key={i} style={{
              borderRadius: 24, overflow: 'hidden', background: V.cream,
              border: '1px solid rgba(45,58,42,0.1)',
            }}>
              <Placeholder label={r.type} ratio="16/9" tone={r.tone} />
              <div style={{ padding: 24 }}>
                <span style={{
                  fontSize: 10, padding: '4px 10px', borderRadius: 999, background: V.sand,
                  color: r.tone === 'lav' ? V.lavDeep : V.sageDeep, letterSpacing: '0.1em',
                  fontFamily: F_MONO,
                }}>{r.type.toUpperCase()}</span>
                <h3 style={{ fontFamily: F_SERIF, fontWeight: 500, fontSize: 24, lineHeight: 1.2, margin: '14px 0 8px' }}>{r.title}</h3>
                <div style={{ fontSize: 12, color: V.inkSoft }}>⏱ {r.dur}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* GALERÍA — oculta hasta tener fotos reales */}
      <section id="galería" style={{ display: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32 }}>
          <h2 style={{ fontFamily: F_SERIF, fontWeight: 400, fontSize: 48, margin: 0, letterSpacing: '-0.02em' }}>
            <em>Galería</em>
          </h2>
          <a style={{ fontSize: 13, color: V.ink, cursor: 'pointer', textDecoration: 'none' }}>Ver todo →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            { l: 'Retiro · La Vega 24', t: 'sage' },
            { l: 'Círculo de mujeres', t: 'lav' },
            { l: 'Taller corporal', t: 'sand' },
            { l: 'Ceremonia cierre', t: 'sage' },
            { l: 'Mandala colectiva', t: 'lav' },
            { l: 'Sesión familiar', t: 'sand' },
            { l: 'Diplomado 2025', t: 'sage' },
            { l: 'Naturaleza', t: 'lav' },
          ].map((g, i) => (
            <div key={i} style={{ marginTop: i % 4 === 1 || i % 4 === 3 ? 28 : 0 }}>
              <Placeholder label={g.l} ratio="4/5" tone={g.t} />
            </div>
          ))}
        </div>
      </section>

      {/* CONTACTO */}
      <section id="contacto" style={{ padding: '0 20px 64px', maxWidth: 1280, margin: '0 auto' }}>
        <style>{`
          @media (min-width: 640px) {
            #contacto-inner { padding: 64px 56px !important; grid-template-columns: 1fr 1fr !important; }
            #contacto-title { font-size: 56px !important; }
            #contacto-section { padding: 0 56px 64px !important; }
          }
        `}</style>
        <div id="contacto-inner" style={{
          background: V.ink, color: V.cream, borderRadius: 36,
          padding: '40px 24px', display: 'grid', gridTemplateColumns: '1fr', gap: 32,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', bottom: -40, left: -20, opacity: 0.18 }}>
            <Leaf size={220} color={V.sage} rotate={-20} />
          </div>
          <div style={{ position: 'absolute', top: -30, right: 100, opacity: 0.15 }}>
            <Leaf size={140} color={V.lav} rotate={40} />
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: F_MONO, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: V.lav }}>
              Contáctanos
            </div>
            <h2 id="contacto-title" style={{ fontFamily: F_SERIF, fontWeight: 400, fontSize: 38, margin: '12px 0 16px', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              <em>Escríbenos.</em><br />Lo que ha de<br />venir te espera.
            </h2>
            <p style={{ fontSize: 16, opacity: 0.8, maxWidth: 380 }}>
              Cuéntanos qué te trae. Respondemos en 24-48 horas con cariño y
              honestidad sobre cómo podemos acompañarte.
            </p>
            <div style={{ display: 'grid', gap: 14, marginTop: 32 }}>
              {[
                { label: 'WhatsApp · Johanna', href: 'https://wa.me/573132293467?text=Hola%2C%20me%20gustar%C3%ADa%20conocer%20m%C3%A1s%20sobre%20Volare%20Terapeutas' },
                { label: 'WhatsApp · María Camila', href: 'https://wa.me/573043644367?text=Hola%2C%20me%20gustar%C3%ADa%20conocer%20m%C3%A1s%20sobre%20Volare%20Terapeutas' },
              ].map(({ label, href }) => (
                <a key={label} href={href} target="_blank" rel="noopener" style={{
                  display: 'inline-flex', gap: 12, alignItems: 'center', fontSize: 14,
                  textDecoration: 'none', color: V.cream,
                }}>
                  <span style={{
                    fontSize: 10, padding: '4px 10px', borderRadius: 999,
                    background: 'rgba(181,168,212,0.2)', color: V.lav,
                    letterSpacing: '0.1em', fontFamily: F_MONO, flexShrink: 0,
                  }}>WHATSAPP</span>
                  <span style={{ opacity: 0.85 }}>{label} →</span>
                </a>
              ))}
              {[
                ['Email', 'volareterapeutas@gmail.com', `mailto:volareterapeutas@gmail.com`],
                ['Instagram', '@volareterapeutas', 'https://instagram.com/volareterapeutas'],
              ].map(([k, v, href]) => (
                <a key={v} href={href} target="_blank" rel="noopener" style={{
                  display: 'inline-flex', gap: 12, alignItems: 'center', fontSize: 14,
                  textDecoration: 'none', color: V.cream,
                }}>
                  <span style={{
                    fontSize: 10, padding: '4px 10px', borderRadius: 999,
                    background: 'rgba(181,168,212,0.2)', color: V.lav,
                    letterSpacing: '0.1em', fontFamily: F_MONO, flexShrink: 0,
                  }}>{k.toUpperCase()}</span>
                  <span style={{ opacity: 0.85 }}>{v}</span>
                </a>
              ))}
            </div>
          </div>
          <form onSubmit={(e) => { e.preventDefault(); alert('¡Mensaje recibido! Te escribiremos pronto.'); }}
            style={{ background: 'rgba(244,240,232,0.08)', borderRadius: 24, padding: 32, position: 'relative' }}>
            <div style={{ display: 'grid', gap: 16 }}>
              <label style={{ fontSize: 12, opacity: 0.7 }}>Tu nombre
                <input style={inputStyle} placeholder="Cómo te llamas" required />
              </label>
              <label style={{ fontSize: 12, opacity: 0.7 }}>Correo
                <input type="email" style={inputStyle} placeholder="tu@correo.com" required />
              </label>
              <label style={{ fontSize: 12, opacity: 0.7 }}>¿Qué te trae a Volare?
                <textarea rows={4} style={{ ...inputStyle, resize: 'none', fontFamily: 'inherit' }} placeholder="Cuéntanos un poco..." />
              </label>
              <button type="submit" style={{
                background: V.lavDeep, color: V.cream, border: 'none',
                padding: '14px 24px', borderRadius: 999, fontSize: 14, cursor: 'pointer', marginTop: 8,
                fontFamily: 'inherit',
              }}>Enviar →</button>
            </div>
          </form>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: '32px 56px 56px', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: V.inkSoft, flexWrap: 'wrap', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Leaf size={20} color={V.sageDeep} />
          <span>© 2026 Volare Terapeutas · Bogotá, Colombia</span>
        </div>
        <div style={{ display: 'flex', gap: 24 }}>
          <span style={{ cursor: 'pointer' }}>Política de datos</span>
          <span style={{ cursor: 'pointer' }}>Tratamiento de datos</span>
          <a href="#inicio" style={{ color: V.lavDeep, textDecoration: 'none' }}>↑ Volver arriba</a>
        </div>
      </footer>

      {/* WhatsApp floating */}
      <a href="https://wa.me/573043644367" target="_blank" rel="noopener" style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 100,
        background: '#25D366', color: 'white', width: 56, height: 56,
        borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
        textDecoration: 'none', boxShadow: '0 12px 32px rgba(37,211,102,0.4)',
        fontSize: 26,
      }} title="Escríbenos por WhatsApp">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
          <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1c-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1s-1.2-.4-2.3-1.4c-.8-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.2-.5s.1-.4 0-.5c-.1-.1-.6-1.6-.9-2.1-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.5 1.1 2.9 1.2 3.1c.1.2 2.1 3.5 5.2 4.7 1.9.7 2.7.8 3.6.7.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2"/>
        </svg>
      </a>
    </div>
  );
}

const inputStyle = {
  width: '100%', background: 'rgba(244,240,232,0.06)',
  border: '1px solid rgba(244,240,232,0.18)', borderRadius: 12,
  padding: '12px 14px', fontSize: 14, color: V.cream, marginTop: 6,
  outline: 'none', boxSizing: 'border-box', fontFamily: F_SANS,
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);