// Home page — hero shrink-on-scroll, polaroid stack, CTAs, footer.

const POLAROIDS = [
  { src: "assets/polaroid/01.jpg", tag: "Red glow",     caption: "french rosso · stelle dipinte" },
  { src: "assets/polaroid/02.jpg", tag: "Midnight",     caption: "viola galassia · cat eye" },
  { src: "assets/polaroid/03.jpg", tag: "Wild",         caption: "french leopard · fiocco argento" },
  { src: "assets/polaroid/04.jpg", tag: "Sunset",       caption: "giallo-rosa · fiori blu" },
  { src: "assets/polaroid/05.jpg", tag: "Burgundy",     caption: "bordeaux · cuori accent" },
  { src: "assets/polaroid/06.jpg", tag: "Berry",        caption: "fucsia muted · curve accent" },
  { src: "assets/polaroid/07.jpg", tag: "Ribbon",       caption: "rosa · fiocco 3D & perline" },
];

function Hero() {
  // Scroll-driven shrink: clamp progress 0→1 over the first ~80vh of scroll.
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    let ticking = false;
    const update = () => {
      // Shrink completes faster on mobile (where vh is small and scroll is precious),
      // slower on desktop (where there's room to breathe).
      const factor = window.innerWidth < 760 ? 0.55 : 0.85;
      const max = window.innerHeight * factor;
      const next = Math.min(1, Math.max(0, window.scrollY / max));
      setP(next);
      ticking = false;
    };
    const onScroll = () => {
      if (!ticking) {
        // rAF coalesces multiple scroll events into one paint cycle — smoother on mobile.
        window.requestAnimationFrame(update);
        ticking = true;
      }
    };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", update);
    };
  }, []);

  // Image scales 1 → ~0.62, slightly recedes; corner radius grows.
  const imgScale = 1 - p * 0.38;
  const imgRadius = 0 + p * 56;
  const inset = p * 4; // %
  // Title fades and lifts.
  const titleOp = Math.max(0, 1 - p * 1.6);
  const titleY = -p * 60;

  return (
    <section className="hero" style={{ "--p": p }}>
      <div
        className="hero-photo"
        style={{
          transform: `scale(${imgScale})`,
          borderRadius: `${imgRadius}px`,
          inset: `${inset}% ${inset}% ${inset}% ${inset}%`,
        }}
      >
        <div className="hero-photo-inner placeholder-img"></div>
        <div className="hero-grain"></div>
        <div className="hero-vignette"></div>
      </div>

      <div className="hero-text" style={{ opacity: titleOp, transform: `translate(-50%, calc(-50% + ${titleY}px))` }}>
        <div className="eyebrow" style={{ background: "rgba(255,255,255,.35)" }}>nail artist · vignola</div>
        <h1>
          Fatti notare<br/>
          partendo dalle <em className="script">mani</em>
        </h1>
        <p className="hero-sub">Ewa Nails Beauty Lab — l'arte sulle unghie, con cura.</p>
        <div className="hero-ctas">
          <a href="#about" className="btn btn-glass">Scopri</a>
          <a href="contatti.html#prenota" className="btn btn-primary">Prenota</a>
        </div>
      </div>

      <div className="hero-scrollhint" style={{ opacity: titleOp }}>
        <span>scorri</span>
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none">
          <rect x="1" y="1" width="12" height="20" rx="6" stroke="currentColor" strokeWidth="1.2" opacity=".6"/>
          <circle cx="7" cy="7" r="2" fill="currentColor"/>
        </svg>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section" id="about">
      <div className="shell about-grid">
        <div className="reveal">
          <div className="eyebrow">la storia</div>
          <h2>Ogni mano è una <em className="script">tela</em>.</h2>
          <p className="about-lead">
            Da Ewa Nails Beauty Lab le unghie diventano un piccolo gesto di cura quotidiana.
            Lavoro con prodotti professionali, una luce buona e tutto il tempo che ti serve.
            Niente fretta — solo dettagli fatti bene.
          </p>
          <p className="muted">
            Mi piacciono le tonalità delicate, i finish lucidi, i decori minimali e i piccoli
            dettagli che fanno la differenza. Se hai un'idea, la portiamo insieme. Se non ce l'hai,
            la troviamo strada facendo.
          </p>
        </div>
        <div className="about-card glass liquid reveal">
          <div className="about-photo">
            <img src="assets/ewa.jpeg" alt="Ewa al lavoro nel suo Beauty Lab" loading="lazy" />
          </div>
          <div className="about-meta">
            <div><b>5+</b><span>anni di esperienza</span></div>
            <div><b>300+</b><span>clienti soddisfatte</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Polaroid stack: each polaroid pins as it enters then the next slides up over it.
// Implemented with sticky positioning + offset rotation so edges peek through.
function PolaroidStack() {
  return (
    <section className="section polaroid-section">
      <div className="shell" style={{ marginBottom: 40 }}>
        <div className="reveal" style={{ textAlign: "center" }}>
          <div className="eyebrow">polaroid</div>
          <h2>Piccoli ricordi,<br/><em className="script">grandi unghie</em>.</h2>
        </div>
      </div>
      <div className="polaroid-track">
        {POLAROIDS.map((p, i) => {
          // Alternate sides + vary so each polaroid leaves edges of the one below visible.
          const tilt = (i % 2 === 0 ? -1 : 1) * (7 + ((i * 7) % 6));
          const offsetX = (i % 2 === 0 ? -1 : 1) * (14 + ((i * 5) % 12));
          return (
            <div
              key={i}
              className="polaroid-slot"
              style={{
                "--tilt": `${tilt}deg`,
                "--offx": `${offsetX}%`,
                "--z": 10 + i,
              }}
            >
              <div className="polaroid">
                <div className="polaroid-photo">
                  <img src={p.src} alt={p.caption} loading="lazy" />
                </div>
                <div className="polaroid-caption">
                  <span className="script">{p.tag}</span>
                  <small>{p.caption}</small>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function CtaBlock() {
  return (
    <section className="section">
      <div className="shell">
        <div className="cta-block glass liquid reveal">
          <div>
            <div className="eyebrow">il lab</div>
            <h2>Vieni a trovarmi.</h2>
            <p className="muted" style={{ maxWidth: 520 }}>
              Tre tasti, un solo obiettivo: prenderti cura di te. Sfoglia i lavori, dai un'occhiata
              al listino o prenota direttamente — ti rispondo in giornata.
            </p>
          </div>
          <div className="cta-actions">
            <a href="galleria.html" className="btn btn-glass">Vedi la galleria →</a>
            <a href="prezzi.html" className="btn btn-glass">Listino prezzi →</a>
            <a href="contatti.html#prenota" className="btn btn-primary">Prenota appuntamento</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { who: "Giulia", text: "Ewa è una maga. Mi ha fatto la french più precisa che abbia mai avuto." },
    { who: "Sara",   text: "Posto curato, musica perfetta, mani da copertina. Torno sempre." },
    { who: "Marta",  text: "Mi ha capita al volo: nude, lucide, eleganti. Non mi staccavo dallo specchio." },
  ];
  return (
    <section className="section">
      <div className="shell">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 40 }}>
          <div className="eyebrow">parole</div>
          <h2>Lo dicono <em className="script">loro</em>.</h2>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <div key={i} className="testi reveal glass">
              <div className="stars">★★★★★</div>
              <p>"{t.text}"</p>
              <small>— {t.who}</small>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeApp() {
  useReveal();
  return (
    <React.Fragment>
      <Blobs />
      <Nav active="Home" />
      <Hero />
      <About />
      <PolaroidStack />
      <CtaBlock />
      <Testimonials />
      <Footer />
      <EwaTweaks />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomeApp />);