/* ========================================================================
   CRISALAB · SECTIONS — content below hero
   ======================================================================== */

const { useEffect: useEff2, useRef: useRef2, useState: useState2 } = React;

// Hook: reveal on intersection
function useReveal(threshold = 0.15) {
  const ref = useRef2(null);
  const [revealed, setRevealed] = useState2(false);
  useEff2(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setRevealed(true);});
    }, { threshold, rootMargin: '0px 0px -80px 0px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, revealed];
}

// Split words for letter-by-letter reveal
function splitWords(html) {
  // simple word splitter that preserves <em> tags
  const tmp = document.createElement('div');
  tmp.innerHTML = html;
  const walk = (node) => {
    if (node.nodeType === 3) {
      const words = node.textContent.split(/(\s+)/);
      const frag = document.createDocumentFragment();
      words.forEach((w) => {
        if (/^\s+$/.test(w)) frag.appendChild(document.createTextNode(w));else
        if (w.length > 0) {
          const span = document.createElement('span');
          span.className = 'word';
          span.textContent = w;
          frag.appendChild(span);
        }
      });
      node.parentNode.replaceChild(frag, node);
    } else if (node.nodeType === 1) {
      Array.from(node.childNodes).forEach(walk);
    }
  };
  Array.from(tmp.childNodes).forEach(walk);
  return tmp.innerHTML;
}

// ============== WHAT WE DO ==============
function What() {
  const [ref, revealed] = useReveal();
  const leadHTML = splitWords("Diseñamos sistemas para empresas que sienten que el caos crece más rápido que sus herramientas. Te ayudamos a <em>pensar mejor</em> en lugar de añadir más.");

  return (
    <section className={"what" + (revealed ? " revealed" : "")} ref={ref}>
      <div className="container">
        <div className="what-grid">
          <aside className="what-aside">
            <div className="section-tag"><span className="num">01</span> Qué hacemos</div>
            <div className="what-aside-meta">
              <div className="row"><span className="key">Tipo</span><span className="val">Estudio · Lab</span></div>
              <div className="row"><span className="key">Sede</span><span className="val">Perú</span></div>
              <div className="row"><span className="key">Foco</span><span className="val">ESTRATEGIA</span></div>
              <div className="row"><span className="key">Año</span><span className="val">2026</span></div>
            </div>
          </aside>
          <div className="what-content">
            <p className="what-lead" dangerouslySetInnerHTML={{ __html: leadHTML }} />
            <div className="what-secondary">
              <p>No automatizamos lo que hay. <strong>Lo entendemos primero, lo ordenamos después</strong>, y luego construimos lo justo: una idea simple, ejecutada con criterio, que cambia la forma en que opera tu negocio.</p>
              <p>Trabajamos en el punto exacto donde la creatividad y la tecnología se encuentran — y donde la mayoría de empresas se equivoca. <em>Pensar mejor en lugar de añadir más.</em></p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============== SERVICES ==============
const SERVICES = [
{ num: "01", name: "Diagnóstico", tag: "Mapeamos cómo tu negocio realmente funciona — no como dicen los manuales.",
  desc: "Auditoría de procesos, identificación de cuellos de botella, mapa de oportunidades de automatización (y de las que no vale la pena automatizar). Entregable: un plan accionable, no un PowerPoint de 80 slides.",
  duration: "Pensar", deliverable: "Plan accionable" },
{ num: "02", name: "Sistemas", tag: "Construimos el mínimo viable de tecnología que resuelve un problema concreto.",
  desc: "Dashboards operativos, automatizaciones de reportería, integraciones entre herramientas que ya tienes, alertas inteligentes, plataformas internas. La decisión de qué construir viene del criterio, no del stack.",
  duration: "Construir", deliverable: "Sistema en producción" },
{ num: "03", name: "Estrategia", tag: "Cuando el problema no es la tecnología sino la claridad.",
  desc: "Presentaciones ejecutivas, planes de KPIs, benchmarking competitivo, proyectos de desarrollo comercial. Pensar el negocio antes que el sistema. Porque a veces, lo que falta no se construye — se decide.",
  duration: "Decidir", deliverable: "Plan estratégico" }];


function Services({ tweaks }) {
  const [ref, revealed] = useReveal();
  return (
    <section className={"services" + (revealed ? " revealed" : "")} ref={ref}>
      <div className="container">
        <div className="services-header">
          <div>
            <div className="section-tag"><span className="num">02</span> Servicios</div>
          </div>
          <div>
            <h2 className="services-title">Tres formas de trabajar <em>juntos.</em></h2>
            <p className="services-subtitle">El mismo ADN — creatividad aplicada antes que ingeniería de fuerza bruta — en tres puntos de entrada distintos.</p>
          </div>
        </div>

        {tweaks.servicesLayout === "table" ?
        <div className="services-table">
            {SERVICES.map((s) =>
          <div className="service-row" key={s.num}>
                <div className="service-row-num">— {s.num}</div>
                <div className="service-row-name">{s.name}</div>
                <div className="service-row-desc"><em>{s.tag}</em><br />{s.desc}</div>
                <div className="service-row-tag">{s.duration}<br />{s.deliverable}</div>
              </div>
          )}
          </div> :

        <div className="services-grid">
            {SERVICES.map((s) =>
          <article className="service-card" key={s.num}>
                <div className="service-num">
                  <span className="label">{s.num} · Servicio</span>
                  <span className="service-arrow">↗</span>
                </div>
                <h3 className="service-name">{s.name}</h3>
                <p className="service-tagline">{s.tag}</p>
                <p className="service-desc">{s.desc}</p>
                <div className="service-meta">
                  <span><span className="val">{s.duration}</span></span>
                  <span><span className="val">{s.deliverable}</span></span>
                </div>
              </article>
          )}
          </div>
        }
      </div>
    </section>);

}

// ============== EXPLAINED ==============
function Chapter({ num, sub, name, lead, prose, isFinal }) {
  const [ref, revealed] = useReveal();
  return (
    <article className={"chapter" + (isFinal ? " chapter-final" : "") + (revealed ? " revealed" : "")} ref={ref}>
      <header className="chapter-header">
        <div className="chapter-meta">Capítulo {num}<span className="sub">{sub}</span></div>
        <h3 className="chapter-name" dangerouslySetInnerHTML={{ __html: name }} />
      </header>
      {!isFinal &&
      <div className="chapter-body">
          <div className="chapter-lead" dangerouslySetInnerHTML={{ __html: lead }} />
          <div className="chapter-prose" dangerouslySetInnerHTML={{ __html: prose }} />
        </div>
      }
      {isFinal &&
      <>
          <p className="chapter-final-prose" dangerouslySetInnerHTML={{ __html: lead }} />
          <p className="chapter-final-tagline">— La forma simple del cambio.</p>
        </>
      }
    </article>);

}

function Explained() {
  return (
    <section className="explained">
      <div className="container">
        <div className="explained-intro">
          <div className="section-tag" style={{ justifyContent: "center" }}><span className="num">03</span> Crisalab</div>
          <h2 className="explained-title">Dos palabras<br />unidas. <em>Cada una pesa.</em></h2>
        </div>

        <Chapter
          num="01" sub="Crisálida"
          name="Crisálida"
          lead={`<span class="line">Es la fase donde algo se transforma <em>desde adentro.</em></span>
                 <span class="line">No la fase de "antes". No la fase de "después".</span>
                 <span class="line">La fase donde el cambio ocurre — quieta por fuera, intensa por dentro.</span>`}
          prose={`<p>Las empresas también tienen crisálidas. Son esos momentos donde <strong>lo que funcionaba ya no alcanza</strong>, pero <strong>lo nuevo todavía no se ve claro</strong>. La mayoría de proyectos fracasan ahí: por automatizar antes de entender, por contratar antes de pensar, por construir antes de saber qué construir.</p>
                  <p>Nosotros vivimos ahí.</p>`} />
        

        <Chapter
          num="02" sub="Lab"
          name="Lab"
          lead={`<span class="line">Es donde se experimenta <em>con criterio.</em></span>
                 <span class="line">Donde se prueba lo que vale la pena, y se descarta lo que no.</span>
                 <span class="line">Donde el método importa tanto como el resultado.</span>`}
          prose={`<p>No somos una agencia digital. No somos una fábrica de software. Somos un laboratorio: <strong>pequeño por elección, riguroso por convicción</strong>, enfocado en transformar la operación de pocas empresas a la vez — bien.</p>`} />
        

        <Chapter
          num="03" sub="La unión"
          name="Crisalab."
          isFinal={true}
          lead={`El espacio donde tu negocio se transforma.<br/>No con más herramientas. Con la idea correcta, en el momento correcto.`} />
        
      </div>
    </section>);

}

// ============== PRINCIPLES ==============
const PRINCIPLES = [
{ num: "01", title: "Entender <em>antes</em> de mover.", desc: "Diagnóstico riguroso. Mapeamos cómo tu negocio realmente opera, no cómo dicen los manuales. La mayor parte del trabajo ocurre antes de tocar una herramienta." },
{ num: "02", title: "Ordenar <em>antes</em> de automatizar.", desc: "El caos automatizado es caos más rápido. Primero estructura, después tecnología. Si automatizas un proceso roto, multiplicas su daño." },
{ num: "03", title: "Construir <em>lo justo.</em>", desc: "La solución más simple que resuelve el problema. Ni una línea de código de más. Ni una integración innecesaria. La elegancia es lo que sobra después de eliminar lo que falta." },
{ num: "04", title: "Pensar <em>mejor</em> en lugar de añadir <em>más.</em>", desc: "Más herramientas raramente es la respuesta. La respuesta casi siempre es claridad: del problema, del proceso, del objetivo. Cuando pensamos mejor, construimos menos." }];


function Principle({ p, i }) {
  const [ref, revealed] = useReveal(0.2);
  return (
    <div className={"principle" + (revealed ? " revealed" : "")} ref={ref} style={{ transitionDelay: revealed ? `${i * 0.1}s` : "0s" }}>
      <div className="principle-num">— {p.num}</div>
      <h3 className="principle-title" dangerouslySetInnerHTML={{ __html: p.title }} />
      <p className="principle-desc">{p.desc}</p>
    </div>);

}

function Principles() {
  return (
    <section className="principles">
      <div className="container">
        <div className="principles-header">
          <div className="principles-tag"><span className="num">04</span> Cómo pensamos</div>
          <div className="principles-title-block">
            <h2 className="principles-title">Cuatro principios.<br /><em>Aplicados sin excepción.</em></h2>
            <p className="principles-subtitle">No son frases motivacionales. Son las reglas que aplicamos a cada decisión, cada propuesta, cada línea de código.</p>
          </div>
        </div>
        <div className="principles-list">
          {PRINCIPLES.map((p, i) => <Principle key={p.num} p={p} i={i} />)}
        </div>
      </div>
    </section>);

}

// ============== WAITLIST ==============
function Waitlist() {
  const [submitted, setSubmitted] = useState2(false);
  const formRef = useRef2(null);

  const onSubmit = (e) => {
    e.preventDefault();
    const fd = new FormData(formRef.current);
    const data = Object.fromEntries(fd.entries());
    if (!data.name || !data.email) {alert("Por favor, completa nombre y email.");return;}
    try {
      const existing = JSON.parse(localStorage.getItem('crisalab_waitlist') || '[]');
      existing.push({ ...data, timestamp: new Date().toISOString() });
      localStorage.setItem('crisalab_waitlist', JSON.stringify(existing));
    } catch (err) {}
    setSubmitted(true);
  };

  return (
    <section className="waitlist" id="waitlist">
      <div className="container">
        <div className="waitlist-content">
          <svg className="waitlist-mark" viewBox="-50 -70 100 140"><use href="#capsule" /></svg>
          <h2 className="waitlist-title">Estamos en una <em>crisálida.</em></h2>
          <p className="waitlist-lead">
            Trabajamos con <strong>pocos clientes a la vez</strong> para hacerlo bien. Hoy no tomamos proyectos nuevos — la próxima ventana abre alrededor del <strong>Q3 2026</strong>. Déjanos tu contexto y te escribimos cuando llegue el momento.
          </p>

          {!submitted ?
          <form className="form" ref={formRef} onSubmit={onSubmit} noValidate>
              <div className="form-group">
                <label className="form-label" htmlFor="f-name">Nombre <span className="req">*</span></label>
                <input className="form-input" type="text" id="f-name" name="name" placeholder="Tu nombre completo" required />
              </div>
              <div className="form-group">
                <label className="form-label" htmlFor="f-email">Email <span className="req">*</span></label>
                <input className="form-input" type="email" id="f-email" name="email" placeholder="tu@empresa.com" required />
              </div>
              <div className="form-group">
                <label className="form-label" htmlFor="f-company">Empresa</label>
                <input className="form-input" type="text" id="f-company" name="company" placeholder="¿Dónde trabajas?" />
              </div>
              <div className="form-group">
                <label className="form-label" htmlFor="f-context">Cuéntanos del proyecto</label>
                <textarea className="form-textarea" id="f-context" name="context" placeholder="¿Qué proceso te quita el sueño? Cuanto más concreto, mejor." rows="4"></textarea>
              </div>
              <button type="submit" className="form-submit">Quiero estar en lista</button>
              <p className="form-note">// Cuando abramos la siguiente ventana, vas primero.</p>
            </form> :

          <div className="form-success visible">
              Recibimos tu mensaje.<br />Te escribimos cuando emerjamos.
            </div>
          }
        </div>
      </div>
    </section>);

}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <svg className="footer-mark" viewBox="-50 -70 100 140"><use href="#capsule" /></svg>
            <div>
              <div className="footer-name">Crisalab</div>
              <p className="footer-tagline">La forma simple del cambio.</p>
            </div>
          </div>
          <div className="footer-col">
            <h4>Servicios</h4>
            <ul>
              <li><a href="#">Diagnóstico</a></li>
              <li><a href="#">Sistemas</a></li>
              <li><a href="#">Estrategia</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contacto</h4>
            <ul>
              <li><a href="#waitlist">Lista de espera</a></li>
              <li>Perú</li>
              <li>hola@crisalab.com</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Crisalab. Todos los derechos reservados.</div>
          <div className="footer-ascii">// LA FORMA SIMPLE DEL CAMBIO</div>
        </div>
      </div>
    </footer>);

}

window.What = What;
window.Services = Services;
window.Explained = Explained;
window.Principles = Principles;
window.Waitlist = Waitlist;
window.Footer = Footer;