// ============================================================
// ui.jsx — shared layout: Nav, Footer, section primitives
// ============================================================
const { useState, useEffect, useRef, useMemo } = React;

const PRODUCTS = [
  {
    key: 'vata-bathamrit',
    label: 'Vata Body Amrit',
    sub: 'Herbal Bath Powder',
    available: true,
  },
  {
    key: 'vata-keshamrit',
    label: 'Vata Kesh Amrit',
    sub: 'Hair Wash Powder',
    available: true,
  },
  // {
  //   key: 'vata',
  //   label: 'Vata Hair Kit',
  //   sub: 'Oil + Wash + Capsule',
  //   tag: 'Available now',
  //   available: true,
  // },
  // {
  //   key: 'pitta',
  //   label: 'Pitta Hair Kit',
  //   sub: 'Oil + Wash + Capsule',
  //   tag: 'Diwali 2027',
  //   available: false,
  // },
  // {
  //   key: 'kapha',
  //   label: 'Kapha Hair Kit',
  //   sub: 'Oil + Wash + Capsule',
  //   tag: '2028',
  //   available: false,
  // },
];

function LangToggle() {
  const { lang, setLang } = useLang();
  return (
    <button
      onClick={() => setLang(lang === 'en' ? 'hi' : 'en')}
      style={{
        fontFamily: 'var(--f-mono)',
        fontSize: 12,
        letterSpacing: '0.06em',
        padding: '5px 10px',
        borderRadius: 999,
        border: '1px solid var(--bd)',
        background: 'transparent',
        color: 'var(--ink-2)',
        cursor: 'pointer',
        flexShrink: 0,
        transition: 'background 120ms, color 120ms',
      }}
      onMouseEnter={e => { e.currentTarget.style.background = 'var(--paper-2)'; e.currentTarget.style.color = 'var(--ink)'; }}
      onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-2)'; }}
      title={lang === 'en' ? 'हिंदी में देखें' : 'View in English'}
    >
      {lang === 'en' ? 'हि' : 'EN'}
    </button>
  );
}

function Nav({ current, onNav }) {
  const { t } = useLang();
  const [productsOpen, setProductsOpen] = useState(false);
  const dropdownRef = useRef(null);

  const items = [
    ['approach', t('nav_approach')],
    ['quiz', t('nav_quiz')],
    ['faq', t('nav_faq')],
  ];

  useEffect(() => {
    function handleClick(e) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setProductsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  const productsActive = ['vata-bathamrit', 'vata-keshamrit', 'vata', 'pitta', 'kapha'].includes(current);

  return (
    <nav className="nav">
      <div className="logo" onClick={() => onNav('home')}>
        <span className="mark" />
        <span>Prakriti Wellness</span>
      </div>
      <ul>
        {/* Products dropdown */}
        <li
          ref={dropdownRef}
          className={productsActive ? 'active nav-has-dropdown' : 'nav-has-dropdown'}
          style={{ position: 'relative' }}
          onMouseEnter={() => setProductsOpen(true)}
          onMouseLeave={() => setProductsOpen(false)}
        >
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            {t('nav_products')}
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none" style={{
              transition: 'transform 180ms',
              transform: productsOpen ? 'rotate(180deg)' : 'none',
              opacity: 0.55,
            }}>
              <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
          {productsOpen && (
            <div style={{
              position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
              paddingTop: 10,
              background: 'transparent',
              zIndex: 100,
            }}>
            <div style={{
              background: 'var(--paper)', border: '1px solid var(--bd)',
              borderRadius: 14, padding: 8, minWidth: 260,
              boxShadow: '0 12px 40px rgba(26,23,20,0.13)',
            }}>
              {PRODUCTS.map(p => (
                <div
                  key={p.key}
                  onClick={() => { onNav(p.key); setProductsOpen(false); }}
                  style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '11px 14px', borderRadius: 8, cursor: 'pointer',
                    background: current === p.key ? 'var(--paper-2)' : 'transparent',
                    transition: 'background 120ms',
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-2)'}
                  onMouseLeave={e => e.currentTarget.style.background = current === p.key ? 'var(--paper-2)' : 'transparent'}
                >
                  <div>
                    <div style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>{p.label}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2, fontFamily: 'var(--f-mono)', letterSpacing: '0.04em' }}>{p.sub}</div>
                  </div>
                  <span style={{
                    fontSize: 10, fontFamily: 'var(--f-mono)', letterSpacing: '0.1em', textTransform: 'uppercase',
                    padding: '3px 8px', borderRadius: 999,
                    background: p.available ? 'rgba(160,74,42,0.1)' : 'rgba(26,23,20,0.06)',
                    color: p.available ? 'var(--clay)' : 'var(--ink-3)',
                  }}>{p.tag}</span>
                </div>
              ))}
            </div>
            </div>
          )}
        </li>

        {items.map(([k, l]) => (
          <li key={k} className={current === k ? 'active' : ''} onClick={() => onNav(k)}>{l}</li>
        ))}
      </ul>
      <div className="flex">
        <LangToggle />
        <button className="cta" onClick={() => onNav('signin')}>{t('nav_signin')}</button>
        <button className="burger" aria-label="menu"><span/></button>
      </div>
    </nav>
  );
}

function Footer({ onNav }) {
  const { t } = useLang();
  return (
    <footer className="footer">
      <div className="page">
        <div className="top">
          <div>
            <h3>{t('footer_tagline').split('\n').map((line, i) => <React.Fragment key={i}>{line}{i === 0 && <br/>}</React.Fragment>)}</h3>
            <p style={{ color: 'rgba(255,255,255,0.65)', maxWidth: '42ch' }}>
              {t('footer_tagline_sub')}
            </p>
            <button className="btn accent" style={{ marginTop: 18 }} onClick={() => onNav('waitlist')}>
              {t('footer_apply')} <span className="arrow">→</span>
            </button>
          </div>
          <div className="col">
            <div className="k">{t('footer_learn')}</div>
            <ul>
              <li onClick={() => onNav('approach')}>{t('footer_approach')}</li>
              <li onClick={() => onNav('research')}>{t('footer_research')}</li>
              <li onClick={() => onNav('faq')}>{t('footer_faq')}</li>
            </ul>
          </div>
          <div className="col">
            <div className="k">{t('footer_prakriti')}</div>
            <ul>
              <li onClick={() => onNav('quiz')}>{t('footer_quiz')}</li>
              <li onClick={() => onNav('vata')}>Vata</li>
              <li onClick={() => onNav('pitta')}>Pitta</li>
              <li onClick={() => onNav('kapha')}>Kapha</li>
            </ul>
          </div>
          <div className="col">
            <div className="k">{t('footer_access')}</div>
            <ul>
              <li onClick={() => onNav('waitlist')}>{t('footer_waitlist')}</li>
              <li>{t('footer_circle')}</li>
              <li>{t('footer_contact')}</li>
            </ul>
          </div>
        </div>
        <div className="bot">
          <span>{t('footer_copy')}</span>
          <span>{t('footer_copy_sub')}</span>
        </div>
      </div>
    </footer>
  );
}

function SectionHead({ eyebrow, title, children }) {
  return (
    <div className="sec-head">
      {eyebrow ? <div className="eyebrow">{eyebrow}</div> : null}
      <h2 className="h-section">{title}</h2>
      {children ? <p>{children}</p> : null}
    </div>
  );
}

function Placeholder({ label = 'Image', className = '', style }) {
  return <div className={`ph ${className}`} style={style}>{label}</div>;
}

function Pill({ children, variant = '' }) {
  return <span className={`pill ${variant}`}>{children}</span>;
}

Object.assign(window, { Nav, Footer, SectionHead, Placeholder, Pill });