// landing.jsx — secciones de la landing

function Wordmark({ small }) {
  return (
    <div className={"wm" + (small ? " wm--sm" : "")}>
      <ScaleEmblem stroke="var(--accent)" accent="var(--accent)" strokeWidth={3}
                   style={{ width: small ? 22 : 26, height: small ? 30 : 34 }} />
      <span className="wm__text">
        <span className="wm__name">Excelencia Legal</span>
        <span className="wm__cr">CR</span>
      </span>
    </div>
  );
}

function Nav({ onStart, onLogin }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };
  return (
    <header className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="wrap nav__inner">
        <Wordmark />
        <nav className="nav__links">
          <a href="#como" onClick={go("como")}>Cómo funciona</a>
          <a href="#materias" onClick={go("materias")}>Materias</a>
          <a href="#simulacro" onClick={go("simulacro")}>Simulacro gratis</a>
          <a href="#precios" onClick={go("precios")}>Precios</a>
        </nav>
        <div className="nav__cta">
          <a href="#" className="nav__login" onClick={(e) => { e.preventDefault(); onLogin && onLogin(); }}>Ingresar</a>
          <a href="/register" className="btn btn--primary btn--sm">Solicitar acceso</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ copy, treatment, vars, dark, onStart, centered }) {
  return (
    <section className={"hero" + (centered ? " hero--centered" : "")}>
      <div className="wrap hero__inner">
        <div className="hero__text">
          <div className="hero__eyebrow"><span className="hero__eyebrowLine" />{copy.eyebrow}</div>
          <h1 className="hero__title">
            {copy.title.map((line, i) => <span key={i} className="hero__titleLine">{line}</span>)}
          </h1>
          <p className="hero__sub">{copy.sub}</p>
          <div className="hero__actions">
            <a href="#" className="btn btn--primary btn--lg" onClick={(e) => { e.preventDefault(); onStart && onStart(); }}>Comenzar simulacro gratis</a>
            <a href="#materias" className="btn btn--outline btn--lg"
               onClick={(e) => { e.preventDefault(); const el = document.getElementById("materias"); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" }); }}>
              Ver materias
            </a>
          </div>
          <div className="hero__assure mono">Sin tarjeta · Empieza en 30 segundos</div>
        </div>
        <div className="hero__art">
          <IustitiaHero treatment={treatment} vars={vars} dark={dark} />
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const stats = window.__QUESTION_STATS__ || {};
  const totalQ = stats.total || null;

  return (
    <section className="stats">
      <div className="wrap stats__inner">
        <div className="stat">
          <div className="stat__value">{totalQ ? totalQ.toLocaleString('es-CR') : '—'}</div>
          <div className="stat__label">Preguntas en el banco</div>
        </div>
        {STATS.map((s, i) => (
          <div key={i} className="stat">
            <div className="stat__value">{s.value}</div>
            <div className="stat__label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, sub, center }) {
  return (
    <div className={"shead" + (center ? " shead--c" : "")}>
      <div className="shead__eyebrow mono">{eyebrow}</div>
      <h2 className="shead__title">{title}</h2>
      {sub && <p className="shead__sub">{sub}</p>}
    </div>
  );
}

function HowItWorks() {
  return (
    <section id="como" className="section section--alt">
      <div className="wrap">
        <SectionHead eyebrow="CÓMO FUNCIONA"
          title="De aspirante a agremiado, en cuatro pasos"
          sub="Un método claro para que cada sesión de estudio te acerque al día de tu incorporación." center />
        <div className="steps">
          {STEPS.map((s, i) => (
            <div key={i} className="step">
              <div className="step__n">{s.n}</div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Subjects({ onStart }) {
  const stats = window.__QUESTION_STATS__ || {};
  const counts = stats.byMateria || {};
  const total = stats.total || null;

  return (
    <section id="materias" className="section">
      <div className="wrap">
        <SectionHead eyebrow="MATERIAS EVALUADAS"
          title={total ? `${total.toLocaleString('es-CR')} preguntas en 8 áreas` : "Las 8 áreas del examen, cubiertas"}
          sub="Practicá cada materia por separado o reúnelas en un simulacro integral." />

        {/* Offline note — same aesthetic as section eyebrow */}
        <div style={{display:'flex',alignItems:'center',gap:'12px',marginBottom:'32px'}}>
          <span style={{width:'28px',height:'1px',background:'var(--accent)',flexShrink:0}}></span>
          <span className="mono" style={{fontSize:'11px',letterSpacing:'.14em'}}>DISPONIBLE OFFLINE</span>
          <span style={{fontSize:'13px',color:'var(--text-soft)'}}>Descargá las preguntas una vez y practicá sin internet</span>
        </div>

        <div className="subjects">
          {SUBJECTS.map((s, i) => {
            const q = counts[s.name];
            return (
              <a key={i} className="subject" href="/register">
                <span className="subject__code mono">{s.code}</span>
                <span className="subject__name">{s.name}</span>
                <span className="subject__q" style={{fontSize:'13px',fontWeight:600,color:'var(--accent)'}}>
                  {q ? `${q.toLocaleString('es-CR')} pregs.` : '—'}
                </span>
                <span className="subject__arrow">→</span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function QuestionSources() {
  return (
    <section id="origen" className="section">
      <div className="wrap">
        <SectionHead eyebrow="ORIGEN DE LAS PREGUNTAS"
          title="Tres fuentes, un mismo estándar de rigor"
          sub="Cada reactivo que practicas proviene de una de estas tres vías —y todas pasan por el mismo control legal." />
        <div className="sources">
          {SOURCES.map((s, i) => (
            <div key={i} className="source">
              <div className="source__n mono">{s.n}</div>
              <div className="source__tag mono">{s.tag}</div>
              <h3 className="source__title">{s.title}</h3>
              <p className="source__body">{s.body}</p>
            </div>
          ))}
        </div>

        <div className="valid">
          <div className="valid__left">
            <div className="valid__eyebrow mono">{VALIDATION.eyebrow}</div>
            <h3 className="valid__title">{VALIDATION.title}</h3>
            <p className="valid__body">{VALIDATION.body}</p>
          </div>
          <ul className="valid__points">
            {VALIDATION.points.map((p, i) => (
              <li key={i}><span className="valid__check">✓</span>{p}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Features() {
  return (
    <section className="section section--alt">
      <div className="wrap">
        <SectionHead eyebrow="CARACTERÍSTICAS"
          title="Todo lo que necesitas para llegar listo"
          sub="Herramientas pensadas alrededor de un único objetivo: que apruebes." center />
        <div className="features">
          {FEATURES.map((f, i) => (
            <div key={i} className="feature">
              <div className="feature__tag mono">{f.tag}</div>
              <h3 className="feature__title">{f.title}</h3>
              <p className="feature__body">{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DemoSection({ onStart }) {
  return (
    <section id="simulacro" className="section section--alt">
      <div className="wrap">
        <SectionHead eyebrow="SIMULACRO GRATUITO"
          title="Viví el examen antes de darlo"
          sub="16 preguntas reales, 2 por cada materia evaluada. Cronómetro fiel, opciones mezcladas y al final la justificación con el artículo de ley que respalda cada respuesta. Sin registro, sin tarjeta." center />

        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "24px" }}>
          {/* Preview cards de las 8 materias */}
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(8,1fr)", gap: "10px",
            width: "100%", marginBottom: "8px",
          }} className="demo-materias">
            {["Const.", "Civil", "Penal", "Laboral", "Familia", "Comercial", "Admin.", "Deont."].map((m, i) => (
              <div key={i} style={{
                padding: "14px 10px", borderRadius: "8px",
                background: "var(--bg-elev)", border: "1px solid var(--line)",
                textAlign: "center", fontSize: "12px", fontWeight: 600, color: "var(--text-soft)",
              }}>
                <div style={{
                  width: "28px", height: "28px", borderRadius: "50%", margin: "0 auto 8px",
                  border: "1px solid var(--line-strong)", display: "flex",
                  alignItems: "center", justifyContent: "center",
                  fontFamily: "'IBM Plex Mono', monospace", fontSize: "10px", color: "var(--accent)",
                }}>{["I","II","III","IV","V","VI","VII","VIII"][i]}</div>
                {m}
                <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: "10px",
                  color: "var(--accent)", marginTop: "4px", letterSpacing: ".06em" }}>2 pregs.</div>
              </div>
            ))}
          </div>

          <button className="btn btn--primary btn--xl" onClick={onStart}
                  style={{ minWidth: "280px", fontSize: "17px" }}>
            Comenzar simulacro gratuito
          </button>
          <p style={{ fontSize: "13px", color: "var(--text-soft)", fontStyle: "italic" }}>
            Al finalizar verás la respuesta correcta, la justificación y el artículo de ley que la sustenta.
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .demo-materias { grid-template-columns: repeat(4,1fr) !important; }
        }
        @media (max-width: 480px) {
          .demo-materias { grid-template-columns: repeat(3,1fr) !important; }
        }
      `}</style>
    </section>
  );
}

function Testimonials() {
  return (
    <section id="testimonios" className="section">
      <div className="wrap">
        <SectionHead eyebrow="TESTIMONIOS"
          title="Quienes ya cruzaron el estrado" center />
        <div className="quotes">
          {TESTIMONIALS.map((t, i) => (
            <figure key={i} className="quote">
              <div className="quote__mark">“</div>
              <blockquote className="quote__text">{t.quote}</blockquote>
              <figcaption className="quote__who">
                <span className="quote__avatar" aria-hidden="true">{t.name.charAt(0)}</span>
                <span>
                  <span className="quote__name">{t.name}</span>
                  <span className="quote__role">{t.role}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ onStart }) {
  return (
    <section id="precios" className="section section--alt">
      <div className="wrap">
        <SectionHead eyebrow="PLAN"
          title="Un solo plan, todo incluido"
          sub="Precio en colones. Pago único por 6 meses de acceso completo a la plataforma." center />
        <div className="priceone">
          <div className="priceone__left">
            <div className="priceone__name mono">{PLAN.name}</div>
            <div className="priceone__price">
              <span className="priceone__amount">{PLAN.price}</span>
              <span className="priceone__period">{PLAN.period}</span>
            </div>
            <p className="priceone__desc">{PLAN.desc}</p>
            <a href="/register" className="btn btn--xl priceone__cta">{PLAN.cta}</a>
            <p className="priceone__note">{PLAN.note}</p>
          </div>
          <div className="priceone__right">
            <div className="priceone__incl mono">Incluye</div>
            <ul className="priceone__features">
              {PLAN.features.map((f, j) => (
                <li key={j}><span className="priceone__check">✓</span>{f}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onStart, dark }) {
  return (
    <section className="cta">
      <div className="wrap cta__inner">
        <div className="cta__emblem">
          <ScaleEmblem stroke="var(--accent)" accent="var(--accent)" strokeWidth={2}
                       style={{ width: 120, height: 168, opacity: 0.9 }} />
        </div>
        <h2 className="cta__title">El día de tu examen<br />ya lo habrás vivido aquí.</h2>
        <p className="cta__sub">Haz tu primer simulacro ahora. Sin costo, sin tarjeta, sin excusas.</p>
        <a href="#" className="btn btn--primary btn--xl" onClick={(e) => { e.preventDefault(); onStart && onStart(); }}>Comenzar mi simulacro gratis</a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer__inner footer__inner--simple">
        <div className="footer__brand">
          <Wordmark />
          <p className="footer__tag">Preparación independiente para el examen de incorporación al Colegio de Abogados y Abogadas de Costa Rica.</p>
        </div>
      </div>
      <div className="wrap footer__bottom">
        <span>© 2026 Excelencia Legal CR · San José, Costa Rica</span>
        <span className="mono">Plataforma de preparación · no afiliada oficialmente al Colegio</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Wordmark, Nav, Hero, Stats, SectionHead, HowItWorks,
  Subjects, DemoSection, QuestionSources, Features, Testimonials, Pricing, FinalCTA, Footer,
});