// Shared components: Nav, Footer, Logo, Reveal, etc.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

function Logo({ light=false, size=28 }){
  // Render the brand wordmark; coral on light/dark backgrounds.
  return (
    <svg viewBox="0 0 720 200" style={{height:size, width:'auto', display:'block'}} aria-label="Pavit Gujral">
      <g fill="none" stroke={light?'rgba(27,24,21,.45)':'rgba(250,246,239,.45)'} strokeWidth="2.4" strokeLinecap="round">
        <path d="M300 92 C360 30, 470 28, 520 70 C500 56, 430 58, 392 96"/>
        <path d="M330 116 C390 70, 470 70, 512 96"/>
        <g stroke={light?'rgba(27,24,21,.55)':'rgba(250,246,239,.55)'} strokeWidth="1.6">
          <path d="M455 96 l9 -34"/><path d="M464 98 l13 -36"/><path d="M474 100 l16 -36"/>
          <path d="M485 101 l18 -34"/><path d="M497 102 l19 -31"/><path d="M509 103 l19 -27"/>
        </g>
      </g>
      <g fill="#E8593A" fontFamily="'Cormorant Garamond','Times New Roman',serif" fontWeight="500" letterSpacing="6">
        <text x="20" y="180" fontSize="120">PAVIT</text>
        <text x="360" y="180" fontSize="120">GUJRAL</text>
      </g>
    </svg>
  );
}

function Reveal({ children, delay=0, className='' }){
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    const io = new IntersectionObserver(([e])=>{
      if(e.isIntersecting){ setSeen(true); io.disconnect(); }
    }, { rootMargin:'0px 0px -10% 0px', threshold:0.1 });
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  return (
    <div ref={ref} className={`reveal ${seen?'in':''} ${className}`} style={{transitionDelay:`${delay}ms`}}>
      {children}
    </div>
  );
}

function Nav({ active, onNavigate, onBook, light=false }){
  const [scrolled, setScrolled] = useState(false);
  useEffect(()=>{
    const f=()=>setScrolled(window.scrollY>30);
    window.addEventListener('scroll', f, {passive:true});
    f();
    return ()=>window.removeEventListener('scroll', f);
  },[]);
  const items = [
    {id:'collections', label:'Collections'},
    {id:'designer', label:'The Designer'},
    {id:'bespoke', label:'Bespoke'},
    {id:'lookbook', label:'Lookbook'},
    {id:'press', label:'Press'},
    {id:'contact', label:'Contact'},
  ];
  return (
    <nav className={`nav ${scrolled?'scrolled':''} ${light?'light':''}`} data-screen-label="Nav">
      <div className="nav-logo no-select" onClick={()=>onNavigate('top')} style={{cursor:'pointer'}}>
        <Logo light={light} size={28}/>
      </div>
      <div className="nav-links">
        {items.map(it=>(
          <span key={it.id} className={`nav-link ${active===it.id?'active':''}`} onClick={()=>onNavigate(it.id)}>{it.label}</span>
        ))}
      </div>
      <button className="btn btn-solid nav-cta" style={{padding:'14px 22px'}} onClick={onBook}>
        Book Consultation <span className="arr">→</span>
      </button>
    </nav>
  );
}

function WhatsAppFab(){
  return (
    <a className="fab" href={window.PG_DATA.CONTACT.whatsappLink} target="_blank" rel="noopener" aria-label="WhatsApp Pavit Gujral">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.4 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.4.1-.2 0-.3 0-.5s-.6-1.5-.8-2c-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.1 3 2 3 4.8 4.2c1.8.8 2.5.8 3.4.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.3-1.4c1.4.7 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3c-.8-1.3-1.3-2.7-1.3-4.2 0-4.6 3.7-8.3 8.3-8.3s8.3 3.7 8.3 8.3-3.7 8.3-8.3 8.3z"/></svg>
    </a>
  );
}

function Footer({ onNavigate }){
  const C = window.PG_DATA.CONTACT;
  return (
    <footer style={{background:'var(--noir)', padding:'120px 0 40px', borderTop:'1px solid var(--line)'}} data-screen-label="Footer">
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:60, paddingBottom:80}}>
          <div>
            <Logo size={42}/>
            <p className="display-italic" style={{fontSize:18, color:'var(--rose)', marginTop:24, lineHeight:1.5, maxWidth:280}}>
              Bold · Inspired · Opulent
            </p>
            <p style={{fontSize:13, color:'var(--muted)', marginTop:18, lineHeight:1.7, maxWidth:340}}>
              Bespoke high jewellery by GIA-gemmologist Pavit Gujral. By appointment in Dubai Design District.
            </p>
          </div>
          <div>
            <div className="label" style={{color:'var(--rose)', marginBottom:18}}>Explore</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:12, fontSize:13, color:'var(--bone)'}}>
              <li style={{cursor:'pointer'}} onClick={()=>onNavigate('collections')}>Collections</li>
              <li style={{cursor:'pointer'}} onClick={()=>onNavigate('designer')}>The Designer</li>
              <li style={{cursor:'pointer'}} onClick={()=>onNavigate('bespoke')}>Bespoke</li>
              <li style={{cursor:'pointer'}} onClick={()=>onNavigate('lookbook')}>Lookbook</li>
              <li style={{cursor:'pointer'}} onClick={()=>onNavigate('press')}>Press & Recognition</li>
            </ul>
          </div>
          <div>
            <div className="label" style={{color:'var(--rose)', marginBottom:18}}>Studio</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:12, fontSize:13, color:'var(--bone)', lineHeight:1.6}}>
              <li>B202 · Building 4</li>
              <li>Dubai Design District</li>
              <li>Dubai, U.A.E.</li>
              <li style={{marginTop:10, color:'var(--muted)'}}>{C.hours}</li>
              <li style={{color:'var(--muted)'}}>{C.hoursSat}</li>
            </ul>
          </div>
          <div>
            <div className="label" style={{color:'var(--rose)', marginBottom:18}}>Connect</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:12, fontSize:13, color:'var(--bone)'}}>
              <li><a href={C.whatsappLink} target="_blank" rel="noopener">WhatsApp · {C.whatsapp}</a></li>
              <li><a href={`mailto:${C.email}`}>{C.email}</a></li>
              <li><a href={C.socials.instagram} target="_blank" rel="noopener">Instagram · @pavitgujraldesigns</a></li>
              <li><a href={C.socials.facebook} target="_blank" rel="noopener">Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="hairline" style={{background:'var(--line-2)'}}></div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:30, fontSize:11, color:'var(--muted)', letterSpacing:'.18em', textTransform:'uppercase'}}>
          <div>© 2026 Pavit Gujral Designs · All rights reserved</div>
          <div>#WearPavitGujral</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, Reveal, Nav, WhatsAppFab, Footer });