/* ============================================================
   Home page, the "one team, full journey" showcase
   ============================================================ */
function HomePage({ go }) {
  const { T } = window.useTr();
  const { Icon, SectionHead } = window;

  const journey = [
    { icon:'plane', step:'01', t:T('Immigrate','移民登陆'),
      d:T('PR, work & study permits, family sponsorship, guided by a licensed RCIC.','永居、工签学签、家庭团聚，持牌移民顾问全程指导。'),
      tag:T('Immigration','移民'), pg:'immigration' },
    { icon:'coins', step:'02', t:T('Get financed','获得贷款'),
      d:T('Pre-approval and the best rates from 30+ lenders, newcomer programs welcome.','贷款预批，30+放款机构最优利率，支持新移民专案。'),
      tag:T('Mortgages','贷款'), pg:'mortgages' },
    { icon:'home', step:'03', t:T('Own your home','安家置业'),
      d:T('Find and buy the right home across the Lower Mainland with a local agent.','本地经纪助您在大温地区找到并购入理想居所。'),
      tag:T('Real Estate','房地产'), pg:'realestate' },
  ];

  return (
    <main>
      {/* ===== HERO ===== */}
      <section style={{ position:'relative', overflow:'hidden', paddingTop:48 }}>
        <div className="wrap" style={{ padding:'40px 28px 76px' }}>
          <div className="rise" style={{ maxWidth:760 }}>
            <div style={{ display:'inline-flex', alignItems:'center', gap:9, padding:'7px 14px', background:'var(--teal-wash)', border:'1px solid var(--line)', borderRadius:999, fontSize:13.5, fontWeight:600, color:'var(--teal-deep)', marginBottom:24 }}>
              <span style={{ width:7, height:7, borderRadius:99, background:'var(--gold-deep)' }}/>
              {T('Serving the Lower Mainland, BC','服务于卑诗省大温地区')}
            </div>
            <h1 style={{ fontSize:'clamp(36px, 5vw, 60px)', lineHeight:1.05 }}>
              {T('Land in Canada. Get financed. ', '登陆加拿大，办好贷款，')}
              <span style={{ color:'var(--teal)' }}>{T('Own your home.','安家置业。')}</span>
            </h1>
            <p style={{ fontSize:19.5, color:'var(--ink-soft)', marginTop:22, maxWidth:580 }}>
              {T('One trusted family team for immigration, mortgages, and real estate, guiding newcomers and locals every step, in 普通话, 粤语 & English.',
                 '一支值得信赖的家族团队，集移民、贷款、房地产于一体，用国语、粤语和英语，陪伴新移民与本地居民走好每一步。')}
            </p>
            <div style={{ display:'flex', gap:13, marginTop:32, flexWrap:'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={()=>go('contact')}>{T('Book a free consultation','预约免费咨询')} <Icon name="arrow" size={18}/></button>
              <button className="btn btn-ghost btn-lg" onClick={()=>go('mortgages')}>{T('See our services','查看服务')}</button>
            </div>
            {/* proof points */}
            <div style={{ display:'flex', gap:0, marginTop:40, flexWrap:'wrap', borderTop:'1px solid var(--line)', paddingTop:26 }}>
              {[['30+', T('lenders, banks & credit unions','银行、信用社等放款机构')],
                ['10 yrs', T('serving the Lower Mainland','深耕大温地区')],
                ['3', T('languages spoken fluently','国语 · 粤语 · 英语')]].map(([v,l],i)=>(
                <div key={i} style={{ paddingInline: i? '26px':'0 26px', borderLeft: i? '1px solid var(--line)':'none' }}>
                  <div style={{ fontFamily:'var(--font-serif)', fontSize:27, fontWeight:500, color:'var(--ink)', lineHeight:1.1 }}>{v}</div>
                  <div style={{ fontSize:13, color:'var(--ink-faint)', fontWeight:500, marginTop:5, maxWidth:140 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ===== ACCREDITATION BAND (honest credentials, not faux logos) ===== */}
      <section style={{ borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', background:'var(--bg-2)' }}>
        <div className="wrap trust-strip" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 28px', gap:22, flexWrap:'wrap' }}>
          <span style={{ fontSize:12.5, fontWeight:700, letterSpacing:'0.13em', textTransform:'uppercase', color:'var(--ink-faint)', maxWidth:150 }}>{T('Licensed, accredited & accountable','持牌 · 认证 · 负责')}</span>
          <div style={{ display:'flex', flexWrap:'wrap' }}>
            {[[T('Mortgages','贷款'), T('BC Financial Services Authority','卵诗金融服务管理局')],
              [T('Immigration','移民'), T('CICC, Licensed RCIC','加拿大移民顾问学院 · 持牌顾问')],
              [T('Real Estate','房地产'), T('Greater Vancouver REALTORS®','大温哥华地产协会会员')]].map((it,i)=>(
              <div key={i} style={{ display:'flex', gap:10, alignItems:'center', padding:'4px 22px', borderLeft: i? '1px solid var(--line)':'none' }}>
                <Icon name="shield" size={18} color="var(--teal)" />
                <div>
                  <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--teal-deep)' }}>{it[0]}</div>
                  <div style={{ fontSize:13.5, fontWeight:600, color:'var(--ink)' }}>{it[1]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== JOURNEY ===== */}
      <section className="section">
        <div className="wrap">
          <SectionHead center eyebrow={T('Why one team','为什么选择一站式团队')}
            title={T('Your whole journey, under one roof','您的整个旅程，一站式服务')}
            sub={T('Most people juggle three separate professionals. We connect immigration, financing, and your home into one seamless path, so nothing falls through the cracks.',
                   '大多数人需要分别奔波于三位专业人士。我们将移民、贷款与置业连成一条无缝路径，让每个环节都不掉链子。')} />
          <div className="journey-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:22, marginTop:54, position:'relative' }}>
            {journey.map((j,i)=>(
              <div key={i} className="card journey-card" onClick={()=>go(j.pg)}
                style={{ padding:'32px 28px', cursor:'pointer', transition:'transform .2s ease, box-shadow .2s ease', position:'relative' }}
                onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-5px)';e.currentTarget.style.boxShadow='var(--shadow-lg)';}}
                onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='var(--shadow-sm)';}}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
                  <span style={{ display:'flex', alignItems:'center', gap:8, fontFamily:'var(--font-sans)', fontSize:12.5, fontWeight:700, letterSpacing:'0.13em', textTransform:'uppercase', color:'var(--teal)' }}><Icon name={j.icon} size={17} color="var(--teal)" /> {j.tag}</span>
                  <span style={{ fontFamily:'var(--font-serif)', fontSize:30, color:'var(--line)', fontWeight:500, lineHeight:1 }}>{j.step}</span>
                </div>
                <div style={{ height:1, background:'var(--line)', marginBottom:20 }}/>
                <h3 style={{ fontSize:23, marginBottom:10 }}>{j.t}</h3>
                <p className="muted" style={{ fontSize:15.5, marginBottom:18 }}>{j.d}</p>
                <span className="tlink">{T('Learn more','了解更多')} <Icon name="arrow" size={15}/></span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== NEWCOMER FOCUS (bilingual highlight) ===== */}
      <section className="section-sm">
        <div className="wrap">
          <div className="newcomer-band" style={{ background:'var(--teal-ink)', borderRadius:'var(--radius-lg)', overflow:'hidden', color:'#fff' }}>
            <div style={{ padding:'56px 52px' }}>
              <div className="eyebrow" style={{ color:'var(--gold)', marginBottom:18 }}>{T('Built for newcomers','为新移民打造')}</div>
              <h2 style={{ color:'#fff', fontSize:'clamp(26px,3vw,36px)' }}>{T('New to Canada? We speak your language, literally.','初来加拿大？我们懂你的语言，真正的母语服务。')}</h2>
              <p style={{ color:'rgba(255,255,255,.74)', fontSize:17, marginTop:18, maxWidth:460 }}>
                {T('From your first work permit to the keys to your first home, we guide you in 普通话 and 粤语, explain Canadian credit and lending in plain terms, and connect you with newcomer mortgage programs.',
                   '从第一份工签到第一套房的钥匙，我们用国语和粤语全程指导，用最易懂的方式讲解加拿大信用与贷款，并为您对接新移民贷款专案。')}
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:13, marginTop:28 }}>
                {[T('New-to-Canada mortgage programs (limited credit history OK)','新移民贷款专案（信用记录有限也可申请）'),
                  T('PR, work permit & study permit pathways','永居、工签、学签全方位路径'),
                  T('Documents and appointments in your language','母语文件与预约服务')].map((x,i)=>(
                  <div key={i} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                    <span style={{ flex:'0 0 auto', width:24, height:24, borderRadius:99, background:'var(--gold)', display:'flex', alignItems:'center', justifyContent:'center', marginTop:1 }}><Icon name="check" size={14} color="#fff" stroke={2.4}/></span>
                    <span style={{ fontSize:15.5, color:'rgba(255,255,255,.92)' }}>{x}</span>
                  </div>
                ))}
              </div>
              <button className="btn btn-gold btn-lg" style={{ marginTop:32 }} onClick={()=>go('immigration')}>{T('See immigration services','查看移民服务')} <Icon name="arrow" size={17}/></button>
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}
window.HomePage = HomePage;

/* ---- reusable final CTA ---- */
function CTASection({ go }) {
  const { T } = window.useTr();
  const { Icon } = window;
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ background:'var(--ink)', borderRadius:'var(--radius-lg)', padding:'64px 52px', textAlign:'center', color:'#fff', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'relative' }}>
            <h2 style={{ color:'#fff', fontSize:'clamp(28px,3.6vw,44px)', maxWidth:620, margin:'0 auto' }}>{T('Let’s map out your path to a Canadian home.','让我们一起规划您的加拿大安家之路。')}</h2>
            <p style={{ color:'rgba(255,255,255,.72)', fontSize:18, marginTop:18, maxWidth:520, marginInline:'auto' }}>{T('Free 15-minute consultation. No obligation. In the language you’re most comfortable with.','免费15分钟咨询，无任何义务，用您最舒适的语言交流。')}</p>
            <div style={{ display:'flex', gap:13, justifyContent:'center', marginTop:32, flexWrap:'wrap' }}>
              <button className="btn btn-gold btn-lg" onClick={()=>go('contact')}>{T('Book a free call','预约免费咨询')} <Icon name="arrow" size={17}/></button>
              <button className="btn btn-lg" style={{ background:'rgba(255,255,255,.12)', color:'#fff' }} onClick={()=>go('team')}>{T('Meet the team','认识团队')}</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.CTASection = CTASection;