// Shell + shared building blocks. AppCtx carries navigation + lead-flow openers.
const AppCtx = React.createContext({});

function PhotoPlaceholder({ label, tag='IMG', h, variant='', radius, style={}, className='' }){
  return (
    <div className={'ph ' + variant + ' ' + className}
      style={{ height:h, borderRadius:radius, ...style }}>
      {tag !== '' && <span className="ph-tag">{tag} ▢</span>}
      {label !== '' && <span className="ph-label">{label}</span>}
    </div>
  );
}

function Wordmark({ onClick, className='' }){
  return (
    <div className={'wm ' + className} onClick={onClick}>
      פינק ליידי<small>STUDIO · YAVNE</small>
    </div>
  );
}

function StatusBar(){
  return (
    <div className="statusbar">
      <span>9:41</span>
      <StatusGlyphs />
    </div>
  );
}

function Header({ scrolled, page }){
  const { nav, openMenu, openLead } = React.useContext(AppCtx);
  return (
    <div className={'hdr' + (scrolled ? ' scrolled' : '')}>
      <Wordmark onClick={() => nav('home')} />
      <nav className="hdr-nav">
        {NAV.map(n => (
          <button key={n.id} className={'hdr-navlink' + (page === n.id ? ' active' : '')}
            onClick={() => nav(n.id)}>{n.label}</button>
        ))}
      </nav>
      <button className="hdr-wa hdr-desk-wa" onClick={() => openLead()}>
        {Ic.chat({ s:16 })} בדיקת זמינות
      </button>
      <button className="hdr-btn hdr-burger" onClick={openMenu} aria-label="תפריט">
        {Ic.menu({ s:24 })}
      </button>
    </div>
  );
}

function Menu({ open, onClose }){
  const { nav, openLead } = React.useContext(AppCtx);
  const go = (id) => { onClose(); setTimeout(() => nav(id), 180); };
  return (
    <div className={'menu' + (open ? ' open' : '')}>
      <div className="menu-top">
        <Wordmark onClick={() => go('home')} />
        <button className="menu-close" onClick={onClose} aria-label="סגירה">{Ic.close({ s:24 })}</button>
      </div>
      <nav>
        {NAV.map((n, i) => (
          <button key={n.id} className="menu-link" onClick={() => go(n.id)}>
            <span className="idx">{String(i+1).padStart(2,'0')}</span>
            <span className="lbl">{n.label}</span>
          </button>
        ))}
      </nav>
      <div className="menu-foot">
        <div className="lab">WHATSAPP / טלפון</div>
        <div className="phone-num">{PHONE_DISPLAY}</div>
        <button className="btn btn-primary btn-round" style={{ marginTop:18 }}
          onClick={() => { onClose(); setTimeout(openLead, 200); }}>
          <span className="wa-dot"></span>{Ic.chat({ s:18, c:'#f5f0e8' })} בדיקת זמינות בוואטסאפ
        </button>
      </div>
    </div>
  );
}

function Kicker({ children }){ return <div className="kick" style={{ marginBottom:10 }}>{children}</div>; }

function SectionHead({ idx, kicker }){
  return (
    <div className="sec-head">
      {idx && <span className="idx">{idx}</span>}
      <span className="kick" style={{ alignSelf:'center' }}>{kicker}</span>
      <span className="line"></span>
    </div>
  );
}

// Warm personal note from Shira (Direction C moment)
function ShiraNote({ quote, role='צלמת הסטודיו · כמעט עשור של ניסיון' }){
  return (
    <div className="note-card">
      <div className="quote">{quote}</div>
      <div className="note-row">
        <PhotoPlaceholder className="av" variant="warm" tag="" label="" h="46px" />
        <div>
          <div className="nm">שירה בן דוד</div>
          <div className="rl">{role}</div>
        </div>
      </div>
    </div>
  );
}

function WAButton({ label='בדיקת זמינות בוואטסאפ', variant='btn-primary', round=true, service }){
  const { openLead } = React.useContext(AppCtx);
  const cls = 'btn ' + variant + (round ? ' btn-round' : '');
  const isRose = variant === 'btn-rose';
  return (
    <button className={cls} onClick={() => openLead(service)}>
      {variant === 'btn-primary' && <span className="wa-dot"></span>}
      {Ic.chat({ s:18, c: isRose ? '#fbf6f1' : (variant === 'btn-primary' ? '#f5f0e8' : 'currentColor') })}
      {label}
    </button>
  );
}

function Footer(){
  const { nav, openLead } = React.useContext(AppCtx);
  return (
    <div className="foot">
      <Wordmark className="" />
      <div className="tagline">סטודיו בוטיק לצילום משפחה וילדים — ביבנה, באהבה.</div>
      <div className="foot-links">
        {NAV.map(n => <button key={n.id} onClick={() => nav(n.id)}>{n.label}</button>)}
      </div>
      <button className="btn btn-ghost btn-round" style={{ borderColor:'#5a4f43', color:'#f5f0e8' }}
        onClick={() => openLead()}>
        {Ic.chat({ s:18, c:'#f5f0e8' })} בדיקת זמינות בוואטסאפ
      </button>
      <div className="legal" style={{ marginTop:26 }}>
        PINK LADY · יבנה · {PHONE_DISPLAY}<br/>
        אתר תצוגה · התמונות יוחלפו בתמונות נבחרות מהסטודיו
      </div>
    </div>
  );
}

Object.assign(window, { AppCtx, PhotoPlaceholder, Wordmark, StatusBar, Header, Menu, Kicker, SectionHead, ShiraNote, WAButton, Footer });