/* ============================================================
   Shared components + bilingual (EN + 中文) helpers
   Both languages are shown at once, no toggle.
   ============================================================ */
const { useState, useEffect, useContext, useMemo } = React;

/* Bi: renders English with Chinese stacked beneath it. */
function Bi({ en, zh }) {
  return (
    <span className="bi">
      <span className="bi-en">{en}</span>
      {zh ? <span className="bi-zh" lang="zh">{zh}</span> : null}
    </span>
  );
}
window.Bi = Bi;

/* useTr returns:
   T(en, zh) -> bilingual node for display
   S(en, zh) -> plain English string for attributes / keys / values */
window.useTr = () => {
  const T = (en, zh) => <Bi en={en} zh={zh} />;
  const S = (en) => en;
  return { T, S };
};

/* ---- simple geometric icons (no complex SVG) ---- */
function Icon({ name, size = 22, stroke = 1.7, color = 'currentColor' }) {
  const c = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    plane: <><path d="M3 13l18-7-7 18-2.5-7.5L3 13z"/></>,
    home: <><path d="M4 11l8-7 8 7"/><path d="M6 10v9h12v-9"/><path d="M10 19v-5h4v5"/></>,
    coins: <><ellipse cx="9" cy="7" rx="6" ry="3"/><path d="M3 7v5c0 1.7 2.7 3 6 3s6-1.3 6-3"/><ellipse cx="15" cy="14" rx="6" ry="3"/><path d="M9 14v3c0 1.7 2.7 3 6 3s6-1.3 6-3v-3"/></>,
    check: <><path d="M20 6L9 17l-5-5"/></>,
    phone: <><path d="M5 4h4l2 5-3 2a12 12 0 005 5l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z"/></>,
    chat: <><path d="M4 5h16v11H8l-4 4z"/></>,
    pin: <><path d="M12 21s-7-6-7-11a7 7 0 1114 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    doc: <><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6M10 17h6"/></>,
    shield: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    calc: <><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8 7h8M8 11h2M12 11h2M16 11h0M8 15h2M12 15h2M16 15h0"/></>,
    star: <><path d="M12 3l2.6 5.6L21 9.3l-4.5 4.2L17.6 20 12 16.8 6.4 20l1.1-6.5L3 9.3l6.4-.7z"/></>,
    users: <><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-5 6-5s6 1.7 6 5"/><path d="M16 6.5a3 3 0 010 5.5M21 20c0-2.6-1.7-4.2-4-4.7"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18"/></>,
    key: <><circle cx="8" cy="14" r="4"/><path d="M11 11l8-8M16 3l3 3M14 5l2 2"/></>,
  };
  return <svg {...c}>{paths[name] || null}</svg>;
}
window.Icon = Icon;

/* ---- logo / wordmark (placeholder brand) ---- */
function Logo({ onClick, light }) {
  const ink = light ? '#fff' : 'var(--ink)';
  return (
    <a href="#" onClick={(e)=>{e.preventDefault(); onClick && onClick();}}
       style={{ display:'flex', alignItems:'center', gap:12 }}>
      <span style={{ position:'relative', width:38, height:38, flex:'0 0 auto' }}>
        <span style={{ position:'absolute', inset:0, borderRadius:'50% 50% 50% 4px',
          background:'var(--teal)', transform:'rotate(45deg)' }}/>
        <span style={{ position:'absolute', inset:'9px', borderRadius:'50% 50% 50% 2px',
          background:'var(--gold)', transform:'rotate(45deg)', opacity:.92 }}/>
      </span>
      <span style={{ lineHeight:1.05 }}>
        <span style={{ fontFamily:'var(--font-serif)', fontSize:19, fontWeight:600,
          color:ink, display:'block', letterSpacing:'-0.01em' }}>
          Mak Group
        </span>
        <span style={{ fontFamily:'var(--font-sans)', fontSize:10.5, fontWeight:600,
          letterSpacing:'0.14em', textTransform:'uppercase',
          color: light ? 'rgba(255,255,255,.7)' : 'var(--ink-faint)' }}>
          Immigration · Mortgages · Real Estate
        </span>
      </span>
    </a>
  );
}
window.Logo = Logo;

/* ---- header / nav ---- */
function Header({ page, go }) {
  const { T } = window.useTr();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 18);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const nav = [
    ['mortgages', T('Mortgages','贷款')],
    ['immigration', T('Immigration','移民')],
    ['realestate', T('Real Estate','房地产')],
    ['team', T('Our Team','团队')],
    ['resources', T('Resources','资源')],
  ];
  return (
    <header style={{ position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'oklch(0.985 0.008 80 / 0.86)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition:'all .25s ease' }}>
      <div className="wrap" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', minHeight:86, padding:'10px 0', gap:18 }}>
        <Logo onClick={()=>go('home')} />
        <nav style={{ display:'flex', alignItems:'center', gap:2 }} className="desktop-nav">
          {nav.map(([id, label]) => (
            <button key={id} onClick={()=>go(id)}
              style={{ border:'none', background:'transparent', padding:'7px 12px',
                fontSize:14.5, fontWeight: page===id ? 700 : 500, textAlign:'center',
                color: page===id ? 'var(--teal-deep)' : 'var(--ink-soft)',
                borderRadius:8, transition:'color .15s ease' }}
              onMouseEnter={e=>e.currentTarget.style.color='var(--teal-deep)'}
              onMouseLeave={e=>e.currentTarget.style.color = page===id ? 'var(--teal-deep)':'var(--ink-soft)'}>
              {label}
            </button>
          ))}
        </nav>
        <div style={{ display:'flex', alignItems:'center', gap:12 }}>
          <button className="btn btn-primary desktop-nav" onClick={()=>go('contact')}>
            {T('Book a free call','预约免费咨询')}
          </button>
          <button className="mobile-only" onClick={()=>setOpen(!open)}
            style={{ border:'1px solid var(--line)', background:'var(--surface)', width:42, height:42, borderRadius:10, display:'none', alignItems:'center', justifyContent:'center' }}>
            <div style={{ width:18 }}>
              <span style={{ display:'block', height:2, background:'var(--ink)', margin:'3px 0', borderRadius:2 }}/>
              <span style={{ display:'block', height:2, background:'var(--ink)', margin:'3px 0', borderRadius:2 }}/>
              <span style={{ display:'block', height:2, background:'var(--ink)', margin:'3px 0', borderRadius:2 }}/>
            </div>
          </button>
        </div>
      </div>
      {open && (
        <div className="mobile-only" style={{ borderTop:'1px solid var(--line)', background:'var(--surface)', padding:'12px 0' }}>
          <div className="wrap" style={{ display:'flex', flexDirection:'column', gap:2 }}>
            {nav.concat([['contact', T('Book a free call','预约免费咨询')]]).map(([id,label])=>(
              <button key={id} onClick={()=>{go(id); setOpen(false);}}
                style={{ textAlign:'left', border:'none', background:'transparent', padding:'12px 6px', fontSize:16, fontWeight:600, color:'var(--ink)' }}>{label}</button>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}
window.Header = Header;

/* ---- sticky contact bar (mobile-first conversion) ---- */
function ContactBar({ go }) {
  const { T } = window.useTr();
  return (
    <div className="contact-bar" style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:40,
      background:'oklch(0.255 0.018 215 / 0.96)', backdropFilter:'blur(10px)',
      borderTop:'1px solid oklch(1 0 0 / 0.08)', padding:'10px 0' }}>
      <div className="wrap" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12 }}>
        <span style={{ color:'rgba(255,255,255,.82)', fontSize:14.5, fontWeight:500 }}>
          {T('Free 15-minute consultation, in English, 普通话 or 粤语','免费15分钟咨询，国语、粤语或英语')}
        </span>
        <div style={{ display:'flex', gap:9 }}>
          <a className="cb-icon" href="#" onClick={e=>e.preventDefault()} aria-label="WhatsApp"
             style={{ display:'flex', alignItems:'center', gap:7, color:'#fff', background:'oklch(0.55 0.12 150)', padding:'9px 15px', borderRadius:999, fontSize:14, fontWeight:600 }}>
            <Icon name="chat" size={16} /> <span className="cb-label">WhatsApp / 微信</span>
          </a>
          <button className="btn btn-gold" onClick={()=>go('contact')} style={{ padding:'9px 18px', fontSize:14 }}>
            {T('Book now','立即预约')}
          </button>
        </div>
      </div>
    </div>
  );
}
window.ContactBar = ContactBar;

/* ---- footer ---- */
function Footer({ go }) {
  const { T } = window.useTr();
  const col = (title, links) => (
    <div>
      <div className="footer-h" style={{ fontSize:12.5, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,.5)', marginBottom:16 }}>{title}</div>
      <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
        {links.map(([label, id], i) => (
          <button key={i} onClick={()=>id&&go(id)} style={{ textAlign:'left', border:'none', background:'transparent', color:'rgba(255,255,255,.78)', fontSize:14.5, padding:0 }}
            onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.78)'}>{label}</button>
        ))}
      </div>
    </div>
  );
  const phone = (name, num, tel) => (
    <a href={'tel:'+tel} style={{ display:'block', color:'rgba(255,255,255,.78)' }}
       onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.78)'}>
      <span style={{ display:'block', fontSize:14.5, fontWeight:600, color:'#fff' }}>{name}</span>
      <span style={{ display:'block', fontSize:14.5 }}>{num}</span>
    </a>
  );
  return (
    <footer style={{ background:'var(--ink)', color:'#fff', paddingBottom:84 }}>
      <div className="wrap" style={{ padding:'72px 28px 40px' }}>
        <div className="footer-grid" style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1.1fr', gap:40 }}>
          <div>
            <Logo light onClick={()=>go('home')} />
            <p style={{ color:'rgba(255,255,255,.66)', fontSize:14.5, marginTop:18, maxWidth:300 }}>
              {T('A family team for immigration, mortgages, and real estate across the Lower Mainland.',
                 '一支家族团队，提供移民、贷款与房地产服务，深耕大温地区。')}
            </p>
          </div>
          {col(T('Services','服务'), [[T('Mortgages','贷款'),'mortgages'],[T('Immigration','移民'),'immigration'],[T('Real Estate','房地产'),'realestate']])}
          {col(T('Company','关于'), [[T('Our Team','团队'),'team'],[T('Resources','资源'),'resources'],[T('Book a Call','预约咨询'),'contact']])}
          <div>
            <div className="footer-h" style={{ fontSize:12.5, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,.5)', marginBottom:16 }}>{T('Contact','联系')}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {phone('Victor Mak','(604) 831-8833','6048318833')}
              {phone('Neville Mak','(778) 688-6667','7786886667')}
              <span style={{ fontSize:13.5, color:'rgba(255,255,255,.6)' }}>{T('Mandarin · Cantonese · English','普通话 · 粤语 · 英语')}</span>
            </div>
          </div>
        </div>
        <div style={{ borderTop:'1px solid rgba(255,255,255,.12)', marginTop:48, paddingTop:24, display:'flex', flexWrap:'wrap', justifyContent:'space-between', gap:12, color:'rgba(255,255,255,.5)', fontSize:13 }}>
          <span>© 2026 Mak Group</span>
          <span>{T('Mortgage Lic. #BCFSA-0000 · RCIC #R000000 · Real Estate, [Brokerage]','贷款牌照 #BCFSA-0000 · 移民顾问 RCIC #R000000 · 地产经纪 [经纪行]')}</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

/* ---- section heading helper ---- */
function SectionHead({ eyebrow, title, sub, center, light }) {
  return (
    <div style={{ maxWidth: center ? 720 : 760, margin: center ? '0 auto' : 0, textAlign: center ? 'center':'left' }}>
      {eyebrow && <div className="eyebrow" style={{ justifyContent: center?'center':'flex-start', marginBottom:16, color: light?'var(--gold)':'var(--teal)' }}>{eyebrow}</div>}
      <h2 style={{ fontSize:'clamp(28px, 3.4vw, 42px)', color: light?'#fff':'var(--ink)' }}>{title}</h2>
      {sub && <p className="muted" style={{ fontSize:18, marginTop:16, color: light?'rgba(255,255,255,.7)':'var(--ink-soft)' }}>{sub}</p>}
    </div>
  );
}
window.SectionHead = SectionHead;