/* Home — 3 variaciones de Hero (A: portadas flotantes + parallax, B: portada
   protagonista, C: ilustración orgánica). La variante activa la decide un Tweak. */
(function () {
  const { useMemo } = React;
  const F = () => window.FUN_FEATURED;
  const byAsin = (a) => window.FUN_BOOKS.find(b => b.asin === a);

  const EYEBROW = "Editorial infantil independiente";
  const TITLE = "Libros que dan ganas de leer.";
  const SUB = "Somos una editorial española pequeña. Hacemos pocos libros y los cuidamos uno a uno — para leer juntos, antes de dormir o un ratito cada día.";

  function Ctas({ navigate }) {
    return (
      <div className="hero-ctas">
        <a href="#/libros" className="btn btn-lg" onClick={(e) => { e.preventDefault(); navigate("libros"); }}>
          Ver catálogo <Icon name="arrow-right" size={19} />
        </a>
        <a href="#/sobre" className="btn btn-ghost btn-lg" onClick={(e) => { e.preventDefault(); navigate("sobre"); }}>
          Conócenos
        </a>
      </div>
    );
  }

  function Trust() {
    return (
      <div className="hero-trust">
        <Stars value={5} size={17} />
        <span><strong>+1.000</strong> familias ya leen con nosotros</span>
      </div>
    );
  }

  /* ---------------------------------------------------- A: portadas flotantes */
  function HeroA({ navigate }) {
    const [ref, p] = useMouseParallax();
    const picks = [F()[0], F()[1], F()[4], byAsin("B0H2LHP9GC")];
    const depth = [22, 36, 16, 30];
    const layout = [
      { top: "4%",  left: "8%",  w: "44%", r: -7, cls: "float-a" },
      { top: "26%", left: "46%", w: "50%", r: 6,  cls: "float-b" },
      { top: "58%", left: "2%",  w: "40%", r: 5,  cls: "float-c" },
      { top: "62%", left: "54%", w: "38%", r: -5, cls: "float-a" },
    ];
    return (
      <section className="hero hero-a" ref={ref}>
        <div className="hero-bg" aria-hidden="true">
          <Deco.Blob color="var(--accent-tint)" style={{ position: "absolute", width: 620, top: -160, right: -120 }} />
          <Deco.Blob color="#E7F6EE" style={{ position: "absolute", width: 460, bottom: -180, left: -140 }} />
          <Deco.Sparkle color="var(--mostaza)" size={34} style={{ position: "absolute", top: "18%", left: "44%" }} className="float-b" />
        </div>
        <div className="wrap hero-grid">
          <div className="hero-copy reveal in">
            <span className="eyebrow"><span className="eyebrow-dot"></span>{EYEBROW}</span>
            <h1 className="hero-title">{TITLE}</h1>
            <p className="hero-sub">{SUB}</p>
            <Ctas navigate={navigate} />
            <Trust />
          </div>
          <div className="hero-stage" aria-hidden="true">
            {layout.map((l, i) => picks[i] && (
              <div key={i} className={"hero-float " + l.cls}
                style={{ top: l.top, left: l.left, width: l.w,
                  transform: `translate(${p.x * depth[i]}px, ${p.y * depth[i]}px) rotate(${l.r}deg)` }}>
                <div className="hero-float-inner"><Cover book={picks[i]} eager /></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* --------------------------------------------------- B: portada protagonista */
  function HeroB({ navigate }) {
    const star = byAsin("B0FK21ZMH7"); // 1 curiosidad para cada día
    const [ref, p] = useMouseParallax();
    return (
      <section className="hero hero-b" ref={ref}>
        <div className="hero-bg" aria-hidden="true">
          <Deco.Blob color="var(--accent-tint)" style={{ position: "absolute", width: 720, top: "-30%", left: "30%" }} />
        </div>
        <div className="wrap hero-b-grid">
          <div className="hero-copy reveal in">
            <span className="eyebrow"><span className="eyebrow-dot"></span>{EYEBROW}</span>
            <h1 className="hero-title">{TITLE}</h1>
            <p className="hero-sub">{SUB}</p>
            <Ctas navigate={navigate} />
            <Trust />
          </div>
          <div className="hero-b-cover">
            <div className="hero-b-stack" style={{ transform: `translate(${p.x * 12}px, ${p.y * 12}px)` }}>
              <span className="hero-b-badge mono">Lo más vendido</span>
              <div className="hero-b-card"><Cover book={star} eager /></div>
              <button className="hero-b-info" onClick={() => navigate("libro/" + star.slug)}>
                <span className="hero-b-info-title display">{star.title}</span>
                <span className="hero-b-info-meta"><Stars value={star.rating_value} size={15} /> {star.rating_count} reseñas</span>
              </button>
            </div>
            <Deco.Sparkle color="var(--mostaza)" size={40} style={{ position: "absolute", top: "-4%", right: "8%" }} className="float-b" />
            <Deco.Sparkle color="var(--menta)" size={26} style={{ position: "absolute", bottom: "10%", left: "-2%" }} className="float-c" />
          </div>
        </div>
      </section>
    );
  }

  /* ----------------------------------------------------- C: ilustración orgánica */
  function HeroC({ navigate }) {
    return (
      <section className="hero hero-c">
        <div className="hero-c-art" aria-hidden="true">
          <svg viewBox="0 0 1200 520" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
            <path fill="var(--accent-tint)" d="M-40,300 C160,180 360,420 600,320 C840,220 1040,400 1240,280 L1240,560 L-40,560 Z"/>
            <path fill="#E7F6EE" opacity="0.85" d="M-40,380 C200,300 420,470 640,400 C880,320 1060,470 1240,380 L1240,560 L-40,560 Z"/>
            <path fill="#FDF1DC" opacity="0.7" d="M-40,450 C220,400 460,520 700,470 C940,420 1080,520 1240,460 L1240,560 L-40,560 Z"/>
            <g className="float-a"><path fill="var(--menta)" d="M150,120 q40,-50 80,0 q50,40 0,80 q-40,50 -80,0 q-50,-40 0,-80Z"/></g>
            <g className="float-b"><circle cx="1000" cy="120" r="46" fill="var(--mostaza)"/></g>
            <g className="float-c"><path fill="var(--cielo)" d="M980,330 q30,-40 60,0 q40,30 0,60 q-30,40 -60,0 q-40,-30 0,-60Z"/></g>
            <path d="M260,300 q60,40 130,0" stroke="var(--accent)" strokeWidth="6" fill="none" strokeLinecap="round" className="float-b"/>
          </svg>
          <Deco.Sparkle color="var(--mostaza)" size={30} style={{ position: "absolute", top: "16%", left: "24%" }} className="float-b" />
          <Deco.Sparkle color="var(--accent)" size={22} style={{ position: "absolute", top: "30%", right: "26%" }} className="float-c" />
          <Deco.Sparkle color="var(--menta)" size={26} style={{ position: "absolute", bottom: "24%", left: "40%" }} className="float-a" />
        </div>
        <div className="wrap hero-c-copy reveal in">
          <span className="eyebrow eyebrow-center"><span className="eyebrow-dot"></span>{EYEBROW}</span>
          <h1 className="hero-title hero-title-c">{TITLE}</h1>
          <p className="hero-sub hero-sub-c">{SUB}</p>
          <Ctas navigate={navigate} />
          <Trust />
        </div>
      </section>
    );
  }

  window.Heroes = { A: HeroA, B: HeroB, C: HeroC };
})();