/* Shared chrome — nav bar, footer, store badges, download band.
   Arabic-only. EN toggle removed per user request. */

function LandingNav({ role, lang, setRole, setLang, t, variant }) {
  const onPink = variant === 'onPink';
  return (
    <nav className="lnav" style={{
      color: onPink ? '#fff' : 'var(--wine-900)',
      paddingTop: variant === 'floating' ? 32 : 28,
    }}>
      <div className="brand" style={{ color: onPink ? '#fff' : 'var(--pink-500)' }}>
        {t.nav.brand}
      </div>
      <div className="actions">
        {/* Role toggle: عميلة / آرتست */}
        <div className="role-toggle" style={{
          background: onPink ? 'rgba(255,255,255,0.18)' : 'rgba(232,66,135,0.08)',
          backdropFilter: onPink ? 'blur(8px)' : 'none',
        }}>
          <button className={role === 'client' ? 'on' : ''}
                  onClick={() => setRole('client')}
                  style={{ color: onPink && role !== 'client' ? '#fff' : undefined,
                           background: onPink && role === 'client' ? '#fff' : undefined,
                           color: onPink && role === 'client' ? 'var(--pink-500)' : (onPink ? '#fff' : undefined) }}>
            {t.role.client}
          </button>
          <button className={role === 'artist' ? 'on' : ''}
                  onClick={() => setRole('artist')}
                  style={{ background: onPink && role === 'artist' ? '#fff' : undefined,
                           color: onPink && role === 'artist' ? 'var(--pink-500)' : (onPink ? '#fff' : undefined) }}>
            {t.role.artist}
          </button>
        </div>
        {/* EN / عربي toggle REMOVED per user request */}
        {/* <div className="lang-toggle" ...>...</div> */}
        <a className="l-btn-primary" style={{
          height: 48, padding: '0 24px', fontSize: 15,
          background: onPink ? '#fff' : 'var(--pink-500)',
          color: onPink ? 'var(--pink-500)' : '#fff',
          boxShadow: onPink ? '0 0 24px 0 rgba(255,255,255,0.3)' : '0 0 24px 0 rgba(232,66,135,0.32)',
        }}>{t.nav.download}</a>
      </div>
    </nav>
  );
}

function StoreBadge({ kind, lang, light, size }) {
  const isIOS = kind === 'ios';
  // Use pre-cropped PNGs — no whitespace, exact badge dimensions
  const badgeSrc = isIOS
    ? '/appstore-badge-clean.png'
    : '/googleplay-badge-clean.png';
  const title = isIOS ? 'App Store' : 'Google Play';
  const h = size || 58;
  return (
    <a className={'store-badge'} style={{
      background: 'transparent',
      border: 'none',
      padding: 0,
      display: 'inline-block',
      flexShrink: 0,
    }}>
      <img
        src={badgeSrc}
        alt={title}
        className="store-badge-img"
        style={{ height: h, width: 'auto', display: 'block' }}
      />
    </a>
  );
}

function DownloadBand({ lang, t, dir, variant }) {
  const isPink = variant === 'pink';
  const isEditorial = variant === 'editorial';
  return (
    <section style={{
      padding: isEditorial ? '100px 56px 120px' : '80px 56px',
      background: isPink ? 'linear-gradient(180deg, #FFF8FB 0%, #FFEFF5 100%)' : (isEditorial ? 'transparent' : 'var(--wine-900)'),
      color: isEditorial ? 'var(--wine-900)' : (isPink ? 'var(--wine-900)' : '#fff'),
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {isPink && (
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at center, rgba(232,66,135,0.15) 0%, transparent 60%)',
          pointerEvents: 'none',
        }}/>
      )}
      <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', margin: '0 auto', width: '100%' }}>
        <h2 style={{
          font: '700 56px/1.05 "Expo Arabic"', margin: '0 auto',
          letterSpacing: lang === 'en' ? -1.5 : 0,
          whiteSpace: 'nowrap',
          display: 'block',
          textAlign: 'center',
        }}>{t.download.title}</h2>
        <p style={{
          font: '400 20px/1.5 "Expo Arabic"',
          opacity: isEditorial || isPink ? 0.7 : 0.75,
          marginTop: 18, marginBottom: 36,
        }}>{t.download.sub}</p>
        <div style={{ display: 'inline-flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
          <StoreBadge kind="ios" lang={lang} light={false} size={56} />
          <StoreBadge kind="android" lang={lang} light={false} size={56} />
        </div>
      </div>
    </section>
  );
}

function LandingFooter({ t, lang }) {
  return (
    <footer className="lfoot">
      <div className="grid" style={{ gridTemplateColumns: '1fr', justifyItems: 'center', textAlign: 'center' }}>
        <div>
          <div className="brand">{t.nav.brand}</div>
          {/* tagline removed per user request */}
          {/* <p className="tagline">{t.footer.tagline}</p> */}
        </div>
        {/* Footer columns (المنصة, للآرتست, الدعم) removed per user request */}
        {/* {t.footer.cols.map((c) => (
          <div key={c.title}>
            <h4>{c.title}</h4>
            <ul>{c.items.map((it) => <li key={it}>{it}</li>)}</ul>
          </div>
        ))} */}
      </div>
      <div className="end" style={{ justifyContent: 'center', gap: 32 }}>
        <span>{t.footer.copy}</span>
        <span style={{ display: 'inline-flex', gap: 14 }}>
          {/* Social icons with correct links */}
          <a href="https://www.instagram.com/lamsaapp.sa" target="_blank" rel="noopener noreferrer" style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'rgba(255,255,255,0.08)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', textDecoration: 'none',
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
          </a>
          {/* TikTok — no account yet, link placeholder */}
          <a href="#" style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'rgba(255,255,255,0.08)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', textDecoration: 'none',
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21 8.5a7 7 0 0 1-4.5-1.7v8.7a6 6 0 1 1-6-6h.5v3.5h-.5a2.5 2.5 0 1 0 2.5 2.5V3h3.5a3.5 3.5 0 0 0 3.5 3.5z"/></svg>
          </a>
          {/* X (Twitter) */}
          <a href="https://x.com/lamsaapp" target="_blank" rel="noopener noreferrer" style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'rgba(255,255,255,0.08)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', textDecoration: 'none',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.4 2H22l-7.5 8.6L23 22h-6.8l-5.3-7-6.1 7H1l8-9.2L1 2h6.9l4.8 6.4L18.4 2z"/></svg>
          </a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { LandingNav, StoreBadge, DownloadBand, LandingFooter });