// MEET2 — Shared components
// Logo (typographic + SVG mark), Nav, Footer, Section primitives,
// Photo placeholder, Bilingual text helper.
// Components are attached to `window` at the bottom so the per-variant
// scripts can use them.

const { useState, useEffect, useRef } = React;

// ── Bilingual text ──────────────────────────────────────────────
// Reads lang from window.__meetLang ('zh' | 'en') and re-renders on
// the `meet-lang-change` event. Use as <T zh="..." en="..." />.
function useLang() {
  const [lang, setLang] = useState(typeof window !== 'undefined' ? (window.__meetLang || 'zh') : 'zh');
  useEffect(() => {
    const h = (e) => setLang(e.detail);
    window.addEventListener('meet-lang-change', h);
    return () => window.removeEventListener('meet-lang-change', h);
  }, []);
  return lang;
}
function T({ zh, en }) {
  const lang = useLang();
  return <>{lang === 'en' ? (en ?? zh) : (zh ?? en)}</>;
}

// ── Logo mark ───────────────────────────────────────────────────
// Heart with two facing silhouettes, in champagne gold gradient.
function LogoMark({ size = 48, color }) {
  return (
    <img
      src="assets/logo.png"
      alt="覓 MEET2"
      width={size}
      height={size}
      style={{
        width: size,
        height: size,
        objectFit: 'contain',
        display: 'block',
        filter: color === '#fff' ? 'brightness(0) invert(1)' : 'none',
      }}
    />
  );
}

// ── Wordmark (logo lockup) ──────────────────────────────────────
function Logo({ size = 'md', mono = false }) {
  const scale = size === 'lg' ? 1.4 : size === 'sm' ? 1.05 : 1.25;
  const px = 56 * scale;
  return (
    <div className="m-logo" style={{ '--lscale': scale }}>
      <img
        src="assets/logo.png"
        alt="覓 MEET2"
        style={{
          width: px, height: px,
          objectFit: 'contain', display: 'block',
          filter: mono ? 'brightness(0) invert(1)' : 'none',
        }}
      />
      <div className="m-logo-text">
        <div className="m-logo-word">
          覓 <span>MEET</span><sup>2</sup>
        </div>
        <div className="m-logo-tag">Lasting Love · Meet Two Hearts</div>
      </div>
    </div>
  );
}

// ── Nav ─────────────────────────────────────────────────────────
function Nav({ variant = 'light', sticky = false }) {
  const lang = useLang();
  const items = [
    { zh: '品牌故事', en: 'About', href: '#about' },
    { zh: '服務', en: 'Service', href: '#service' },
    { zh: '配對流程', en: 'How it works', href: '#process' },
    { zh: '顧問團隊', en: 'Matchmakers', href: '#team' },
    { zh: '會員見證', en: 'Stories', href: '#stories' },
    { zh: '活動', en: 'Events', href: '#events' },
  ];
  return (
    <nav className={`m-nav m-nav--${variant}`} data-sticky={sticky}>
      <Logo size="sm" mono={variant === 'dark'} />
      <ul className="m-nav-links">
        {items.map((it) => (
          <li key={it.href}><a href={it.href}>{lang === 'en' ? it.en : it.zh}</a></li>
        ))}
      </ul>
      <div className="m-nav-actions">
        <LangToggle compact />
        <a href="apply.html" className="m-btn m-btn-primary" style={{ height: 42, padding: '0 22px', fontSize: 14 }}>
          <T zh="立即開始尋覓" en="Begin" />
        </a>
      </div>
    </nav>
  );
}

const LANGS = [
  { code: 'zh',    short: '繁中', label: '繁體中文' },
  { code: 'en',    short: 'EN',   label: 'English' },
  { code: 'ja',    short: '日本',  label: '日本語' },
  { code: 'ko',    short: '한국',  label: '한국어' },
  { code: 'zh-CN', short: '简中', label: '简体中文' },
];
function LangToggle({ compact }) {
  const lang = useLang();
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);
  const set = (l) => {
    window.__meetLang = l;
    window.dispatchEvent(new CustomEvent('meet-lang-change', { detail: l }));
    setOpen(false);
  };
  const current = LANGS.find((l) => l.code === lang) || LANGS[0];
  return (
    <div className={`m-lang m-lang--dropdown ${compact ? 'm-lang--compact' : ''}`} ref={ref}>
      <button className="m-lang-btn" aria-haspopup="listbox" aria-expanded={open}
              onClick={() => setOpen((v) => !v)}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1"/>
          <path d="M1.5 7h11M7 1.5c1.8 2 1.8 9 0 11M7 1.5c-1.8 2-1.8 9 0 11" stroke="currentColor" strokeWidth="1" fill="none"/>
        </svg>
        <span>{current.short}</span>
        <svg width="9" height="6" viewBox="0 0 9 6" fill="none" aria-hidden="true">
          <path d="M1 1.5l3.5 3 3.5-3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {open && (
        <ul className="m-lang-menu" role="listbox">
          {LANGS.map((l) => (
            <li key={l.code}>
              <button role="option" aria-selected={l.code === lang} onClick={() => set(l.code)}>
                <span>{l.label}</span>
                {l.code === lang && (
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M2 6.5l2.5 2.5L10 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// ── Footer ──────────────────────────────────────────────────────
function Footer({ variant = 'light' }) {
  return (
    <footer className={`m-footer m-footer--${variant}`}>
      <div className="m-footer-grid">
        <div>
          <Logo size="md" mono={variant === 'dark'} />
          <p className="m-footer-line"><T
            zh="在尋覓之中，遇見剛剛好的你。"
            en="Every search leads to a meaningful meet."
          /></p>
        </div>
        <div>
          <h5><T zh="關於覓" en="About" /></h5>
          <ul>
            <li><a href="#"><T zh="品牌故事" en="Our story" /></a></li>
            <li><a href="#"><T zh="顧問團隊" en="Matchmakers" /></a></li>
            <li><a href="#"><T zh="加入我們" en="Careers" /></a></li>
          </ul>
        </div>
        <div>
          <h5><T zh="服務" en="Service" /></h5>
          <ul>
            <li><a href="#"><T zh="一對一顧問" en="1-on-1 advisory" /></a></li>
            <li><a href="#"><T zh="精選聯誼活動" en="Curated events" /></a></li>
            <li><a href="#"><T zh="會員方案" en="Membership" /></a></li>
          </ul>
        </div>
        <div>
          <h5><T zh="聯絡" en="Contact" /></h5>
          <ul>
            <li>service@meet2.love</li>
            <li>+886 2 2700 0000</li>
            <li><T zh="台北市信義區松仁路 100 號 12F" en="12F, 100 Songren Rd., Taipei" /></li>
          </ul>
        </div>
      </div>
      <div className="m-footer-bar">
        <span>© 2026 覓 MEET2.  All hearts reserved.</span>
        <span><a href="#">Privacy</a>  ·  <a href="#">Terms</a>  ·  <a href="#">隱私權政策</a></span>
      </div>
    </footer>
  );
}

// ── Photo placeholder ───────────────────────────────────────────
function Photo({ tone = 'pink', label, ratio = '4/5', src, alt, position = 'center', style, children, className = '' }) {
  return (
    <div className={`m-photo ${className}`} data-tone={tone} data-has-img={src ? 'true' : undefined}
         style={{ aspectRatio: ratio, ...style }}>
      {src && (
        <img src={src} alt={alt || label || ''} className="m-photo-img"
             style={{ objectPosition: position }} />
      )}
      {children}
      {label && !src && <span className="m-photo-label">{label}</span>}
    </div>
  );
}

// ── Section primitive ───────────────────────────────────────────
function Section({ id, bg, children, padding = 'lg', style }) {
  return (
    <section id={id} className={`m-section m-section--${padding}`}
             style={{ background: bg, ...style }}>
      <div className="m-section-inner">{children}</div>
    </section>
  );
}

// ── Reveal small marquee of ornament/dividers ───────────────────
function Ornament({ kind = 'flourish', color }) {
  const c = color || 'currentColor';
  if (kind === 'flourish') {
    return (
      <svg width="120" height="14" viewBox="0 0 120 14" fill="none" aria-hidden="true">
        <path d="M2 7 L 48 7" stroke={c} strokeWidth="1" />
        <path d="M52 7 c1-3 4-3 5 0 c1 3-4 3-3 0 c1-3 4-3 5 0" stroke={c} strokeWidth="1" fill="none"/>
        <path d="M60 7 c-.5-1.4-2.6-1.4-2.6.2 c0 1 1.3 1.8 2.6 2.8 c1.3-1 2.6-1.8 2.6-2.8 c0-1.6-2.1-1.6-2.6-.2z" fill={c}/>
        <path d="M64 7 c1-3 4-3 5 0 c1 3-4 3-3 0 c1-3 4-3 5 0" stroke={c} strokeWidth="1" fill="none"/>
        <path d="M72 7 L 118 7" stroke={c} strokeWidth="1" />
      </svg>
    );
  }
  return null;
}

Object.assign(window, {
  T, useLang, LogoMark, Logo, Nav, LangToggle, Footer, Photo, Section, Ornament,
});