// Sunehra — generic content pages (About, Contact, Stores, Care, Privacy, Terms).
// Each .html file loads this script; the page to render is inferred from
// the filename in window.location.pathname.

const { useState, useEffect, useMemo } = React;

// ============================================================================
// Reusable bits
// ============================================================================

function PageHero({ eyebrow, title, italicWord, blurb, breadcrumb }) {
  return (
    <section style={{ padding: "80px 0 60px", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        {breadcrumb && (
          <div className="mono" style={{ fontSize: 10, color: "var(--fg-soft)", letterSpacing: ".2em", marginBottom: 12 }}>
            <a href="index.html" style={{ color: "var(--fg-soft)" }}>HOME</a>
            &nbsp;/&nbsp;<span style={{ color: "var(--brand)" }}>{breadcrumb.toUpperCase()}</span>
          </div>
        )}
        <div className="grid-cat-hero">
          <div>
            <span className="eyebrow" style={{ color: "var(--brand)" }}>◈ &nbsp; {eyebrow}</span>
            <h1 className="display" style={{ fontSize: "clamp(48px, 6.4vw, 88px)", margin: "16px 0 0", color: "var(--fg)", lineHeight: 1.04 }}>
              {title}{italicWord && <> <span style={{ fontStyle: "italic", color: "var(--accent)" }}>{italicWord}</span></>}
            </h1>
          </div>
          {blurb && (
            <div>
              <p style={{ fontSize: 14.5, lineHeight: 1.75, color: "var(--fg-soft)", maxWidth: 460 }}>{blurb}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Section({ title, italic, children, bg = "var(--bg)", id }) {
  return (
    <section id={id} style={{ padding: "80px 0", background: bg }}>
      <div className="wrap">
        {title && (
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "0 0 32px", color: "var(--fg)" }}>
            {title}{italic && <> <span style={{ fontStyle: "italic", color: "var(--brand)" }}>{italic}</span></>}
          </h2>
        )}
        {children}
      </div>
    </section>
  );
}

function Prose({ children }) {
  return (
    <div style={{ maxWidth: 720, fontSize: 14.5, lineHeight: 1.85, color: "var(--fg-soft)" }}>
      {children}
    </div>
  );
}

// ============================================================================
// About / Heritage
// ============================================================================

function AboutPage() {
  return (
    <div data-screen-label="About">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Our Story"
          eyebrow="Dharohar · Heritage"
          title="Three generations,"
          italicWord="one workshop."
          blurb="Sunehra has been making bridal heirlooms in Johari Bazaar, Jaipur since 1947 — across three generations of the Soni family and forty-two karigars in continuous practice."/>

        <Section>
          <div className="grid-heritage">
            <Ph src={IMG.workshop} cap="atelier · johari bazaar" tag="dharohar / 01" style={{ aspectRatio: "4/5" }}/>
            <Prose>
              <p>Founded by Pandit Hariram Soni in 1947, Sunehra was the first jewellery house in Rajasthan to receive the BIS hallmark, in 1981. Our karigars practise jadau and meenakari passed down from the Mughal court — every stone set by hand, every gold sheet beaten to the breath of a leaf.</p>
              <p>Today the house is run by Hariram's grandson, Vinod Soni, with his daughter Riya leading the design studio. We have ateliers in seven Indian cities, but every piece is still made in Jaipur, by the same eleven master karigars whose families have been with us for three generations or more.</p>
              <p>We do not sell online. Every Sunehra piece is fitted, weighed, and handed to its keeper in person, with tea, at one of our seven ateliers.</p>
            </Prose>
          </div>
        </Section>

        <Section bg="var(--bg-alt)" id="karigari">
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "0 0 12px" }}>
            Karigari — <span style={{ fontStyle: "italic", color: "var(--brand)" }}>the craft.</span>
          </h2>
          <p style={{ maxWidth: 640, fontSize: 14.5, lineHeight: 1.8, color: "var(--fg-soft)", marginBottom: 40 }}>
            Five crafts, each from a distinct lineage. We name them on every piece, on the certificate, and on the wall.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 18 }}>
            {[
              ["Polki", "Uncut diamond, set in lac and 22K gold backing. Rajasthani tradition since the 1500s."],
              ["Jadau", "Setting craft — stones held in gold without prongs, the way the Mughals taught us."],
              ["Meenakari", "Coloured enamel applied to the reverse of pieces. Bikaner school, four generations deep."],
              ["Temple", "South-Indian heritage. Devi and devta figures cast in 22K gold, often paired with rubies."],
              ["Solitaire", "Modern. GIA-certified diamonds set in platinum or 18K white gold by our Chennai team."],
            ].map(([name, desc]) => (
              <div key={name} style={{ padding: "22px 22px 26px", background: "var(--bg)", border: "1px solid var(--line)" }}>
                <div className="mono" style={{ fontSize: 9.5, color: "var(--brand)", marginBottom: 10 }}>◇ CRAFT</div>
                <div className="display" style={{ fontSize: 24, color: "var(--fg)", marginBottom: 10, fontStyle: "italic" }}>{name}</div>
                <div style={{ fontSize: 13, color: "var(--fg-soft)", lineHeight: 1.65 }}>{desc}</div>
              </div>
            ))}
          </div>
        </Section>

        <Section id="press">
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "0 0 32px" }}>
            In the <span style={{ fontStyle: "italic", color: "var(--brand)" }}>press.</span>
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 24 }}>
            {[
              ["Vogue India", "April 2026", "“Sunehra is the last temple jewellery house to still hammer its own gold sheet.”"],
              ["Harper's Bazaar", "Feb 2026", "“The Raagini rani-haar is the quietest revolution in bridal jewellery this decade.”"],
              ["Brides Today", "Dec 2025", "“If you want a true heirloom, you go to Johari Bazaar — and you go to Sunehra.”"],
            ].map(([pub, date, quote]) => (
              <div key={pub} style={{ padding: 22, border: "1px solid var(--line)", background: "var(--bg)" }}>
                <div className="display" style={{ fontSize: 22, fontStyle: "italic", color: "var(--brand)" }}>{pub}</div>
                <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginTop: 4 }}>{date.toUpperCase()}</div>
                <p style={{ marginTop: 14, fontSize: 13, lineHeight: 1.7, color: "var(--fg)", fontStyle: "italic" }}>{quote}</p>
              </div>
            ))}
          </div>
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

// ============================================================================
// Contact
// ============================================================================

function ContactPage() {
  const params = new URLSearchParams(window.location.search);
  const prefRef = params.get("ref") || "";
  const prefPiece = params.get("piece") || "";

  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [city, setCity] = useState("");
  const [interest, setInterest] = useState(prefPiece ? "specific" : "");
  const [ref, setRef] = useState(prefRef);
  const [note, setNote] = useState(prefPiece ? `I'd like to enquire about the ${prefPiece}.` : "");
  const [sent, setSent] = useState(false);

  function submit(e) {
    e.preventDefault();
    // No backend — we just acknowledge. A real deploy would post to a form
    // service (Formspree, Vercel function, etc.). We keep it client-side.
    setSent(true);
  }

  return (
    <div data-screen-label="Contact">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Contact"
          eyebrow="Niji Sampark · Enquire"
          title="We'd love to"
          italicWord="hear from you."
          blurb="Tell us which piece you'd like to see, when you'd like to visit, and which atelier suits you. Our concierge replies within four hours, every day."/>

        <Section>
          <div className="grid-2" style={{ alignItems: "start" }}>
            {/* Form */}
            <div style={{ padding: 32, border: "1px solid var(--line)", background: "var(--bg)" }}>
              {sent ? (
                <div style={{ padding: "40px 0", textAlign: "center" }}>
                  <div className="display" style={{ fontSize: 36, fontStyle: "italic", color: "var(--brand)" }}>Thank you.</div>
                  <p style={{ marginTop: 16, color: "var(--fg-soft)", maxWidth: 380, marginLeft: "auto", marginRight: "auto" }}>
                    Our concierge has received your note and will reply on the channel you provided within four hours.
                  </p>
                  <button onClick={() => setSent(false)} className="btn" style={{ marginTop: 28 }}>Send another →</button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="mono" style={{ fontSize: 9.5, color: "var(--brand)", marginBottom: 18 }}>◇ ENQUIRY FORM</div>
                  <Field label="Your name"  value={name}  setValue={setName}  required/>
                  <div className="grid-2-form">
                    <Field label="Phone"    value={phone} setValue={setPhone} required/>
                    <Field label="Email"    value={email} setValue={setEmail} type="email"/>
                  </div>
                  <Select label="Preferred atelier" value={city} setValue={setCity} options={[
                    "", "Mumbai · Kemps Corner", "Delhi · Chanakyapuri", "Jaipur · Johari Bazaar (Flagship)",
                    "Bangalore · Indiranagar", "Chennai · T. Nagar", "Hyderabad · Banjara Hills", "Kolkata · Park Street",
                  ]}/>
                  <Select label="I'd like to enquire about…" value={interest} setValue={setInterest} options={[
                    "", "Bridal trousseau", "A specific piece (ref below)", "Solitaire / engagement", "Custom commission", "Heirloom restoration", "Something else",
                  ]} optionValues={["", "bridal", "specific", "solitaire", "custom", "restoration", "other"]}/>
                  <Field label="Reference number (if you have one)" value={ref} setValue={setRef} placeholder="e.g. SUN-RGN-P1"/>
                  <Textarea label="Your note" value={note} setValue={setNote} rows={4}/>
                  <button type="submit" className="btn btn--filled" style={{ marginTop: 18, width: "100%", justifyContent: "center" }}>
                    Send enquiry →
                  </button>
                  <div className="mono" style={{ fontSize: 9, marginTop: 14, color: "var(--fg-soft)" }}>
                    Your details stay with our concierge — see our <a href="privacy.html" style={{ color: "var(--brand)" }}>privacy notice</a>.
                  </div>
                </form>
              )}
            </div>

            {/* Side info */}
            <div>
              <div style={{ marginBottom: 32 }}>
                <div className="mono" style={{ fontSize: 9.5, color: "var(--brand)", marginBottom: 8 }}>◇ FLAGSHIP</div>
                <div className="display" style={{ fontSize: 26, fontStyle: "italic", color: "var(--fg)" }}>Johari Bazaar, Jaipur</div>
                <div style={{ fontSize: 13, color: "var(--fg-soft)", marginTop: 8, lineHeight: 1.7 }}>
                  Haveli No. 12, Johari Bazaar,<br/>Jaipur, Rajasthan 302003<br/>India
                </div>
              </div>
              <ContactRow label="Concierge" value="+91 141 222 1947" href="tel:+911412221947"/>
              <ContactRow label="WhatsApp"  value="+91 98290 12345"  href="https://wa.me/919829012345"/>
              <ContactRow label="Email"     value="hello@sunehra.in"  href="mailto:hello@sunehra.in"/>
              <ContactRow label="Press"     value="press@sunehra.in"  href="mailto:press@sunehra.in"/>
              <ContactRow label="Hours"     value="11 am – 9 pm · all days"/>

              <div style={{ marginTop: 36, padding: 20, background: "var(--bg-alt)" }}>
                <div className="mono" style={{ fontSize: 9.5, color: "var(--brand)", marginBottom: 8 }}>◇ NOTE</div>
                <p style={{ margin: 0, fontSize: 13, lineHeight: 1.7, color: "var(--fg-soft)" }}>
                  Sunehra does not sell online. Every piece is fitted, weighed, and signed for in person at one of our seven ateliers. Walk-in welcome — appointment guarantees an unhurried hour with a stylist.
                </p>
              </div>
            </div>
          </div>
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

function Field({ label, value, setValue, type = "text", required, placeholder }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginBottom: 6 }}>{label.toUpperCase()}{required && " *"}</div>
      <input type={type} value={value} onChange={e => setValue(e.target.value)} required={required} placeholder={placeholder} style={{
        width: "100%", padding: "11px 12px", fontFamily: "var(--font-body)", fontSize: 14,
        background: "var(--bg-alt)", border: "1px solid var(--line)", color: "var(--fg)", borderRadius: 2,
      }}/>
    </label>
  );
}
function Select({ label, value, setValue, options, optionValues }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginBottom: 6 }}>{label.toUpperCase()}</div>
      <select value={value} onChange={e => setValue(e.target.value)} style={{
        width: "100%", padding: "11px 12px", fontFamily: "var(--font-body)", fontSize: 14,
        background: "var(--bg-alt)", border: "1px solid var(--line)", color: "var(--fg)", borderRadius: 2,
        appearance: "auto",
      }}>
        {options.map((o, i) => <option key={i} value={optionValues ? optionValues[i] : o}>{o || "Select…"}</option>)}
      </select>
    </label>
  );
}
function Textarea({ label, value, setValue, rows = 3 }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginBottom: 6 }}>{label.toUpperCase()}</div>
      <textarea value={value} onChange={e => setValue(e.target.value)} rows={rows} style={{
        width: "100%", padding: "11px 12px", fontFamily: "var(--font-body)", fontSize: 14,
        background: "var(--bg-alt)", border: "1px solid var(--line)", color: "var(--fg)", borderRadius: 2,
        resize: "vertical",
      }}/>
    </label>
  );
}
function ContactRow({ label, value, href }) {
  const inner = <span style={{ fontSize: 14, color: "var(--fg)" }}>{value}</span>;
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "12px 0", borderBottom: "1px solid var(--line)", gap: 14, flexWrap: "wrap" }}>
      <span className="mono" style={{ fontSize: 9.5, color: "var(--fg-soft)" }}>{label.toUpperCase()}</span>
      {href ? <a href={href} style={{ color: "var(--brand)" }}>{inner}</a> : inner}
    </div>
  );
}

// ============================================================================
// Stores
// ============================================================================

const STORES = [
  { id: "jaipur",    city: "Jaipur",    sub: "Flagship · est. 1947", addr: "Haveli No. 12, Johari Bazaar", state: "Rajasthan 302003", phone: "+91 141 222 1947", hours: "11 am – 9 pm · all days" },
  { id: "mumbai",    city: "Mumbai",    sub: "Kemps Corner",         addr: "Ground Floor, Sandbox House, Pedder Road", state: "Maharashtra 400026", phone: "+91 22 6789 1947", hours: "11 am – 8.30 pm" },
  { id: "delhi",     city: "Delhi",     sub: "Chanakyapuri",          addr: "Shop 4, Santushti Complex, Race Course Road", state: "Delhi 110021", phone: "+91 11 2412 1947", hours: "11 am – 8.30 pm" },
  { id: "bangalore", city: "Bangalore", sub: "Indiranagar",           addr: "100 Feet Road, 12th Main, Indiranagar", state: "Karnataka 560038", phone: "+91 80 4112 1947", hours: "11 am – 9 pm" },
  { id: "chennai",   city: "Chennai",   sub: "T. Nagar",              addr: "Pondy Bazaar, T. Nagar", state: "Tamil Nadu 600017", phone: "+91 44 4212 1947", hours: "10.30 am – 9 pm" },
  { id: "hyderabad", city: "Hyderabad", sub: "Banjara Hills",         addr: "Road No. 12, Banjara Hills", state: "Telangana 500034", phone: "+91 40 4012 1947", hours: "11 am – 9 pm" },
  { id: "kolkata",   city: "Kolkata",   sub: "Park Street",           addr: "23, Park Street, Camac Street Crossing", state: "West Bengal 700016", phone: "+91 33 4012 1947", hours: "11 am – 8.30 pm" },
];

function StoresPage() {
  return (
    <div data-screen-label="Stores">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Stores"
          eyebrow="Niji Anubhav · Visit"
          title="Seven cities,"
          italicWord="one workshop."
          blurb="Every Sunehra atelier shares the same catalogue — pieces are couriered between cities so you can try anything, anywhere, with a day's notice."/>

        <Section>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
            {STORES.map((s) => (
              <div key={s.id} id={s.id} style={{ padding: 26, border: "1px solid var(--line)", background: "var(--bg)" }}>
                <div className="mono" style={{ fontSize: 9.5, color: "var(--brand)", marginBottom: 8 }}>◇ {s.sub.toUpperCase()}</div>
                <div className="display" style={{ fontSize: 32, fontStyle: "italic", color: "var(--fg)", marginBottom: 12 }}>{s.city}</div>
                <div style={{ fontSize: 13, lineHeight: 1.7, color: "var(--fg-soft)" }}>
                  {s.addr}<br/>{s.state}
                </div>
                <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                  <ContactRow label="Phone" value={s.phone} href={`tel:${s.phone.replace(/\s/g, "")}`}/>
                  <ContactRow label="Hours" value={s.hours}/>
                </div>
                <a href={`contact.html?ref=&piece=${encodeURIComponent("Visit · " + s.city)}`} className="btn btn--sm" style={{ marginTop: 18, width: "100%", justifyContent: "center" }}>
                  Book a viewing →
                </a>
              </div>
            ))}
          </div>
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

// ============================================================================
// Care (Hallmark, Buyback, Insurance, FAQ)
// ============================================================================

function CarePage() {
  return (
    <div data-screen-label="Care">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Care &amp; Promise"
          eyebrow="Vachan · Promise"
          title="A jewel for"
          italicWord="three generations."
          blurb="Every Sunehra piece comes with a hallmark, a certificate, an insurance valuation, and a lifetime buyback contract. Quietly indexed, signed, and recorded."/>

        <Section id="hallmark" title="Hallmark" italic="& certification.">
          <Prose>
            <p>Every Sunehra gold piece is hallmarked by the Bureau of Indian Standards (BIS), the government certifier, before it leaves the atelier. 22K gold reads <strong>916</strong>, 18K reads <strong>750</strong>. The hallmark is laser-stamped on a discreet edge so it does not show when worn.</p>
            <p>Every diamond over 0.10 ct is GIA-graded; the certificate accompanies the piece. Pearls and uncut diamonds come with our own house valuation, signed by Vinod Soni.</p>
          </Prose>
        </Section>

        <Section id="buyback" bg="var(--bg-alt)" title="Buyback" italic="in perpetuity.">
          <Prose>
            <p>Sunehra will buy back any gold piece we have sold, at 100% of the current gold value (by weight, by purity) — for the lifetime of the piece. There is no expiry, no condition. Diamonds and stones are bought back at the original certified valuation.</p>
            <p>To redeem, bring the piece to any Sunehra atelier with the original certificate. We weigh, verify, and credit you in 24 hours.</p>
          </Prose>
        </Section>

        <Section id="insurance" title="Insurance" italic="valuation.">
          <Prose>
            <p>Every piece sold comes with an insurance valuation document — a formal letter on Sunehra letterhead, signed and stamped — that you can submit to your insurer. The valuation is refreshed every three years at no cost.</p>
          </Prose>
        </Section>

        <Section id="care" bg="var(--bg-alt)" title="Day-to-day" italic="care.">
          <ul style={{ maxWidth: 720, paddingLeft: 20, fontSize: 14.5, lineHeight: 1.9, color: "var(--fg-soft)" }}>
            <li>Store each piece in its own velvet trunk to prevent scratching.</li>
            <li>Avoid perfume, lotion, and chlorinated water — they tarnish 22K gold quickly.</li>
            <li>Clean only with the soft cloth we provide. For deep cleaning, return to any Sunehra atelier.</li>
            <li>Complimentary servicing — polishing, re-stringing, prong-tightening — every 12 months, at any atelier, for the life of the piece.</li>
          </ul>
        </Section>

        <Section id="faq" title="Common" italic="questions.">
          <FAQ items={[
            ["Can I buy online?", "No. Sunehra is a heritage catalogue — every piece is sold, fitted, and handed over in person at one of our seven ateliers. The catalogue you see online is what's on display. Quote the reference number when you visit."],
            ["How do I see prices?", "Bridal and high-jewellery pieces are quoted on enquiry — gold rates and stone certifications change weekly, and we'd rather quote you the exact piece on the day. Use the contact form, or ask at any atelier."],
            ["What does the reference number mean?", "Every piece in the catalogue has a unique reference like SUN-RGN-P1 (House · Collection · Piece). Quote it when you visit and we'll have the piece ready for you to try on."],
            ["Can I commission a custom piece?", "Yes. We accept twelve custom commissions a year, with a minimum eighteen-week lead. Book a consultation at any atelier or via the contact form."],
            ["Do you ship internationally?", "Only to Sunehra clients who have already visited an atelier. After your first piece, subsequent commissions can be shipped, insured, anywhere in the world."],
            ["Is the buyback really lifetime?", "Yes. 100% of current gold value, perpetual. Three generations of Sunehra brides have redeemed pieces from the original 1947 collection."],
          ]}/>
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div style={{ maxWidth: 820 }}>
      {items.map(([q, a], i) => (
        <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
          <button onClick={() => setOpen(open === i ? -1 : i)} style={{
            all: "unset", cursor: "pointer", width: "100%",
            display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
            padding: "20px 0",
          }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--fg)" }}>{q}</span>
            <span style={{ fontSize: 22, color: "var(--brand)", lineHeight: 1 }}>{open === i ? "−" : "+"}</span>
          </button>
          {open === i && (
            <div style={{ paddingBottom: 22, fontSize: 14, lineHeight: 1.8, color: "var(--fg-soft)", maxWidth: 680 }}>
              {a}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ============================================================================
// Privacy
// ============================================================================

function PrivacyPage() {
  return (
    <div data-screen-label="Privacy">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Privacy"
          eyebrow="Niji Suchana · Privacy"
          title="Your details"
          italicWord="stay with us."
          blurb="A short, plain-English summary of what we collect, why, and what we don't do with it."/>

        <Section>
          <Prose>
            <p className="mono" style={{ fontSize: 10, color: "var(--fg-soft)" }}>LAST UPDATED · MAY 2026</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>What we collect</h3>
            <p>When you enquire about a piece or book a viewing, we collect: name, phone, email, the city you'd like to visit, and the reference number of the piece you're enquiring about. That's it.</p>
            <p>We don't run analytics that personally identify you. We don't drop advertising cookies. We don't sell or share your details with anyone outside Sunehra.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>Why we collect it</h3>
            <p>So our concierge can call or write back within four hours, and so the atelier you choose can have the piece ready when you visit.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>How long we keep it</h3>
            <p>Enquiry records are kept for 24 months. Client records (once you've purchased a piece) are kept for the lifetime of the piece — that's part of the buyback contract.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>Cookies</h3>
            <p>We use one functional cookie to remember your colour theme and font preference. No tracking cookies.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>Your rights</h3>
            <p>You can ask us to delete or export everything we have on you at any time. Write to <a href="mailto:privacy@sunehra.in" style={{ color: "var(--brand)" }}>privacy@sunehra.in</a> and we'll respond within seven days. This is your right under the Digital Personal Data Protection Act, 2023.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>Who you talk to</h3>
            <p>Riya Soni is our designated Data Protection Officer. <a href="mailto:dpo@sunehra.in" style={{ color: "var(--brand)" }}>dpo@sunehra.in</a> · +91 141 222 1947.</p>
          </Prose>
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

// ============================================================================
// Terms
// ============================================================================

function TermsPage() {
  return (
    <div data-screen-label="Terms">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Terms"
          eyebrow="Niyam · Terms"
          title="Terms of"
          italicWord="use."
          blurb="The terms that govern your use of this catalogue — written in plain language, because Sunehra is a showcase of our craft, not an online shop."/>

        <Section>
          <Prose>
            <p className="mono" style={{ fontSize: 10, color: "var(--fg-soft)" }}>LAST UPDATED · MAY 2026</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>1. The catalogue</h3>
            <p>sunehra.in is a digital catalogue of pieces designed and made by Sunehra Jewellers Pvt. Ltd. (GST 08AABCS1234F1Z9, Jaipur). Nothing on this site is offered for sale online — every transaction happens at one of our seven ateliers, in person.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>2. Imagery & descriptions</h3>
            <p>Photographs are representative. Each handmade piece varies slightly — weight is ±3%, stone size ±0.2 mm — and we describe the piece you're actually buying on its certificate, in person, before any payment.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>3. Pricing</h3>
            <p>Prices are not published. Gold rates and stone certifications change weekly; we quote on the day, at the atelier, in writing.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>4. Buyback &amp; insurance</h3>
            <p>The buyback contract and the insurance valuation are detailed on the <a href="care.html" style={{ color: "var(--brand)" }}>Care &amp; Promise</a> page and on the certificate that ships with every piece. The contract on the certificate prevails over anything here.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>5. Intellectual property</h3>
            <p>All photography, sketches, copy, and trade dress on this site belong to Sunehra Jewellers Pvt. Ltd. The designs themselves — Raagini, Vivaha, Vamika and all named collections — are registered trademarks. Please ask before reproducing.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>6. Disputes</h3>
            <p>If anything goes wrong, write to <a href="mailto:hello@sunehra.in" style={{ color: "var(--brand)" }}>hello@sunehra.in</a> first — most things are resolved over a phone call. Formal disputes are heard in the courts of Jaipur, Rajasthan.</p>

            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg)", marginTop: 36 }}>7. Changes</h3>
            <p>We'll update this page when we change anything that affects you, and re-stamp the date at the top.</p>
          </Prose>
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

// ============================================================================
// Wishlist (Saved pieces) — localStorage-backed, no server
// ============================================================================

function WishlistPage() {
  const wishlist = useWishlist();
  const items = wishlist.ids
    .map(id => CATALOG_BY_ID[id])
    .filter(Boolean);

  const enquireHref = items.length
    ? `contact.html?piece=${encodeURIComponent("My saved pieces: " + items.map(p => `${p.name} (SUN-${p.id.toUpperCase()})`).join(", "))}`
    : "contact.html";

  return (
    <div data-screen-label="Wishlist">
      <AnnouncementBar/>
      <Header/>
      <main>
        <PageHero
          breadcrumb="Saved"
          eyebrow="Pasand · Saved"
          title="Your saved"
          italicWord="pieces."
          blurb="Pieces you've saved while browsing — kept on this device. Bring this list, or the reference numbers, to any of our seven ateliers."/>

        <Section>
          {items.length === 0 ? (
            <div style={{ padding: "60px 0 80px", textAlign: "center" }}>
              <div className="display" style={{ fontSize: 34, fontStyle: "italic", color: "var(--brand)", marginBottom: 12 }}>
                Nothing saved yet.
              </div>
              <p style={{ color: "var(--fg-soft)", maxWidth: 420, margin: "0 auto 28px", lineHeight: 1.7 }}>
                Tap the ♡ on any piece in the catalogue to keep it here. Your saved list lives on this device — no account needed.
              </p>
              <a href="collections.html?cat=bridal" className="btn btn--filled">Browse the catalogue →</a>
            </div>
          ) : (
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginBottom: 32 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--fg-soft)" }}>
                  {items.length} {items.length === 1 ? "PIECE" : "PIECES"} SAVED
                </span>
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <a href={enquireHref} className="btn btn--sm btn--filled">Enquire about these →</a>
                  <button onClick={() => { if (confirm("Remove all saved pieces?")) saveWishlistIds([]); }} className="btn btn--sm">
                    Clear all
                  </button>
                </div>
              </div>

              <div className="grid-products" style={{ "--cols": 3 }}>
                {items.map(p => (
                  <div key={p.id} style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
                    <a href={`product.html?id=${p.id}`} style={{ display: "block", position: "relative" }}>
                      <Ph variant={p.v} src={p.img} imgSize={500} tag={p.id} style={{ aspectRatio: "4/5" }}/>
                    </a>
                    <button
                      onClick={() => wishlist.toggle(p.id)}
                      aria-label="Remove from saved"
                      style={{
                        position: "absolute", top: 14, right: 14, zIndex: 2,
                        width: 36, height: 36, borderRadius: "50%",
                        background: "rgba(248, 241, 229, .92)", border: "none",
                        color: "var(--brand)", cursor: "pointer", fontSize: 16,
                        display: "flex", alignItems: "center", justifyContent: "center",
                      }}>♥</button>
                    <a href={`product.html?id=${p.id}`}>
                      <div className="mono" style={{ fontSize: 9, color: "var(--fg-soft)", marginBottom: 4 }}>
                        {p.metal.toUpperCase()} · {p.weight}G · SUN-{p.id.toUpperCase()}
                      </div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 19, lineHeight: 1.15, color: "var(--fg)" }}>
                        {p.name}
                      </div>
                      <div style={{ fontSize: 11, color: "var(--fg-soft)", marginTop: 4 }}>{p.type}</div>
                    </a>
                  </div>
                ))}
              </div>
            </div>
          )}
        </Section>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

// ============================================================================
// Router — pick the page by filename
// ============================================================================

const PAGES = {
  "about.html":    AboutPage,
  "contact.html":  ContactPage,
  "stores.html":   StoresPage,
  "care.html":     CarePage,
  "privacy.html":  PrivacyPage,
  "terms.html":    TermsPage,
  "wishlist.html": WishlistPage,
};

function pickPage() {
  const path = window.location.pathname.split("/").filter(Boolean).pop() || "";
  return PAGES[path] || AboutPage;
}

const Page = pickPage();
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);
