// Main page sections

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ───────────────────────────────────────────────────────────── HERO
function Hero({ onBook, onExplore }){
  const ref = useRefS(null);
  const [p, setP] = useStateS(0);
  useEffectS(()=>{
    const f=()=>{
      const y = window.scrollY;
      setP(Math.min(1, y/700));
    };
    window.addEventListener('scroll', f, {passive:true});
    return ()=>window.removeEventListener('scroll', f);
  },[]);
  return (
    <section ref={ref} className="grain" style={{position:'relative', minHeight:'100vh', background:'radial-gradient(ellipse at 65% 50%, #1f0d0d 0%, #0E0C0A 55%)', overflow:'hidden'}} data-screen-label="01 Hero">
      <div className="spotlight"></div>

      {/* Background hero image — silhouette w/ jewellery (rights-cleared d3 brand asset) */}
      <div style={{position:'absolute', right:0, top:0, bottom:0, width:'56%', backgroundImage:'url(media/d3-directory-card-pavit-gujral.webp)', backgroundSize:'cover', backgroundPosition:'center', opacity:.92, filter:'contrast(1.05) saturate(1.05)', transform:`translateY(${p*-40}px) scale(${1 + p*0.04})`, transition:'transform .1s linear', mixBlendMode:'normal'}}>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(90deg, var(--noir) 0%, rgba(14,12,10,.85) 18%, rgba(14,12,10,.2) 50%, transparent 100%)'}}></div>
      </div>

      {/* Vertical label left */}
      <div style={{position:'absolute', left:36, top:'50%', transform:'translateY(-50%)'}} className="vertical">
        Est. 2016 · Dubai
      </div>

      {/* Content */}
      <div className="wrap" style={{position:'relative', zIndex:2, paddingTop:200, paddingBottom:120, minHeight:'100vh', display:'flex', flexDirection:'column', justifyContent:'center'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom:32, color:'var(--rose)'}}>Bold · Inspired · Opulent</div>
        </Reveal>
        <Reveal delay={150}>
          <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 132px)', lineHeight:.95, color:'var(--paper)', maxWidth:'14ch', letterSpacing:'-.02em', fontWeight:300}}>
            Bespoke <span className="display-italic" style={{color:'var(--rose)'}}>high jewellery,</span><br/>
            born of nature.
          </h1>
        </Reveal>
        <Reveal delay={300}>
          <p style={{maxWidth:520, marginTop:36, fontSize:17, lineHeight:1.65, color:'rgba(250,246,239,.78)', fontWeight:300}}>
            By Pavit Gujral — GIA-gemmologist, Saul Bell Design Award winner.
            <br/>Five collections. One conversation at a time.
          </p>
        </Reveal>
        <Reveal delay={450}>
          <div style={{display:'flex', gap:16, marginTop:48, flexWrap:'wrap'}}>
            <button className="btn btn-solid" onClick={onBook}>Book a Consultation <span className="arr">→</span></button>
            <button className="btn btn-ghost" onClick={onExplore}>Explore Collections <span className="arr">↓</span></button>
          </div>
        </Reveal>

        {/* bottom credibility ticker */}
        <div style={{position:'absolute', bottom:48, left:56, right:56, display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:40}}>
          <div className="label" style={{color:'var(--muted)', letterSpacing:'.32em'}}>
            Scroll · Begin the descent
          </div>
          <div style={{display:'flex', gap:48, alignItems:'center', flexWrap:'wrap'}}>
            <TrustChip k="GIA" v="Graduate Gemmologist, NY 2015"/>
            <TrustChip k="Saul Bell" v="Design Award 2020 · 1st Place"/>
            <TrustChip k="Dubai Bling" v="Featured · Season 3"/>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustChip({ k, v }){
  return (
    <div style={{display:'flex', flexDirection:'column', gap:4, borderLeft:'1px solid var(--line-2)', paddingLeft:18}}>
      <div className="label" style={{color:'var(--rose)', fontSize:9.5}}>{k}</div>
      <div style={{fontSize:12, color:'var(--bone)', fontWeight:300, letterSpacing:'.04em'}}>{v}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────── INTRO STRIP
function IntroStrip(){
  return (
    <section style={{background:'var(--noir)', padding:'140px 0 80px', borderTop:'1px solid var(--line)'}}>
      <div className="wrap-narrow" style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, alignItems:'start'}}>
        <Reveal>
          <div className="label" style={{color:'var(--rose)'}}>An introduction</div>
        </Reveal>
        <Reveal delay={150}>
          <p className="display" style={{fontSize:34, lineHeight:1.35, color:'var(--paper)', fontWeight:300}}>
            We strive to create <span className="display-italic" style={{color:'var(--rose)'}}>bespoke, trendsetting</span> jewellery pieces of the highest quality — each one designed for the wearer, set with stones we have known by name, and made to outlive the trend that inspired it.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────── COLLECTIONS
function Collections({ onOpen }){
  const C = window.PG_DATA.COLLECTIONS;
  return (
    <section id="collections" style={{background:'var(--noir)', padding:'140px 0 160px'}} data-screen-label="02 Collections">
      <div className="wrap">
        <Reveal>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:72, gap:60, flexWrap:'wrap'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:24}}>The Collections · Five worlds, one signature</div>
              <h2 className="display" style={{fontSize:'clamp(44px, 6vw, 84px)', lineHeight:.98, color:'var(--paper)', maxWidth:'16ch', fontWeight:300}}>
                Each piece is a <span className="display-italic" style={{color:'var(--rose)'}}>love letter</span> to nature.
              </h2>
            </div>
            <p style={{maxWidth:380, fontSize:15, color:'var(--bone)', lineHeight:1.7, opacity:.85}}>
              The sea. The forest. Flowers. Travel. Memory. Five collections, each opening on its own epigraph — and a hero piece set with stones of the highest grade.
            </p>
          </div>
        </Reveal>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:24}}>
          <CollectionCard collection={C[0]} onOpen={onOpen} large/>
          <CollectionCard collection={C[1]} onOpen={onOpen} large/>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24}}>
          <CollectionCard collection={C[2]} onOpen={onOpen}/>
          <CollectionCard collection={C[3]} onOpen={onOpen}/>
          <CollectionCard collection={C[4]} onOpen={onOpen}/>
        </div>
      </div>
    </section>
  );
}

function CollectionCard({ collection, onOpen, large=false }){
  const [hover, setHover] = useStateS(false);
  return (
    <Reveal>
      <div
        onClick={()=>onOpen(collection.id)}
        onMouseEnter={()=>setHover(true)}
        onMouseLeave={()=>setHover(false)}
        style={{
          position:'relative',
          aspectRatio: large ? '16/10' : '4/5',
          background:'#15110E',
          overflow:'hidden',
          cursor:'pointer',
          border:'1px solid var(--line)'
        }}>
        <img src={collection.keyart} alt={collection.name}
          style={{
            width:'100%', height:'100%', objectFit:'cover',
            objectPosition: large ? 'center' : '32% center',
            transform: hover?'scale(1.04)':'scale(1)',
            transition:'transform 1.2s cubic-bezier(.2,.7,.2,1)',
            opacity:.85,
            filter:'contrast(1.05) brightness(.92)'
          }}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(14,12,10,.85) 100%)'}}></div>

        <div style={{position:'absolute', top:24, left:24, display:'flex', alignItems:'center', gap:12}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'var(--rose)'}}></span>
          <span className="label" style={{color:'var(--rose)', fontSize:10.5}}>{collection.theme}</span>
        </div>

        <div style={{position:'absolute', left:0, right:0, bottom:0, padding:'32px', color:'var(--paper)'}}>
          <p className="display-italic" style={{fontSize:14, color:'var(--rose)', marginBottom:6, opacity:.85}}>The</p>
          <h3 className="display" style={{fontSize: large?68:52, lineHeight:.95, marginBottom:14, fontWeight:300, letterSpacing:'-.01em'}}>
            {collection.name}
          </h3>
          <p style={{fontSize:13.5, color:'rgba(250,246,239,.75)', maxWidth:'42ch', lineHeight:1.6, marginBottom:18}}>
            {collection.natureCue}
          </p>
          <div style={{display:'flex', alignItems:'center', gap:12, fontSize:11, letterSpacing:'.24em', textTransform:'uppercase', color:hover?'var(--rose)':'var(--bone)', transition:'color .25s'}}>
            Explore the collection <span style={{transform:hover?'translateX(6px)':'translateX(0)', transition:'transform .25s', display:'inline-block'}}>→</span>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

// ───────────────────────────────────────────────────────────── DESIGNER
function Designer({ onLearnMore }){
  return (
    <section id="designer" style={{background:'var(--paper)', color:'var(--ink)', padding:'160px 0', position:'relative'}} data-screen-label="03 Designer">
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:100, alignItems:'center'}}>
        <Reveal>
          <div style={{position:'relative'}}>
            {/* Placeholder portrait box — designer portrait is a client-gap */}
            <div className="ph" style={{aspectRatio:'4/5', background:'linear-gradient(135deg, #ECE3D5 0%, #D9C5A8 100%)', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden', position:'relative'}}>
              <svg viewBox="0 0 400 500" style={{width:'90%', height:'90%', opacity:.55}}>
                <defs>
                  <pattern id="diag" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <line x1="0" y1="0" x2="0" y2="14" stroke="#1B1815" strokeWidth=".5" opacity=".25"/>
                  </pattern>
                </defs>
                <rect width="400" height="500" fill="url(#diag)"/>
              </svg>
              <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:12}}>
                <div className="label" style={{color:'var(--muted-2)', fontSize:9.5}}>Designer Portrait</div>
                <div style={{fontFamily:'ui-monospace, monospace', fontSize:11, color:'var(--muted-2)'}}>[ client to supply · d3 studio shoot ]</div>
              </div>
            </div>
            <div style={{position:'absolute', bottom:-30, right:-30, background:'var(--noir)', color:'var(--paper)', padding:'28px 32px', maxWidth:280}}>
              <div className="label" style={{color:'var(--rose)', marginBottom:10, fontSize:9.5}}>Saul Bell Design Award</div>
              <div style={{fontFamily:'var(--display)', fontSize:24, lineHeight:1.2, fontWeight:300}}>
                1st Place, 2020 — Dancing Fish Collection.
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div>
            <div className="eyebrow" style={{color:'var(--rose-deep)', marginBottom:24}}>The Designer · Pavit Gujral</div>
            <h2 className="display" style={{fontSize:'clamp(40px, 5vw, 68px)', lineHeight:1.02, marginBottom:36, fontWeight:300, letterSpacing:'-.01em'}}>
              From Chandigarh to Dubai, by way of the <span className="display-italic" style={{color:'var(--rose-deep)'}}>GIA in New York.</span>
            </h2>
            <div style={{display:'flex', flexDirection:'column', gap:20, fontSize:15.5, lineHeight:1.75, color:'#2D2A26', maxWidth:520}}>
              <p>
                Pavit Gujral is a Graduate Gemmologist (GIA, New York, 2015) and the founder of an eponymous high-jewellery house established in Dubai in 2016. She is a perfectionist; she is also a certified scuba diver — the seed of the Marine collection, and the reason the colours of her pieces look different from the colours other jewellers chase.
              </p>
              <p className="display-italic" style={{fontSize:22, color:'var(--rose-deep)', lineHeight:1.45, fontWeight:400, paddingLeft:20, borderLeft:'1px solid var(--rose)'}}>
                "I don't follow the trend. Each of my designs is inspired and trendsetting."
              </p>
              <p>
                Her work has won the Saul Bell Design Award in the U.S., the IJ Jewellers' Choice Awards in India, and a place in <em>The Contemporary Jewel as never seen before</em> at Artistar Jewels, Milan. She is featured on Netflix's Dubai Bling, S3.
              </p>
            </div>
            <div style={{display:'flex', gap:16, marginTop:40}}>
              <button className="btn btn-ink" onClick={onLearnMore}>Meet the designer <span className="arr">→</span></button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────── BESPOKE
function Bespoke({ onBook }){
  const steps = window.PG_DATA.BESPOKE;
  const [active, setActive] = useStateS(0);
  return (
    <section id="bespoke" style={{background:'var(--noir)', padding:'160px 0', position:'relative'}} data-screen-label="04 Bespoke">
      <div className="wrap">
        <Reveal>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, marginBottom:80, alignItems:'end'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:24}}>Bespoke · The Conversation</div>
              <h2 className="display" style={{fontSize:'clamp(44px, 6vw, 80px)', lineHeight:.98, color:'var(--paper)', maxWidth:'14ch', fontWeight:300}}>
                Every piece begins with a <span className="display-italic" style={{color:'var(--rose)'}}>conversation.</span>
              </h2>
            </div>
            <p style={{fontSize:16, lineHeight:1.7, color:'var(--bone)', opacity:.85, maxWidth:480}}>
              Connect with us to create customised designs. The studio is by appointment; the brief is yours; the result is one of one.
            </p>
          </div>
        </Reveal>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, border:'1px solid var(--line)', borderBottom:0}}>
          {steps.map((s, i)=>(
            <Reveal key={s.n} delay={i*100}>
              <div
                onMouseEnter={()=>setActive(i)}
                style={{
                  padding:'48px 36px 56px',
                  borderRight: i<3?'1px solid var(--line)':'none',
                  borderBottom:'1px solid var(--line)',
                  background: active===i ? 'rgba(217,166,166,.04)' : 'transparent',
                  transition:'background .35s ease',
                  cursor:'default',
                  minHeight:300,
                  position:'relative'
                }}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:32}}>
                  <span className="display" style={{fontSize:56, color: active===i?'var(--rose)':'var(--line-2)', fontWeight:300, transition:'color .35s', lineHeight:1}}>
                    {s.n}
                  </span>
                  <span className="label" style={{color: active===i?'var(--rose)':'var(--muted)', fontSize:9.5, transition:'color .35s'}}>
                    Step
                  </span>
                </div>
                <h3 className="display" style={{fontSize:30, color:'var(--paper)', marginBottom:18, fontWeight:300, letterSpacing:'-.005em'}}>
                  {s.title}
                </h3>
                <p style={{fontSize:13.5, color:'var(--bone)', lineHeight:1.65, opacity:.78}}>
                  {s.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300}>
          <div style={{display:'flex', justifyContent:'center', marginTop:80}}>
            <button className="btn btn-solid" onClick={onBook} style={{padding:'22px 40px'}}>
              Begin a Bespoke Piece <span className="arr">→</span>
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────── LOOKBOOK
function Lookbook({ onOpenImg }){
  const items = window.PG_DATA.LOOKBOOK;
  return (
    <section id="lookbook" style={{background:'var(--noir-2)', padding:'160px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}} data-screen-label="05 Lookbook">
      <div className="wrap">
        <Reveal>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:60, flexWrap:'wrap', gap:40}}>
            <div>
              <div className="eyebrow" style={{marginBottom:24}}>Lookbook · #WearPavitGujral</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5vw, 72px)', lineHeight:1, color:'var(--paper)', maxWidth:'14ch', fontWeight:300}}>
                A book of <span className="display-italic" style={{color:'var(--rose)'}}>moments.</span>
              </h2>
            </div>
            <p style={{fontSize:14, color:'var(--muted)', maxWidth:340, lineHeight:1.7}}>
              Pages from the brand's recent campaigns and editorial spreads — botanical, cinematic, and very rarely repeated.
            </p>
          </div>
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'2fr 3fr', gap:16}}>
          <Reveal>
            <LookCard item={items[0]} onClick={()=>onOpenImg(0)} tall/>
          </Reveal>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
            {items.slice(1,5).map((it,i)=>(
              <Reveal key={i} delay={i*60}>
                <LookCard item={it} onClick={()=>onOpenImg(i+1)}/>
              </Reveal>
            ))}
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16, marginTop:16}}>
          {items.slice(5).map((it,i)=>(
            <Reveal key={i} delay={i*60}>
              <LookCard item={it} onClick={()=>onOpenImg(i+5)} contain/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function LookCard({ item, onClick, tall=false, compact=false, contain=false }){
  const [hover, setHover] = useStateS(false);
  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      onClick={onClick}
      style={{
        position:'relative',
        aspectRatio: tall ? '3/4' : compact ? '4/5' : contain ? '16/9' : '16/10',
        background:'#15110E',
        overflow:'hidden',
        cursor:'zoom-in',
        border:'1px solid var(--line)'
      }}>
      <img src={item.src} alt={item.label} loading="lazy"
        style={{
          width:'100%', height:'100%', objectFit: contain ? 'contain' : 'cover',
          transform:hover?'scale(1.04)':'scale(1)',
          transition:'transform 1.1s cubic-bezier(.2,.7,.2,1)'
        }}/>
      <div style={{position:'absolute', inset:0, background:hover?'linear-gradient(180deg, transparent 50%, rgba(14,12,10,.8) 100%)':'transparent', transition:'background .3s'}}></div>
      <div style={{position:'absolute', left:18, bottom:14, opacity:hover?1:0, transition:'opacity .3s'}}>
        <span className="label" style={{color:'var(--rose)', fontSize:9.5}}>{item.label}</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────── PRESS
function Press(){
  const P = window.PG_DATA.PRESS;
  return (
    <section id="press" style={{background:'var(--paper)', color:'var(--ink)', padding:'160px 0'}} data-screen-label="06 Press">
      <div className="wrap">
        <Reveal>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, marginBottom:80, alignItems:'end'}}>
            <div>
              <div className="eyebrow" style={{color:'var(--rose-deep)', marginBottom:24}}>Press · Recognition</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5vw, 72px)', lineHeight:1, fontWeight:300}}>
                Awarded. <span className="display-italic" style={{color:'var(--rose-deep)'}}>Watched.</span> Worn.
              </h2>
            </div>
            <p style={{fontSize:15.5, lineHeight:1.7, color:'#3a342d', maxWidth:520}}>
              Saul Bell's first place in Albuquerque; IJ Jewellers' Choice in India; a feature spread on Dubai Bling. Below is a chronicle of the record, with attribution.
            </p>
          </div>
        </Reveal>

        {/* Awards */}
        <Reveal>
          <div className="label" style={{color:'var(--muted-2)', marginBottom:24}}>Awards</div>
          <div style={{display:'grid', gap:0, borderTop:'1px solid var(--line-light)'}}>
            {P.awards.map((a,i)=>(
              <div key={i} style={{display:'grid', gridTemplateColumns:'80px 2fr 3fr 1fr', gap:32, alignItems:'baseline', padding:'28px 0', borderBottom:'1px solid var(--line-light)'}}>
                <div className="display" style={{fontSize:28, color:'var(--rose-deep)', fontWeight:300}}>{a.year}</div>
                <div className="display" style={{fontSize:24, fontWeight:300, letterSpacing:'-.005em'}}>{a.org}</div>
                <div style={{fontSize:14, color:'#3a342d', lineHeight:1.55}}>{a.detail}</div>
                <div className="label" style={{color:'var(--muted-2)', fontSize:9.5, textAlign:'right'}}>{a.country}</div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Media */}
        <Reveal>
          <div style={{marginTop:96}}>
            <div className="label" style={{color:'var(--muted-2)', marginBottom:32}}>In the media</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:'32px 56px', alignItems:'baseline'}}>
              {P.media.map((m,i)=>(
                <div key={i} className="display" style={{fontSize:'clamp(28px, 3vw, 42px)', fontWeight:300, color: i===0 ? 'var(--ink)':'#5a5249', letterSpacing:'-.005em'}}>
                  {m.name}
                  {m.source && <span style={{fontSize:13, fontFamily:'var(--body)', color:'var(--muted-2)', marginLeft:10, letterSpacing:'.16em', textTransform:'uppercase'}}>· {m.source}</span>}
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Celebrity */}
        <Reveal>
          <div style={{marginTop:96, display:'grid', gridTemplateColumns:'1fr 2fr', gap:60, alignItems:'start'}}>
            <div>
              <div className="label" style={{color:'var(--muted-2)', marginBottom:18}}>Worn by</div>
              <p style={{fontSize:13.5, color:'#5a5249', lineHeight:1.65, maxWidth:280}}>
                A selection of the public-record red-carpet and editorial moments. Imagery shared on request, with rights cleared.
              </p>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:18}}>
              {P.celebrity.map((c,i)=>(
                <div key={i} style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', borderBottom:'1px solid var(--line-light)', paddingBottom:14}}>
                  <span className="display" style={{fontSize:28, fontWeight:300, letterSpacing:'-.005em'}}>{c.name}</span>
                  {c.detail && <span style={{fontSize:13, color:'var(--muted-2)', letterSpacing:'.08em'}}>{c.detail}</span>}
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────── CONTACT
function Contact({ onBook }){
  const C = window.PG_DATA.CONTACT;
  return (
    <section id="contact" style={{background:'var(--noir)', padding:'160px 0', position:'relative'}} data-screen-label="07 Contact">
      <div className="wrap">
        <Reveal>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:80, marginBottom:80, alignItems:'end'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:24}}>Contact · By Appointment</div>
              <h2 className="display" style={{fontSize:'clamp(44px, 6vw, 80px)', lineHeight:1, color:'var(--paper)', fontWeight:300}}>
                Come to the <span className="display-italic" style={{color:'var(--rose)'}}>studio.</span>
              </h2>
            </div>
            <p style={{fontSize:15.5, color:'var(--bone)', lineHeight:1.75, opacity:.85, maxWidth:520}}>
              The studio at d3 is by appointment — bring the brief, the inherited stone, or simply the occasion. We will design around it.
            </p>
          </div>
        </Reveal>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'start'}}>
          <Reveal>
            <div style={{display:'flex', flexDirection:'column', gap:48}}>
              <div>
                <div className="label" style={{color:'var(--rose)', marginBottom:14}}>Studio</div>
                <p className="display" style={{fontSize:24, color:'var(--paper)', lineHeight:1.4, fontWeight:300}}>
                  B202 · Building 4<br/>Dubai Design District<br/>Dubai, U.A.E.
                </p>
              </div>
              <div>
                <div className="label" style={{color:'var(--rose)', marginBottom:14}}>Hours</div>
                <p style={{fontSize:15, color:'var(--bone)', lineHeight:1.7}}>
                  {C.hours}<br/>
                  <span style={{color:'var(--muted)'}}>{C.hoursSat}</span>
                </p>
              </div>
              <div>
                <div className="label" style={{color:'var(--rose)', marginBottom:14}}>Direct</div>
                <p style={{fontSize:15, color:'var(--bone)', lineHeight:1.85}}>
                  <a href={C.whatsappLink} target="_blank" rel="noopener" style={{color:'var(--paper)', borderBottom:'1px solid var(--line-2)', paddingBottom:2}}>WhatsApp · {C.whatsapp}</a><br/>
                  <a href={`mailto:${C.email}`} style={{color:'var(--paper)', borderBottom:'1px solid var(--line-2)', paddingBottom:2}}>{C.email}</a>
                </p>
              </div>

              <div style={{marginTop:8}}>
                <button className="btn btn-solid" onClick={onBook}>
                  Open Consultation Form <span className="arr">→</span>
                </button>
              </div>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div style={{position:'relative', border:'1px solid var(--line)'}}>
              {/* Map */}
              <iframe
                title="Map · Pavit Gujral Designs studio"
                loading="lazy"
                src={`https://www.google.com/maps?q=${C.geo.lat},${C.geo.lng}&hl=en&z=15&output=embed`}
                style={{width:'100%', height:520, border:0, filter:'grayscale(.4) contrast(1.05) invert(.92) hue-rotate(180deg)', opacity:.85}}
              ></iframe>
              <div style={{position:'absolute', top:24, left:24, background:'var(--noir)', padding:'18px 22px', border:'1px solid var(--line-2)', maxWidth:240}}>
                <div className="label" style={{color:'var(--rose)', marginBottom:6, fontSize:9.5}}>Coordinates</div>
                <div style={{fontSize:13, color:'var(--bone)', fontFamily:'ui-monospace, monospace'}}>
                  {C.geo.lat}, {C.geo.lng}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, IntroStrip, Collections, Designer, Bespoke, Lookbook, Press, Contact });
