// Secciones de contenido de la página
const { useState: useSecState } = React;

function SectionHead({ num, kicker, title, lead }) {
  return (
    <header className="sec-head">
      <div className="kicker"><span className="kicker-num">{num}</span>{kicker}</div>
      <h2>{title}</h2>
      {lead ? <p className="lead">{lead}</p> : null}
    </header>
  );
}

function OrgCode() {
  const [copied, setCopied] = useSecState(false);
  const copy = async () => {
    try { await navigator.clipboard.writeText(window.GUIDE.orgCode); } catch (e) {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <div className="orgcode-card" data-comment-anchor="org-code">
      <div className="orgcode-label">El paso más importante · Código de organización</div>
      <div className="orgcode-row">
        <div className="orgcode">{window.GUIDE.orgCode.split("").map((c, i) => <span key={i}>{c}</span>)}</div>
        <button className="btn solid" onClick={copy}>{copied ? "¡Copiado!" : "Copiar código"}</button>
      </div>
      <p>Ingrésalo cuando la app lo pida. Vincula tus subidas a tu cuenta para que tus horas se registren y <strong>se paguen</strong> correctamente.</p>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="Inicio">
      <div className="kicker">Guía del contribuidor · Actualizada 9 jun 2026</div>
      <h1>Gana dinero grabando actividades cotidianas con tu teléfono</h1>
      <p className="lead">
        Grabarás videos cortos en primera persona —con el teléfono montado en la frente— haciendo tareas
        de todos los días. Ese material entrena modelos de IA que aprenden del movimiento humano natural.
        Todo el flujo vive en una sola app.
      </p>
      <div className="hero-actions">
        <a className="store-btn" href={window.GUIDE.links.ios} target="_blank" rel="noopener">
          <span className="store-kicker">Descargar para</span><strong>iPhone · App Store</strong>
        </a>
        <a className="store-btn" href={window.GUIDE.links.android} target="_blank" rel="noopener">
          <span className="store-kicker">Descargar para</span><strong>Android · Google Play</strong>
        </a>
      </div>
      <div className="tut-intro">
        <h3>Así se configura la app, paso a paso</h3>
        <AppTutorial />
      </div>
      <OrgCode />
    </section>
  );
}

function GettingStarted() {
  const steps = [
    { t: "Descarga la app", d: "Desde el App Store o Google Play con los enlaces de arriba." },
    { t: "Ingresa el código", d: "Escribe 3JQTT5F4 cuando la app lo pida, para que tus horas cuenten." },
    { t: "Revisa tu teléfono", d: "Debe ser un modelo compatible o el material no pasará. Compruébalo más abajo." },
  ];
  return (
    <section className="sec" data-screen-label="Primeros pasos">
      <SectionHead num="01" kicker="Tres pasos rápidos" title="Ponte en marcha" />
      <div className="steps-grid">
        {steps.map((s, i) => (
          <div className="card step-card" key={i}>
            <div className="step-n">{i + 1}</div>
            <strong>{s.t}</strong>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function StrapSection() {
  return (
    <section className="sec" data-screen-label="Cinta de cabeza">
      <SectionHead
        num="02"
        kicker="El factor número uno"
        title="La cinta de cabeza"
        lead="La cinta sostiene tu teléfono en la frente para que la cámara vea lo que tú ves. Un buen montaje es el factor que más decide si tu material se acepta."
      />
      <StrapWalkthrough />
    </section>
  );
}

function DosDonts() {
  return (
    <section className="sec" data-screen-label="Sí y No">
      <SectionHead num="03" kicker="Al grabar" title="Sí y No" />
      <div className="two-col">
        <div className="card list-card do">
          <h3><span className="mark ok-mark">✓</span> Hazlo así</h3>
          <ul>{window.GUIDE.dos.map((d, i) => <li key={i}>{d}</li>)}</ul>
        </div>
        <div className="card list-card dont">
          <h3><span className="mark bad-mark">✕</span> Evita esto</h3>
          <ul>{window.GUIDE.donts.map((d, i) => <li key={i}>{d}</li>)}</ul>
        </div>
      </div>
    </section>
  );
}

function TaskPicker() {
  return (
    <section className="sec" data-screen-label="Qué grabar">
      <SectionHead
        num="04"
        kicker="Elige tu tarea"
        title="Qué grabar — y qué no"
        lead="Graba tareas físicas cotidianas donde tus manos hacen trabajo real y útil. Cada grabación debe ser una tarea completa."
      />
      <div className="two-col">
        <div className="card list-card do">
          <h3><span className="mark ok-mark">✓</span> Graba esto</h3>
          <ul className="task-list">
            {window.GUIDE.record.map((t, i) => (
              <li key={i}><strong>{t.title}.</strong> {t.desc}</li>
            ))}
          </ul>
        </div>
        <div className="card list-card dont">
          <h3><span className="mark bad-mark">✕</span> No grabes esto</h3>
          <ul className="task-list">
            {window.GUIDE.noRecord.map((t, i) => (
              <li key={i}><strong>{t.title}.</strong> {t.desc}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function TargetSection() {
  return (
    <section className="sec" data-screen-label="Lo que queremos ver">
      <SectionHead num="05" kicker="El objetivo" title="Lo que queremos ver" />
      <div className="card target-card">
        <ul className="target-list">
          {window.GUIDE.target.map((t, i) => <li key={i}>{t}</li>)}
        </ul>
      </div>
    </section>
  );
}

function RejectedSection() {
  return (
    <section className="sec" data-screen-label="Qué se rechaza">
      <SectionHead
        num="06"
        kicker="Antes de cada sesión"
        title="Qué se rechaza"
        lead="El material con cualquiera de estos problemas se rechaza — y no se paga. Lee esta lista antes de cada sesión."
      />
      <div className="card reject-card">
        <ul className="reject-list">
          {window.GUIDE.rejected.map((r, i) => <li key={i}>{r}</li>)}
        </ul>
        <div className="reject-note">El material rechazado no se paga. Una revisión de dos minutos protege toda tu sesión.</div>
      </div>
    </section>
  );
}

function CheckerSection() {
  return (
    <section className="sec" data-screen-label="Verificador de teléfono">
      <SectionHead
        num="07"
        kicker="Herramienta"
        title="¿Tu teléfono es compatible?"
        lead="Solo ciertos modelos producen material aceptado. Compruébalo en diez segundos."
      />
      <PhoneChecker />
    </section>
  );
}

function ChecklistSection() {
  return (
    <section className="sec" data-screen-label="Lista previa">
      <SectionHead
        num="08"
        kicker="Herramienta"
        title="Lista previa a la sesión"
        lead="Marca cada punto antes de presionar grabar. Tu progreso se guarda."
      />
      <PreflightChecklist />
    </section>
  );
}

function QuizSection() {
  return (
    <section className="sec" data-screen-label="Mini quiz">
      <SectionHead
        num="09"
        kicker="Ponte a prueba"
        title="¿Se acepta o se rechaza?"
        lead="Seis escenarios reales. Decide como lo haría un revisor."
      />
      <MiniQuiz />
    </section>
  );
}

function FaqSection() {
  return (
    <section className="sec" data-screen-label="Preguntas frecuentes">
      <SectionHead num="10" kicker="Dudas comunes" title="Preguntas frecuentes" />
      <FaqList />
      <div className="faq-more">
        ¿No encuentras tu respuesta? <strong>Pregúntale a EGO</strong> en el panel de chat — y si hace falta, te conecta con una persona de tu Hub.
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="page-foot">
      <section className="endcap" data-screen-label="Cierre">
        <h2>¿Todo claro? Empieza hoy.</h2>
        <p>Completa el registro y empieza a grabar — recuerda el código de organización <code>3JQTT5F4</code>.</p>
        <a className="btn solid" href="https://form.typeform.com/to/vkeyUZXs" target="_blank" rel="noopener">Empezar ahora →</a>
      </section>
      <p>¿Dudas de configuración, app o pagos? Contacta a tu Hub — o pregúntale a EGO.</p>
      <p className="fine">TechResearchStudies © 2026. Todos los derechos reservados. · <a href="https://www.techresearchstudies.com/contributor-guide" target="_blank" rel="noopener">Guía original</a></p>
    </footer>
  );
}

Object.assign(window, {
  Hero, GettingStarted, StrapSection, DosDonts, TaskPicker,
  TargetSection, RejectedSection, CheckerSection, ChecklistSection,
  QuizSection, FaqSection, Footer, SectionHead,
});