// screen-vton.jsx — Virtual try-on explainer + studio

function ScreenVTON({ go, onToast }) {
  const { PRODUCTS } = window.AURA_DATA;
  const looks = PRODUCTS.slice(0, 5);
  const [active, setActive] = React.useState(0);

  const steps = [
    { n: "1", t: "Fotoğrafınızı yükleyin", b: "Dik durduğunuz, net bir boy fotoğrafı yeterli. Yüzünüz ve vücut hatlarınız tanımlanır — fotoğrafınız işlemden sonra silinir." },
    { n: "2", t: "Parçayı seçin", b: "Koleksiyondan dilediğiniz ürünü seçin. Yapay zekâ, kumaş dökümünü ve bedeni gerçek oranlarla sizin üzerinizde modeller." },
    { n: "3", t: "Sonucu görün", b: "Saniyeler içinde kendi sanal denemenizi görün. Beğendiyseniz doğru bedenle sepete ekleyin, iade derdi olmadan." },
  ];

  return (
    <main>
      {/* hero */}
      <section className="vton-hero">
        <div className="wrap">
          <div className="breadcrumb" style={{ marginBottom: 22 }}>
            <button onClick={() => go("home")} style={{ color: "rgba(250,249,246,.6)" }}>Ana Sayfa</button>
            <span style={{ color: "rgba(250,249,246,.4)" }}>/</span>
            <span style={{ color: "var(--gold)" }}>Sanal Deneme</span>
          </div>
          <p className="eyebrow">Yapay Zekâ · VTON Teknolojisi</p>
          <h1>Kendi fotoğrafınızla, satın almadan deneyin.</h1>
          <p className="lead">FLUX tabanlı sanal deneme motorumuz, seçtiğiniz parçayı sizin fotoğrafınıza giydirir — beden, duruş ve kumaş dökümüyle. Doğru bedeni ilk seferde bulun.</p>
        </div>
      </section>

      {/* steps */}
      <section>
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 56 }}>
            <div><Reveal><p className="eyebrow">Nasıl Çalışır</p></Reveal><Reveal delay={60}><h2 style={{ marginTop: 12 }}>Üç adımda sanal deneme</h2></Reveal></div>
          </div>
          <div className="vton-steps">
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 80} tag="div" className="vstep">
                <div className="num">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* studio */}
      <section className="vton-studio">
        <div className="wrap studio-grid">
          <Reveal>
            <p className="eyebrow muted" style={{ color: "var(--accent)" }}>Deneme Stüdyosu</p>
            <h2 style={{ marginTop: 14, fontSize: "clamp(28px,3.6vw,46px)" }}>Fotoğrafınızı bırakın, parçayı seçin.</h2>
            <p style={{ color: "var(--muted)", marginTop: 18, fontSize: 16.5, lineHeight: 1.65 }}>
              Aşağıdaki alana kendi fotoğrafınızı sürükleyin. Ardından bir parça seçin; sonuç sağda belirir.
              Bu bir önizleme deneyimidir — sanal deneme sistemi yapay zekâ entegrasyonu ile çalışır.
            </p>
            <div className="studio-upload" style={{ marginTop: 24, maxWidth: 320 }}>
              <image-slot id="slot-studio-user" placeholder="↑ Fotoğrafınızı buraya bırakın"></image-slot>
            </div>
            <div className="studio-pick">
              {looks.map((p, i) => (
                <image-slot
                  key={p.id}
                  id={`slot-studio-look-${p.id}`}
                  className={active === i ? "active" : ""}
                  onClick={() => {
                    setActive(i);
                    onToast(`${p.name} deneniyor…`);
                    if (window.innerWidth <= 860) {
                      setTimeout(() => {
                        const resultEl = document.querySelector(".studio-result");
                        if (resultEl) {
                          resultEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
                        }
                      }, 150);
                    }
                  }}
                  placeholder={p.model.toUpperCase()}
                ></image-slot>
              ))}
            </div>
            <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 16 }}>Seçili parça: <b style={{ color: "var(--ink)" }}>{looks[active].name}</b> · {fmt(looks[active].price)}</p>
          </Reveal>

          <Reveal delay={120}>
            <div className="studio-result">
              <span className="vton-pair-tag" style={{ position: "absolute", top: 14, left: 14, zIndex: 7, background: "var(--gold)", color: "#1a1407", fontSize: 11, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", padding: "6px 12px" }}>AI Sonucu</span>
              <div className="scan"></div>
              <image-slot id={`slot-studio-result-${active}`} placeholder="Sanal deneme sonucu"></image-slot>
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
              <button className="btn" style={{ flex: 1, justifyContent: "center" }} onClick={() => go("product", looks[active].id)}>Bu bedenle sepete ekle</button>
              <button className="btn ghost sm" onClick={() => onToast("Sonuç paylaşıldı")}>Paylaş</button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* trust */}
      <section>
        <div className="wrap">
          <div className="values">
            <Reveal tag="div" className="value"><div className="vline"></div><div className="vn">Gizlilik</div><h3>Fotoğrafınız sizde kalır</h3><p>Yüklediğiniz görsel yalnızca deneme için işlenir ve işlem sonrası silinir. KVKK uyumlu.</p></Reveal>
            <Reveal tag="div" className="value" delay={80}><div className="vline"></div><div className="vn">Doğruluk</div><h3>Gerçek oranlar</h3><p>Tutarlı manken modelleri ve kalibre edilmiş beden tablosu ile ekranda gördüğünüz, kapınıza gelendir.</p></Reveal>
            <Reveal tag="div" className="value" delay={160}><div className="vline"></div><div className="vn">İade</div><h3>Daha az iade</h3><p>Doğru bedeni ilk seferde seçerek hem zaman kazanın hem de iade kaynaklı karbon ayak izini azaltın.</p></Reveal>
          </div>
        </div>
      </section>

      <Newsletter onToast={onToast} />
    </main>
  );
}

window.ScreenVTON = ScreenVTON;