const { useState, useEffect, useRef } = React;

const WA_NUM = '5493855063687';
const WA_MSG = 'Hola! Me gustaría agendar una consulta para Wave Alineadores.';
const WA_URL = `https://wa.me/${WA_NUM}?text=${encodeURIComponent(WA_MSG)}`;

/* ===== Icon set ===== */
const Ic = {
  Invisible: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" /><circle cx="12" cy="12" r="3" /></svg>,
  Clock: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>,
  Remove: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="18" height="10" rx="5" /><path d="M8 12h8" /></svg>,
  Tech: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7V4h3M20 7V4h-3M4 17v3h3M20 17v3h-3" /><rect x="8" y="8" width="8" height="8" rx="1" /></svg>,
  ArrowR: ({ size = 18 }) => <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>,
  Plus: () => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 1v10M1 6h10" /></svg>,
  Check: () => <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="2 6 5 9 10 3" /></svg>,
  X: () => <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M2 2l8 8M10 2l-8 8" /></svg>,
  Chev: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M9 18l6-6-6-6" /></svg>,
  IG: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="18" cy="6" r="1" fill="currentColor" /></svg>,
  FB: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h3l.5-4H13V7.5c0-1 .3-1.7 1.8-1.7H17V2.2c-.4 0-1.6-.2-3-.2-3 0-5 1.8-5 5.2V10H6v4h3v8h4z" /></svg>,
  WA: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A10 10 0 0 0 4 16l-2 6 6-2a10 10 0 0 0 12.5-16.5zm-8.5 16a8 8 0 0 1-4-1l-3 1 1-3a8 8 0 1 1 6 3zm4.5-5.5c-.3-.1-1.5-.8-1.8-.9s-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.6 0-1.7-.8-2.8-1.5-3.9-3.4-.1-.3 0-.4.2-.6l.6-.7.3-.6c0-.1 0-.3-.1-.4l-.9-2c-.2-.5-.5-.4-.6-.4h-.5a1 1 0 0 0-.7.3c-.3.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.9 4.5 4 2.8 1.1 2.8.7 3.3.7s1.5-.6 1.7-1.2c.2-.6.2-1.1.1-1.2l-.3-.3z" /></svg>
};

/* ===== Wave SVG (brand isologo shape) ===== */
const WaveMark = ({ mono }) =>
  <svg viewBox="0 0 1000 300" aria-hidden="true" style={{ width: '100%', height: 'auto' }}>
    <defs>
      <linearGradient id="wg" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="#45FDFB" />
        <stop offset=".5" stopColor="#1CC0C8" />
        <stop offset="1" stopColor="#064963" />
      </linearGradient>
    </defs>
    <path
      fill={mono || 'url(#wg)'}
      d="M 40 140 C 50 50, 150 40, 180 120 C 210 210, 260 220, 290 140 C 310 80, 370 70, 410 140 C 440 200, 490 200, 500 140 L 500 150 C 510 210, 560 210, 590 140 C 620 70, 680 80, 700 140 C 730 220, 780 210, 810 120 C 840 40, 940 50, 960 140 L 900 155 C 890 105, 850 110, 830 160 C 800 250, 720 250, 680 155 C 660 115, 620 115, 610 160 L 590 170 C 570 120, 520 120, 510 180 L 500 180 L 490 180 C 480 120, 430 120, 410 170 L 390 160 C 380 115, 340 115, 320 155 C 280 250, 200 250, 170 160 C 150 110, 110 105, 100 155 Z" />
  </svg>;

/* ===== Hero wave background shape (bottom fade) ===== */
const HeroWaveBG = () =>
  <svg viewBox="0 0 1440 180" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="hwg" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="#45FDFB" stopOpacity=".0" />
        <stop offset=".5" stopColor="#45FDFB" stopOpacity=".35" />
        <stop offset="1" stopColor="#1CC0C8" stopOpacity=".0" />
      </linearGradient>
    </defs>
    <path d="M0 100 C 180 10, 360 190, 540 100 C 720 10, 900 190, 1080 100 C 1260 10, 1440 100, 1440 100 L 1440 180 L 0 180 Z" fill="url(#hwg)" />
    <path d="M0 130 C 180 50, 360 210, 540 130 C 720 50, 900 210, 1080 130 C 1260 50, 1440 130, 1440 130 L 1440 180 L 0 180 Z" fill="#042034" opacity=".5" />
    <path d="M0 150 C 180 80, 360 220, 540 150 C 720 80, 900 220, 1080 150 C 1260 80, 1440 150, 1440 150 L 1440 180 L 0 180 Z" fill="#042034" />
  </svg>;

/* ===== Portrait placeholder (woman smiling) ===== */
const PortraitPlaceholder = () =>
  <svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#F9E6D3" />
        <stop offset=".55" stopColor="#F1C9A8" />
        <stop offset="1" stopColor="#B88767" />
      </linearGradient>
      <linearGradient id="hair" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#3A2418" />
        <stop offset="1" stopColor="#1C120B" />
      </linearGradient>
      <linearGradient id="skin" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#F4D6BC" />
        <stop offset="1" stopColor="#D9A983" />
      </linearGradient>
      <radialGradient id="cheek" cx=".5" cy=".5">
        <stop offset="0" stopColor="#E89D8A" stopOpacity=".7" />
        <stop offset="1" stopColor="#E89D8A" stopOpacity="0" />
      </radialGradient>
    </defs>
    <rect width="400" height="500" fill="url(#bg)" />
    <ellipse cx="320" cy="80" rx="160" ry="120" fill="#FFF2E2" opacity=".5" />
    <path d="M60 500 C 80 400, 140 360, 200 360 C 260 360, 320 400, 340 500 Z" fill="#0E6C8C" />
    <path d="M170 360 Q 200 390 230 360 L 230 380 Q 200 395 170 380 Z" fill="url(#skin)" />
    <path d="M110 220 C 100 120, 160 70, 210 72 C 280 75, 320 130, 310 230 L 310 340 C 310 360, 295 370, 280 365 L 280 260 L 130 260 L 130 365 C 115 370, 100 360, 100 340 Z" fill="url(#hair)" />
    <path d="M140 195 C 140 140, 175 115, 210 115 C 250 115, 275 145, 275 200 L 275 255 C 275 305, 245 340, 210 340 C 175 340, 145 305, 140 255 Z" fill="url(#skin)" />
    <ellipse cx="170" cy="270" rx="22" ry="14" fill="url(#cheek)" />
    <ellipse cx="252" cy="268" rx="22" ry="14" fill="url(#cheek)" />
    <path d="M135 195 C 140 150, 180 120, 215 120 C 200 145, 170 170, 150 210 Z" fill="url(#hair)" />
    <path d="M280 210 C 275 170, 255 140, 230 122 C 265 128, 285 160, 285 210 Z" fill="url(#hair)" />
    <path d="M162 204 Q 180 196 196 206" stroke="#2A1912" strokeWidth="4" fill="none" strokeLinecap="round" />
    <path d="M224 206 Q 242 196 258 204" stroke="#2A1912" strokeWidth="4" fill="none" strokeLinecap="round" />
    <path d="M160 228 Q 178 240 196 228" stroke="#2A1912" strokeWidth="3.5" fill="none" strokeLinecap="round" />
    <path d="M224 228 Q 242 240 260 228" stroke="#2A1912" strokeWidth="3.5" fill="none" strokeLinecap="round" />
    <path d="M164 226 Q 178 232 192 226" stroke="#2A1912" strokeWidth="1" fill="none" opacity=".4" />
    <path d="M209 240 Q 202 275 212 285 Q 220 285 216 278" stroke="#B38062" strokeWidth="2" fill="none" strokeLinecap="round" />
    <path d="M172 300 Q 210 332 250 300" stroke="#8B3A2A" strokeWidth="2.5" fill="#B85246" />
    <path d="M178 304 Q 210 325 242 304 L 240 310 Q 210 325 180 310 Z" fill="#fff" />
    {[0, 1, 2, 3, 4, 5].map((i) => <line key={i} x1={185 + i * 10} y1="306" x2={185 + i * 10} y2="316" stroke="#E8E0D0" strokeWidth=".8" />)}
    <circle cx="135" cy="270" r="4" fill="#45FDFB" />
    <circle cx="285" cy="270" r="4" fill="#45FDFB" />
  </svg>;

/* ===== Nav ===== */
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : 'light'}`}>
      <div className="container nav-inner">
        <a className="logo" href="#">
          <img
            className="logo-mark"
            src={scrolled ? 'assets/wave-isologo-color.png' : 'assets/wave-isologo.png'}
            alt="Wave"
            style={{ filter: scrolled ? 'none' : 'brightness(0) invert(1)' }}
          />
          <span>wave</span>
        </a>
        <ul>
          <li><a href="#beneficios">Beneficios</a></li>
          <li><a href="#proceso">Cómo funciona</a></li>
          <li><a href="#testi">Historias</a></li>
          <li><a href="#faq">Preguntas</a></li>
          <li><a href="#contacto">Odontólogos</a></li>
        </ul>
        <a className="nav-cta" href={WA_URL} target="_blank" rel="noopener">
          Agendar consulta <Ic.ArrowR size={14} />
        </a>
      </div>
    </nav>
  );
};

/* ===== Hero ===== */
const Hero = () => {
  const lines = ['Tu mejor', 'sonrisa,', 'invisible.'];
  return (
    <header className="hero">
      <div className="container hero-grid">
        <div>
          <span className="pill" style={{ background: 'rgba(69,253,251,.14)', color: '#C5FBFC', border: '1px solid rgba(69,253,251,.3)' }}>
            <span className="dot" /> Diseñados en Argentina · Impresión 3D
          </span>
          <h1>
            {lines.map((line, i) => {
              const isLast = i === lines.length - 1;
              return (
                <span key={i} style={{ display: 'block' }}>
                  {isLast ? <em>{line}</em> : line}
                </span>
              );
            })}
          </h1>
          <p className="lede">
            Alineadores invisibles, removibles y 100% personalizados. Corregí la posición de tus dientes sin brackets, con un plan pensado para vos — desde el primer escaneo hasta la última sonrisa.
          </p>
          <div className="ctas">
            <a className="cta cta-cyan" href={WA_URL} target="_blank" rel="noopener">
              Empezá tu tratamiento <Ic.ArrowR />
            </a>
            <a className="cta cta-ghost" href="#proceso">Ver cómo funciona</a>
          </div>
          <div className="trust">
            <div className="avs"><span /><span /><span /><span /></div>
            <div>
              <div className="stars">★★★★★</div>
              <div>+2.400 sonrisas transformadas</div>
            </div>
          </div>
        </div>

        <div className="smile-card">
          <div className="portrait">
            <img
              src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=900&q=85"
              alt=""
              onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.nextElementSibling.style.display = 'block'; }}
            />
            <div style={{ display: 'none' }}><PortraitPlaceholder /></div>
          </div>
        </div>
      </div>

      <div className="hero-wave"><HeroWaveBG /></div>
    </header>
  );
};

/* ===== Marquee ===== */
const Marquee = () => {
  const items = ['Removibles', 'Transparentes', 'Cómodos', 'Sin brackets', 'Impresión 3D', 'Personalizados', 'Micro-movimientos', 'Made in Argentina'];
  const row = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((t, i) => <span key={i}>{t}<span className="sep" /></span>)}
      </div>
    </div>
  );
};

/* ===== Beneficios ===== */
const Benefits = () => {
  const data = [
    { icon: <Ic.Invisible />, n: '01', t: 'Prácticamente invisibles', p: 'Placas transparentes que casi nadie nota. Sonreí, trabajá, salí — sin que el tratamiento sea el protagonista.' },
    { icon: <Ic.Remove />, n: '02', t: 'Removibles cuando querés', p: 'Sacalos para comer, cepillarte o una ocasión especial. Tu vida no se adapta al tratamiento — él se adapta a vos.' },
    { icon: <Ic.Tech />, n: '03', t: 'Hechos a tu medida', p: 'Escaneo intraoral y planificación digital. Cada placa genera un micro-movimiento exacto, hacia la posición ideal.' },
    { icon: <Ic.Clock />, n: '04', t: 'Acompañado por un especialista', p: 'Todo el tratamiento se hace con un ortodoncista especializado en su consultorio — te guía de principio a fin.' },
  ];

  return (
    <section className="block" id="beneficios">
      <div className="container">
        <div className="benefits-head rv">
          <div>
            <span className="eyebrow">Por qué wave</span>
            <h2 className="h2">Ortodoncia <em>sin complicaciones.</em><br />Pensada para tu día a día.</h2>
          </div>
          <p className="sub">Nada de alambres ni brackets. Placas finas, hechas a medida con impresión 3D, que se cambian cada dos semanas para llevar tus dientes, paso a paso, al lugar que querés.</p>
        </div>
        <div className="benefit-grid">
          {data.map((b, i) => (
            <div className="benefit rv" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div>
                <div className="icon">{b.icon}</div>
                <div className="num">{b.n}</div>
                <h3>{b.t}</h3>
                <p>{b.p}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="stats rv">
          <div className="stat"><div className="v"><em>+2.4k</em></div><div className="k">Pacientes en tratamiento en todo el país</div></div>
          <div className="stat"><div className="v">60 <em>días</em></div><div className="k">De la consulta inicial al inicio del tratamiento</div></div>
          <div className="stat"><div className="v">98%</div><div className="k">De satisfacción en encuestas post-tratamiento</div></div>
          <div className="stat"><div className="v">0</div><div className="k">Brackets, alambres o metal a la vista</div></div>
        </div>
      </div>
    </section>
  );
};

/* ===== Proceso ===== */
const Proceso = () => {
  const steps = [
    { t: 'Consulta inicial', s: 'Te recibe un ortodoncista especializado y evalúa tu caso.', big: '01', tag: 'Paso 1', copy: { h: 'Nos conocemos', p: 'En la primera visita, un ortodoncista especializado conversa con vos y evalúa si Wave es la opción ideal para tu sonrisa.' } },
    { t: 'Estudios', s: 'Escaneo digital y radiografías para diseñar tu plan.', big: '02', tag: 'Paso 2', copy: { h: 'Todo a medida', p: 'Realizamos un escaneo digital 3D y las radiografías necesarias. Con esa información diseñamos un plan único para tu boca.' } },
    { t: 'Tratamiento a tu medida', s: 'Recibís tus alineadores y un ortodoncista te acompaña hasta el final.', big: '03', tag: 'Paso 3', copy: { h: 'Sonrisa en camino', p: 'Recibís tus placas personalizadas y el ortodoncista especializado te guía durante todo el tratamiento, con controles en su consultorio.' } },
  ];

  const [active, setActive] = useState(0);
  const cur = steps[active];

  return (
    <section className="block" id="proceso">
      <div className="container">
        <div className="proceso rv">
          <div className="proceso-inner">
            <div>
              <span className="eyebrow" style={{ color: '#45FDFB' }}>El proceso</span>
              <h2 className="h2">Tu sonrisa, en<br /><em>3 pasos simples.</em></h2>
              <p className="sub">De principio a fin, todo acompañado por un ortodoncista especializado. Desde la primera consulta al inicio del tratamiento suelen pasar alrededor de 60 días.</p>

              <div className="steps" style={{ marginTop: 36 }}>
                {steps.map((s, i) => (
                  <div key={i} className={`step ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
                    <div className="n">{String(i + 1).padStart(2, '0')}</div>
                    <div className="t">{s.t}<small>{s.s}</small></div>
                    <div className="chev"><Ic.Chev /></div>
                  </div>
                ))}
              </div>
            </div>

            <div className="visual">
              <span className="chip">{cur.tag}</span>
              <div className="bignum">{cur.big}<span className="slash">/ 03</span></div>
              <div className="copy">
                <h4>{cur.copy.h}</h4>
                <p>{cur.copy.p}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ===== Comparación ===== */
const Compare = () => (
  <section className="block" style={{ paddingTop: 0 }}>
    <div className="container">
      <div className="rv">
        <span className="eyebrow">Brackets vs Wave</span>
        <h2 className="h2">Lo mismo que hacen los brackets,<br /><em>sin los brackets.</em></h2>
      </div>
      <div className="compare rv">
        <div className="good">
          <h4>Con Wave</h4>
          <ul>
            <li><span className="mk"><Ic.Check /></span>Transparentes — casi nadie los ve</li>
            <li><span className="mk"><Ic.Check /></span>Removibles para comer y cepillarte</li>
            <li><span className="mk"><Ic.Check /></span>Hechos a medida para tu sonrisa</li>
            <li><span className="mk"><Ic.Check /></span>Acompañado por un ortodoncista especializado</li>
            <li><span className="mk"><Ic.Check /></span>Sin emergencias por alambres sueltos</li>
          </ul>
        </div>
        <div className="bad">
          <h4>Con brackets convencionales</h4>
          <ul>
            <li><span className="mk"><Ic.X /></span>Metálicos, visibles en cada foto</li>
            <li><span className="mk"><Ic.X /></span>Restricciones en qué podés comer</li>
            <li><span className="mk"><Ic.X /></span>Plan que se ajusta sobre la marcha</li>
            <li><span className="mk"><Ic.X /></span>Visitas mensuales al consultorio</li>
            <li><span className="mk"><Ic.X /></span>Pinchazos y roces con la mejilla</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

/* ===== Testimonios ===== */
const Testi = () => {
  const data = [
    { q: 'Pensé que iba a ser mucho más engorroso. A las dos semanas ya me había olvidado que los tenía puestos.', n: 'Lucía F.', m: 'Buenos Aires · 11 meses de tratamiento' },
    { q: 'Me los saco para comer, me los pongo de nuevo, y listo. Nadie en el trabajo sabe que estoy usando ortodoncia.', n: 'Martín R.', m: 'Córdoba · 8 meses de tratamiento' },
    { q: 'Lo mejor fue ver el video del plan antes de empezar. Saber exactamente cómo iba a quedar me convenció.', n: 'Agustina D.', m: 'Santiago del Estero · 14 meses' },
  ];

  return (
    <section className="block" id="testi" style={{ padding: '40px 0' }}>
      <div className="container">
        <div className="testi">
          <div className="container">
            <div className="rv">
              <span className="eyebrow">Historias Wave</span>
              <h2 className="h2">Sonrisas que <em>ya están</em> haciendo olas.</h2>
            </div>
            <div className="testi-grid">
              {data.map((t, i) => (
                <div className="t-card rv" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
                  <div className="stars">★★★★★</div>
                  <blockquote>"{t.q}"</blockquote>
                  <div className="who">
                    <div className="av" />
                    <div>
                      <div className="name">{t.n}</div>
                      <div className="meta">{t.m}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ===== FAQ ===== */
const FAQ = () => {
  const [open, setOpen] = useState(0);
  const items = [
    { q: '¿Wave sirve para mi caso?', a: 'La mayoría de casos de apiñamiento, espaciamiento, mordida cruzada leve y recidiva post-ortodoncia son tratables con Wave. En la consulta inicial, un ortodoncista especializado evalúa tu caso y te explica las opciones.' },
    { q: '¿Cuánto tiempo dura el tratamiento?', a: 'Depende de la complejidad. Casos leves desde 6 meses; casos más complejos hasta 18 meses. Desde la primera consulta al inicio del tratamiento suelen pasar alrededor de 60 días.' },
    { q: '¿Cuántas horas por día los tengo que usar?', a: 'Entre 20 y 22 horas diarias. Los sacás solo para comer, tomar bebidas calientes, y cepillarte los dientes. Cuantas más horas, más predecible el resultado.' },
    { q: '¿Duele?', a: 'Al cambiar de placa podés sentir presión durante 1—2 días. No hay alambres que se corten ni brackets que rocen la mejilla.' },
    { q: '¿Puedo comer de todo?', a: 'Sí — te sacás las placas para comer. Solo pedimos que te cepilles antes de volver a ponerlas.' },
    { q: '¿Cómo empiezo?', a: 'Agendá una consulta con un ortodoncista especializado. En la primera visita evalúa tu caso y te explica cómo seguir.' },
  ];

  return (
    <section className="block" id="faq">
      <div className="container">
        <div className="faq-wrap">
          <div className="rv">
            <span className="eyebrow">Preguntas frecuentes</span>
            <h2 className="h2">Todo lo que<br />querés <em>saber.</em></h2>
            <p className="sub">Si tu duda no está acá, escribinos por WhatsApp y te respondemos en el día.</p>
          </div>
          <div className="faq-list rv">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q"><span>{it.q}</span><span className="plus"><Ic.Plus /></span></div>
                <div className="a"><p style={{ margin: 0 }}>{it.a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ===== Final CTA ===== */
const FinalCTA = () => (
  <section className="block" id="contacto" style={{ paddingBottom: 40 }}>
    <div className="container">
      <div className="final">
        <div className="final-inner">
          <div className="rv">
            <h2>Empecemos con<br />una <span style={{ color: '#45FDFB' }}>consulta.</span></h2>
            <p>Escribinos por WhatsApp y coordinamos una primera cita con un ortodoncista especializado cerca tuyo.</p>
          </div>
          <div className="final-form rv" style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 800, color: 'rgba(255,255,255,.65)', marginBottom: 12 }}>Respondemos en el día</div>
            <div style={{ fontSize: 28, fontWeight: 900, letterSpacing: '-.01em', lineHeight: 1.1, marginBottom: 6 }}>+54 9 3855 06-3687</div>
            <div style={{ color: 'rgba(255,255,255,.65)', fontSize: 14, marginBottom: 20 }}>Lunes a viernes, 9 a 19 hs</div>
            <a
              href={WA_URL}
              target="_blank"
              rel="noopener"
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '16px', borderRadius: 12, background: 'var(--cyan)', color: 'var(--ink)', fontWeight: 800, fontSize: 15, textDecoration: 'none' }}
            >
              <Ic.WA /> Agendar por WhatsApp <Ic.ArrowR />
            </a>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,.55)', marginTop: 14, fontWeight: 500, lineHeight: 1.4 }}>
              Te atiende nuestro equipo directamente.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ===== Footer ===== */
const Footer = () => (
  <footer>
    <div className="container">
      <div className="foot-top">
        <div className="brand">
          <div className="foot-brand-row">
            <img src="assets/wave-logo-white.png" alt="Wave" />
          </div>
          <p>Wave es un sistema de alineadores invisibles fabricados con impresión 3D. Diseñados en Santiago del Estero, Argentina.</p>
          <div className="socials">
            <a href="#" aria-label="Instagram"><Ic.IG /></a>
            <a href="#" aria-label="Facebook"><Ic.FB /></a>
            <a href="https://wa.me/5493855063687" target="_blank" rel="noopener" aria-label="WhatsApp"><Ic.WA /></a>
          </div>
        </div>
        <div>
          <h5>Wave</h5>
          <ul>
            <li><a href="#beneficios">Por qué Wave</a></li>
            <li><a href="#proceso">Cómo funciona</a></li>
            <li><a href="#testi">Historias</a></li>
            <li><a href="#">Precios</a></li>
          </ul>
        </div>
        <div>
          <h5>Para odontólogos</h5>
          <ul>
            <li><a href="#">Portal profesional</a></li>
            <li><a href="#">Workflow clínico</a></li>
            <li><a href="#">Capacitaciones</a></li>
            <li><a href="#">Contacto comercial</a></li>
          </ul>
        </div>
        <div>
          <h5>Contacto</h5>
          <ul>
            <li><a href="#">wavealineadores.com.ar</a></li>
            <li><a href="#">+54 9 3855063687</a></li>
            <li><a href="#">@wave_arg</a></li>
            <li><a href="#">Santiago del Estero, AR</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© 2026 Wave Alineadores Invisibles. Todos los derechos reservados.</div>
        <div>Made with ondas en Argentina.</div>
      </div>
    </div>
  </footer>
);

/* ===== App ===== */
const App = () => {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.rv').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Benefits />
      <Proceso />
      <Compare />
      <Testi />
      <FAQ />
      <FinalCTA />
      <Footer />
    </>
  );
};

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