// Find Us page

const Find = ({ navigate }) => {
  const [activeBrand, setActiveBrand] = React.useState(() => {
    const target = sessionStorage.getItem("findStore");
    if (target) {
      sessionStorage.removeItem("findStore");
      const idx = STORES.findIndex(s => s.name === target);
      return idx >= 0 ? idx : 0;
    }
    return 0;
  });
  const [activeLoc, setActiveLoc] = React.useState(0);

  const brand = STORES[activeBrand];
  const loc = brand.locations[activeLoc];

  const selectBrand = (i) => {
    setActiveBrand(i);
    setActiveLoc(0);
  };

  return (
    <main>
      {/* Header */}
      <section style={{ padding: "100px var(--pad-x) 80px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "end" }}>
          <div className="col-span-7">
            <span className="caption">Directory · {STORES.length} stockists · online</span>
            <h1 className="d-xxl" style={{ margin: "20px 0 0", fontStyle: "italic", lineHeight: 0.92 }}>
              Try first.<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>Decide later.</span>
            </h1>
          </div>
          <div className="col-span-5" style={{ paddingBottom: 12 }}>
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.3, maxWidth: 38 + "ch", margin: 0 }}>
              We don't believe a perfume should be bought blind. Smell ours at trusted shops across Indonesia, or order via Shopee with samples on every box.
            </p>
          </div>
        </div>
      </section>

      {/* Stockists */}
      <section style={{ padding: "0 var(--pad-x) 120px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="caption" style={{ marginBottom: 18 }}>Stockists</div>
        <div className="grid12" style={{ alignItems: "start", gap: 40 }}>

          {/* Left: brand list */}
          <div className="col-span-5">
            {STORES.map((store, i) => {
              const isActive = activeBrand === i;
              return (
                <div key={store.name} style={{ borderTop: "1px solid var(--hair-strong)" }}>
                  <button
                    onClick={() => selectBrand(i)}
                    style={{
                      display: "block", width: "100%", textAlign: "left",
                      padding: "28px 0 24px",
                      paddingLeft: isActive ? 14 : 0,
                      background: "transparent",
                      transition: "padding .2s ease",
                    }}
                  >
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                      <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", opacity: isActive ? 1 : 0.45 }}>0{i + 1}</span>
                      <span className="mono upper" style={{ fontSize: 11, letterSpacing: ".12em", opacity: isActive ? 0.7 : 0.35 }}>
                        {store.locations.map((l) => l.city).join(" · ")}
                      </span>
                    </div>
                    <h3 style={{
                      fontFamily: "var(--serif)", fontStyle: "italic",
                      fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1,
                      margin: "8px 0 0", fontWeight: 400,
                      opacity: isActive ? 1 : 0.4,
                      transition: "opacity .2s ease",
                    }}>{store.name}</h3>
                  </button>

                  {/* Location sub-list — shown when brand is active */}
                  {isActive && (
                    <div style={{ paddingLeft: 14, paddingBottom: 20 }}>
                      {store.locations.map((l, j) => (
                        <React.Fragment key={j}>
                          <button
                            onClick={() => setActiveLoc(activeLoc === j ? j : j)}
                            style={{
                              display: "flex", alignItems: "baseline", gap: 16,
                              width: "100%", textAlign: "left",
                              padding: "10px 0",
                              borderTop: j > 0 ? "1px solid var(--hair)" : "none",
                              background: "transparent",
                            }}
                          >
                            <span className="mono" style={{ fontSize: 10, letterSpacing: ".18em", opacity: 0.45, flex: "0 0 auto" }}>0{j + 1}</span>
                            <span style={{
                              fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 20,
                              color: activeLoc === j ? "var(--ink)" : "var(--ink-mute)",
                              transition: "color .15s ease",
                            }}>{l.city}</span>
                            <span className="mono" style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", opacity: 0.5, marginLeft: "auto" }}>{l.area}</span>
                            {activeLoc === j && (
                              <span style={{ fontFamily: "var(--mono)", fontSize: 10, opacity: 0.5 }}>→</span>
                            )}
                          </button>
                          {/* Mobile inline detail — only shown for active location */}
                          {activeLoc === j && (
                            <div className="find-detail-mobile" style={{ paddingBottom: 20 }}>
                              {l.photo && (
                                <div style={{ position: "relative", borderRadius: 2, overflow: "hidden", marginBottom: 16 }}>
                                  <img src={l.photo} alt={store.name} style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", display: "block" }} />
                                  <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)" }} />
                                  <span style={{ position: "absolute", bottom: 12, left: 14, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, color: "var(--cream)", lineHeight: 1 }}>{store.name}</span>
                                </div>
                              )}
                              <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", rowGap: 10, columnGap: 20, margin: "0 0 14px" }}>
                                {[["Area", l.area], ["Hours", l.hours], ["Stocks", l.note]].map(([k, v]) => v ? (
                                  <React.Fragment key={k}>
                                    <dt className="mono upper" style={{ fontSize: 10, letterSpacing: ".18em", color: "var(--ink-mute)", paddingTop: 2 }}>{k}</dt>
                                    <dd style={{ margin: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16, lineHeight: 1.3 }}>{v}</dd>
                                  </React.Fragment>
                                ) : null)}
                              </dl>
                              <a className="btn solid" href={l.mapsUrl || "https://maps.google.com/?q=" + encodeURIComponent(l.area + ", " + l.city)} target="_blank" rel="noreferrer" style={{ fontSize: 11 }}>
                                Open in Maps <span className="arr">↗</span>
                              </a>
                            </div>
                          )}
                        </React.Fragment>
                      ))}
                    </div>
                  )}
                </div>
              );
            })}
            <div style={{ borderTop: "1px solid var(--hair-strong)", paddingTop: 28, marginTop: 4 }}>
              <span className="caption">Not listed here?</span>
              <p style={{ margin: "8px 0 16px", fontSize: 14, color: "var(--ink-mute)", lineHeight: 1.5 }}>
                We're expanding. Check our Instagram for new stockists, or email us to ask about your city.
              </p>
              <a className="lnk" href="mailto:onethird.ofc@gmail.com">onethird.ofc@gmail.com →</a>
            </div>
          </div>

          {/* Right: location detail — desktop only */}
          <div className="col-span-7 find-detail-desktop">
            {/* Location card */}
            <a
              href={loc.mapsUrl || "https://maps.google.com/?q=" + encodeURIComponent(loc.area + ", " + loc.city)}
              target="_blank"
              rel="noreferrer"
              style={{ display: "block", textDecoration: "none", color: "inherit" }}
            >
              <div style={{
                aspectRatio: "16/9", width: "100%",
                background: loc.photo ? "var(--ink)" : "var(--cream-2, #e8e2d4)",
                border: "1px solid var(--hair-strong)",
                display: "flex", flexDirection: "column",
                justifyContent: "flex-end", padding: 32,
                position: "relative", overflow: "hidden",
              }}>
                {loc.photo && (
                  <>
                    <img src={loc.photo} alt={brand.name} style={{
                      position: "absolute", inset: 0, width: "100%", height: "100%",
                      objectFit: "cover", display: "block",
                    }} />
                    <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.55)" }} />
                  </>
                )}
                <div style={{ position: "relative", zIndex: 1 }}>
                  <div style={{ position: "absolute", top: -180, right: 0, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", opacity: loc.photo ? 0.8 : 0.45, color: loc.photo ? "var(--cream)" : "inherit" }}>
                    Open in Maps ↗
                  </div>
                  <span className="mono upper" style={{ fontSize: 10, letterSpacing: ".18em", marginBottom: 8, display: "block", opacity: loc.photo ? 0.7 : 0.5, color: loc.photo ? "var(--cream)" : "inherit" }}>{loc.city}</span>
                  <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1, display: "block", color: loc.photo ? "var(--cream)" : "inherit" }}>{brand.name}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".06em", marginTop: 10, display: "block", opacity: loc.photo ? 0.65 : 0.6, color: loc.photo ? "var(--cream)" : "inherit" }}>{loc.area}</span>
                </div>
              </div>
            </a>

            {/* Selected location detail */}
            <div style={{ marginTop: 28, paddingTop: 24, borderTop: "1px solid var(--hair-strong)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20 }}>
                <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28 }}>{brand.name}, {loc.city}</span>
                <span className="mono upper" style={{ fontSize: 10, letterSpacing: ".18em", opacity: 0.5 }}>0{activeBrand + 1} / 0{activeLoc + 1}</span>
              </div>
              <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", rowGap: 14, columnGap: 32, margin: 0 }}>
                {[
                  ["Area", loc.area],
                  ["Hours", loc.hours],
                  ["Stocks", loc.note],
                ].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: 20, fontStyle: "italic", lineHeight: 1.3 }}>{v}</dd>
                  </React.Fragment>
                ))}
              </dl>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <a className="btn solid" href={loc.mapsUrl || "https://maps.google.com/?q=" + encodeURIComponent(loc.area + ", " + loc.city)} target="_blank" rel="noreferrer">
                  Open in Maps <span className="arr">↗</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Online */}
      <section className="inverse" style={{ padding: "140px var(--pad-x)" }}>
        <div style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="grid12" style={{ alignItems: "end" }}>
            <div className="col-span-3">
              <SectionTag index="02" total="02" label="Online" />
            </div>
            <div className="col-span-9">
              <h2 className="d-xl" style={{ margin: 0, fontStyle: "italic", lineHeight: 0.92 }}>
                Or order it<br/>
                <span style={{ fontStyle: "normal", fontWeight: 500 }}>from your sofa.</span>
              </h2>
            </div>
          </div>

          <div className="grid12" style={{ marginTop: 80, alignItems: "start", rowGap: 24 }}>
            <div className="col-span-7">
              <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1.4, margin: 0, color: "rgba(241,235,223,0.85)" }}>
                Every order ships from our studio in two working days, packed securely and neatly — so it arrives exactly as it left.
              </p>
              <a className="btn invert" href="https://s.shopee.co.id/1VvwO9eQx3" target="_blank" rel="noreferrer" style={{ marginTop: 40 }}>
                Shop on Shopee <span className="arr">↗</span>
              </a>
              <div style={{ display: "flex", gap: 32, marginTop: 56, flexWrap: "wrap" }}>
                {[
                  ["48h", "Dispatch from studio"],
                  ["7-day", "No-question return"],
                  ["♺", "Recycled card packaging"],
                ].map(([k, v]) => (
                  <div key={k} style={{ flex: "1 1 140px" }}>
                    <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 48, lineHeight: 1 }}>{k}</div>
                    <p className="mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", marginTop: 10, color: "rgba(241,235,223,0.55)" }}>{v}</p>
                  </div>
                ))}
              </div>
            </div>
            <div className="col-span-5" style={{ paddingLeft: 24 }}>
              <img src="assets/order-sofa.jpg" alt="Order packaging" style={{ aspectRatio: "4/5", width: "100%", display: "block", objectFit: "cover" }} />
            </div>
          </div>
        </div>
      </section>

      {/* Wholesale */}
      <section style={{ padding: "140px var(--pad-x) 180px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "end" }}>
          <div className="col-span-7">
            <span className="caption">Stock us</span>
            <h2 className="d-l" style={{ margin: "16px 0 0", fontStyle: "italic" }}>
              Are you a shop<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>we should be in?</span>
            </h2>
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, marginTop: 28, maxWidth: 38 + "ch" }}>
              We're picky on purpose. If you run a small, well-considered space, and you can keep our scents from full sun, we'd like to talk.
            </p>
          </div>
          <div className="col-span-5" style={{ textAlign: "right" }}>
            <a className="btn solid" href="mailto:onethird.ofc@gmail.com">onethird.ofc@gmail.com <span className="arr">→</span></a>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Find = Find;