// MLuppens Website — shared components
// Header, Footer, atoms

const P = 'assets/photos/';
const I = 'assets/icons/';
const PHOTOS = {
  hero: P + 'wedding-04.jpg',
  about: P + 'about-portrait.jpg',
  thumbs: [
    P + 'wedding-01.jpg',
    P + 'wedding-02.jpg',
    P + 'wedding-03.jpg',
    P + 'wedding-04.jpg',
    P + 'wedding-05.jpg',
    P + 'wedding-06.jpg',
    P + 'wedding-07.jpg',
    P + 'wedding-08.jpg',
  ],
  icons: { facebook: I + 'icon-facebook.png', instagram: I + 'icon-instagram.png' },
};

function Brand({ onClick }) {
  const t = useT();
  return (
    <div className="brand-mark" onClick={onClick}>
      Marieke <em>Luppens</em>
      <span className="sub">{t('Photography', 'Fotografie')}</span>
    </div>
  );
}

// ── Global language state ─────────────────────────────────────────────
// Lightweight pub/sub on window so every <Signature/> and any other
// language-aware component stays in sync with the EN / NL toggle in the
// header. Stored on window so cross-file scripts share one source of truth.
// Default is NL — Marieke writes natively in Dutch and the design system
// is explicit: "Dutch first, English second."
window.__lang = window.__lang || 'NL';
window.__langListeners = window.__langListeners || new Set();
window.__setLang = (l) => {
  window.__lang = l;
  window.__langListeners.forEach((fn) => fn(l));
};

function useLang() {
  const [lang, setLang] = React.useState(window.__lang);
  React.useEffect(() => {
    window.__langListeners.add(setLang);
    return () => window.__langListeners.delete(setLang);
  }, []);
  return lang;
}

// useT — returns a t(en, nl) function bound to the current language.
// Falls back to en if nl is missing. Call inside any component that
// renders user-facing copy.
function useT() {
  const lang = useLang();
  return React.useCallback((en, nl) => (lang === 'NL' ? (nl || en) : en), [lang]);
}

// Signature sign-off — language-aware
function Signature({ size = 88 }) {
  const lang = useLang();
  return (
    <div style={{
      fontFamily: 'var(--font-script)',
      fontSize: size,
      lineHeight: 1,
      color: 'var(--ink)',
    }}>
      {lang === 'NL' ? 'Liefs, Marieke' : 'With love, Marieke'}
    </div>
  );
}

function Header({ route, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  const lang = useLang();
  const setLang = (l) => window.__setLang(l);
  React.useEffect(() => {
    const main = document.querySelector('.app-scroll');
    if (!main) return;
    const onScroll = () => setScrolled(main.scrollTop > 8);
    main.addEventListener('scroll', onScroll);
    return () => main.removeEventListener('scroll', onScroll);
  }, []);

  const t = useT();
  const items = [
    { id: 'home', label: t('Home', 'Home') },
    { id: 'portfolio', label: t('Portfolio', 'Portfolio') },
    { id: 'recent-work', label: t('Recent Work', 'Recent werk') },
    { id: 'over-mij', label: t('About', 'Over mij') },
    { id: 'book', label: t('Contact', 'Contact') },
  ];

  return (
    <header className={`site-header ${scrolled ? 'scrolled' : ''}`}>
      <Brand onClick={() => go('home')} />
      <nav className="nav-links">
        {items.map(it => (
          <a
            key={it.id}
            className={`nav-link ${route === it.id ? 'active' : ''}`}
            onClick={() => go(it.id)}
          >
            {it.label}
          </a>
        ))}
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
        <div className="lang-toggle">
          <span
            className={lang === 'EN' ? 'on' : ''}
            onClick={() => setLang('EN')}
          >EN</span>
          <span className="sep">/</span>
          <span
            className={lang === 'NL' ? 'on' : ''}
            onClick={() => setLang('NL')}
          >NL</span>
        </div>
        <button className="nav-cta" onClick={() => go('book')}>{t('Enquire', 'Neem contact op')}</button>
      </div>
    </header>
  );
}

function Footer({ go }) {
  const t = useT();
  const scrollHomeTo = (anchor) => {
    go('home');
    // wait for HomeScreen mount, then scroll
    setTimeout(() => {
      const target = document.querySelector(`[data-anchor="${anchor}"]`);
      const scroller = document.querySelector('.app-scroll');
      if (!target || !scroller) return;
      const scrollerTop = scroller.getBoundingClientRect().top;
      const targetTop = target.getBoundingClientRect().top;
      scroller.scrollTo({ top: targetTop - scrollerTop + scroller.scrollTop - 24, behavior: 'smooth' });
    }, 80);
  };

  return (
    <footer className="site-footer">
      <div className="footer-grid">
        <div>
          <div className="footer-brand">
            Marieke <em>Luppens</em>
            <span className="sub">{t('Photography', 'Fotografie')}</span>
          </div>
          <p className="footer-tagline">{t('Visual storyteller for the wildly in love.', 'Verhalenverteller voor wie wild verliefd zijn.')}</p>
        </div>
        <div className="footer-col">
          <h4>{t('Work', 'Werk')}</h4>
          <ul>
            <li onClick={() => go('portfolio')}>{t('Portfolio', 'Portfolio')}</li>
            <li onClick={() => go('recent-work')}>{t('Recent Work', 'Recent werk')}</li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>{t('Explore', 'Ontdek')}</h4>
          <ul>
            <li onClick={() => go('over-mij')}>{t('About', 'Over mij')}</li>
            <li onClick={() => scrollHomeTo('investment')}>{t('Investment', 'Investering')}</li>
            <li onClick={() => go('book')}>{t('Enquire', 'Neem contact op')}</li>
            <li onClick={() => go('online-album')}>{t('Online Album', 'Online album')}</li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>{t('Contact', 'Contact')}</h4>
          <ul>
            <li>mluppensfotografie@gmail.com</li>
            <li>06 — 40 83 92 58</li>
            <li>{t('Amsterdam, NL', 'Amsterdam, NL')}</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div className="footer-copy">{t('© 2025 Marieke Luppens · Photography', '© 2025 Marieke Luppens · Fotografie')}</div>
        <div className="footer-signature"><Signature size={32} /></div>
        <div className="footer-socials">
          <a href="#"><img src={PHOTOS.icons.facebook} alt="Facebook" /></a>
          <a href="#"><img src={PHOTOS.icons.instagram} alt="Instagram" /></a>
        </div>
      </div>
    </footer>
  );
}

function Eyebrow({ children, className = '', amber, light }) {
  const cls = `eyebrow ${amber ? 'amber' : ''} ${light ? 'light' : ''} ${className}`;
  return <div className={cls}>{children}</div>;
}

function Rule({ className = '' }) {
  return <hr className={`divider-rule ${className}`} />;
}

function PhotoTile({ src, title, meta, onClick, position = 'center', aspect = '3/4', bw = false }) {
  return (
    <div className={`photo-tile ${bw ? 'bw' : ''}`} style={{ aspectRatio: aspect === 'auto' ? undefined : aspect, height: aspect === 'auto' ? '100%' : undefined }} onClick={onClick}>
      <div
        className="photo-tile-img"
        style={{ backgroundImage: `url(${src})`, backgroundPosition: position }}
      ></div>
      {(title || meta) && (
        <div className="photo-tile-overlay">
          {meta && <div className="photo-tile-meta" dangerouslySetInnerHTML={{ __html: meta }}></div>}
          {title && <div className="photo-tile-title" dangerouslySetInnerHTML={{ __html: title }}></div>}
        </div>
      )}
    </div>
  );
}

function Testimonial({ quote, fullQuote, attr, location, quoteNl, fullQuoteNl }) {
  const [open, setOpen] = React.useState(false);
  const lang = useLang();
  const t = useT();
  // Pick the right-language quote pair
  const showQuote = lang === 'NL' && quoteNl ? quoteNl : quote;
  const showFull = lang === 'NL' && fullQuoteNl ? fullQuoteNl : fullQuote;
  const hasMore = !!showFull && showFull.trim() !== showQuote.trim();
  return (
    <div className="testimonial">
      <p className="testimonial-quote">
        "{open && hasMore ? showFull : showQuote}"
      </p>
      {hasMore && (
        <button
          onClick={() => setOpen(!open)}
          className="btn-text-link"
          style={{ marginTop: -8, marginBottom: 24 }}
        >
          {open ? t('Read Less', 'Lees minder') : t('Read Full Story', 'Lees het hele verhaal')}
        </button>
      )}
      <div className="testimonial-attr">
        <span dangerouslySetInnerHTML={{ __html: attr }}></span>
        {location && <span className="location">· {location}</span>}
      </div>
    </div>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`} onClick={() => setOpen(!open)}>
      <div className="faq-q">
        <p className="faq-q-text">{q}</p>
        <span className="faq-toggle">+</span>
      </div>
      <div className="faq-a">{a}</div>
    </div>
  );
}

function FormField({ label, type = 'text', placeholder, helper, value, onChange, multiline, options }) {
  return (
    <div className="form-field">
      {label && <label>{label}</label>}
      {multiline ? (
        <textarea placeholder={placeholder} value={value || ''} onChange={onChange} />
      ) : options ? (
        <select value={value || ''} onChange={onChange} data-empty={!value}>
          <option value="" disabled>{placeholder || 'Choose…'}</option>
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} placeholder={placeholder} value={value || ''} onChange={onChange} />
      )}
      {helper && <div className="form-helper">{helper}</div>}
    </div>
  );
}

// Export shared components + photo refs to window for cross-file access
Object.assign(window, {
  PHOTOS, Brand, Header, Footer, Eyebrow, Rule,
  PhotoTile, Testimonial, FAQItem, FormField,
  Signature, useLang, useT,
});