// screen-home.jsx — Hero, strip, intro, production videos and newsletter for upcoming launch

function ScreenHome({ go, onQuick, onFav, onToast }) {
  const { VALUES } = window.AURA_DATA;

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-media">
          <video
            autoPlay
            muted
            loop
            playsInline
            preload="auto"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 }}
          >
            <source src="uploads/BilgeAura.webm" type="video/webm" />
            <source src="images/hero-bg.webm" type="video/webm" />
          </video>
        </div>
        <div className="hero-content">
          <div className="hero-top reveal in">
            <div className="hero-tag" style={{ marginBottom: 12 }}>
              <span className="dot"></span> ÇOK YAKINDA ✦ TÜRKİYE GENELİNDE ONLINE ATÖLYE SEVKİYATI
            </div>
            <h1>Seçilmiş parçalar, <em>zamansız</em> siluetler.</h1>
          </div>
          <div className="hero-bottom">
            <div className="reveal in" style={{ maxWidth: 460 }}>
              <p className="lead">Doğal kumaşlar, premium üretim standartları ve titiz terzilik işçiliği. Çok yakında tüm Türkiye genelinde adrese teslim hizmetinizde.</p>
            </div>
            <div className="hero-cta">
              <button className="btn light" onClick={() => go("vton")}>Sanal Deneme ✦ <I.spark /></button>
            </div>
          </div>
        </div>
      </section>

      {/* STRIP (MARQUEE) */}
      <div className="strip" aria-hidden="true" style={{ background: "var(--accent)", color: "#fff" }}>
        <div className="strip-track" style={{ animationDuration: "18s" }}>
          <span>ÇOK YAKINDA SİZLERLE! ✦</span>
          <span>TÜM TÜRKİYE'YE HIZLI SEVKİYAT ✦</span>
          <span>DOĞAL İPLİKLER &amp; KUSURSUZ ZANAAT ✦</span>
          <span>SINIRLARI AŞAN PREMIUM ATÖLYE KALİTESİ ✦</span>
          <span>YENİ DÖNEM YAPAY ZEKA SANAL DENEME ODASI ✦</span>
          <span>ESTETİK DERİNLİK, PREMIUM DİKİŞ ✦</span>

          <span>ÇOK YAKINDA SİZLERLE! ✦</span>
          <span>TÜM TÜRKİYE'YE HIZLI SEVKİYAT ✦</span>
          <span>DOĞAL İPLİKLER &amp; KUSURSUZ ZANAAT ✦</span>
          <span>SINIRLARI AŞAN PREMIUM ATÖLYE KALİTESİ ✦</span>
          <span>YENİ DÖNEM YAPAY ZEKA SANAL DENEME ODASI ✦</span>
          <span>ESTETİK DERİNLİK, PREMIUM DİKİŞ ✦</span>
        </div>
      </div>

      {/* INTRO */}
      <section className="intro" style={{ padding: "80px 0" }}>
        <div className="wrap intro-grid">
          <Reveal>
            <p className="eyebrow">BilgeAura Atölyesi</p>
            <h2 style={{ marginTop: 16 }}>Zamansız parçalar, titiz atölye işçiliği.</h2>
            <p className="lead" style={{ marginTop: 22 }}>
              Her koleksiyonumuzu en yüksek kaliteli doğal kumaşlardan üretiyoruz. İpek, kaşmir ve keten; 
              form ve işlev arasındaki dengeyi koruyan estetik siluetlerle buluşuyor.
            </p>
            <div className="intro-stats" style={{ marginTop: 30 }}>
              <div className="stat"><div className="n">100%</div><div className="l">Doğal Elyaf</div></div>
              <div className="stat"><div className="n">Tüm TR</div><div className="l">Hızlı Kargo</div></div>
              <div className="stat"><div className="n">4.9</div><div className="l">Kullanıcı Memnuniyeti</div></div>
            </div>
            <button className="link-underline" style={{ marginTop: 34 }} onClick={() => go("story")}>Marka Hikâyemizi Keşfedin <I.arrow /></button>
          </Reveal>
          <Reveal delay={120}>
            <div className="intro-media">
              <image-slot id="slot-intro-1" src="images/intro-1.jpg" placeholder="Üretim detayı"></image-slot>
              <image-slot id="slot-intro-2" src="images/intro-2.jpg" placeholder="Kumaş dokusu"></image-slot>
              <image-slot id="slot-intro-3" src="images/intro-3.jpg" placeholder="Dikim süreci"></image-slot>
            </div>
          </Reveal>
        </div>
      </section>

      {/* WORKSHOP CINEMATIC VIDEOS */}
      <section className="workshop-videos" style={{ padding: "90px 0", background: "var(--ink)", borderBottom: "1px solid rgba(255, 255, 255, 0.08)" }}>
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 50 }}>
            <div>
              <p className="eyebrow" style={{ color: "var(--gold)" }}>Zanaat ve Teknoloji</p>
              <h2 style={{ color: "#fff", marginTop: 12 }}>Kusursuz Kalitenin Arkasındaki Süreç</h2>
            </div>
            <p className="lead" style={{ maxWidth: 450, fontSize: 16, color: "rgba(250,249,246,0.7)" }}>
              Her bir BilgeAura tasarımı; en yüksek kaliteli doğal ipliklerden dokunur, uzman terzilerimiz tarafından Türkiye genelindeki modern ortağımız olan atölyelerde titizlikle dikilir.
            </p>
          </div>

          <div className="video-grid">
            {/* CARD 1 */}
            <div className="video-card" style={{ border: "1px solid rgba(255,255,255,0.08)" }}>
              <div className="video-media-wrapper">
                <video autoPlay muted loop playsInline className="atelier-video" style={{ opacity: 0.6 }}>
                  <source src="images/hero-bg.webm" type="video/webm" />
                </video>
                <div className="video-overlay-grad"></div>
                <div className="video-details">
                  <span className="vtag">01 · Doğal İpek &amp; Kaşmir Dokuma</span>
                  <h3>Koleksiyon Kalbi</h3>
                  <p>Organik elyafların nefes alan ve cildinize dost yapısı, yüksek hassasiyetle dokunarak Türkiye geneline premium sevkiyat için hazırlanır.</p>
                </div>
              </div>
            </div>

            {/* CARD 2 */}
            <div className="video-card" style={{ border: "1px solid rgba(255,255,255,0.08)" }}>
              <div className="video-media-wrapper">
                <video autoPlay muted loop playsInline className="atelier-video" style={{ opacity: 0.6 }}>
                  <source src="images/hero-bg.webm" type="video/webm" />
                </video>
                <div className="video-overlay-grad"></div>
                <div className="video-details">
                  <span className="vtag">02 · Titiz El Atölyesi ve Modelleme</span>
                  <h3>Zanaat Detayı</h3>
                  <p>Uzman terzilerimizin ellerinde hayat bulan premium dikişler ve dökümlü yapılar, zamansız bir formu her giyimde korur.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER VALUES BAR */}
      <section className="story" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="values">
            {VALUES.map((v, i) => (
              <Reveal key={v.n} delay={i * 80} tag="div" className="value">
                <div className="vline"></div>
                <div className="vn">{v.n}</div>
                <h3>{v.title}</h3>
                <p>{v.body}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

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

window.ScreenHome = ScreenHome;