/* Lovingo — hero / landing */

function Hero({ onStart, samplePuzzle, names }) {
  const gridWrapRef = React.useRef(null);
  const [previewCell, setPreviewCell] = React.useState(34);

  React.useLayoutEffect(() => {
    if (!samplePuzzle) return;
    function fit() {
      if (!gridWrapRef.current) return;
      const avail = gridWrapRef.current.clientWidth - 28;
      const gap = 5;
      const byW = (avail - (samplePuzzle.cols - 1) * gap) / samplePuzzle.cols;
      setPreviewCell(Math.max(14, Math.min(34, Math.floor(byW))));
    }
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(gridWrapRef.current);
    return () => ro.disconnect();
  }, [samplePuzzle]);

  return (
    <div className="wrap">
      <nav className="nav fade-in">
        <div className="brand">
          <span className="brand-mark">
            <Icon name="heart" size={18} stroke={2} style={{ color: "#fff" }} />
          </span>
          Lovelyzer
        </div>
        <div className="nav-links">
          <button className="btn btn-ghost btn-sm" onClick={onStart}>
            Bulmaca Oluştur
          </button>
        </div>
      </nav>

      <section className="hero">
        <div className="hero-copy">
          <div className="chip fade-up-1">
            <Icon name="sparkle" size={15} style={{ color: "var(--a1)" }} />
            Çiftlere özel · romantik kelime oyunu
          </div>

          <h1 className="hero-title fade-up-2">
            Aşk Hikayenizi<br />
            <span className="grad-text">Bir Oyuna</span> Dönüştürün
          </h1>

          <p className="hero-sub fade-up-3">
            Birlikte yaşadığınız anıları kişisel bir kelime bulmacasına dönüştürün.
            On soru cevaplayın — gerisini biz Scrabble tarzı bir bulmacaya çevirelim.
          </p>

          <div className="hero-cta fade-up-4">
            <button className="btn btn-primary btn-lg" onClick={onStart}>
              Bulmacamızı Oluştur
              <Icon name="arrow-right" size={19} />
            </button>
            <div className="hero-meta">
              <Icon name="doc" size={16} style={{ color: "var(--ink-soft)" }} />
              PDF olarak indir · yazıcıya hazır
            </div>
          </div>

          <div className="hero-steps fade-up-4">
            {[
              { n: "01", t: "10 soru" },
              { n: "02", t: "Otomatik bulmaca" },
              { n: "03", t: "PDF indir" },
            ].map((s) => (
              <div className="hero-step" key={s.n}>
                <span className="hero-step-n">{s.n}</span>
                <span>{s.t}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-visual fade-up-3">
          <div className="preview-card glass">
            <div className="preview-head">
              <div>
                <div className="preview-kicker">Bizim Bulmacamız</div>
                <div className="preview-names">{names.a} <span>&</span> {names.b}</div>
              </div>
              <span className="chip" style={{ padding: "6px 12px", fontSize: 12 }}>
                <Icon name="grid" size={13} /> 10 kelime
              </span>
            </div>
            <div className="preview-gridwrap" ref={gridWrapRef}>
              <PuzzleGrid puzzle={samplePuzzle} reveal={true} variant="app" cell={previewCell} gap={5} />
            </div>
            <div className="preview-foot">
              <span className="dot" /> Anılarınızdan otomatik üretildi
            </div>
          </div>
          <div className="hero-glow" />
        </div>
      </section>
    </div>
  );
}

window.Hero = Hero;