/* Home — secciones bajo el hero + composición. */
(function () {
  const { useRef, useState, useEffect } = React;

  const VALUES = [
    { icon: "users", color: "var(--cielo)", title: "Para cada edad", text: "De 0 a 3, de 3 a 6 y para mayores de 6. Cada libro dice claramente para quién es." },
    { icon: "sparkles", color: "var(--mostaza)", title: "Aprender jugando", text: "Cuentos, cuadernos y retos pensados para que aprender no se sienta como deberes." },
    { icon: "heart", color: "var(--accent)", title: "Hechos con cariño", text: "Editamos pocos títulos al año y revisamos cada página, una a una, antes de publicarla." },
  ];

  const STEPS = [
    { n: "01", title: "Escuchamos", text: "Hablamos con familias y profes para saber qué echan de menos en la estantería." },
    { n: "02", title: "Damos forma", text: "Definimos la edad, el tono y qué queremos que se lleve el niño de cada libro." },
    { n: "03", title: "Cuidamos cada página", text: "Texto, dibujos y maquetación se revisan hasta que todo encaja y se lee fácil." },
    { n: "04", title: "Lo probamos", text: "Lo leemos con niños de verdad antes de darlo por bueno. Si no funciona, se cambia." },
  ];

  const TESTIMONIALS = [
    { name: "Marta G.", role: "Madre de dos peques", color: "var(--accent)", text: "Los cuentos cortos nos han salvado las noches. Cortos de verdad, y con un mensaje bonito sin sermones." },
    { name: "Javier R.", role: "Maestro de Primaria", color: "var(--cielo)", text: "Uso el de adivinanzas en clase para los cinco minutos finales. Los niños se pelean por leer la siguiente." },
    { name: "Lucía M.", role: "Bibliotecaria", color: "var(--menta)", text: "Se nota que detrás hay criterio. Pocos títulos, pero todos los que pido funcionan con el público infantil." },
  ];

  function ValueCard({ v, i }) {
    return (
      <div className="value-card reveal card-hover" style={{ "--reveal-delay": `${i * 90}ms` }}>
        <span className="value-icon" style={{ background: v.color }}><Icon name={v.icon} size={28} style={{ color: "#fff" }} /></span>
        <h3 className="value-title">{v.title}</h3>
        <p className="value-text">{v.text}</p>
      </div>
    );
  }

  /* --------------------------------------------------------- Carrusel destacados */
  function Carousel({ navigate, count }) {
    const trackRef = useRef(null);
    const books = window.FUN_FEATURED.slice(0, count);
    const drag = useRef({ on: false, x: 0, sl: 0, moved: 0 });

    const scrollBy = (dir) => {
      const t = trackRef.current; if (!t) return;
      t.scrollBy({ left: dir * (t.clientWidth * 0.8), behavior: "smooth" });
    };
    const onDown = (e) => { const t = trackRef.current; drag.current = { on: true, x: e.pageX, sl: t.scrollLeft, moved: 0 }; t.classList.add("grabbing"); };
    const onMove = (e) => { if (!drag.current.on) return; const t = trackRef.current; const dx = e.pageX - drag.current.x; drag.current.moved = Math.abs(dx); t.scrollLeft = drag.current.sl - dx; };
    const onUp = () => { const t = trackRef.current; if (t) t.classList.remove("grabbing"); drag.current.on = false; };

    return (
      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <span className="kicker">El catálogo</span>
              <h2 className="section-title">Algunos de nuestros libros</h2>
            </div>
            <div className="carousel-nav">
              <button className="round-btn" aria-label="Anterior" onClick={() => scrollBy(-1)}><Icon name="arrow-left" size={20} /></button>
              <button className="round-btn" aria-label="Siguiente" onClick={() => scrollBy(1)}><Icon name="arrow-right" size={20} /></button>
            </div>
          </div>
        </div>
        <div className="carousel-track no-scrollbar reveal" ref={trackRef}
          onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}>
          {books.map((b, i) => (
            <div className="carousel-item" key={b.asin}>
              <BookCard book={b} eager={i < 3}
                onOpen={() => { if (drag.current.moved < 6) navigate("libro/" + b.slug); }} />
            </div>
          ))}
          <div className="carousel-end">
            <a href="#/libros" className="carousel-end-link" onClick={(e) => { e.preventDefault(); navigate("libros"); }}>
              <span className="round-btn round-btn-fill"><Icon name="arrow-right" size={22} /></span>
              Ver todos
            </a>
          </div>
        </div>
      </section>
    );
  }

  /* ----------------------------------------------------------- Cómo elegimos */
  function HowWeWork() {
    return (
      <section className="section section-tint">
        <div className="wrap">
          <div className="section-head center reveal">
            <span className="kicker">Nuestro criterio</span>
            <h2 className="section-title">Cómo hacemos cada libro</h2>
            <p className="section-lead">No publicamos por publicar. Cada título pasa por las mismas cuatro etapas antes de llegar a tus manos.</p>
          </div>
          <div className="steps">
            <svg className="steps-line" viewBox="0 0 1000 20" preserveAspectRatio="none" aria-hidden="true">
              <path d="M30,10 H970" stroke="var(--beige)" strokeWidth="2.5" strokeDasharray="2 9" strokeLinecap="round"/>
            </svg>
            {STEPS.map((s, i) => (
              <div className="step reveal" key={s.n} style={{ "--reveal-delay": `${i * 90}ms` }}>
                <span className="step-num display">{s.n}</span>
                <h3 className="step-title">{s.title}</h3>
                <p className="step-text">{s.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ------------------------------------------------------------- Testimonios */
  function Testimonials() {
    return (
      <section className="section">
        <div className="wrap">
          <div className="section-head center reveal">
            <span className="kicker">Nos leen y nos lo cuentan</span>
            <h2 className="section-title">Familias, profes y bibliotecas</h2>
          </div>
          <div className="testi-grid">
            {TESTIMONIALS.map((t, i) => (
              <figure className="testi-card reveal card-hover" key={t.name} style={{ "--reveal-delay": `${i * 90}ms` }}>
                <Stars value={5} size={17} />
                <blockquote className="testi-text">«{t.text}»</blockquote>
                <figcaption className="testi-who">
                  <span className="testi-avatar" style={{ background: t.color }}>{t.name[0]}</span>
                  <span><span className="testi-name">{t.name}</span><span className="testi-role">{t.role}</span></span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* --------------------------------------------------------- Aulas y bibliotecas */
  function ForSchools({ navigate }) {
    return (
      <section className="section">
        <div className="wrap">
          <div className="schools reveal">
            <div className="schools-deco" aria-hidden="true">
              <Deco.Blob color="rgba(255,255,255,.18)" style={{ position: "absolute", width: 360, top: -80, right: -60 }} />
              <Icon name="school" size={120} style={{ color: "rgba(255,255,255,.9)" }} />
            </div>
            <div className="schools-body">
              <span className="kicker kicker-light">También para aulas y bibliotecas</span>
              <h2 className="schools-title">¿Eres profe o trabajas en una biblioteca?</h2>
              <p className="schools-text">Si estás montando la biblioteca de aula o el rincón de lectura, te echamos una mano eligiendo los títulos que mejor encajan con tus peques. Cuéntanos las edades y qué buscáis y te recomendamos sin compromiso. Después, los libros se compran directamente en Amazon.</p>
              <a href="#/contacto" className="btn btn-soft btn-lg" onClick={(e) => { e.preventDefault(); navigate("contacto"); }}>
                Pídenos recomendaciones <Icon name="arrow-right" size={18} />
              </a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ----------------------------------------------------------------- CTA final */
  function FinalCta({ navigate }) {
    return (
      <section className="final-cta">
        <div className="wrap final-cta-inner reveal">
          <Deco.Sparkle color="rgba(255,255,255,.85)" size={32} style={{ position: "absolute", top: "18%", left: "12%" }} className="float-b" />
          <Deco.Sparkle color="rgba(255,255,255,.6)" size={22} style={{ position: "absolute", bottom: "22%", right: "14%" }} className="float-c" />
          <h2 className="final-cta-title">Encuentra el libro que les hará querer leer.</h2>
          <p className="final-cta-sub">Diez libros, elegidos con calma. Échales un vistazo.</p>
          <a href="#/libros" className="btn btn-soft btn-lg" onClick={(e) => { e.preventDefault(); navigate("libros"); }}>
            Ver catálogo completo <Icon name="arrow-right" size={19} />
          </a>
        </div>
      </section>
    );
  }

  function Home({ navigate, tweaks }) {
    useRevealAll([tweaks.heroVariant]);
    const Hero = window.Heroes[tweaks.heroVariant] || window.Heroes.A;
    return (
      <main>
        <Hero navigate={navigate} />
        <section className="section section-values">
          <div className="wrap values-grid">
            {VALUES.map((v, i) => <ValueCard key={v.title} v={v} i={i} />)}
          </div>
        </section>
        <Carousel navigate={navigate} count={tweaks.featuredCount} />
        <HowWeWork />
        <Testimonials />
        <ForSchools navigate={navigate} />
        <FinalCta navigate={navigate} />
      </main>
    );
  }

  window.Home = Home;
})();