// Sunehra — Homepage
// Bridal-opulent jewellery house, lookbook style.
// Shared primitives (Header, Footer, AnnouncementBar, Ph, useReveal, SunehraTweaks)
// come from shared.jsx via window globals.

const { useState, useEffect, useRef } = React;

// ============================ Hero ============================

function Hero() {
  const ref = useReveal();
  return (
    <section style={{ position: "relative", background: "var(--bg)" }}>
      <div className="grid-hero">
        {/* Left — editorial copy */}
        <div ref={ref} className="reveal hero-left" style={{
          display: "flex", flexDirection: "column", justifyContent: "center",
          padding: "60px 60px 60px var(--gutter)",
          position: "relative",
        }}>
          <span className="eyebrow" style={{ color: "var(--metal-deep, var(--brand))", marginBottom: 28 }}>
            ❋ &nbsp; The Vivaha Edit · Spring 2026
          </span>
          <h1 className="display" style={{
            fontSize: "clamp(56px, 7.2vw, 112px)",
            margin: 0,
            color: "var(--brand)",
            fontWeight: 400,
          }}>
            Heirlooms<br/>
            <span style={{ fontStyle: "italic", color: "var(--accent)" }}>in the making.</span>
          </h1>
          <p style={{
            maxWidth: 440, marginTop: 32,
            fontSize: 15.5, lineHeight: 1.7,
            color: "var(--fg-soft)",
          }}>
            Seventy-nine years of jadau, meenakari, and polki — handcrafted in Jaipur for the brides, the daughters, and the keepers of stories. Each piece carries a name, a maker, and a hallmark you can trace.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 44, flexWrap: "wrap" }}>
            <a href="collections.html?cat=bridal" className="btn btn--filled">
              Explore the Bridal Edit
              <span style={{ fontSize: 14 }}>→</span>
            </a>
            <a href="#appointment" className="btn">Book a Private Viewing</a>
          </div>

          {/* Trust marks */}
          <div className="trust-marks" style={{
            display: "flex", gap: 28, alignItems: "center",
            marginTop: 56, paddingTop: 28, borderTop: "1px solid var(--line)",
            flexWrap: "wrap",
          }}>
            {[
              ["BIS", "Hallmarked"],
              ["GIA", "Certified Diamonds"],
              ["100%", "Buyback Guarantee"],
            ].map(([k, v], i) => (
              <div key={i} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span className="display" style={{ fontSize: 18, color: "var(--brand)", letterSpacing: ".06em" }}>{k}</span>
                <span className="mono" style={{ fontSize: 9 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Right — full bleed image */}
        <div style={{ position: "relative", overflow: "hidden" }}>
          <Ph variant="" src={IMG.hero} imgSize={1400} imgPriority cap="bridal model · Sunehra Kundan set" tag="hero / 01"
              style={{ width: "100%", height: "100%" }}>
            {/* Floating product tag */}
            <div style={{
              position: "absolute", right: 36, top: 80,
              background: "rgba(248, 241, 229, .94)",
              padding: "18px 22px",
              borderRadius: 2,
              display: "flex", flexDirection: "column", gap: 6,
              width: 268,
              boxShadow: "0 16px 40px rgba(0,0,0,.25)",
              transform: "rotate(1deg)",
            }}>
              <span className="mono" style={{ fontSize: 9, color: "var(--brand)" }}>◇ FEATURED · WORN ABOVE</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 21, color: "var(--ink)", lineHeight: 1.2, letterSpacing: "-.005em" }}>
                Raagini Polki Rani&#8209;Haar
              </span>
              <span style={{ fontSize: 11, color: "var(--fg-soft)" }}>
                22K Gold · Uncut Diamond · Pearl
              </span>
              <a href="product.html" style={{
                marginTop: 8, fontSize: 10, letterSpacing: ".24em",
                textTransform: "uppercase", color: "var(--brand)",
                borderTop: "1px solid var(--line)", paddingTop: 8,
              }}>View piece →</a>
            </div>

            {/* Bottom credit strip */}
            <div style={{
              position: "absolute", left: 36, bottom: 36, right: 36,
              display: "flex", justifyContent: "space-between", alignItems: "flex-end",
              color: "rgba(248, 241, 229, .85)",
            }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span className="mono" style={{ fontSize: 9, color: "rgba(248,241,229,.6)" }}>EDITORIAL · VOL XII</span>
                <span className="display" style={{ fontSize: 26, fontStyle: "italic", color: "var(--metal-soft)" }}>
                  Ananya, in her mother's set.
                </span>
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                {[1, 2, 3, 4].map(n => (
                  <div key={n} style={{
                    width: 24, height: 1,
                    background: n === 1 ? "var(--metal-soft)" : "rgba(248,241,229,.3)",
                  }}/>
                ))}
              </div>
            </div>
          </Ph>
        </div>
      </div>
    </section>
  );
}

// ============================ Category rail ============================

const CATEGORIES = [
  { name: "Rings",        sub: "Anguthi",     count: 142, slug: "rings",       img: IMG.catRings },
  { name: "Necklaces",    sub: "Haar",        count: 218, slug: "necklaces",   img: IMG.catNecklaces },
  { name: "Earrings",     sub: "Jhumka",      count: 186, slug: "earrings",    img: IMG.catEarrings },
  { name: "Bangles",      sub: "Kangan",      count: 94,  slug: "bangles",     img: IMG.catBangles },
  { name: "Mangalsutra",  sub: "Sacred",      count: 62,  slug: "mangalsutra", img: IMG.catMangalsutra },
  { name: "Nose Pins",    sub: "Nath",        count: 38,  slug: "nosepins",    img: IMG.catNosepins },
  { name: "Anklets",      sub: "Payal",       count: 47,  slug: "anklets",     img: IMG.catAnklets },
];

function CategoryRail() {
  const ref = useReveal();
  const phVariants = ["gold", "emerald", "", "ivory", "ink", "gold", "emerald"];
  return (
    <section ref={ref} className="reveal" style={{ padding: "120px 0 80px" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 24 }}>
          <div style={{ flex: "1 1 480px", minWidth: 0 }}>
            <span className="eyebrow" style={{ color: "var(--brand)" }}>◈ &nbsp; Aabhushan · Categories</span>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", margin: "16px 0 0", color: "var(--fg)" }}>
              Every chapter <span style={{ fontStyle: "italic", color: "var(--accent)" }}>of a life</span>, in metal & stone.
            </h2>
          </div>
          <a href="collections.html" className="btn btn--sm" style={{ flex: "0 0 auto" }}>All Collections →</a>
        </div>

        <div className="grid-cats">
          {CATEGORIES.map((c, i) => (
            <a key={c.slug} href={`collections.html?cat=${c.slug}`} style={{
              display: "flex", flexDirection: "column", gap: 12,
              transition: "transform .4s ease",
            }}
              onMouseEnter={e => e.currentTarget.style.transform = "translateY(-6px)"}
              onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}>
              <Ph variant={phVariants[i]} src={c.img} imgSize={500} tag={String(i+1).padStart(2,"0")} cap={c.sub}
                  style={{
                    borderRadius: "200px 200px 6px 6px",
                    aspectRatio: "3/4.2",
                  }}>
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <div style={{
                    width: 60, height: 60, borderRadius: "50%",
                    border: "1px solid rgba(255, 220, 150, .35)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "rgba(255,220,150,.6)",
                  }}>
                    <Diamond size={14}/>
                  </div>
                </div>
              </Ph>
              <div style={{ textAlign: "center" }}>
                <div className="display" style={{ fontSize: 22, color: "var(--fg)", lineHeight: 1.1 }}>{c.name}</div>
                <div className="mono" style={{ fontSize: 9.5, marginTop: 4 }}>{c.count} pieces</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================ Featured Vivaha edit ============================

function FeaturedCollection() {
  const ref = useReveal();
  const pieces = [
    { name: "Raagini Rani-Haar",  type: "Polki Necklace",  v: "gold",    span: "1 / span 2", row: "1 / span 2", ar: "4/5", img: IMG.featRaniHaar },
    { name: "Jhilmil Chandbali",  type: "Jadau Earrings",  v: "emerald", span: "3", row: "1", ar: "1/1",                    img: IMG.featChandbali },
    { name: "Surya Tikka",         type: "Temple Gold",     v: "ivory",   span: "4", row: "1", ar: "1/1",                    img: IMG.featTikka },
    { name: "Kalashri Kangan",     type: "22K + Kundan",    v: "ink",     span: "3", row: "2", ar: "1/1",                    img: IMG.featKangan },
    { name: "Vamika Solitaire",   type: "GIA Diamond",     v: "",        span: "4", row: "2", ar: "1/1",                    img: IMG.featSolitaire },
  ];
  return (
    <section ref={ref} className="reveal" style={{
      background: "var(--ink)", color: "var(--ivory)", padding: "120px 0",
      position: "relative", overflow: "hidden",
    }}>
      {/* Decorative arch motif */}
      <svg width="100%" height="60" viewBox="0 0 1440 60" preserveAspectRatio="none"
           style={{ position: "absolute", top: 0, left: 0, opacity: .3 }}>
        <path d="M0,60 Q360,0 720,30 T1440,60" stroke="var(--metal)" strokeWidth=".5" fill="none"/>
      </svg>

      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <span className="eyebrow" style={{ color: "var(--metal-soft)" }}>The Edit · Spring 2026</span>
          <h2 className="display" style={{
            fontSize: "clamp(56px, 7vw, 104px)", margin: "20px 0 16px",
            color: "var(--ivory)", fontStyle: "italic",
          }}>
            Vivaha
          </h2>
          <div className="divider-ornament" style={{ color: "var(--metal-soft)", maxWidth: 360, margin: "0 auto 16px" }}>
            <Diamond size={8} color="var(--metal-soft)"/>
          </div>
          <p style={{ maxWidth: 480, margin: "0 auto", color: "rgba(248,241,229,.7)", fontSize: 14, lineHeight: 1.75 }}>
            Twenty-three pieces composed for the seven pheras. Built around the rani-haar, finished by the nath, witnessed in gold.
          </p>
        </div>

        <div className="grid-featured">
          {pieces.map((p, i) => (
            <a key={i} href="product.html" className={i === 0 ? "featured-hero" : "featured-tile"} style={{
              gridColumn: p.span, gridRow: p.row,
              position: "relative", display: "block",
              border: "1px solid rgba(212,168,90,.18)",
            }}>
              <Ph variant={p.v} src={p.img} tag={`vivaha / ${String(i+1).padStart(2,"0")}`}
                  style={{ aspectRatio: p.ar, width: "100%", height: "100%" }}>
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", alignItems: "flex-end", padding: 22,
                  background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65) 100%)",
                }}>
                  <div style={{ width: "100%", minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: i === 0 ? 30 : 18, color: "var(--ivory)", lineHeight: 1.15, fontWeight: 400 }}>
                      {p.name}
                    </div>
                    <div className="mono" style={{ fontSize: 9.5, color: "var(--metal-soft)", marginTop: 8 }}>{p.type}</div>
                  </div>
                </div>
                <div style={{
                  position: "absolute", top: 14, right: 14,
                  width: 32, height: 32, borderRadius: "50%",
                  background: "rgba(248, 241, 229, .12)",
                  backdropFilter: "blur(8px)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "var(--ivory)", fontSize: 14,
                  border: "1px solid rgba(248,241,229,.2)",
                }}>♡</div>
              </Ph>
            </a>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a href="collections.html?cat=bridal" className="btn btn--ghost">View All 23 Pieces →</a>
        </div>
      </div>
    </section>
  );
}

// ============================ Heritage editorial ============================

function HeritageStory() {
  const ref = useReveal();
  return (
    <section ref={ref} id="heritage" className="reveal" style={{ padding: "140px 0", background: "var(--bg)" }}>
      <div className="wrap grid-heritage">
        <div style={{ position: "relative" }}>
          <Ph variant="emerald" src={IMG.workshop} tag="dharohar / atelier" cap="workshop · jaipur · since 1947"
              style={{ aspectRatio: "4/5" }}/>
          <Ph variant="gold" src={IMG.craftHand} tag="craft / hand"
              cap="22k jadau setting"
              style={{
                position: "absolute", bottom: -50, right: -50,
                width: "55%", aspectRatio: "1/1",
                border: "6px solid var(--bg)",
              }}/>
        </div>

        <div>
          <span className="eyebrow" style={{ color: "var(--brand)" }}>◈ &nbsp; Dharohar · Heritage</span>
          <h2 className="display" style={{
            fontSize: "clamp(40px, 4.8vw, 64px)",
            margin: "16px 0 28px",
            color: "var(--fg)", lineHeight: 1.05,
          }}>
            Three generations.<br/>
            <span style={{ fontStyle: "italic", color: "var(--brand)" }}>Forty-two karigars.</span><br/>
            One workshop, in Johari Bazaar.
          </h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.8, color: "var(--fg-soft)", maxWidth: 500 }}>
            Founded by Pandit Hariram Soni in 1947, Sunehra was the first house in Rajasthan to receive the BIS hallmark. 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>

          <div className="grid-stats" style={{
            marginTop: 48, paddingTop: 36, borderTop: "1px solid var(--line)",
          }}>
            {[
              ["79", "Years of practice"],
              ["12,400+", "Brides clothed"],
              ["42", "Master karigars"],
              ["7", "Atelier locations"],
            ].map(([k, v], i) => (
              <div key={i}>
                <div className="display" style={{ fontSize: 38, color: "var(--brand)", lineHeight: 1 }}>{k}</div>
                <div className="mono" style={{ fontSize: 10, marginTop: 6 }}>{v}</div>
              </div>
            ))}
          </div>

          <a href="#story" className="btn" style={{ marginTop: 44 }}>Read our story →</a>
        </div>
      </div>
    </section>
  );
}

// ============================ Materials rail ============================

const MATERIALS = [
  { name: "22K Gold",         sub: "Pure · Karigari", v: "gold",    icon: "Au", img: IMG.matGold },
  { name: "Diamond",          sub: "GIA · VVS",       v: "ivory",   icon: "◆",  img: IMG.matDiamond },
  { name: "Silver",           sub: "925 Pure",        v: "ink",     icon: "Ag", img: IMG.matSilver },
  { name: "Temple Jewellery", sub: "South Heritage",  v: "emerald", icon: "卐", img: IMG.matTemple },
  { name: "Platinum",         sub: "950 · Pt",        v: "",        icon: "Pt", img: IMG.matPlatinum },
];

function MaterialsRail() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ padding: "100px 0", background: "var(--bg-alt)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--brand)" }}>◈ &nbsp; Dhatu · Materials</span>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 56px)", margin: "16px 0 0", color: "var(--fg)" }}>
              Shop by <span style={{ fontStyle: "italic", color: "var(--accent)" }}>material</span>.
            </h2>
          </div>
          <p style={{ maxWidth: 320, fontSize: 13, color: "var(--fg-soft)", lineHeight: 1.7 }}>
            Five metals and stones, each with their own caste of craftsmen, certifications, and centuries.
          </p>
        </div>

        <div className="grid-mat">
          {MATERIALS.map((m, i) => (
            <a key={i} href={`collections.html?material=${m.name.toLowerCase()}`} style={{
              display: "block", position: "relative",
              transition: "transform .4s ease",
            }}
              onMouseEnter={e => e.currentTarget.querySelector('.mat-overlay').style.opacity = '1'}
              onMouseLeave={e => e.currentTarget.querySelector('.mat-overlay').style.opacity = '0'}>
              <Ph variant={m.v} src={m.img} imgSize={500} style={{ aspectRatio: "3/4" }} tag={`m / ${String(i+1).padStart(2,"0")}`}>
                {/* Big icon */}
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-display)", fontSize: 84,
                  color: m.v === "ivory" ? "rgba(31,20,16,.18)" : "rgba(255,220,150,.22)",
                  fontStyle: "italic",
                }}>{m.icon}</div>
                {/* Hover overlay */}
                <div className="mat-overlay" style={{
                  position: "absolute", inset: 0, opacity: 0,
                  background: "rgba(15, 77, 58, .82)",
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                  color: "var(--ivory)", transition: "opacity .35s ease", padding: 20, textAlign: "center",
                }}>
                  <span className="display" style={{ fontSize: 28, fontStyle: "italic" }}>Explore</span>
                  <div className="mono" style={{ fontSize: 9.5, marginTop: 8, color: "var(--metal-soft)" }}>→ {m.name}</div>
                </div>
                <div style={{
                  position: "absolute", left: 16, bottom: 16, color: "var(--ivory)",
                }}>
                  <div className="display" style={{ fontSize: 22, lineHeight: 1.1, color: m.v === "ivory" ? "var(--ink)" : "var(--ivory)" }}>
                    {m.name}
                  </div>
                  <div className="mono" style={{ fontSize: 9.5, color: m.v === "ivory" ? "rgba(31,20,16,.55)" : "var(--metal-soft)", marginTop: 4 }}>{m.sub}</div>
                </div>
              </Ph>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================ Bridal lookbook ============================

function Lookbook() {
  const ref = useReveal();
  const looks = [
    { title: "The Pheras",  sub: "Look 01", v: "",        h: 580, img: IMG.lookPheras },
    { title: "The Mehendi", sub: "Look 02", v: "emerald", h: 420, img: IMG.lookMehendi },
    { title: "The Sangeet", sub: "Look 03", v: "gold",    h: 500, img: IMG.lookSangeet },
    { title: "The Vidaai",  sub: "Look 04", v: "ivory",   h: 460, img: IMG.lookVidaai },
  ];
  return (
    <section ref={ref} className="reveal" style={{ padding: "140px 0", background: "var(--bg)" }}>
      <div className="wrap">
        <div className="grid-2" style={{ marginBottom: 64, alignItems: "end" }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--brand)" }}>◈ &nbsp; Lookbook · Vol XII</span>
            <h2 className="display" style={{ fontSize: "clamp(48px, 6vw, 86px)", margin: "16px 0 0", color: "var(--fg)", lineHeight: 1 }}>
              Four days,<br/>
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>four sets,</span><br/>
              one bride.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 14, lineHeight: 1.75, color: "var(--fg-soft)", maxWidth: 420 }}>
              Photographed at Hawa Mahal, Jaipur. Styling by Sabyasachi Mukherjee. Featuring our 2026 bridal collection on Ananya Singhania.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 22, fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", flexWrap: "wrap" }}>
              <span style={{ color: "var(--brand)", whiteSpace: "nowrap" }}>VIEW FILM →</span>
              <span style={{ color: "var(--fg-soft)", whiteSpace: "nowrap" }}>SHOP THE EDIT</span>
            </div>
          </div>
        </div>

        <div className="lookbook-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 18, alignItems: "start",
        }}>
          <a href="product.html" style={{ gridColumn: "1 / span 5", marginTop: 60 }}>
            <Ph variant={looks[0].v} src={looks[0].img} cap="the pheras · raagini set" tag="lb / 01"
                style={{ aspectRatio: "4/5" }}/>
            <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between" }}>
              <span className="display" style={{ fontSize: 22, fontStyle: "italic" }}>{looks[0].title}</span>
              <span className="mono">{looks[0].sub}</span>
            </div>
          </a>
          <a href="product.html" style={{ gridColumn: "6 / span 4" }}>
            <Ph variant={looks[1].v} src={looks[1].img} cap="the mehendi · meena bangles" tag="lb / 02"
                style={{ aspectRatio: "3/4" }}/>
            <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between" }}>
              <span className="display" style={{ fontSize: 20, fontStyle: "italic" }}>{looks[1].title}</span>
              <span className="mono">{looks[1].sub}</span>
            </div>
          </a>
          <a href="product.html" style={{ gridColumn: "10 / span 3", marginTop: 80 }}>
            <Ph variant={looks[2].v} src={looks[2].img} cap="the sangeet · chandbali" tag="lb / 03"
                style={{ aspectRatio: "3/4.5" }}/>
            <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between" }}>
              <span className="display" style={{ fontSize: 19, fontStyle: "italic" }}>{looks[2].title}</span>
              <span className="mono">{looks[2].sub}</span>
            </div>
          </a>
          <a href="product.html" style={{ gridColumn: "3 / span 5", marginTop: 40 }}>
            <Ph variant={looks[3].v} src={looks[3].img} cap="the vidaai · vamika solitaire" tag="lb / 04"
                style={{ aspectRatio: "5/4" }}/>
            <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between" }}>
              <span className="display" style={{ fontSize: 22, fontStyle: "italic" }}>{looks[3].title}</span>
              <span className="mono">{looks[3].sub}</span>
            </div>
          </a>
          <div style={{ gridColumn: "8 / span 5", marginTop: 60, padding: "32px 0", borderTop: "1px solid var(--line)" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--brand)", marginBottom: 14 }}>SHOP BY LOOK</div>
            <div className="display" style={{ fontSize: 28, fontStyle: "italic", lineHeight: 1.2, color: "var(--fg)" }}>
              Tap any image to shop the pieces worn in that look — or book a private viewing to see them all.
            </div>
            <a href="#appointment" className="btn" style={{ marginTop: 24 }}>Book a viewing →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================ Appointment / atelier ============================

function Appointment() {
  return (
    <section id="appointment" style={{
      background: "var(--brand)", color: "var(--ivory)",
      padding: "100px 0", position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: -200, right: -200, width: 600, height: 600,
        background: "radial-gradient(circle, rgba(212,168,90,.18) 0%, transparent 60%)",
      }}/>
      <div style={{
        position: "absolute", bottom: -200, left: -100, width: 500, height: 500,
        background: "radial-gradient(circle, rgba(15,77,58,.25) 0%, transparent 60%)",
      }}/>
      <div className="wrap grid-appt" style={{ position: "relative" }}>
        <div>
          <span className="eyebrow" style={{ color: "var(--metal-soft)" }}>◈ &nbsp; Niji Anubhav · Private Viewing</span>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: "16px 0 24px", color: "var(--ivory)" }}>
            Visit us in <span style={{ fontStyle: "italic", color: "var(--metal-soft)" }}>seven cities.</span>
          </h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.8, color: "rgba(248,241,229,.78)", maxWidth: 480 }}>
            Step into our ateliers for unhurried tea, a personal sherwani-clad host, and the chance to try every piece. Custom commissions begin from 18 weeks.
          </p>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14,
            marginTop: 44,
            fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase",
          }}>
            {["Mumbai", "Delhi", "Jaipur", "Bangalore", "Chennai", "Hyderabad", "Kolkata"].map((c, i) => (
              <span key={c} style={{
                color: i === 2 ? "var(--metal-soft)" : "rgba(248,241,229,.7)",
                fontWeight: i === 2 ? 600 : 400,
              }}>{c}{i === 2 && " ★"}</span>
            ))}
          </div>
        </div>

        <div style={{
          background: "rgba(248, 241, 229, .04)",
          border: "1px solid rgba(212, 168, 90, .25)",
          padding: 40, borderRadius: 2,
          backdropFilter: "blur(8px)",
        }}>
          <div className="mono" style={{ fontSize: 9.5, color: "var(--metal-soft)", marginBottom: 24 }}>
            ◇ BOOK YOUR VIEWING
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 14 }}>
            <input className="input-field" placeholder="Your name" style={{
              background: "transparent", border: "1px solid rgba(248,241,229,.2)",
              color: "var(--ivory)",
            }}/>
            <input className="input-field" placeholder="Phone" style={{
              background: "transparent", border: "1px solid rgba(248,241,229,.2)",
              color: "var(--ivory)",
            }}/>
          </div>
          <select className="input-field" style={{
            background: "transparent", border: "1px solid rgba(248,241,229,.2)",
            color: "var(--ivory)", marginBottom: 14,
          }}>
            <option style={{ color: "var(--ink)" }}>Select city</option>
            <option style={{ color: "var(--ink)" }}>Mumbai · Kemps Corner</option>
            <option style={{ color: "var(--ink)" }}>Delhi · Chanakyapuri</option>
            <option style={{ color: "var(--ink)" }}>Jaipur · Johari Bazaar (Flagship)</option>
          </select>
          <select className="input-field" style={{
            background: "transparent", border: "1px solid rgba(248,241,229,.2)",
            color: "var(--ivory)", marginBottom: 24,
          }}>
            <option style={{ color: "var(--ink)" }}>I'm interested in...</option>
            <option style={{ color: "var(--ink)" }}>Bridal trousseau</option>
            <option style={{ color: "var(--ink)" }}>A solitaire engagement piece</option>
            <option style={{ color: "var(--ink)" }}>Heirloom restoration</option>
            <option style={{ color: "var(--ink)" }}>Custom commission</option>
          </select>
          <button className="btn btn--ghost" style={{ width: "100%", justifyContent: "center", borderColor: "var(--metal-soft)", color: "var(--metal-soft)" }}>
            Request Viewing →
          </button>
          <div className="mono" style={{ fontSize: 9, marginTop: 16, color: "rgba(248,241,229,.5)", textAlign: "center" }}>
            our concierge will respond within 4 hours
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================ Press strip ============================

function Press() {
  return (
    <section style={{ padding: "60px 0", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap" style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        flexWrap: "wrap", gap: 32,
      }}>
        <span className="mono" style={{ color: "var(--fg-soft)" }}>AS SEEN IN —</span>
        {["VOGUE INDIA", "HARPER'S BAZAAR", "ELLE", "FILMFARE", "BRIDES TODAY", "VERVE"].map((p, i) => (
          <span key={i} className="display" style={{
            fontSize: 19, color: "var(--fg)", fontStyle: i % 2 ? "italic" : "normal",
            letterSpacing: ".06em",
          }}>{p}</span>
        ))}
      </div>
    </section>
  );
}

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

function App() {
  return (
    <div data-screen-label="Home">
      <AnnouncementBar/>
      <Header/>
      <main>
        <Hero/>
        <Press/>
        <CategoryRail/>
        <FeaturedCollection/>
        <HeritageStory/>
        <MaterialsRail/>
        <Lookbook/>
        <Appointment/>
      </main>
      <Footer/>
      <SunehraTweaks/>
    </div>
  );
}

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