/* Clara v2 — Acts 02–10 with updated copy from review + new components plugged in */

const { useEffect: useEffectS2, useState: useStateS2, useRef: useRefS2 } = React;

/* Reveal block (adds .in when in viewport) — local v2 copy so sections.jsx is not required */
function Reveal({ as = 'div', delay = 0, className = '', children, anchorRef, ...rest }) {
  const ref = useReveal();
  const setRef = (el) => {
    ref.current = el;
    if (anchorRef) anchorRef.current = el;
  };
  const Comp = as;
  return (
    <Comp
      ref={setRef}
      className={`reveal ${delay ? 'd' + delay : ''} ${className}`}
      {...rest}
    >
      {children}
    </Comp>
  );
}

/* Bridge between sections — narrative variant uses its own IntersectionObserver
   to bypass the v2 reveal override (opacity:1!important on .reveal). */
function Bridge({ text, text2 = null, narrative = false, accent = false }) {
  const nbRef = useRefS2(null);

  useEffectS2(() => {
    if (!narrative) return;
    const el = nbRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.classList.add('nb-in');
        obs.disconnect();
      }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [narrative]);

  if (narrative) {
    return (
      <div
        ref={nbRef}
        className={`bridge narrative-bridge${accent ? ' nb-accent' : ''}`}
      >
        <p className="nb-text">{text}</p>
        {text2 && <p className="nb-text nb-text-2">{text2}</p>}
      </div>
    );
  }

  return (
    <Reveal as="div" className="bridge">
      <span className="t-caption label">{text}</span>
    </Reveal>
  );
}

/* ───────── Acto 02 — Caos ───────── */
function Act02ChaosV2() {
  const ref = useRefS2(null);
  const [local, setLocal] = useStateS2(0);
  useEffectS2(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh;
      const t = Math.min(1, Math.max(0, (vh - r.top) / total));
      setLocal(t);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const cards = [
    { top: '20px',  rot: -2.4, src: 'PLATAFORMA ECOMMERCE', val: '$15.1M', speed: 0.9 },
    { top: '170px', rot:  1.0, src: 'ERP',                  val: '$13.2M', speed: 1.2 },
    { top: '320px', rot:  3.0, src: 'HOJA DE CÁLCULO',      val: '$14.8M', speed: 0.7 },
  ];

  return (
    <section className="act" data-screen-label="02 Caos" ref={ref}>
      <div className="container chaos-grid">
        <div>
          <Reveal>
            <span className="t-caption eyebrow"><span className="dot" /> EL PROBLEMA</span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="t-display-lg" style={{ marginTop: 24 }}>
              Tus sistemas no se hablan entre ellos.
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="t-body-lg" style={{ marginTop: 24, color: 'var(--text-dark-secondary)' }}>
              Tu plataforma de ecommerce dice una cifra. Tu ERP otra. Tu plataforma de pauta una tercera. Tu equipo de finanzas mantiene una cuarta versión en una hoja de cálculo. Y al final del mes, decides con la fuente que más sentido te hace — no con la que es real.
            </p>
          </Reveal>
          <Reveal delay={3} className="chaos-q-final">
            <span className="rose-underline">¿Cuál es el número real?</span>
          </Reveal>
        </div>

        <div>
          <div className="chaos-cards">
            {cards.map((c, i) => (
              <Reveal
                key={i}
                delay={i + 1}
                className="chaos-card-wrap"
                style={{
                  top: c.top,
                  transform: `translateY(${(local - 0.5) * 60 * c.speed}px)`,
                  transition: 'transform 100ms linear, opacity 0.9s var(--decel)',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.classList.add('is-front');
                }}
                onMouseLeave={(e) => {
                  const wrap = e.currentTarget;
                  const card = wrap.querySelector('.chaos-card');
                  wrap.classList.remove('is-front');
                  if (!card) return;
                  card.classList.remove('wobbling');
                  void card.offsetWidth;
                  card.classList.add('wobbling');
                  card.addEventListener('animationend', () => card.classList.remove('wobbling'), { once: true });
                }}
              >
                <div className="chaos-card">
                  <div className="src">{c.src}</div>
                  <div className="q">Ventas totales Q1</div>
                  <div className="val">{c.val}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Acto 03 — Aparece Clara ───────── */
function Act03ClaraEntersV2() {
  const sectionRef = useRefS2(null);
  const [start, setStart] = useStateS2(false);
  const beatRef = useBeatAnchor('beat-3');

  useEffectS2(() => {
    const item = {
      get el() { return sectionRef.current; },
      once: true,
      onEnter: () => setStart(true)
    };
    ScrollObs.add(item);
    return () => ScrollObs.remove(item);
  }, []);

  const [typed, done] = useTyping('Aparece Clara', { speed: 70, start });

  return (
    <section className="act enter-clara" data-screen-label="03 Aparece Clara" ref={sectionRef}>
      <div className="container" style={{ width: '100%' }}>
        <Reveal>
          <span className="t-caption eyebrow"><span className="dot" /> HASTA QUE</span>
        </Reveal>
        <div style={{ marginTop: 32 }} ref={beatRef}>
          <h2 className="t-display-xl typed">
            {typed}
            {!done && <span className="caret" />}
            {done && <span className="live-dot" />}
          </h2>
        </div>
        <p className="sub t-body-lg italic-concept" style={{ opacity: done ? 1 : 0, transition: 'opacity 0.8s ease 0.4s' }}>
          Una sola plataforma. Una sola verdad. Todos tus datos hablándote en lenguaje natural sobre lo que importa.
        </p>
      </div>
    </section>
  );
}

/* ───────── Acto 04 — Cómo funciona — three steps ───────── */
function Act04HowV2() {
  const steps = [
    { n: '01', title: 'Conecta sin cambiar lo que ya tienes.',
      body: 'Tus plataformas de ecommerce, tu ERP, tu CRM, tus herramientas de pauta, tus hojas de cálculo. Clara se conecta a todo lo que ya usas en minutos. Sin migrar nada. Sin aprender herramientas nuevas.' },
    { n: '02', title: 'Reconcilia y establece una sola verdad.',
      body: 'Clara cruza las fuentes, detecta duplicados, ajusta devoluciones, normaliza períodos. Donde había tres cifras, queda una. Donde había dudas, queda evidencia.' },
    { n: '03', title: 'Te habla. Todos los días.',
      body: 'Pregúntale en lenguaje natural sobre cualquier cosa de tu negocio. Te responde citando las fuentes exactas, sin estimaciones. Solo tus datos.' },
  ];
  return (
    <section className="act how-v2" data-screen-label="04 Cómo funciona" id="cmo">
      <div className="container">
        <div className="how-header">
          <Reveal>
            <span className="t-caption eyebrow"><span className="dot" /> CÓMO FUNCIONA</span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="t-display-md" style={{ margin: '24px 0 0' }}>
              Clara en tres movimientos.
            </h2>
          </Reveal>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <Reveal key={s.n} className="how-step step" delay={i + 1}>
              <div className="num">{s.n}</div>
              <h3 className="step-title">{s.title}</h3>
              <p>{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── Acto 05 — Asistente ───────── */
function Act05AssistantV2() {
  return (
    <section className="act" data-screen-label="05 Asistente">
      <div className="container assistant-grid">
        <div className="assistant-text">
          <Reveal>
            <span className="t-caption eyebrow"><span className="dot" /> EL ASISTENTE</span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="t-display-md">Pregúntale lo que un comité te tomaría una semana en responder.</h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="lead t-body-lg italic-concept">Clara responde únicamente con tus datos. Cita cada fuente. No estima. No infiere. No alucina.</p>
          </Reveal>
          <Reveal delay={3}>
            <ul className="assistant-points">
              <li><span className="dot" /><div><b>Cero datos inventados.</b> <span>Si Clara no lo sabe, lo dice.</span></div></li>
              <li><span className="dot" /><div><b>Cero curva de aprendizaje.</b> <span>Pregúntale como le preguntarías a tu mejor analista.</span></div></li>
            </ul>
          </Reveal>
        </div>
        <Reveal delay={2}>
          <ChatMockupV2 />
        </Reveal>
      </div>
    </section>
  );
}

/* ───────── Acto 06 — Fuentes ───────── */
function Act06SourcesV2() {
  const sources = [
    { logo: 'SH', name: 'Shopify',              meta: '1.4M órdenes',    bar: 95 },
    { logo: 'MA', name: 'Meta Ads',             meta: '142 campañas',    bar: 78 },
    { logo: 'GA', name: 'Google Ads',           meta: '87 campañas',     bar: 64 },
    { logo: 'G4', name: 'Google Analytics 4',   meta: '8.2M eventos',    bar: 88 },
    { logo: 'SC', name: 'Search Console',       meta: 'sincronizado',    bar: 52 },
    { logo: 'HS', name: 'HubSpot',              meta: '12K contactos',   bar: 70 },
    { logo: 'HC', name: 'Hojas de cálculo',     meta: '24 documentos',   bar: 45 },
    { logo: 'ER', name: 'Tu ERP',               meta: '4.2M registros',  bar: 92 },
  ];
  return (
    <section className="act" data-screen-label="06 Fuentes">
      <div className="container">
        <div className="sources-header">
          <Reveal><span className="t-caption eyebrow"><span className="dot" /> LAS FUENTES</span></Reveal>
          <Reveal delay={1}><h2 className="t-display-md" style={{ margin: '24px 0 18px' }}>Todo lo que ya usas, en una sola conversación.</h2></Reveal>
          <Reveal delay={2}><p className="t-body italic-concept" style={{ color: 'var(--text-dark-secondary)' }}>Conexión nativa con las plataformas que mueven tu negocio. Sin migrar nada. Sin perder historial. Sin equipos de TI involucrados.</p></Reveal>
        </div>
        <div className="sources-grid-v2">
          {sources.map((s, i) => (
            <Reveal key={s.name} className="src-card-v2" delay={(i % 4) + 1} style={{ '--w': s.bar + '%' }}>
              <div className="logo">{s.logo}</div>
              <div className="name">{s.name}</div>
              <div className="row">
                <span className="meta">{s.meta}</span>
                <span className="live"><span className="pip" /> ACTIVO</span>
              </div>
              <div className="bar"><span style={{ width: s.bar + '%' }} /></div>
            </Reveal>
          ))}
        </div>
        <Reveal className="sources-footnote italic-concept" delay={5} style={{ color: 'var(--text-dark-tertiary)' }}>
          Y más conectores cada mes. ¿Te falta alguno? Lo construimos para ti.
        </Reveal>
      </div>
    </section>
  );
}

/* ───────── Acto 07 — Dashboard ───────── */
function Act07DashboardV2() {
  return (
    <section className="act" data-screen-label="07 Dashboard">
      <div className="container">
        <div className="dashboard-header">
          <Reveal><span className="t-caption eyebrow on-light"><span className="dot" /> EL DASHBOARD</span></Reveal>
          <Reveal delay={1}><h2 className="t-display-md" style={{ margin: '24px 0 18px', color: 'var(--text-light-primary)' }}>Una vista de tu negocio. Sin interpretaciones.</h2></Reveal>
          <Reveal delay={2}><p className="t-body italic-concept">KPIs en tiempo real. Desglose por categoría. Evolución mensual. Todo reconciliado desde las mismas fuentes que usa el asistente.</p></Reveal>
        </div>
        <Reveal delay={2}>
          <DashboardMockupV2 />
        </Reveal>
      </div>
    </section>
  );
}

/* ───────── Acto 08 — Agentes (orbit) ───────── */
function Act08AgentsV2() {
  return (
    <section className="act" data-screen-label="08 Agentes">
      <div className="container">
        <div className="agents-header">
          <Reveal><span className="t-caption eyebrow on-light"><span className="dot" /> EL EQUIPO</span></Reveal>
          <Reveal delay={1}><h2 className="t-display-md" style={{ margin: '24px 0 18px', color: 'var(--text-light-primary)' }}>No es una herramienta. Es un equipo.</h2></Reveal>
          <Reveal delay={2}><p className="t-body italic-concept">Cinco agentes especializados que activas cuando los necesitas. Cada uno con un dominio. Cada uno hablando con tus datos.</p></Reveal>
        </div>
        <Reveal delay={2}>
          <AgentsOrbit />
        </Reveal>
      </div>
    </section>
  );
}

/* ───────── Acto 09 — Casos de uso (spine) ───────── */
function Act09UseCasesV2() {
  return (
    <section className="act usecases-wrap" data-screen-label="09 Casos de uso" id="use">
      <div className="container">
        <div className="usecases-header">
          <Reveal><span className="t-caption eyebrow on-light"><span className="dot" /> CASOS DE USO</span></Reveal>
          <Reveal delay={1}><h2 className="t-display-md" style={{ margin: '24px 0 18px', color: 'var(--text-light-primary)' }}>Preguntas reales. Respuestas que cambian decisiones.</h2></Reveal>
          <Reveal delay={2}><p className="t-body italic-concept">Rutas de análisis preconfiguradas que cruzan tus fuentes para revelar oportunidades que un humano no vería sin meses de Excel.</p></Reveal>
        </div>
        <UseCasesSpine />
      </div>
    </section>
  );
}

/* ───────── Acto 10 — CTA ───────── */
function Act10CTAV2() {
  const [name, setName] = useStateS2('');
  const [email, setEmail] = useStateS2('');
  const [company, setCompany] = useStateS2('');
  const [submitted, setSubmitted] = useStateS2(false);
  const [submitting, setSubmitting] = useStateS2(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!name || !email || !company) return;
    setSubmitting(true);
    fetch("https://formsubmit.co/ajax/hugo@reclara.co", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify({
        Nombre: name,
        Email: email,
        Empresa: company,
        _cc: "sebastian@reclara.co",
        _subject: "Nuevo registro de demo - reCLARA"
      })
    })
    .then(res => res.json())
    .then(data => {
      setSubmitting(false);
      setSubmitted(true);
    })
    .catch(err => {
      console.error(err);
      setSubmitting(false);
      setSubmitted(true);
    });
  };

  const profiles = [
    { role: 'Dirección financiera',   promise: 'Margen real en 30 segundos.' },
    { role: 'Gerencia de marketing',  promise: 'Saber qué campaña pausar, no qué métrica revisar.' },
    { role: 'Gerencia general',       promise: 'Que los datos hablen solos. Sin intermediarios.' }
  ];

  return (
    <section className="act" data-screen-label="10 Decisión" id="cta">
      <div className="container cta-wrap">
        <Reveal><span className="t-caption eyebrow on-light"><span className="dot" /> AHORA LO TIENES CLARO</span></Reveal>
        <Reveal delay={1}>
          <h2 className="t-display-md" style={{ margin: '28px auto 24px', color: 'var(--text-light-primary)', textAlign: 'center', maxWidth: '820px' }}>
            Ya no quieres más reportes. Quieres saber qué hacer.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead t-body-lg italic-concept">
            Si lo que buscas es más información, reCLARA no es lo tuyo. Si lo que buscas es saber exactamente qué hacer con la información que ya tienes, reCLARA es exactamente lo tuyo.
          </p>
        </Reveal>

        <div className="profiles">
          {profiles.map((p, i) => (
            <Reveal key={p.role} className="profile" delay={i + 1}>
              <div className="dot" />
              <div className="role">{p.role}</div>
              <div className="promise">{p.promise}</div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={1}>
          <h3 className="t-display-md" style={{ color: 'var(--text-light-primary)', margin: '24px 0 8px' }}>Solicita tu demo.</h3>
        </Reveal>
        <Reveal delay={2}>
          <p className="t-body" style={{ color: 'var(--text-light-secondary)' }}>El onboarding empieza en 15 días.</p>
        </Reveal>

        <Reveal delay={3}>
          {submitted ? (
            <div className="success-message" style={{ textAlign: 'center', padding: '40px 20px', background: 'rgba(28, 28, 28, 0.03)', borderRadius: '4px', border: '1px solid var(--border)', width: '100%', maxWidth: '480px', margin: '0 auto' }}>
              <h4 style={{ color: 'var(--text-light-primary)', fontSize: '20px', marginBottom: '8px' }}>¡Solicitud Recibida!</h4>
              <p style={{ color: 'var(--text-light-secondary)', fontSize: '14px' }}>
                Nos pondremos en contacto con <strong>{email}</strong> en menos de 24 horas.
              </p>
            </div>
          ) : (
            <form className="cta-form" onSubmit={handleSubmit}>
              <div className="field">
                <label>Nombre</label>
                <input type="text" placeholder="Tu nombre" value={name} onChange={e => setName(e.target.value)} required />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" placeholder="tu@empresa.com" value={email} onChange={e => setEmail(e.target.value)} required />
              </div>
              <div className="field">
                <label>Empresa</label>
                <input type="text" placeholder="Nombre de tu empresa" value={company} onChange={e => setCompany(e.target.value)} required />
              </div>
              <div className="submit-row">
                <button type="submit" className="btn btn-primary" disabled={submitting}>
                  {submitting ? "Enviando..." : "Solicitar demo →"}
                </button>
              </div>
            </form>
          )}
        </Reveal>
      </div>

      <Reveal>
        <footer className="footer">
          <div className="brand">
            <div className="logo">
              <span className="ring" />
              <span>reCLARA</span>
              <span className="dot" />
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-light-secondary)', fontStyle: 'italic' }}>Clara te mueve.</div>
          </div>
          {
            /*
            <div className="col">
            <h5>Producto</h5>
            <a href="#">Asistente</a>
            <a href="#">Dashboard</a>
            <a href="#">Integraciones</a>
          </div>
          <div className="col">
            <h5>Empresa</h5>
            <a href="mailto:hugo@reclara.co">hugo@reclara.co</a>
          </div>
          //*/
          }
          
          <div className="endrow">
            <span>reCLARA · Data Intelligence</span>
            <span>© 2026</span>
          </div>
        </footer>
      </Reveal>
    </section>
  );
}

window.Act02ChaosV2 = Act02ChaosV2;
window.Act03ClaraEntersV2 = Act03ClaraEntersV2;
window.Act04HowV2 = Act04HowV2;
window.Act05AssistantV2 = Act05AssistantV2;
window.Act06SourcesV2 = Act06SourcesV2;
window.Act07DashboardV2 = Act07DashboardV2;
window.Act08AgentsV2 = Act08AgentsV2;
window.Act09UseCasesV2 = Act09UseCasesV2;
window.Act10CTAV2 = Act10CTAV2;