// Home page

const Home = ({ navigate }) => {
  return (
    <main>
      {/* HERO */}
      <section style={{ position: "relative", padding: "80px var(--pad-x) 120px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "end", minHeight: "78vh" }}>
          <div className="col-span-7" style={{ position: "relative", zIndex: 2 }}>
            <h1 className="d-xxl reveal" style={{ margin: 0, fontStyle: "italic", textWrap: "pretty" }}>
              Scent<br/>becomes<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>you</span><span style={{ fontStyle: "italic" }}>.</span>
            </h1>
          </div>

          <div className="col-span-5" style={{ display: "flex", flexDirection: "column", gap: 28, paddingBottom: 12 }}>
            <img src="assets/hero-home.jpg" alt="onethird" className="reveal delay-2" style={{ aspectRatio: "4/5", width: "100%", display: "block", objectFit: "cover" }} />
            <div className="reveal delay-3" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
              <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.25, margin: 0, maxWidth: 320 }}>
                Six honest scents. Nothing added for pretending.
              </p>
              <button className="btn solid" onClick={() => navigate("/products")}>
                Browse the six <span className="arr">→</span>
              </button>
            </div>
          </div>
        </div>

        {/* small ribbon under hero */}
        <div style={{ marginTop: 64, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--hair)", paddingTop: 18 }}>
          <span className="caption">30ml EDP · Made in Indonesia · Cruelty-free</span>
        </div>
      </section>

      {/* MANIFESTO — the 1/3 meaning */}
      <section style={{ padding: "120px var(--pad-x)", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12">
          <div className="col-span-3">
            <SectionTag index="01" total="05" label="Manifesto" />
          </div>
          <div className="col-span-9">
            <p className="d-l" style={{ margin: 0, fontStyle: "italic", textWrap: "balance" }}>
              Every perfume has three parts.<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>Top.</span>
              <span style={{ display: "inline-block", width: 32 }}></span>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>Middle.</span>
              <span style={{ display: "inline-block", width: 32 }}></span>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>Base.</span>
            </p>
            <p className="d-l" style={{ margin: "24px 0 0", maxWidth: "20ch", color: "var(--ink-mute)", fontStyle: "normal", fontWeight: 300 }}>
              Three layers that move, shift, and settle on your skin throughout the day.
            </p>
          </div>
        </div>

        {/* The 1/3 grid — three columns */}
        <div className="grid12" style={{ marginTop: 80, alignItems: "start" }}>
          {[
            { frac: "1/3", title: "What you smell first", body: "Bright, fleeting, immediate. The opening notes announce themselves and disappear. Gone in fifteen minutes, exactly as intended." },
            { frac: "2/3", title: "What stays for hours", body: "The heart. The layer that unfolds once the opening fades, the part that travels with you through the day. Slow, warm, present." },
            { frac: "3/3", title: "What's left at midnight", body: "Depth and skin. The base stays longest, and your own warmth transforms it into something no one else wears quite the same way." },
          ].map((b, i) => (
            <div key={i} className="col-span-4" style={{ paddingTop: 28, borderTop: "1px solid var(--hair-strong)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: 64, lineHeight: 1, fontStyle: i % 2 ? "italic" : "normal", fontWeight: i === 1 ? 500 : 400 }}>{b.frac}</span>
                <span className="caption">{["Top", "Middle", "Base"][i]} note</span>
              </div>
              <h3 style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, fontWeight: 400, margin: "32px 0 14px", lineHeight: 1.1 }}>{b.title}</h3>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, maxWidth: 32 + "ch" }}>{b.body}</p>
            </div>
          ))}
        </div>

        {/* Closing line — typographic */}
        <div className="grid12" style={{ marginTop: 100, alignItems: "end" }}>
          <div className="col-span-7 col-start-2">
            <p className="d-m" style={{ margin: 0, fontStyle: "italic" }}>
              We craft <span style={{ fontStyle: "normal", fontWeight: 500 }}>two thirds.</span> The last third, the part that decides who you are when wearing it, that's always
              <span style={{ display: "inline-block", margin: "0 12px", fontFamily: "var(--mono)", fontSize: "0.5em", letterSpacing: ".18em", textTransform: "uppercase", verticalAlign: "middle", borderTop: "1px solid currentColor", borderBottom: "1px solid currentColor", padding: "6px 12px" }}>YOURS</span>.
            </p>
          </div>
          <div className="col-span-3 col-start-9" style={{ textAlign: "right" }}>
            <button className="lnk" onClick={() => navigate("/story")}>Read the full story →</button>
          </div>
        </div>
      </section>

      {/* TICKER */}
      <div className="ticker">
        <div className="ticker-track">
          {Array.from({ length: 2 }).flatMap((_, k) => [
            "Scent becomes you", "·", "1/3 - top", "·", "2/3 - middle", "·", "3/3 - yours", "·",
            "Made in Jakarta", "·", "Cruelty-free", "·", "Six scents, no filler", "·",
          ].map((t, i) => <span key={k + "-" + i}>{t}</span>))}
        </div>
      </div>

      {/* PRODUCTS */}
      <section style={{ padding: "120px var(--pad-x)", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ marginBottom: 64 }}>
          <div className="col-span-3">
            <SectionTag index="02" total="05" label="The six" />
          </div>
          <div className="col-span-6">
            <h2 className="d-l" style={{ margin: 0, fontStyle: "italic" }}>
              Six scents.<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>Two collections.</span><br/>
              <span style={{ color: "var(--ink-mute)" }}>One idea.</span>
            </h2>
          </div>
          <div className="col-span-3" style={{ alignSelf: "end" }}>
            <p style={{ margin: 0, fontSize: 14, color: "var(--ink-mute)", maxWidth: 28 + "ch" }}>
              30ml EDP, starts from Rp 100k. Honestly competes with perfumes at 2–3× the price. Click to see how the three thirds unfold.
            </p>
          </div>
        </div>

        <div className="grid12" style={{ rowGap: 56 }}>
          {PRODUCTS.slice(0, 3).map((p) => (
            <div key={p.id} className="col-span-4">
              <ProductCard p={p} navigate={navigate} />
            </div>
          ))}
          {/* Asymmetric break — a quote/divider */}
          <div className="col-span-12" style={{ display: "flex", alignItems: "center", gap: 32, padding: "36px 0", borderTop: "1px solid var(--hair-strong)", borderBottom: "1px solid var(--hair-strong)" }}>
            <span style={{ fontFamily: "var(--serif)", fontSize: 80, lineHeight: 1, fontStyle: "italic", flex: "0 0 auto" }}>“</span>
            <p style={{ margin: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1.2, flex: 1 }}>
              I bought Holy Dust after smelling it for ten seconds at Larusso. I haven't worn anything else for two months.
            </p>
            <span className="caption" style={{ flex: "0 0 auto" }}>- Citra, Jakarta</span>
          </div>
          {PRODUCTS.slice(3, 6).map((p) => (
            <div key={p.id} className="col-span-4">
              <ProductCard p={p} navigate={navigate} />
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 72 }}>
          <button className="btn" onClick={() => navigate("/products")}>
            See all six <span className="arr">→</span>
          </button>
        </div>
      </section>

      {/* FIND US — small preview */}
      <section className="inverse" style={{ padding: "140px var(--pad-x)" }}>
        <div className="grid12" style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="col-span-5">
            <SectionTag index="03" total="05" label="Find us" />
            <h2 className="d-l" style={{ margin: 0, fontStyle: "italic" }}>
              Smell first.<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>Decide later.</span>
            </h2>
            <p style={{ marginTop: 32, fontSize: 16, lineHeight: 1.5, maxWidth: 36 + "ch", color: "rgba(241,235,223,0.7)" }}>
              We don't sell what you can't try. Find Onethird at four shops we trust, and online via Shopee, with samples on every order.
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap" }}>
              <button className="btn invert" onClick={() => navigate("/find")}>Store directory <span className="arr">→</span></button>
              <a className="btn invert" href="https://s.shopee.co.id/1VvwO9eQx3" target="_blank" rel="noreferrer">Shop on Shopee <span className="arr">↗</span></a>
            </div>
          </div>

          <div className="col-span-7" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {STORES.map((s, i) => (
              <div key={s.name} style={{ paddingTop: 28, borderTop: "1px solid rgba(241,235,223,0.25)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", opacity: 0.6 }}>0{i + 1}</span>
                  <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", opacity: 0.6 }}>{s.locations.length > 1 ? s.locations.length + " kota" : s.locations[0].city}</span>
                </div>
                <h4 style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 44, fontWeight: 400, margin: "16px 0 10px", lineHeight: 1 }}>{s.name}</h4>
                <p className="mono" style={{ fontSize: 12, letterSpacing: ".06em", margin: 0, opacity: 0.7 }}>{s.locations.map((l) => l.city).join(" · ")}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Closing — large 1/3 typographic */}
      <section style={{ padding: "180px var(--pad-x) 60px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "start" }}>
          <div className="col-span-4">
            <span className="caption">A note before you order</span>
            <p className="d-m" style={{ marginTop: 18, marginBottom: 0, fontStyle: "italic", textWrap: "balance" }}>
              We make small batches. When we sell out, we don't restock the same week, we wait for the next maceration.
            </p>
            <p className="mono" style={{ marginTop: 24, fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              Patience is part of the perfume.
            </p>
          </div>
          <div className="col-span-8" style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }}>
            <img src="assets/logo-onethird-mark.png" alt="1/3" style={{ width: "clamp(72px, 7vw, 110px)", height: "auto", display: "block" }} />
          </div>
        </div>
      </section>
    </main>
  );
};

window.Home = Home;