/* XHealth website — shared parts: i18n helper, Nav (+ lang toggle), Footer, CTA */
const { useState, useEffect, useRef } = React;
const D = window.XH_DATA;

/* tr(field, lang): field is either a plain value or { en, zh } */
function tr(field, lang) {
  if (field == null) return '';
  if (typeof field === 'object' && ('en' in field || 'zh' in field)) return field[lang] != null ? field[lang] : field.en;
  return field;
}

function Icon({ name, ...rest }) { return <i data-lucide={name} {...rest}></i>; }

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const els = ref.current ? ref.current.querySelectorAll('.reveal') : [];
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
  return ref;
}

/* decorative floating motif shapes (pure CSS, brand pastels) — data-px = parallax speed */
function Decor() {
  return (
    <React.Fragment>
      <span className="shape circle" data-px="0.08" style={{ width: 90, height: 90, background: 'var(--cyan-200)', top: 80, right: '6%', opacity: .32 }} />
      <span className="shape rsq" data-px="-0.07" style={{ width: 64, height: 64, background: 'var(--navy-400)', bottom: 60, left: '4%', opacity: .22 }} />
      <span className="shape circle" data-px="0.05" style={{ width: 38, height: 38, border: '2px solid var(--cyan-400)', top: '40%', left: '8%', opacity: .45 }} />
    </React.Fragment>
  );
}

/* a layer of drifting motif shapes, dropped inside a position:relative section */
function FloatingShapes({ set }) {
  const SETS = {
    a: [
      { cls: 'circle', w: 120, px: 0.10, css: { top: '12%', right: '5%', background: 'var(--cyan-200)', opacity: .22 } },
      { cls: 'rsq', w: 72, px: -0.08, css: { bottom: '14%', left: '4%', background: 'var(--navy-400)', opacity: .18 } },
      { cls: 'circle', w: 42, px: 0.06, css: { top: '60%', left: '11%', border: '2px solid var(--cyan-300)', opacity: .38 } },
    ],
    b: [
      { cls: 'rsq', w: 104, px: 0.09, css: { top: '8%', left: '3%', background: 'var(--cyan-100)', opacity: .32 } },
      { cls: 'circle', w: 66, px: -0.07, css: { bottom: '12%', right: '6%', background: 'var(--navy-500)', opacity: .22 } },
      { cls: 'circle', w: 34, px: 0.05, css: { top: '52%', right: '14%', background: 'var(--cyan-200)', opacity: .35 } },
    ],
  };
  return (
    <div className="decor-layer" aria-hidden="true">
      {(SETS[set] || []).map((s, i) => (
        <span key={i} className={'shape ' + s.cls} data-px={s.px} style={{ width: s.w, height: s.w, ...s.css }} />
      ))}
    </div>
  );
}

/* scroll parallax for any .shape[data-px] (bounded, rAF-throttled, reduced-motion aware) */
function ParallaxFX() {
  useEffect(() => {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return undefined;
    let raf = 0;
    const run = () => {
      raf = 0;
      const vh = window.innerHeight;
      document.querySelectorAll('.shape[data-px]').forEach((el) => {
        const p = el.offsetParent; if (!p) return;
        const sp = parseFloat(el.getAttribute('data-px')) || 0.06;
        const center = p.getBoundingClientRect().top + el.offsetTop + el.offsetHeight / 2;
        const delta = (vh / 2 - center) * sp;
        el.style.transform = 'translate3d(0,' + delta.toFixed(1) + 'px,0)';
      });
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(run); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    run();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return null;
}

const NAV_IDS = ['home', 'services', 'marketing', 'work', 'insights', 'about'];

/* Lightweight navy/cyan blob canvas — shared brand motion (echoes the philosophy page) */
function BlobCanvas({ variant }) {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current; if (!canvas) return undefined;
    const ctx = canvas.getContext('2d');
    const PAL = ['#28a3d2', '#2556a8', '#1f3a63', '#7cc4e0', '#3f7fc4'];
    const COUNT = variant === 'cta' ? 4 : 5;
    let raf, last = 0, running = true;
    function blob(cx, cy, r, wob, phase, rot, color) {
      const N = 56; ctx.beginPath();
      for (let i = 0; i <= N; i++) {
        const a = (i / N) * Math.PI * 2;
        const rr = r * (1 + wob * Math.sin(a * 3 + phase) * 0.5 + wob * Math.cos(a * 5 - phase * 0.7 + rot) * 0.3);
        const x = cx + Math.cos(a + rot) * rr, y = cy + Math.sin(a + rot) * rr;
        i ? ctx.lineTo(x, y) : ctx.moveTo(x, y);
      }
      ctx.closePath(); ctx.fillStyle = color; ctx.fill();
    }
    function resize() {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function draw(t) {
      const w = canvas.clientWidth, h = canvas.clientHeight, s = Math.min(w, h), cx = w / 2, cy = h / 2;
      const tt = t / 1000, R = s * (0.18 + 0.06 * Math.sin(tt * 0.3));
      ctx.clearRect(0, 0, w, h);
      ctx.globalCompositeOperation = 'screen';
      for (let i = 0; i < COUNT; i++) {
        const ang = (i / COUNT) * Math.PI * 2 + tt * (variant === 'cta' ? 0.09 : 0.12);
        const bx = cx + Math.cos(ang) * R, by = cy + Math.sin(ang) * R * 0.82;
        const r = s * (0.18 + 0.05 * Math.sin(tt * 0.5 + i * 1.7));
        ctx.globalAlpha = 0.5;
        blob(bx, by, r, 0.18, tt * 0.7 + i, tt * 0.15 + i, PAL[i % PAL.length]);
      }
      ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
    }
    function loop(t) {
      if (running && t - last > 40) { last = t; draw(t); }
      raf = requestAnimationFrame(loop);
    }
    const io = new IntersectionObserver((e) => { running = e[0].isIntersecting; }, { threshold: 0 });
    io.observe(canvas);
    window.addEventListener('resize', resize); resize();
    raf = requestAnimationFrame(loop);
    return () => { cancelAnimationFrame(raf); io.disconnect(); window.removeEventListener('resize', resize); };
  }, [variant]);
  return <canvas ref={ref} className={'blobfx blobfx--' + variant} aria-hidden="true"></canvas>;
}

function Nav({ route, go, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const baseRoute = route.split(':')[0];
  const goM = (id) => { setMenuOpen(false); go(id); };
  return (
    <React.Fragment>
    <nav className={'nav' + (scrolled ? ' scrolled' : '') + (menuOpen ? ' menu-open' : '')}>
      <div className="wrap wrap--wide nav__inner">
        <img className="nav__logo" src={window.R('../../assets/logo-xhealth.png')} alt="XHealth Solution" onClick={() => goM('home')} />
        <div className="nav__links">
          {NAV_IDS.map((id) => (
            id === 'about'
              ? (
                <div key={id} className="nav__drop">
                  <button className={'nav__link nav__droptoggle' + (baseRoute === id ? ' active' : '')}>{tr(D.ui.nav[id], lang)} <Icon name="chevron-down" /></button>
                  <div className="nav__dropmenu">
                    <button className="nav__dropitem" onClick={() => go('about')}>{lang === 'zh' ? '公司簡介' : 'Company'}</button>
                    <a className="nav__dropitem" href="philosophy.html">{lang === 'zh' ? '企業哲學' : 'Philosophy'}</a>
                  </div>
                </div>
              )
              : id === 'services'
              ? <button key={id} className={'nav__link' + (baseRoute === id ? ' active' : '')} onClick={() => go(id)}>{tr(D.ui.nav[id], lang)}</button>
              : <button key={id} className={'nav__link' + (baseRoute === id ? ' active' : '')} onClick={() => go(id)}>{tr(D.ui.nav[id], lang)}</button>
          ))}
        </div>
        <button className="langtoggle" onClick={() => setLang(lang === 'en' ? 'zh' : 'en')}
          aria-label={lang === 'en' ? 'Switch to Chinese' : '切換至英文'}
          title={lang === 'en' ? '切換至中文' : 'Switch to English'}>
          <Icon name="globe" />
          <span className="langtoggle__cur">{lang === 'en' ? 'EN' : '中'}</span>
          <span className="langtoggle__alt">{lang === 'en' ? '中' : 'EN'}</span>
        </button>
        <a className="btn btn--accent btn--sm nav__cta" onClick={() => go('contact')}>{tr(D.ui.navCta, lang)}</a>
        <button className="nav__burger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu" aria-expanded={menuOpen}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
      <div className={'nav__drawer' + (menuOpen ? ' open' : '')}>
        <div className="nav__drawer-inner">
          {NAV_IDS.map((id) => (
            id === 'about'
              ? (
                <React.Fragment key={id}>
                  <button className="nav__drawer-link" onClick={() => goM('about')}>{(lang === 'zh' ? '關於 · ' : 'About · ') + (lang === 'zh' ? '公司簡介' : 'Company')}</button>
                  <a className="nav__drawer-link" href="philosophy.html">{lang === 'zh' ? '關於 · 企業哲學' : 'About · Philosophy'}</a>
                </React.Fragment>
              )
              : id === 'services'
              ? <button key={id} className={'nav__drawer-link' + (baseRoute === id ? ' active' : '')} onClick={() => goM(id)}>{tr(D.ui.nav[id], lang)}</button>
              : <button key={id} className={'nav__drawer-link' + (baseRoute === id ? ' active' : '')} onClick={() => goM(id)}>{tr(D.ui.nav[id], lang)}</button>
          ))}
          <a className="btn btn--accent btn--lg nav__drawer-cta" onClick={() => goM('contact')}>{tr(D.ui.navCta, lang)} <Icon name="arrow-right" /></a>
        </div>
      </div>
    </React.Fragment>
  );
}

/* Right-side section rail — homepage wayfinding (desktop only) */
function SectionRail({ lang }) {
  const ITEMS = [
    { id: 'who', en: 'About', zh: '關於' },
    { id: 'services', en: 'Services', zh: '服務' },
    { id: 'work', en: 'Work', zh: '案例' },
  ];
  const [active, setActive] = useState(ITEMS[0].id);
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? Math.min(Math.max((window.scrollY || h.scrollTop) / max, 0), 1) : 0);
      const mid = (window.scrollY || h.scrollTop) + window.innerHeight * 0.38;
      let cur = ITEMS[0].id;
      for (const it of ITEMS) {
        const el = document.getElementById('sec-' + it.id);
        if (el && el.offsetTop <= mid) cur = it.id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);
  const goTo = (id) => {
    const el = document.getElementById('sec-' + id);
    if (el) window.scrollTo({ top: el.offsetTop - 78, behavior: 'smooth' });
  };
  return (
    <nav className="srail" aria-label="Section navigation">
      <div className="srail__track"><div className="srail__fill" style={{ height: (progress * 100).toFixed(1) + '%' }}></div></div>
      {ITEMS.map((it) => (
        <button key={it.id} className={'srail__item' + (active === it.id ? ' active' : '')} onClick={() => goTo(it.id)} aria-label={it.en}>
          <span className="srail__label">{lang === 'zh' ? it.zh : it.en}</span>
          <span className="srail__dot"></span>
        </button>
      ))}
    </nav>
  );
}

/* Scroll progress bar — used on case-study pages */
function ScrollProgress() {
  const [p, setP] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? Math.min(Math.max((window.scrollY || h.scrollTop) / max, 0), 1) : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true }); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return <div className="scrollprog"><div className="scrollprog__fill" style={{ width: (p * 100).toFixed(1) + '%' }}></div></div>;
}

function CaseServices({ slug, go, lang }) {
  const svcSlugs = (D.serviceTags && D.serviceTags[slug]) || [];
  if (!svcSlugs.length) return null;
  const svcs = svcSlugs.map((s) => D.services.find((x) => x.slug === s)).filter(Boolean);
  return (
    <section className="section caseservices">
      <div className="wrap wrap--wide">
        <p className="eyebrow caseservices__eyebrow">{tr(D.ui.servicesDelivered, lang)}</p>
        <div className="caseservices__chips">
          {svcs.map((s) => (
            <button key={s.slug} className="caseservices__chip" onClick={() => go('services:' + s.slug)}>
              <span className="caseservices__num">{s.n}</span>
              <span className="caseservices__name">{tr(s.name, lang)}</span>
              <Icon name="arrow-up-right" />
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

const XH_WA = 'https://wa.me/85266235297?text=你好，我想預約%20初次諮詢。%20Hi%20XHealth,%20I%20want%20to%20Make%20an%20Appointment.';
window.XH_WA = XH_WA;

function CTABand({ go, lang }) {
  const c = D.pages.cta;
  return (
    <div className="section wrap wrap--wide">
      <div className="ctaband">
        <img className="ctaband-motif" src={window.R('../../assets/motif-band.png')} alt="" />
        <div className="ctaband-mesh" />
        <BlobCanvas variant="cta" />
        <div className="ctaband__inner">
          <p className="eyebrow on-dark">{tr(c.eyebrow, lang)}</p>
          <h2 className="display h-1 on-dark" style={{ maxWidth: 760 }}>{tr(c.title, lang)}</h2>
          <p className="lead" style={{ color: 'var(--text-on-dark-muted)', maxWidth: 580 }}>{tr(c.lead, lang)}</p>
          <div style={{ display: 'flex', gap: 14, marginTop: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a className="btn btn--accent btn--lg" href={XH_WA} target="_blank" rel="noopener noreferrer">{tr(D.ui.consult, lang)} <Icon name="arrow-right" /></a>
            <a className="btn btn--ghost-dark btn--lg" onClick={() => go('work')}>{tr(D.ui.seeWork, lang)}</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function Footer({ go, lang }) {
  return (
    <footer className="footer">
      <div className="footer__statement">
        <div className="footer__statement-glow" aria-hidden="true"></div>
        <div className="wrap wrap--wide">
          <p className="footer__statement-eyebrow">{tr(D.ui.motto, lang)}</p>
          <h2 className="footer__statement-big">
            {(lang === 'zh' ? '看清方向，\u200b品牌才能生長' : 'Clarity drives growth').split('').map((ch, i) => (
              <span key={i} style={{ animationDelay: (i * 0.045).toFixed(2) + 's' }}>{ch === '\u200b' ? <br /> : ch}</span>
            ))}
          </h2>
        </div>
      </div>
      <div className="wrap wrap--wide">
        <div className="footer__grid">
          <div>
            <img className="footer__logo" src={window.R('../../assets/logo-xhealth-white.png')} alt="XHealth Solution" />
            <p className="footer__tag">{lang === 'zh' ? '說好故事，創造意義' : D.brand.tagline_en}</p>
          </div>
          <div className="footer__col">
            <h4>{tr(D.ui.footerNav, lang)}</h4>
            {D.ui.footerAboutLinks.map((l) => <a key={l.route} onClick={() => go(l.route)}>{tr(l.label, lang)}</a>)}
          </div>
          <div className="footer__col">
            <h4>{tr(D.ui.footerServices, lang)}</h4>
            {D.services.filter((s) => s.slug !== 'brand-strategy').slice(0, 5).map((s) => <a key={s.n} onClick={() => go('services:' + s.slug)}>{tr(s.name, lang)}</a>)}
          </div>
          <div className="footer__col">
            <h4>{tr(D.ui.footerContact, lang)}</h4>
            <a href={'mailto:' + D.brand.email}>{D.brand.email}</a>
            <a>{D.brand.whatsapp}</a>
            <a>{tr(D.ui.footerReach, lang)}</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{tr(D.ui.rights, lang)}</span>
          <span style={{ fontFamily: 'var(--font-mono)' }}>{tr(D.ui.motto, lang)}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { tr, Icon, useReveal, Decor, FloatingShapes, ParallaxFX, BlobCanvas, SectionRail, ScrollProgress, Nav, CaseServices, CTABand, Footer, NAV_IDS, XH_WA });