// Home page
const { useState: useStateHome, useEffect: useEffectHome } = React;

function Hero({ go }) {
  const signature = window.TF_PRODUCTS.signature;
  const [idx, setIdx] = useStateHome(0);
  const p = signature[idx];

  useEffectHome(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % signature.length), 6000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="hero">
      <div className="hero-left">
        <div className="eyebrow">— A House of Two —</div>
        <div>
          <h1 className="hero-title">
            Scent,<br />
            <em>slowly</em><br />
            considered.
          </h1>
          <div className="hero-meta">
            <p>Two noses. A short catalogue. Each composition built for a season, a climate, a certain afternoon — and nothing else.</p>
            <div style={{ display: "flex", gap: 12, flexShrink: 0 }}>
              <button className="btn" onClick={() => go("shop")}>The Collection</button>
              <button className="btn-ghost btn" onClick={() => go("pocket")}>Pocket 10ml</button>
            </div>
          </div>
        </div>
        <div className="hero-index">
          <span>{String(idx + 1).padStart(2, "0")} / {String(signature.length).padStart(2, "0")}</span>
          <div className="dots">
            {signature.map((_, i) => (
              <span key={i} className={"dot " + (i === idx ? "active" : "")} onClick={() => setIdx(i)} />
            ))}
          </div>
          <span style={{ fontFamily: "Cormorant Garamond", fontStyle: "italic", fontSize: 18, textTransform: "none", letterSpacing: 0, color: "var(--ink)" }}>
            {p.name} — {p.family}
          </span>
        </div>
      </div>
      <div className="hero-right">
        <div className="hero-watermark">F</div>
        <img key={p.id} src={p.image} alt={p.name} style={{ animation: "fadeUp 0.7s ease both" }} />
      </div>
      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </section>
  );
}

function SignatureSection({ go }) {
  const signature = window.TF_PRODUCTS.signature;
  return (
    <section className="section" id="signature">
      <div className="container">
        <div className="section-intro">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>— Collection I —</div>
            <h2 className="section-title">The <em>Signature</em><br />50ml.</h2>
          </div>
          <div>
            <p className="section-desc">
              Six compositions in heavy glass. Each a reinterpretation of a fragrance you already know — rebuilt from the ground up with finer oils, higher concentration, and the patience of a small studio.
            </p>
            <div style={{ marginTop: 24 }}>
              <button className="btn-link" onClick={() => go("shop")}>View all six →</button>
            </div>
          </div>
        </div>
        <div className="product-grid">
          {signature.map((p, i) => (
            <div key={p.id} className="product-card" onClick={() => go("product", p.id)}>
              <div className="pc-num">№ {String(i + 1).padStart(2, "0")}</div>
              <div className="pc-image"><img src={p.image} alt={p.name} /></div>
              <div className="pc-meta">
                <div>
                  <div className="pc-name">{p.name}</div>
                  <div className="pc-family">{p.family} · {p.size}</div>
                </div>
                <div className="pc-price">{fmtPrice(p.price)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PocketSection({ go, addToCart }) {
  const pocket = window.TF_PRODUCTS.pocket;
  return (
    <section className="pocket-wrap" id="pocket">
      <div className="container">
        <div className="section-intro">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>— Collection II —</div>
            <h2 className="section-title">The <em>Pocket</em><br />10ml.</h2>
          </div>
          <div>
            <p className="section-desc">
              Six atomisers. Colour-coded, airline-ready, no label to read in a dark bag. Wear one, carry another. A second self in 10ml.
            </p>
            <div style={{ marginTop: 24 }}>
              <button className="btn-link" onClick={() => go("pocket")} style={{ color: "var(--paper)", borderColor: "var(--paper)" }}>All six pocket sprays →</button>
            </div>
          </div>
        </div>
        <div className="pocket-grid">
          {pocket.map(p => (
            <div key={p.id} className="pocket-card" style={{ background: p.bg }}>
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, ${p.bg} 0%, ${p.bg} 60%, rgba(0,0,0,0.04) 100%)`, zIndex: 1 }} />
              <img src={p.image} alt={p.name} />
              <div style={{ textAlign: "center", position: "relative", zIndex: 2, display: "flex", flexDirection: "column", gap: 6, alignItems: "center" }}>
                <div style={{ fontFamily: "Cormorant Garamond", fontSize: 22, color: "var(--ink)" }}>{p.name}</div>
                <div style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-soft)", textTransform: "uppercase" }}>10ml · {fmtPrice(p.price)}</div>
                <button
                  onClick={(e) => { e.stopPropagation(); addToCart({ id: p.id, name: p.name, price: p.price, size: "10ml Pocket", image: p.image }); }}
                  style={{ marginTop: 6, padding: "8px 14px", background: "var(--ink)", color: "var(--paper)", border: "none", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", cursor: "pointer" }}
                >Add</button>
              </div>
            </div>
          ))}
        </div>
        <div className="pocket-strip">
          {pocket.map(p => <span key={p.id} style={{ background: p.color }} />)}
        </div>
      </div>
    </section>
  );
}

function Editorial({ go }) {
  return (
    <section style={{ background: "var(--paper)" }}>
      <div className="editorial">
        <div className="editorial-img">
          <img src="assets/bottle-imperial-valley.png" alt="Imperial Valley" />
        </div>
        <div className="editorial-copy">
          <div className="eyebrow" style={{ marginBottom: 24 }}>— No. 01 · Featured —</div>
          <h3>Imperial Valley.<br /><em>A cool northern wind,</em><br />pressed in glass.</h3>
          <p>Conceived on a drive through Hunza at the thin edge of autumn. Bergamot lifts, iris cools, and a stone-dry vetiver holds the composition at arm's length.</p>
          <p style={{ marginBottom: 32 }}>A fragrance that prefers to be remembered, not announced.</p>
          <div>
            <button className="btn" onClick={() => go("product", "imperial-valley")}>Read the composition →</button>
          </div>
        </div>
      </div>
      <div className="editorial editorial-reverse">
        <div className="editorial-img">
          <img src="assets/bottle-versace-pink.png" alt="Versace Pink" />
        </div>
        <div className="editorial-copy">
          <div className="eyebrow" style={{ marginBottom: 24 }}>— No. 03 · Featured —</div>
          <h3>Versace Pink.<br /><em>Sugar, smoke,</em><br />and the hour after sunset.</h3>
          <p>Pink is not a colour here. It is a temperature — the warm close of a summer evening, raspberry over praline, a rose that refuses to be polite.</p>
          <p style={{ marginBottom: 32 }}>Worn close to the collarbone, where it was always meant to live.</p>
          <div>
            <button className="btn" onClick={() => go("product", "versace-pink")}>Read the composition →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Values() {
  return (
    <section className="container">
      <div className="values">
        <div className="value">
          <span className="num">№ 01</span>
          <h4>Higher <em>concentration.</em></h4>
          <p>We pour at extrait strength — 22% to 28% oil, never less. You'll wear less. You'll notice more.</p>
        </div>
        <div className="value">
          <span className="num">№ 02</span>
          <h4>A <em>small</em> catalogue.</h4>
          <p>Six bottles, six pocket sprays. If a new composition does not earn its place, it is not made. A considered shelf, not a crowded one.</p>
        </div>
        <div className="value">
          <span className="num">№ 03</span>
          <h4>From <em>Karachi,</em> with patience.</h4>
          <p>Each batch is blended, rested, and hand-labeled in our small studio. Three weeks of maceration, minimum, before a single bottle leaves us.</p>
        </div>
      </div>
    </section>
  );
}

function HomePage({ go, addToCart }) {
  return (
    <>
      <Hero go={go} />
      <Marquee />
      <SignatureSection go={go} />
      <PocketSection go={go} addToCart={addToCart} />
      <Values />
      <Editorial go={go} />
      <Newsletter />
    </>
  );
}

Object.assign(window, { HomePage });