// Single product page

const Product = ({ id, navigate }) => {
  const p = PRODUCTS.find((x) => x.id === id) || PRODUCTS[0];
  const idx = PRODUCTS.findIndex((x) => x.id === p.id);
  const next = PRODUCTS[(idx + 1) % PRODUCTS.length];

  return (
    <main>
      {/* Crumb */}
      <div style={{ padding: "24px var(--pad-x) 0", maxWidth: "var(--max)", margin: "0 auto" }}>
        <button className="lnk" style={{ borderBottom: 0, opacity: 0.6 }} onClick={() => navigate("/products")}>← Back to all six</button>
      </div>

      {/* Hero — bottle + title */}
      <section style={{ padding: "60px var(--pad-x) 80px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "stretch" }}>
          <div className="col-span-6">
            {p.image
              ? <img src={p.image} alt={p.name} style={{ aspectRatio: "4/5", width: "100%", display: "block", objectFit: "cover", minHeight: 480 }} />
              : <div className="ph" data-label={"Bottle · " + p.name + " · " + p.volume} style={{ aspectRatio: "4/5", height: "100%", minHeight: 480 }}></div>
            }
          </div>
          <div className="col-span-6" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", paddingLeft: 24 }}>
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingBottom: 28, borderBottom: "1px solid var(--hair-strong)" }}>
                <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em" }}>№ {p.num}, {p.collection}</span>
                <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", opacity: 0.55 }}>{p.year} · {p.volume}</span>
              </div>
              <h1 className="d-xl" style={{ margin: "32px 0 14px", fontStyle: "italic", lineHeight: 0.9 }}>{p.name}</h1>
              <p className="mono" style={{ fontSize: 12, letterSpacing: ".08em", color: "var(--ink-mute)", margin: 0, textTransform: "uppercase" }}>
                {p.translation} · {Array.isArray(p.family) ? p.family.join(" · ") : p.family} · {p.mood.join(" · ")}
              </p>
              <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1.25, marginTop: 36, maxWidth: 28 + "ch" }}>
                {p.blurb}
              </p>
            </div>
            <div style={{ marginTop: 48 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingBottom: 18, borderBottom: "1px solid var(--hair)" }}>
                <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", opacity: 0.55 }}>Price</span>
                <span style={{ fontFamily: "var(--serif)", fontSize: 36, fontStyle: "italic" }}>{formatIDR(p.price)}</span>
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <a className="btn solid" href={p.shopeeUrl || "https://shopee.co.id"} target="_blank" rel="noreferrer" style={{ flex: 1, justifyContent: "center" }}>
                  Order on Shopee <span className="arr">↗</span>
                </a>
                <button className="btn" onClick={() => navigate("/find")}>Try in store</button>
              </div>
              <p className="mono" style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-mute)", marginTop: 22, lineHeight: 1.6 }}>
                Free 1.5ml sample with every order. Ships from Jakarta in 2 working days.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* The three thirds */}
      <section className="inverse" style={{ padding: "140px var(--pad-x)" }}>
        <div style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="grid12" style={{ marginBottom: 48 }}>
            <div className="col-span-3">
              <SectionTag index="01" total="03" label="The three thirds" />
            </div>
            <div className="col-span-9">
              <h2 className="d-l" style={{ margin: 0, fontStyle: "italic" }}>How <span style={{ fontWeight: 500, fontStyle: "normal" }}>{p.name}</span> moves on you, hour by hour.</h2>
            </div>
          </div>
          <div style={{ marginTop: 40 }}>
            <NotesPyramid top={p.notes.top} middle={p.notes.middle} base={p.notes.base} dark={true} />
          </div>

          {/* Timeline visualization */}
          <div style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid rgba(241,235,223,0.2)" }}>
            <div className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", opacity: 0.55, marginBottom: 18 }}>The wear, hour by hour</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 0, alignItems: "stretch", height: 100, position: "relative" }}>
              {[0, 1, 2, 3, 4, 5, 6, 7].map((h) => (
                <div key={h} style={{
                  borderLeft: "1px solid rgba(241,235,223,0.18)",
                  position: "relative",
                  display: "flex", alignItems: "flex-end", padding: "8px",
                }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: ".14em", opacity: 0.55 }}>+{h}h</span>
                </div>
              ))}
              {/* Top */}
              <div style={{ position: "absolute", left: 0, top: 8, height: 24, width: "30%", background: "rgba(241,235,223,0.85)" }}></div>
              <div style={{ position: "absolute", left: "2%", top: 8, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink)", lineHeight: "24px", paddingLeft: 8 }}>1/3 - Top</div>
              {/* Middle */}
              <div style={{ position: "absolute", left: "20%", top: 38, height: 24, width: "55%", background: "rgba(241,235,223,0.55)" }}></div>
              <div style={{ position: "absolute", left: "22%", top: 38, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink)", lineHeight: "24px", paddingLeft: 8 }}>2/3 - Middle</div>
              {/* Base */}
              <div style={{ position: "absolute", left: "55%", top: 68, height: 24, width: "45%", background: "rgba(241,235,223,0.3)" }}></div>
              <div style={{ position: "absolute", left: "57%", top: 68, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--cream)", lineHeight: "24px", paddingLeft: 8 }}>3/3 - Base (yours)</div>
            </div>
            <p className="mono" style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(241,235,223,0.45)", marginTop: 32 }}>
              Approximate, every skin is different. That's the whole point.
            </p>
          </div>
        </div>
      </section>

      {/* Mood + craft */}
      <section style={{ padding: "120px var(--pad-x)", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "stretch", rowGap: 32 }}>
          <div className="col-span-6">
            <SectionTag index="02" total="03" label="Mood" />
            <p className="d-m" style={{ margin: 0, fontStyle: "italic" }}>Wear it for:</p>
            <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0" }}>
              {p.mood.map((m, i) => (
                <li key={m} style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 56, lineHeight: 1.2, color: i === 0 ? "var(--ink)" : "var(--ink-mute)" }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", verticalAlign: "super", marginRight: 14, opacity: 0.6 }}>0{i + 1}</span>
                  {m}
                </li>
              ))}
            </ul>
          </div>
          <div className="col-span-6" style={{ paddingLeft: 24 }}>
            <SectionTag index="03" total="03" label="Craft" />
            <dl style={{ margin: 0, display: "grid", gridTemplateColumns: "auto 1fr", rowGap: 18, columnGap: 32 }}>
              {[
                ["Composed", p.year],
                ["Volume", p.volume],
                ["Concentration", "18%, Eau de Parfum"],
                ["Maceration", "8 weeks, dark glass"],
                ["Origin", "Bottled in Tangerang, ID"],
                ["Allergens", "See individual SKU"],
              ].map(([k, v]) => (
                <React.Fragment key={k}>
                  <dt className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", color: "var(--ink-mute)" }}>{k}</dt>
                  <dd style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", lineHeight: 1.2 }}>{v}</dd>
                </React.Fragment>
              ))}
            </dl>
          </div>
        </div>
      </section>

      {/* Where to buy */}
      <section style={{ padding: "0 var(--pad-x) 140px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div style={{ borderTop: "1px solid var(--hair-strong)", paddingTop: 36, display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <h3 className="d-m" style={{ margin: 0, fontStyle: "italic" }}>Where to find {p.name}</h3>
          {p.shopeeUrl && (
            <a className="btn solid" href={p.shopeeUrl} target="_blank" rel="noreferrer">
              Order on Shopee <span className="arr">↗</span>
            </a>
          )}
        </div>
        {!["moon-drops", "enchantrees", "chaerry", "discovery-set"].includes(p.id) && (
          <div className="grid12">
            {STORES.map((s) => (
              <div key={s.name} className="col-span-3">
                <button
                  onClick={() => { sessionStorage.setItem("findStore", s.name); navigate("/find"); }}
                  style={{ display: "block", width: "100%", textAlign: "left", borderTop: "1px solid var(--hair)", paddingTop: 18, paddingBottom: 18, background: "transparent", cursor: "pointer" }}
                >
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 24, display: "block", lineHeight: 1.1 }}>{s.name}</span>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", opacity: 0.55, marginTop: 8, display: "block" }}>{s.locations.map(l => l.city).join(" · ")}</span>
                </button>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Next product */}
      <section
        onClick={() => navigate("/p/" + next.id)}
        style={{ cursor: "pointer", padding: "140px var(--pad-x)", borderTop: "1px solid var(--hair-strong)", borderBottom: "1px solid var(--hair-strong)", transition: "background .3s" }}
        onMouseEnter={(e) => e.currentTarget.style.background = "var(--cream-2)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
      >
        <div className="grid12" style={{ maxWidth: "var(--max)", margin: "0 auto", alignItems: "center" }}>
          <div className="col-span-6">
            <span className="caption">Next - № {next.num}</span>
            <h3 className="d-xl" style={{ fontStyle: "italic", margin: "12px 0 0" }}>{next.name}</h3>
            <p className="mono" style={{ fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--ink-mute)", marginTop: 12 }}>{next.translation} · {next.family}</p>
          </div>
          <div className="col-span-6" style={{ textAlign: "right" }}>
            <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "clamp(60px, 9vw, 120px)", lineHeight: 1 }}>→</span>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Product = Product;