// screen-story.jsx — brand story & values

function ScreenStory({ go, onToast }) {
  const { VALUES } = window.AURA_DATA;
  return (
    <main>
      <section className="vton-hero" style={{ background: "var(--ink)" }}>
        <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)" }}>Hikâye</span>
          </div>
          <p className="eyebrow">BilgeAura Atölyesi</p>
          <h1 style={{ maxWidth: "18ch" }}>Lüks, sadelikle başlar.</h1>
          <p className="lead">Türkiye genelinde online olarak hizmet veren BilgeAura, doğal kumaşları titiz atölye işçiliğiyle buluşturuyor — kusursuz dikişler ve zamansız bir gardırop için.</p>
        </div>
      </section>

      <section>
        <div className="wrap story-feature">
          <Reveal>
            <p className="eyebrow">Felsefemiz</p>
            <h2 style={{ marginTop: 16, fontSize: "clamp(28px,3.8vw,48px)" }}>Hızlı moda değil, zamansız parçalar.</h2>
            <p className="lead" style={{ marginTop: 22 }}>
              Her sezon yüzlerce ürün yerine, özenle seçilmiş her detayına önem verilmiş premium tasarımlar üretiyoruz. Doğal kumaşlar,
              dürüst işçilik ve yıllarca giyilecek siluetler.
            </p>
            <p style={{ marginTop: 18, color: "var(--muted)" }}>
              Ürünlerimizin her birini detaylı fotoğraflar, gerçek kumaş görselleri ve beden tablosuyla sunuyoruz — 
              doğru seçimi, ilk seferde yapmanız için.
            </p>
            <button className="btn" style={{ marginTop: 30 }} onClick={() => go("collection")}>Koleksiyonu görün <I.arrow /></button>
          </Reveal>
          <Reveal delay={120}>
            <image-slot id="slot-story-feature" src="images/story-feature.jpg" placeholder="Atölye / marka görseli"></image-slot>
          </Reveal>
        </div>
      </section>

      <section className="story">
        <div className="wrap">
          <div className="section-head"><div><p className="eyebrow">Değerlerimiz</p><h2 style={{ marginTop: 12 }}>Neye inanıyoruz</h2></div></div>
          <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.ScreenStory = ScreenStory;