Algo que quieras contarnos (opcional)

</div>
      <button type="submit" className="btn btn-violet form-submit">
        <Icon name="whatsapp" size={18} /> Enviar y abrir WhatsApp
      </button>
      <p style={{ margin: "4px 0 0", fontSize: 12, color: "var(--ink-60)", fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.06em" }}>
        Te respondemos en el día con los datos de la seña.
      </p>
    </form>);

};

// =========== TWEAKS PANEL ===========
const TweaksPanel = ({ open, onClose, accent, setAccent }) => {
  if (!open) return null;
  return (
    <div className="tweaks-panel open">
      <h4>Tweaks <button onClick={onClose}>×</button></h4>
      <div className="tweak-row">
        <label>Color de acento</label>
        <div className="swatch-row">
          {ACCENT_OPTIONS.map((s) =>
          <div
            key={s.value}
            className={`swatch ${accent === s.value ? "active" : ""}`}
            style={{ background: s.value }}
            title={s.name}
            onClick={() => setAccent(s.value)} />

)}
        </div>
      </div>
      <div style={{ fontSize: 11, color: "rgba(240,232,247,.55)", marginTop: 12, fontFamily: "'JetBrains Mono', monospace" }}>
        Los cambios se guardan.
      </div>
    </div>);

};

// =========== APP ===========
const App = () => {
  const [accent, setAccent] = useState(TWEAK_DEFAULTS.accent);
  const [tweaksOpen, setTweaksOpen] = useState(false);

useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { accent } }, "*");
  }, [accent]);

const WHATSAPP = "https://wa.me/5492216233285?text=Hola%2C%20quiero%20reservar%20mi%20lugar%20en%20el%20taller%20De%20la%20Intenci%C3%B3n%20a%20la%20Acci%C3%B3n.";
  const target = new Date(2026, 4, 21, 18, 0, 0);

const tickerItems = [
  "Taller vivencial presencial",
  "23 de mayo · 18:00 a 20:30 h",
  "La Plata · Cupos limitados",
  "Neurociencia · PNL · Hipnosis",
  "De la intención a la acción",
  "Reservas abiertas"];

return (
    <>
      <div className="ticker">
        <div className="ticker-track">
          {[...tickerItems, ...tickerItems].map((t, i) =>
          <span key={i}><span className="dot"></span>{t}</span>
          )}
        </div>
      </div>

<nav className="nav">
        <div className="container nav-inner">
          <a className="brand" href="#top">
            <span className="brand-mark">a</span>
            <span style={{ fontFamily: "Arial" }}>De la intención a la acción <em style={{ fontStyle: "italic", color: "var(--ink-60)", fontWeight: 400 }}> · taller</em></span>
          </a>
          <div className="nav-links">
            <a href="#para-quien">Para quién</a>
            <a href="#metodo">Método</a>
            <a href="#facilitadora">Facilitadora</a>
            <a href="#inversion">Reservar</a>
            <a href="#faq">FAQ</a>
          </div>
          <a className="nav-cta" href={WHATSAPP} target="_blank" rel="noopener noreferrer">
            Reservar <Icon name="arrow" size={14} />
          </a>
        </div>
      </nav>

{/* ===== HERO ===== */}
      <section className="hero" id="top">
        <div className="container">
          <div className="hero-top">
            <div className="hero-eyebrow">
              <span className="badge">En vivo · presencial</span>
            </div>
            <div className="hero-meta">
              <span><b>La Plata</b></span>
              <span><b>2h 30</b> de trabajo</span>
            </div>
          </div>

<div className="hero-grid">
            <div>
              <h1 className="hero-title display">
                <span className="line de-la">De la</span>
                <span className="line word-intencion">intención</span>
                <span className="line a-la">a la</span>
                <span className="line word-accion">acción.</span>
              </h1>
              <p className="hero-sub">
                Un taller vivencial de <b>reprogramación interna</b> para quienes saben qué cambiar pero algo por dentro sigue frenando. Trabajamos la <b>estructura que sostiene la repetición</b>, no la motivación.
              </p>
              <div className="hero-cta">
                <a className="btn btn-violet" href="#inversion">
                  Reservar mi lugar <Icon name="arrow" size={16} />
                </a>
                <a className="btn btn-ghost" href="#metodo">
                  Ver método
                </a>
              </div>

<div className="hero-note">
                <span className="icon">“</span>
                <div className="txt">
                  <strong>No es falta de motivación.</strong>
                  Es la forma en la que está programada la mente. Y eso se puede transformar.
                </div>
              </div>
            </div>

{/* ===== PARA QUIÉN ===== */}
      <section className="section section-lavender" id="para-quien">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">01</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Este taller es para vos si ·</div>
              <h2 className="display">¿Sentís que algo <em>tiene que cambiar</em>, pero todo sigue igual?</h2>
            </div>
            <p className="intro">Para quienes ya entendieron lo que les pasa y necesitan intervenir más profundo. Ver sin cambiar deja de alcanzar.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="check-list">
              {[
              ["Se repiten los mismos resultados", "Las decisiones cambian en la mente, pero afuera se sigue llegando al mismo lugar."],
              ["Se posterga lo importante", "Lo urgente gana. Lo que de verdad importa queda para después, otra vez."],
              ["Hay claridad, pero no hay acción", "Se sabe qué hacer. Saberlo no alcanza. Algo interno frena el movimiento."],
              ["Lo que empieza, no se sostiene", "La motivación inicial se apaga. Vuelve el automático, vuelven los patrones."]].
              map(([t, d], i) =>
              <div key={i} className="check-item">
                  <div className="bullet"><Icon name="check" size={18} /></div>
                  <div>
                    <h3>{t}</h3>
                    <p>{d}</p>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== QUOTE ===== */}
      <div className="quote-strip">
        <div className="container">
          <Reveal as="blockquote">
            El problema no es lo que no sabés. Es la <em>estructura interna</em> desde la que pensás, sentís y decidís.
          </Reveal>
          <div className="byline">— El cambio no empieza cuando sabés qué hacer.
Empieza cuando dejás de repetir quién estabas siendo.</div>
        </div>
      </div>

{/* ===== MÉTODO ===== */}
      <section className="section section-dark" id="metodo">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">02</div>
            <div>
              <div className="mono-label" style={{ color: "rgba(184,157,222,.75)", marginBottom: 12 }}>· Cómo trabajamos ·</div>
              <h2 className="display">No es teoría.<br /><em>Es experiencia.</em></h2>
            </div>
            <p className="intro">Intervenimos donde se generan las decisiones: en la programación interna. Con herramientas que operan bajo el pensamiento consciente.</p>
          </Reveal>

<Reveal delay={150} className="method-stack">
            <div>
              <h3>Mover el <em>punto</em> desde el cual se crea la realidad.</h3>
            </div>
            <div>
              <p>En 2 horas y media activamos un proceso de desprogramación y reprogramación guiada. No vas a irte con una lista de tareas: te vas con una nueva coordinación interna entre lo que pensás, lo que sentís y lo que hacés.</p>
              <p>Es un trabajo íntimo, grupal y vivencial. Cada ejercicio se vive en tiempo real.</p>
            </div>
          </Reveal>

<Reveal delay={250}>
            <div className="tools-grid">
              {[
              { n: "01", i: "brain", t: "Neurociencia aplicada", d: "Cómo se forman los patrones y cómo se reescriben." },
              { n: "02", i: "wave", t: "PNL", d: "Lenguaje y submodalidades para cambiar el mapa interno." },
              { n: "03", i: "spiral", t: "Hipnosis guiada", d: "Acceso a capas profundas donde vive el automático." },
              { n: "04", i: "target", t: "Ejercicios vivenciales", d: "Trabajo práctico, en tiempo real, en cuerpo y voz." }].
              map((x, i) =>
              <div key={i} className="tool">
                  <div className="icon-wrap"><Icon name={x.i} size={28} /></div>
                  <div className="num">{x.n}</div>
                  <div>
                    <h4>{x.t}</h4>
                    <p>{x.d}</p>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== FACILITADORA ===== */}
      <section className="section section-lavender" id="facilitadora">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">03</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Quién guía el espacio ·</div>
              <h2 className="display">Una facilitadora, <em>no una fórmula.</em></h2>
            </div>
            <p className="intro">El trabajo se hace en presencia.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="facilitator-grid">
              <FacilitatorPhoto />
              <div>
                <div className="facilitator-role">Facilitadora · Coach ontológica</div>
                <h3 className="facilitator-name">Laura</h3>
                <div className="facilitator-bio">
                  <p>
                    Acompaña procesos de transformación personal desde hace más de una década. Su trabajo integra herramientas de neurociencia aplicada, PNL e hipnosis guiada para intervenir en los mecanismos internos que sostienen los patrones repetidos.
                  </p>
                  <p>
                    Cree que la transformación real no se construye con motivación, sino con <b>coherencia interna</b>: un proceso vivencial, íntimo y práctico, orientado a resultados sostenibles.
                  </p>
                </div>

<div className="credentials">
                  {[
                  ["Formación", "Coach ontológico profesional"],
                  ["Trainer / Entrenadora", "PNL · Hipnosis ericksoniana"],
                  ["Experiencia", "+10 años acompañando procesos"],
                  ["Ediciones", "+400 personas en talleres previos"]].
                  map(([l, v], i) =>
                  <div key={i} className="cred">
                      <span className="dot"></span>
                      <div>
                        <div className="cred-label">{l}</div>
                        <div className="cred-value">{v}</div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== QUÉ LLEVAR / QUÉ ESPERAR ===== */}
      <section className="section" id="llevar">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">04</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Qué esperar el día del taller ·</div>
              <h2 className="display">Llegás, respirás, <em>empezamos.</em></h2>
            </div>
            <p className="intro">El espacio está pensado y cuidado. Vos solo necesitás venir disponible.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="bring-grid">
              {[
              { i: "shirt", idx: "01", t: "Ropa cómoda", d: "Vas a estar sentada, acostada y en movimiento en distintos momentos. Prioridad: comodidad." },
              { i: "notebook", idx: "02", t: "Libreta o cuaderno", d: "Para anotar insights propios. No hace falta tomar notas extensas: te guiamos todo el proceso." },
              { i: "water", idx: "03", t: "Tu botella de agua", d: "Hay agua disponible, pero preferimos que lleves la tuya. El trabajo interno deshidrata más de lo que parece." },
              { i: "clock", idx: "04", t: "Llegar 15 min antes", d: "Abrimos 18:00 en punto. Llegar temprano te permite instalarte sin prisa y empezar con presencia." },
              { i: "heart", idx: "05", t: "Disposición, no preparación", d: "No necesitás leer nada previo. Venir abierta a la experiencia es todo lo que pedimos." },
              { i: "refresh", idx: "06", t: "Reservar tiempo después", d: "No agendes reuniones inmediatamente después. Dejá un rato para integrar lo que te pase." }].
              map((x, i) =>
              <div key={i} className="bring-card">
                  <span className="idx">{x.idx}</span>
                  <div className="ic"><Icon name={x.i} size={22} /></div>
                  <h4>{x.t}</h4>
                  <p>{x.d}</p>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== PRICE + FORM ===== */}
      <section className="section section-lavender" id="inversion">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">05</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Inversión y reserva ·</div>
              <h2 className="display">Un encuentro. <em>Un movimiento.</em></h2>
            </div>
            <p className="intro">Grupo reducido para garantizar trabajo en tiempo real con cada persona.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="price-wrap">
              <div className="price-left">
                <div className="kicker">Taller completo · 2h 30</div>
                <h2>Reprogramación <em>interna</em> guiada.</h2>

<div className="price-numbers">
                  <div className="amount">
                    <sup>$</sup>33.000<span className="ars">ars</span>
                  </div>
                  <div className="deposit">
                    Reserva de lugar
                    <b>$15.000 ARS</b>
                  </div>
                </div>

<div className="fine">
                  La reserva confirma tu cupo. El saldo se abona el día del taller. Al ser presencial y cuidado, los lugares son limitados.
                </div>
              </div>

<div className="form-right">
                <h3>Reservá tu lugar.</h3>
                <div className="slots"><span className="pill">05 / 10</span> cupos disponibles</div>
                <ReservationForm whatsapp={WHATSAPP} />
              </div>
            </div>

<div className="info-row">
              {[
              { i: "calendar", l: "Fecha", v: "Jue 21 de mayo" },
              { i: "clock", l: "Horario", v: "18:00 a 20:30 h" },
              { i: "pin", l: "Lugar", v: "Casa Pranava · La Plata" },
              { i: "seed", l: "Requisito", v: "Ropa cómoda" }].
              map((x, i) =>
              <div key={i} className="info-cell">
                  <div className="ico"><Icon name={x.i} size={20} /></div>
                  <div>
                    <div className="lab">{x.l}</div>
                    <div className="val">{x.v}</div>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== MAPA ===== */}
      <section className="section" id="donde">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">06</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Dónde ·</div>
              <h2 className="display">Un espacio cuidado, <em>en el corazón</em> de La Plata.</h2>
            </div>
            <p className="intro">Casa Pranava · Calle 8 nº 489, entre 41 y 42. La Plata. Acceso con transporte público y estacionamiento cercano.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="map-wrap">
              <div className="map-info">
                <div className="kicker">Ubicación</div>
                <h3>Casa Pranava · <span style={{ color: "var(--accent)", fontStyle: "italic" }}>La Plata, Buenos Aires</span></h3>
                <p>Casa Pranava es un espacio preparado para trabajo corporal y vivencial, con iluminación tenue, acústica aislada y temperatura estable. Te esperamos el jueves 21 de mayo, de 18:00 a 20:30.</p>
                <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.08em", color: "var(--ink)", textTransform: "uppercase" }}>
                  ⟶ Calle 8 nº 489 · entre 41 y 42<br />
                  ⟶ A 6 cuadras de Plaza San Martín<br />
                  ⟶ Micros · 214, 273, 307, 520, 561<br />
                  ⟶ Estacionamiento en la zona
                </p>
              </div>
              <div className="map-iframe">
                <iframe
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  src="https://www.openstreetmap.org/export/embed.html?bbox=-57.9580%2C-34.9330%2C-57.9380%2C-34.9210&layer=mapnik&marker=-34.9270%2C-57.9480"
                  title="Ubicación del taller">
                </iframe>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== FAQ (sesgos) ===== */}
      <section className="section section-lavender" id="faq">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">07</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Dudas y resistencias ·</div>
              <h2 className="display">Los sesgos que aparecen <em>antes de reservar.</em></h2>
            </div>
            <p className="intro">Abajo están las objeciones más frecuentes, nombradas por su sesgo cognitivo. Reconocerlo es, ya, parte del trabajo.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="faq-list">
              <FAQ q="“Ya leí mil libros y sé lo que tengo que hacer.”">
                <p>Entender no es transformar. La neurociencia lo muestra claro: <b>saber qué hacer no genera cambio</b> si el patrón interno que sostiene la conducta sigue intacto.</p>
                <p>Este taller no te suma información. Interviene la estructura desde la que tomás decisiones, para que lo que ya sabés empiece a traducirse en acción real.</p>
              </FAQ>

<FAQ q="“Cuando sea el momento correcto, lo hago.”">
                <p>El “momento correcto” es una forma sofisticada de no actuar. El cerebro premia la sensación de decisión futura porque alivia la tensión presente, sin pedir costo.</p>
                <p>Si sentís que algo tiene que moverse, la resistencia a reservar hoy <b>es exactamente el patrón que venimos a trabajar.</b></p>
              </FAQ>

<FAQ q="“Ya hice otros talleres y no funcionó. ¿Por qué este sí?”">
                <p>No podemos prometerte que “funcione” en abstracto. Sí podemos decirte qué lo hace distinto: el trabajo no pasa por reflexión ni motivación, sino por <b>intervención vivencial</b> en capas más profundas (hipnosis guiada, ejercicios somáticos, reencuadres en tiempo real).</p>
                <p>Si los talleres anteriores quedaron en la cabeza, este baja al cuerpo.</p>
              </FAQ>

<FAQ q="“No sé si tengo tiempo ahora para esto.”">
                <p>Son 2 horas y media, una sola vez. Lo que suele frenarnos no es el tiempo real, sino <b>la resistencia a salir del estado conocido</b>, aunque ese estado ya no funcione.</p>
                <p>Preguntate honestamente: ¿cuánto tiempo seguís invirtiendo en el patrón que no querés sostener?</p>
              </FAQ>

<FAQ q="“La hipnosis me da miedo. ¿Y si pierdo el control?”">
                <p>La hipnosis que usamos no tiene nada que ver con la versión escénica o del cine. Es un <b>estado de concentración profunda</b>, similar al que experimentás al manejar en piloto automático o meditar.</p>
                <p>En todo momento mantenés conciencia, podés hablar, moverte, decir que no. Es una herramienta de acceso, no de sumisión.</p>
              </FAQ>

<FAQ q="“Si fuera tan efectivo, ¿por qué no lo hacen todos?”">
                <p>Porque cambiar estructuras internas genera incomodidad, y <b>la mayoría de las personas prefiere el alivio inmediato</b> de la motivación o la autoayuda. Este trabajo no da alivio rápido: da transformación sostenible.</p>
                <p>No es para todos. Es para quienes están listas/os para incomodarse un rato en función de un cambio real.</p>
              </FAQ>

<FAQ q="“Me va a servir, pero no estoy bien ahora. Mejor cuando esté más estable.”">
                <p>Esperar a “estar bien” para trabajar lo que hace que no estés bien es la trampa más común. El taller <b>no requiere que estés en tu mejor momento</b>: requiere que tengas disposición a moverte.</p>
                <p>Si estás atravesando un proceso clínico agudo, conversalo con nosotras antes. Si es incomodidad vital ordinaria, este es el momento.</p>
              </FAQ>

<FAQ q="“¿Voy a tener que contar cosas personales delante de desconocidos?”">
                <p>No. El trabajo es personal pero no expositivo: la mayoría de los ejercicios son individuales o en pares. <b>Elegís vos qué compartir</b> y qué se queda en tu proceso interno.</p>
                <p>El espacio está pensado para sostener la intimidad, no para forzarla.</p>
              </FAQ>

<FAQ q="“Voy a pensarlo y reservo más adelante.”">
                <p>Pensarlo es legítimo. Pensarlo para no decidir es el patrón. Si estás leyendo esto es porque algo ya resonó; lo que decidas hacer con esa resonancia es, literalmente, <b>el material con el que empieza el taller.</b></p>
                <p>Si querés, escribinos por WhatsApp y conversamos. No hace falta reservar hoy para empezar la conversación.</p>
              </FAQ>
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== POLÍTICAS ===== */}
      <section className="section" id="politicas">
        <div className="container">
          <Reveal as="div" className="section-head">
            <div className="num">08</div>
            <div>
              <div className="mono-label" style={{ marginBottom: 12 }}>· Transparencia ·</div>
              <h2 className="display">Políticas de <em>cancelación y reserva.</em></h2>
            </div>
            <p className="intro">Queremos que llegues sin dudas. Estas son las condiciones.</p>
          </Reveal>

<Reveal delay={120}>
            <div className="policy-grid">
              <div className="policy">
                <div className="ico"><Icon name="shield" size={18} /></div>
                <h4>Reserva y confirmación</h4>
                <p>La seña de $15.000 ARS confirma tu cupo. El saldo de $18.000 ARS se abona el día del taller (efectivo o transferencia)</p>
              </div>

<div className="policy">
                <div className="ico"><Icon name="heart" size={18} /></div>
                <h4>Cancelación</h4>
                <p>Una vez realizada la reserva, no se realizan devoluciones de dinero.En caso de no poder asistir, la seña <b>sí es transferible</b> a otra persona que vos designes. Simplemente pasanos los datos por WhatsApp.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

{/* ===== FINAL CTA ===== */}
      <section className="final-cta">
        <div className="container">
          <Reveal>
            <div className="kicker">Cupos limitados </div>
            <h2 className="display">
              El movimiento<br />empieza con <em>una decisión.</em>
            </h2>
            <p>
              Si llegaste hasta acá, ya hay algo que sabe que algo tiene que moverse. Reservá tu lugar hoy. La seña confirma el cupo y te enviamos todos los datos por WhatsApp.
            </p>
            <div className="cta-row">
              <a className="btn btn-violet" href="#inversion">
                Reservar mi lugar <Icon name="arrow" size={16} />
              </a>
              <a className="btn" style={{ background: "transparent", color: "var(--lavender)", border: "1px solid rgba(240,232,247,.3)" }} href={WHATSAPP} target="_blank" rel="noopener noreferrer">
                <Icon name="whatsapp" size={18} /> Escribir por WhatsApp
              </a>
            </div>
          </Reveal>
        </div>
      </section>

<footer>
        <div className="container">
          <div>© 2026 · Taller · De la intención a la acción</div>
          
        </div>
      </footer>

<a className="fab" href={WHATSAPP} target="_blank" rel="noopener noreferrer" aria-label="Reservar por WhatsApp">
        <div className="fab-icon"><Icon name="whatsapp" size={18} /></div>
        <span className="txt">Reservar lugar</span>
      </a>

<TweaksPanel open={tweaksOpen} onClose={() => setTweaksOpen(false)} accent={accent} setAccent={setAccent} />
    </>);
};

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