// Sunehra — Product Detail page

const { useState, useEffect } = React;

// =============== Product data ===============

const PRODUCT = {
  id: "p1",
  name: "Raagini Polki Rani-Haar",
  type: "The Vivaha Collection · Bridal Necklace",
  craft: "Polki · Jadau · Meenakari",
  metal: "22K Gold · Uncut Diamond · South Sea Pearl",
  hallmark: "BIS 916",
  weight: { gross: 62.4, net: 54.8 },
  stones: { uncut: "3.2 ct uncut diamond", pearl: "8mm South Sea pearl drops" },
  origin: "Handcrafted in Jaipur · 14 weeks",
  makers: ["Hariram Soni Sr.", "Vinod Karigar"],
  description: "The Raagini is our defining rani-haar — a five-layered cascade of polki, kundan, and meena work that traces the throat to the waist. Built around an uncut centerpiece, finished in the Rajasthani jadau tradition. Each piece travels to the next generation by deed.",
  story: "Named after Raagini, the wife of our founder, who wore the first iteration of this piece to her wedding in 1949. Every Raagini sold today is built on the same template — eleven karigars, fourteen weeks, and seven hundred and twelve hand-set polki stones.",
  inclusions: ["Velvet Sunehra trunk", "BIS hallmark certificate", "GIA diamond report", "Insurance valuation", "Lifetime buyback contract"],
  related: [
    { id: "p9", name: "Chandni Polki Choker",  type: "Choker · Polki",     v: "emerald", img: "https://images.unsplash.com/photo-1671642883395-0ab89c3ac890" },
    { id: "p2", name: "Jhilmil Chandbalis",    type: "Earrings · Jadau",   v: "",        img: IMG.featChandbali },
    { id: "p5", name: "Kalashri Bangle Stack", type: "Bangles · Set of 6", v: "ink",     img: IMG.featKangan },
    { id: "p3", name: "Surya Maang Tikka",     type: "Tikka · Temple",     v: "gold",    img: IMG.featTikka },
  ],
};

const GALLERY = [
  { v: "gold",    cap: "front · with model",         tag: "01 / 06", img: IMG.prodFront },
  { v: "ink",     cap: "detail · centrepiece polki", tag: "02 / 06", img: IMG.prodDetail },
  { v: "emerald", cap: "reverse · meena work",       tag: "03 / 06", img: IMG.prodReverse },
  { v: "ivory",   cap: "scale · 21 inches",          tag: "04 / 06", img: IMG.prodScale },
  { v: "",        cap: "pearl drops · 8mm",          tag: "05 / 06", img: IMG.prodPearl },
  { v: "gold",    cap: "trunk · presentation",       tag: "06 / 06", img: IMG.prodTrunk },
];

// =============== Gallery ===============

function Gallery() {
  const [active, setActive] = useState(0);
  return (
    <div className="grid-gallery">
      {/* thumbs */}
      <div className="gallery-thumbs" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {GALLERY.map((g, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            all: "unset", cursor: "pointer", position: "relative",
            border: active === i ? "2px solid var(--brand)" : "2px solid transparent",
            transition: "border .2s ease",
          }}>
            <Ph variant={g.v} src={g.img} imgSize={140} style={{ aspectRatio: "1/1" }}/>
          </button>
        ))}
        <div style={{
          marginTop: 8, padding: "10px 8px",
          border: "1px solid var(--line)", textAlign: "center",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
        }}>
          <span style={{ fontSize: 16 }}>⌖</span>
          <span className="mono" style={{ fontSize: 8.5, color: "var(--fg-soft)" }}>360°<br/>VIEW</span>
        </div>
      </div>
      {/* main */}
      <div style={{ position: "relative" }}>
        <Ph variant={GALLERY[active].v} src={GALLERY[active].img} cap={GALLERY[active].cap} tag={GALLERY[active].tag}
            style={{ aspectRatio: "4/5" }}>
          {/* zoom hint */}
          <div style={{
            position: "absolute", right: 18, top: 18,
            width: 40, height: 40, borderRadius: "50%",
            background: "rgba(248, 241, 229, .12)",
            border: "1px solid rgba(248,241,229,.2)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--ivory)", fontSize: 18,
            backdropFilter: "blur(8px)",
          }}>+</div>
          {/* nav arrows */}
          <button onClick={() => setActive((active - 1 + GALLERY.length) % GALLERY.length)} style={{
            position: "absolute", left: 18, top: "50%", transform: "translateY(-50%)",
            width: 42, height: 42, borderRadius: "50%",
            background: "rgba(248,241,229,.92)", border: "none", cursor: "pointer",
            fontSize: 16, color: "var(--ink)",
          }}>←</button>
          <button onClick={() => setActive((active + 1) % GALLERY.length)} style={{
            position: "absolute", right: 18, bottom: 18, transform: "none",
            width: 42, height: 42, borderRadius: "50%",
            background: "rgba(248,241,229,.92)", border: "none", cursor: "pointer",
            fontSize: 16, color: "var(--ink)",
          }}>→</button>
        </Ph>
      </div>
    </div>
  );
}

// =============== Details panel ===============

function DetailsPanel({ wished, onWish }) {
  const [tab, setTab] = useState("details");
  const [copied, setCopied] = useState(false);
  const refCode = `SUN-RGN-${PRODUCT.id.toUpperCase()}`;
  function copyRef() {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1800); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(refCode).then(done).catch(() => fallbackCopy(refCode, done));
    } else {
      fallbackCopy(refCode, done);
    }
  }
  function fallbackCopy(text, done) {
    try {
      const ta = document.createElement("textarea");
      ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0";
      document.body.appendChild(ta); ta.focus(); ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
      done();
    } catch (e) {}
  }
  return (
    <div style={{ padding: "0 0 0 20px" }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--fg-soft)", letterSpacing: ".2em" }}>
        <a href="index.html" style={{ color: "var(--fg-soft)" }}>HOME</a> / <a href="collections.html?cat=necklaces" style={{ color: "var(--fg-soft)" }}>NECKLACES</a> / <span style={{ color: "var(--brand)" }}>RAAGINI</span>
      </div>

      <span className="eyebrow" style={{ color: "var(--brand)", marginTop: 24, display: "block" }}>
        ◈ &nbsp; {PRODUCT.type}
      </span>
      <h1 className="display" style={{
        fontSize: "clamp(40px, 4.5vw, 64px)",
        margin: "16px 0 8px",
        color: "var(--fg)", lineHeight: 1.05,
      }}>
        {PRODUCT.name.split(" ")[0]}<br/>
        <span style={{ fontStyle: "italic", color: "var(--brand)" }}>{PRODUCT.name.split(" ").slice(1).join(" ")}</span>
      </h1>
      {/* Prominent reference / model code for in-store enquiry */}
      <div style={{
        marginTop: 14, padding: "10px 14px",
        border: "1px dashed var(--brand)",
        background: "rgba(107, 15, 26, .04)",
        display: "inline-flex", alignItems: "center", gap: 10,
      }}>
        <span className="mono" style={{ fontSize: 9.5, color: "var(--brand)" }}>◇ REF</span>
        <span className="mono" style={{ fontSize: 13, color: "var(--fg)", letterSpacing: ".12em" }}>
          {refCode}
        </span>
        <button
          onClick={copyRef}
          aria-label="Copy reference number"
          style={{
            all: "unset", cursor: "pointer", padding: "2px 8px",
            color: copied ? "var(--accent)" : "var(--brand)", fontSize: 11, letterSpacing: ".18em",
            borderLeft: "1px solid rgba(107,15,26,.3)",
            transition: "color .2s ease",
          }}>{copied ? "✓ COPIED" : "COPY"}</button>
      </div>
      <div className="mono" style={{ fontSize: 10, color: "var(--fg-soft)", marginTop: 8 }}>
        Quote this reference at any of our seven ateliers · crafted over 14 weeks
      </div>

      {/* Star + status */}
      <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 18, paddingBottom: 24, borderBottom: "1px solid var(--line)", flexWrap: "wrap" }}>
        <div style={{ color: "var(--metal)", letterSpacing: 2, fontSize: 14 }}>★★★★★</div>
        <span className="mono" style={{ fontSize: 10 }}>(118 REVIEWS)</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--accent)" }}>● AVAILABLE TO VIEW IN STORE</span>
      </div>

      <p style={{ fontSize: 14.5, lineHeight: 1.75, color: "var(--fg-soft)", marginTop: 24 }}>
        {PRODUCT.description}
      </p>

      {/* Spec grid */}
      <div className="grid-spec" style={{
        marginTop: 28, padding: "20px 24px",
        background: "var(--bg-alt)",
        borderRadius: 2,
      }}>
        {[
          ["Metal", PRODUCT.metal.split("·")[0]],
          ["Stone", PRODUCT.stones.uncut],
          ["Weight", `${PRODUCT.weight.gross}g gross · ${PRODUCT.weight.net}g net`],
          ["Hallmark", `${PRODUCT.hallmark} · BIS Certified`],
          ["Craft", PRODUCT.craft],
          ["Origin", PRODUCT.origin],
        ].map(([k, v], i) => (
          <div key={i}>
            <div className="mono" style={{ fontSize: 9, color: "var(--brand)", marginBottom: 3 }}>{k.toUpperCase()}</div>
            <div style={{ fontSize: 13, color: "var(--fg)" }}>{v}</div>
          </div>
        ))}
      </div>

      {/* CTA — catalog / enquiry, not e-commerce */}
      <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
        <a
          href={`contact.html?ref=SUN-RGN-${PRODUCT.id.toUpperCase()}&piece=${encodeURIComponent(PRODUCT.name)}`}
          className="btn btn--filled"
          style={{ flex: "1 1 220px", justifyContent: "center" }}>
          Enquire About This Piece
        </a>
        <button onClick={onWish} className="btn" style={{ flex: "0 0 auto" }} aria-label="save">
          {wished ? "♥ Saved" : "♡ Save"}
        </button>
      </div>
      <a href="index.html#appointment" className="btn" style={{ marginTop: 10, width: "100%", justifyContent: "center" }}>
        Book a Private Viewing at the Atelier →
      </a>

      <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginTop: 20, lineHeight: 1.8 }}>
        ◇ Sunehra is a heritage catalogue — every piece is sold only at our seven ateliers.<br/>
        ◇ Quote the reference above when you visit, or enquire to reserve a try-on.<br/>
        ◇ No online checkout. No shipping. Just unhurried tea and the piece in your hands.
      </div>

      {/* Tabs */}
      <div style={{ marginTop: 40, borderTop: "1px solid var(--line)" }}>
        <div style={{ display: "flex", gap: 32, borderBottom: "1px solid var(--line)" }}>
          {["details", "story", "craft", "care", "reviews"].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{
              all: "unset", cursor: "pointer", padding: "16px 0",
              fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase",
              color: tab === t ? "var(--brand)" : "var(--fg-soft)",
              fontWeight: tab === t ? 600 : 400,
              borderBottom: tab === t ? "2px solid var(--brand)" : "2px solid transparent",
              marginBottom: -1,
            }}>{t}</button>
          ))}
        </div>
        <div style={{ padding: "24px 0", fontSize: 13.5, lineHeight: 1.8, color: "var(--fg-soft)" }}>
          {tab === "details" && (
            <div>
              <p style={{ margin: "0 0 14px" }}>
                Five layers of polki cascade from a centrepiece set with 3.2ct of uncut diamond. The reverse is meena-worked in maroon and emerald enamel — a Sunehra signature.
              </p>
              <ul style={{ paddingLeft: 20, margin: 0 }}>
                {PRODUCT.inclusions.map(i => <li key={i} style={{ marginBottom: 6 }}>{i}</li>)}
              </ul>
            </div>
          )}
          {tab === "story" && <p style={{ margin: 0 }}>{PRODUCT.story}</p>}
          {tab === "craft" && (
            <div>
              <p style={{ margin: "0 0 14px" }}>The Raagini is made by hand from inception to packing:</p>
              <ol style={{ paddingLeft: 20, margin: 0 }}>
                <li>Sketching & wax modelling — 2 weeks</li>
                <li>Hand-beating 22K gold sheet — 3 weeks</li>
                <li>Polki & uncut diamond setting (jadau) — 5 weeks</li>
                <li>Reverse meenakari enamel — 3 weeks</li>
                <li>Polishing, hallmark, certification — 1 week</li>
              </ol>
            </div>
          )}
          {tab === "care" && (
            <ul style={{ paddingLeft: 20, margin: 0 }}>
              <li style={{ marginBottom: 6 }}>Store in the velvet trunk provided.</li>
              <li style={{ marginBottom: 6 }}>Avoid contact with perfume, lotion, and chlorinated water.</li>
              <li style={{ marginBottom: 6 }}>Clean only with the soft cloth included.</li>
              <li style={{ marginBottom: 6 }}>Complimentary servicing every 12 months at any Sunehra atelier.</li>
            </ul>
          )}
          {tab === "reviews" && (
            <div>
              <div style={{ display: "flex", gap: 16, alignItems: "baseline", marginBottom: 18 }}>
                <span className="display" style={{ fontSize: 38, color: "var(--brand)" }}>4.96</span>
                <span style={{ fontSize: 12 }}>of 5 · 118 reviews from real Sunehra brides.</span>
              </div>
              <div style={{ padding: "16px 0", borderTop: "1px solid var(--line)" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--brand)" }}>★★★★★ &nbsp; ANANYA S. · MUMBAI</div>
                <p style={{ margin: "8px 0 0", fontStyle: "italic", color: "var(--fg)" }}>"I wore the Raagini at my wedding — the polki work is unlike anything I've seen. It's the one piece I'll hand to my daughter."</p>
              </div>
              <div style={{ padding: "16px 0", borderTop: "1px solid var(--line)" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--brand)" }}>★★★★★ &nbsp; PRIYA K. · DELHI</div>
                <p style={{ margin: "8px 0 0", fontStyle: "italic", color: "var(--fg)" }}>"The team at Johari Bazaar fitted it three times before delivery. Bridal jewellery the way it ought to be made."</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// =============== Editorial banner ===============

function Editorial() {
  return (
    <section style={{ background: "var(--ink)", color: "var(--ivory)", padding: "100px 0", position: "relative", overflow: "hidden" }}>
      <div className="wrap grid-2">
        <div>
          <span className="eyebrow" style={{ color: "var(--metal-soft)" }}>◈ &nbsp; The Makers</span>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.8vw, 64px)", margin: "16px 0 24px", color: "var(--ivory)" }}>
            Eleven karigars.<br/>
            <span style={{ fontStyle: "italic", color: "var(--metal-soft)" }}>Seven hundred and twelve</span> stones.
          </h2>
          <p style={{ color: "rgba(248,241,229,.75)", fontSize: 14.5, lineHeight: 1.8, maxWidth: 480 }}>
            The Raagini is built over fourteen weeks at our Johari Bazaar atelier in Jaipur. From the first wax model to the final hallmark, your piece passes through the hands of eleven master craftsmen, each from a lineage of three to five generations.
          </p>
          <div style={{ marginTop: 36, display: "flex", gap: 28 }}>
            <div>
              <div className="display" style={{ fontSize: 32, color: "var(--metal-soft)" }}>14</div>
              <div className="mono" style={{ fontSize: 10, marginTop: 4, color: "rgba(248,241,229,.5)" }}>WEEKS</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: 32, color: "var(--metal-soft)" }}>11</div>
              <div className="mono" style={{ fontSize: 10, marginTop: 4, color: "rgba(248,241,229,.5)" }}>KARIGARS</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: 32, color: "var(--metal-soft)" }}>712</div>
              <div className="mono" style={{ fontSize: 10, marginTop: 4, color: "rgba(248,241,229,.5)" }}>POLKI STONES</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: 32, color: "var(--metal-soft)" }}>3.2</div>
              <div className="mono" style={{ fontSize: 10, marginTop: 4, color: "rgba(248,241,229,.5)" }}>CT UNCUT</div>
            </div>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <Ph variant="emerald" src={IMG.atelierFilm} cap="atelier · jaipur" tag="film / 01" style={{ aspectRatio: "5/4" }}>
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <div style={{
                width: 72, height: 72, borderRadius: "50%",
                background: "rgba(248,241,229,.18)",
                border: "1px solid rgba(248,241,229,.3)",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--ivory)", fontSize: 22, paddingLeft: 4,
                backdropFilter: "blur(8px)",
              }}>▶</div>
            </div>
          </Ph>
          <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between" }}>
            <span className="mono" style={{ fontSize: 10, color: "var(--metal-soft)" }}>WATCH · MAKING OF RAAGINI · 4 MIN</span>
            <span className="mono" style={{ fontSize: 10, color: "rgba(248,241,229,.5)" }}>FILM / 01</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== Related ===============

function Related() {
  return (
    <section style={{ padding: "100px 0", background: "var(--bg)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40 }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--brand)" }}>◈ &nbsp; Complete the look</span>
            <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 52px)", margin: "12px 0 0" }}>
              Worn with <span style={{ fontStyle: "italic", color: "var(--accent)" }}>Raagini</span>.
            </h2>
          </div>
          <a href="collections.html?cat=bridal" className="btn btn--sm">View the full edit →</a>
        </div>
        <div className="grid-related">
          {PRODUCT.related.map(p => (
            <a key={p.id} href={`product.html?id=${p.id}`} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <Ph variant={p.v} src={p.img} imgSize={500} style={{ aspectRatio: "4/5" }} tag={p.id}/>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--fg)", lineHeight: 1.2 }}>{p.name}</div>
                <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginTop: 4 }}>{p.type.toUpperCase()}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== Trust strip ===============

function TrustStrip() {
  return (
    <section style={{ background: "var(--bg-alt)", padding: "44px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap grid-trust">
        {[
          ["BIS", "Government hallmark", "916 fineness 22K"],
          ["GIA", "Certified stones", "Each diamond traceable"],
          ["100%", "Buyback assured", "Lifetime, no questions"],
          ["14d", "Fitting & return", "Wear it home, decide later"],
        ].map(([k, v, sub], i) => (
          <div key={i} style={{ borderRight: i < 3 ? "1px solid var(--line)" : "none", padding: "0 16px" }}>
            <div className="display" style={{ fontSize: 36, color: "var(--brand)" }}>{k}</div>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--fg)", marginTop: 6 }}>{v.toUpperCase()}</div>
            <div style={{ fontSize: 12, color: "var(--fg-soft)", marginTop: 4 }}>{sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// =============== App ===============

function App() {
  const wishlist = useWishlist();
  const wished = wishlist.has(PRODUCT.id);
  return (
    <div data-screen-label="Product Detail">
      <AnnouncementBar/>
      <Header/>
      <main>
        <section style={{ padding: "48px 0 80px" }}>
          <div className="wrap grid-product-main">
            <Gallery/>
            <DetailsPanel wished={wished} onWish={() => wishlist.toggle(PRODUCT.id)}/>
          </div>
        </section>
        <TrustStrip/>
        <Editorial/>
        <Related/>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);