// core.jsx — Tokens, hooks, primitives shared across all pages.
// Loaded first; everything below reads from window globals.

const REF = {
  paper: '#f5f5f3', paperAlt: '#eeeeec', cream: '#e8e4dd',
  ink: '#0a0a0a', ink2: '#3a3a3a', ink3: '#7a7a78',
  rule: 'rgba(0,0,0,0.08)', accent: '#c2543b', deep: '#0d2336',
};

const IMG = {
  qubiiEx:   'https://images.squarespace-cdn.com/content/v1/54587a7fe4b006db33da33ad/1636080308643-D2F00WPUK5B1L4R31TPB/maktar_productall.jpg?format=2500w',
  piconizer: 'https://images.squarespace-cdn.com/content/v1/54587a7fe4b006db33da33ad/b8ecb6dd-f9bd-4797-8e7c-11a0e7e5f5c6/P4s_2000.jpg',
  worldMap:  'https://images.squarespace-cdn.com/content/v1/54587a7fe4b006db33da33ad/1611115240048-YJQP4VUZ4LTXLZ26A1UQ/%E4%B8%96%E7%95%8C%E5%9C%B0%E5%9C%962.jpg?format=2500w',
  spectra:   'https://images.squarespace-cdn.com/content/v1/54587a7fe4b006db33da33ad/1612343680352-WAQYZDU9NMH0VBJD1XDL/spectra_en_859.jpg',
  awards:    'https://images.squarespace-cdn.com/content/v1/54587a7fe4b006db33da33ad/4333fe2e-4c6b-4456-ab19-2fd336aa6c62/Maktar%E5%BE%97%E7%8D%8E.jpg',
};

// Language → external sales site. zh-TW stays in this app.
const LANG_LINKS = {
  zh:  null,                        // current site
  en:  'https://us.maktar.com/',
  jp:  'https://jp.maktar.com/',
  th:  'https://th.maktar.com/',
};

const NAV_ITEMS = [
  { id: '',           label: '首頁',     hide: true },
  { id: 'about',      label: '關於我們' },
  { id: 'products',   label: '產品' },
  { id: 'technology', label: '技術' },
  { id: 'enterprise', label: '企業合作' },
  { id: 'news',       label: '最新消息' },
  { id: 'contact',    label: '聯絡我們' },
];

const PAGE_TITLES = {
  '':           'Maktar 民傑資科｜自動守護回憶',
  'about':      '關於我們｜Maktar 民傑資科',
  'products':   '產品｜Maktar 民傑資科',
  'technology': '技術｜Maktar 民傑資科',
  'enterprise': '企業合作｜Maktar 民傑資科',
  'news':       '最新消息｜Maktar 民傑資科',
  'contact':    '聯絡我們｜Maktar 民傑資科',
};

const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ── Hooks ──────────────────────────────────────────────────────────────
function useHashRoute() {
  const [hash, setHash] = useState(() => (window.location.hash || '#/').replace(/^#\/?/, ''));
  useEffect(() => {
    const onChange = () => setHash((window.location.hash || '#/').replace(/^#\/?/, ''));
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return hash.split('?')[0].split('/')[0] || '';
}

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(() => {
    if (typeof window === 'undefined') return false;
    const ua = navigator.userAgent || '';
    const uaMobile = /iPhone|iPod|Android.*Mobile|Mobile.*Android/i.test(ua);
    return uaMobile || window.innerWidth < 820;
  });
  useEffect(() => {
    const onResize = () => {
      const ua = navigator.userAgent || '';
      const uaMobile = /iPhone|iPod|Android.*Mobile|Mobile.*Android/i.test(ua);
      setIsMobile(uaMobile || window.innerWidth < 820);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return isMobile;
}

function usePageTitle(route) {
  useEffect(() => {
    document.title = PAGE_TITLES[route] || PAGE_TITLES[''];
  }, [route]);
}

// Scroll to top on route change
function useScrollTopOnRoute(route) {
  useEffect(() => { window.scrollTo(0, 0); }, [route]);
}

// ── Primitives ─────────────────────────────────────────────────────────
function Eyebrow({ dark, children, style }) {
  return (
    <div className="mono" style={{
      fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase',
      color: dark ? 'rgba(255,255,255,0.55)' : REF.ink3,
      ...style,
    }}>{children}</div>
  );
}

function Btn({ children, primary, dark, href, style, ...rest }) {
  const bg = primary ? (dark ? '#fff' : REF.ink) : 'transparent';
  const fg = primary ? (dark ? REF.ink : '#fff') : (dark ? '#fff' : REF.ink);
  const bdr = primary ? 'transparent' : (dark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.18)');
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} style={{
      padding: '12px 24px', fontSize: 14, fontWeight: 500,
      borderRadius: 999, border: `1px solid ${bdr}`,
      background: bg, color: fg, cursor: 'pointer', fontFamily: 'inherit',
      letterSpacing: '-0.01em', textDecoration: 'none', display: 'inline-block',
      ...style,
    }} {...rest}>{children}</Tag>
  );
}

// Page section wrapper — adapts padding to mobile
function Section({ children, dark, alt, color, style, mobile }) {
  const bg = color || (dark ? REF.deep : alt ? REF.paperAlt : REF.paper);
  return (
    <section style={{
      background: bg,
      color: dark ? '#fff' : REF.ink,
      padding: mobile ? '40px 24px' : '96px 80px',
      ...style,
    }}>{children}</section>
  );
}

// Section header (eyebrow + h2 + optional aside)
function SectionHead({ dark, eyebrow, title, aside, mobile }) {
  return (
    <div style={{
      display: mobile ? 'block' : 'flex',
      alignItems: 'flex-end', justifyContent: 'space-between',
      marginBottom: mobile ? 24 : 48, gap: 56,
    }}>
      <div>
        <Eyebrow dark={dark}>{eyebrow}</Eyebrow>
        <h2 style={{
          margin: mobile ? '12px 0 0' : '14px 0 0',
          fontSize: mobile ? 30 : 56,
          fontWeight: 600, letterSpacing: '-0.03em',
          lineHeight: 1.05,
          color: dark ? '#fff' : REF.ink,
        }}>{title}</h2>
      </div>
      {aside && (
        <div style={{
          marginTop: mobile ? 14 : 0,
          fontSize: mobile ? 14 : 15,
          color: dark ? 'rgba(255,255,255,0.7)' : REF.ink2,
          lineHeight: 1.65, maxWidth: 380,
        }}>{aside}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  REF, IMG, LANG_LINKS, NAV_ITEMS, PAGE_TITLES,
  useHashRoute, useIsMobile, usePageTitle, useScrollTopOnRoute,
  Eyebrow, Btn, Section, SectionHead,
});