/* ============================================================
   Inner pages: services, team, resources, areas, contact
   ============================================================ */

/* ---- reusable page hero ---- */
function PageHero({ eyebrow, title, sub, imgLabel }) {
  const { Icon } = window;
  return (
    <section style={{ background:'var(--bg-2)', borderBottom:'1px solid var(--line)' }}>
      <div className="wrap" style={{ padding:'68px 28px 64px' }}>
        <div className="rise" style={{ maxWidth:760 }}>
          <div className="eyebrow" style={{ marginBottom:16 }}>{eyebrow}</div>
          <h1 style={{ fontSize:'clamp(32px,4.4vw,52px)' }}>{title}</h1>
          <p style={{ fontSize:19, color:'var(--ink-soft)', marginTop:18, maxWidth:560 }}>{sub}</p>
        </div>
      </div>
    </section>
  );
}

/* ---- service list block ---- */
function ServiceList({ items }) {
  const { Icon } = window;
  return (
    <div className="svc-grid" style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:18 }}>
      {items.map((it,i)=>(
        <div key={i} className="card" style={{ padding:'26px 26px', display:'flex', gap:18 }}>
          <span style={{ flex:'0 0 auto', width:48, height:48, borderRadius:13, background:'var(--teal-wash)', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name={it.icon} size={23} color="var(--teal)" />
          </span>
          <div>
            <h4 style={{ fontSize:18, marginBottom:6 }}>{it.t}</h4>
            <p className="muted" style={{ fontSize:14.5 }}>{it.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---- cross-sell banner (the lead-sharing mechanic) ---- */
function CrossSell({ go, icon, text, cta, pg }) {
  const { Icon } = window;
  return (
    <div className="card" style={{ padding:'28px 30px', display:'flex', alignItems:'center', gap:22, background:'var(--gold-wash)', borderColor:'oklch(0.88 0.04 78)', flexWrap:'wrap' }}>
      <span style={{ flex:'0 0 auto', width:50, height:50, borderRadius:14, background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', border:'1px solid var(--line)' }}><Icon name={icon} size={24} color="var(--gold-deep)"/></span>
      <p style={{ flex:1, minWidth:220, fontSize:16.5, fontFamily:'var(--font-serif)', color:'var(--ink)' }}>{text}</p>
      <button className="btn btn-gold" onClick={()=>go(pg)}>{cta} <Icon name="arrow" size={16}/></button>
    </div>
  );
}

/* ================= MORTGAGES ================= */
function MortgagesPage({ go }) {
  const { T } = window.useTr();
  const { SectionHead, CTASection } = window;
  const items = [
    { icon:'doc', t:T('Mortgage consultation','贷款咨询'), d:T('We review your financial situation, credit profile, and homeownership goals to find the right options.','评估您的财务状况、信用记录与置业目标，找到合适的贷款方案。') },
    { icon:'check', t:T('Pre-approvals','贷款预批'), d:T('Mortgage pre-approvals to confirm your budget and strengthen your buying position.','贷款预批，确认您的预算，增强购房竞争力。') },
    { icon:'home', t:T('Mortgage applications','贷款申请'), d:T('Preparing documents, submitting applications, and guiding you through underwriting.','准备文件、提交申请，并协助您完成核保流程。') },
    { icon:'coins', t:T('Rate negotiation','利率谈判'), d:T('Negotiating with lenders for competitive interest rates and mortgage terms.','与放款机构协商有竞争力的利率与贷款条款。') },
    { icon:'key', t:T('More services','更多服务'), d:T('Refinancing, renewals, debt consolidation, and support for first-time home buyers.','再融资、贷款续约、债务整合，以及首次购房者支持。') },
  ];
  return (
    <main>
      <PageHero eyebrow={T('Mortgages','贷款服务')}
        title={T('The right mortgage, from people who shop for you.','为您比价的贷款专家，找到最合适的方案。')}
        sub={T('Both members of our family are licensed mortgage professionals, guiding you through purchase, refinance, and renewal.',
               '我们家族的两位成员均为持牌贷款专家，协助您完成购房、再融资与续约。')}
        imgLabel={T('Couple reviewing mortgage','夫妇查看贷款方案')} />
      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow={T('What we offer','服务内容')} title={T('Mortgage solutions for every stage','覆盖各阶段的贷款方案')} />
          <div style={{ marginTop:40 }}><ServiceList items={items} /></div>
        </div>
      </section>
    </main>
  );
}
window.MortgagesPage = MortgagesPage;

/* ================= IMMIGRATION ================= */
function ImmigrationPage({ go }) {
  const { T } = window.useTr();
  const { SectionHead, CTASection, Icon } = window;
  const items = [
    { icon:'doc', t:T('Immigration consultation','移民咨询'), d:T('Investment, business entrepreneur, and Provincial Nominee Program pathways across every province.','投资移民、企业家移民，以及各省省提名计划路径。') },
    { icon:'globe', t:T('Visas','签证'), d:T('Student visas, visa extensions, caregiver visas, working visas, and visitor visas to Canada.','学生签证、签证延期、护理人员签证、工作签证及访加旅游签证。') },
    { icon:'users', t:T('Family unification','家庭团聚'), d:T('Couple reunions, family gatherings, and reunification.','配偶团聚、家人团聚与亲属团聚。') },
    { icon:'check', t:T('More services','更多服务'), d:T('Refugee applications and appeals against visa refusals for spouses to reunite.','难民申请，以及为配偶团聚的拒签上诉。') },
  ];
  return (
    <main>
      <PageHero eyebrow={T('Immigration · RCIC','移民服务 · 持牌顾问')}
        title={T('Your path to staying in Canada, guided in your language.','您留在加拿大的路径，母语全程指导。')}
        sub={T('Work with a Regulated Canadian Immigration Consultant (RCIC) who explains every step in 普通话, 粤语 or English. Honest assessments, realistic timelines.',
               '与持牌加拿大移民顾问（RCIC）合作，用国语、粤语或英语讲解每一步。诚实评估，务实时间线。')}
        imgLabel={T('Newcomer at airport','新移民抵达机场')} />
      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow={T('Immigration services','移民服务')} title={T('From first permit to citizenship','从首份签证到入籍')} />
          <div style={{ marginTop:40 }}><ServiceList items={items} /></div>
        </div>
      </section>
    </main>
  );
}
window.ImmigrationPage = ImmigrationPage;

/* ================= REAL ESTATE ================= */
function RealEstatePage({ go }) {
  const { T } = window.useTr();
  const { SectionHead, CTASection } = window;
  const items = [
    { icon:'home', t:T('Home buying','购房'), d:T('Finding properties, arranging showings and inspections, and guidance through every step of the purchase.','寻找房源、安排看房与验房，并全程指导购买流程。') },
    { icon:'coins', t:T('Home selling','售房'), d:T('Pricing strategy, staging advice, property marketing, open houses, and buyer screening.','定价策略、布置建议、物业推广、开放看房与买家筛选。') },
    { icon:'check', t:T('Negotiation','谈判'), d:T('Negotiating offers, purchase prices, and contract terms on your behalf.','代您协商报价、成交价与合同条款。') },
    { icon:'doc', t:T('Transaction management','交易管理'), d:T('Preparing agreements, coordinating legal requirements, and managing closing timelines.','准备协议、协调法律事务，并管理成交时间线。') },
    { icon:'pin', t:T('More services','更多服务'), d:T('Market evaluations, investment properties, relocation support, and pre-sale planning.','市场评估、投资物业、搬迁支持与售前规划。') },
  ];
  return (
    <main>
      <PageHero eyebrow={T('Real Estate','房地产服务')}
        title={T('Buy or sell with a local who has your back.','本地经纪，全程为您把关买卖。')}
        sub={T('A licensed real estate agent and mortgage broker in one, so your offer is financed, fast, and competitive across the Lower Mainland.',
               '集持牌地产经纪与贷款经纪于一身，让您的报价融资到位、快速且具竞争力，畅行大温地区。')}
        imgLabel={T('Lower Mainland home','大温地区住宅')} />
      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow={T('What we do','服务内容')} title={T('Real estate, fully connected to your financing','房地产服务，与融资无缝衔接')} />
          <div style={{ marginTop:40 }}><ServiceList items={items} /></div>
        </div>
      </section>
    </main>
  );
}
window.RealEstatePage = RealEstatePage;

/* ================= TEAM ================= */
function TeamPage({ go }) {
  const { T } = window.useTr();
  const { SectionHead, CTASection, Icon, CTASection: _ } = window;
  const people = [
    { name:'Victor Mak',
      role:T('Immigration Consultant & Mortgage Broker','移民顾问 & 贷款经纪'),
      lic:T('RCIC #R000000 · BCFSA #0000','持牌移民顾问 RCIC #R000000 · BCFSA #0000'),
      phone:'(604) 831-8833', tel:'6048318833',
      bio:T('Helps newcomers navigate immigration and finance their first Canadian home. Fluent in 普通话, 粤语 & English.',
            '帮助新移民处理移民事务，并为首套加拿大住房融资。国语、粤语、英语流利。'),
      tags:[T('Immigration','移民'),T('Mortgages','贷款')] },
    { name:'Neville Mak',
      role:T('Real Estate Agent & Mortgage Broker','房地产经纪 & 贷款经纪'),
      lic:T('Real Estate, [Brokerage] · BCFSA #0000','地产经纪 [经纪行] · BCFSA #0000'),
      phone:'(778) 688-6667', tel:'7786886667',
      bio:T('Local market expert who finances and finds homes across the Lower Mainland, from Surrey to Vancouver. Fluent in 普通话, 粤语 & English.',
            '本地市场专家，在素里至温哥华的大温地区融资并寻找房源。国语、粤语、英语流利。'),
      tags:[T('Real Estate','房地产'),T('Mortgages','贷款')] },
  ];
  return (
    <main>
      <PageHero eyebrow={T('Our Team','我们的团队')}
        title={T('Two licensed experts, side by side.','两位持牌专家，并肩为您服务。')}
        sub={T('We built our careers helping people like us settle and thrive in the Lower Mainland. When you work with one of us, you get both.',
               '我们毕生致力于帮助像我们一样的人在大温地区安家立业。与我们其中一位合作，即可同时获得两人的专业支持。')}
        imgLabel={T('Family team candid','家族团队生活照')} />
      <section className="section">
        <div className="wrap team-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:30 }}>
          {people.map((p,i)=>(
            <div key={i} className="card" style={{ overflow:'hidden' }}>
              <div style={{ padding:'30px 30px' }}>
                <div style={{ display:'flex', gap:8, marginBottom:14 }}>
                  {p.tags.map((t,ti)=><span key={ti} style={{ padding:'5px 12px', background:'var(--teal-wash)', borderRadius:999, fontSize:12.5, fontWeight:700, color:'var(--teal-deep)' }}>{t}</span>)}
                </div>
                <h3 style={{ fontSize:24 }}>{p.name}</h3>
                <div style={{ color:'var(--teal-deep)', fontWeight:600, fontSize:15.5, marginTop:5 }}>{p.role}</div>
                <div style={{ color:'var(--ink-faint)', fontSize:13, marginTop:4, fontFamily:'var(--font-sans)' }}>{p.lic}</div>
                <p className="muted" style={{ fontSize:15.5, marginTop:16 }}>{p.bio}</p>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:18 }}>
                  <span style={{ flex:'0 0 auto', width:38, height:38, borderRadius:10, background:'var(--teal-wash)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="phone" size={18} color="var(--teal)"/></span>
                  <a href={'tel:'+p.tel} style={{ fontSize:17, fontWeight:600, color:'var(--ink)' }}>{p.phone}</a>
                </div>
                <button className="btn btn-ghost" style={{ marginTop:20 }} onClick={()=>go('contact')}>{T('Contact me','联系我')} <Icon name="arrow" size={15}/></button>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}
window.TeamPage = TeamPage;

/* ================= RESOURCES ================= */
function ResourcesPage({ go }) {
  const { T } = window.useTr();
  const { SectionHead, CTASection, Icon } = window;
  const posts = [
    { cat:T('Newcomer guide','新移民指南'), t:T('How to get a mortgage as a new permanent resident in BC','卑诗省新永居如何申请贷款'), r:T('8 min read','8 分钟') },
    { cat:T('First-time buyer','首次购房'), t:T('First-time home buyer programs & rebates in BC (2026)','2026年卑诗省首次购房补贴与计划'), r:T('6 min read','6 分钟') },
    { cat:T('Immigration','移民'), t:T('Express Entry vs. BC PNP: which path is right for you?','快速通道 vs. 卑诗省提名：哪条路更适合你？'), r:T('10 min read','10 分钟') },
    { cat:T('Mortgage','贷款'), t:T('Renewal season: why you shouldn’t just sign with your bank','续约季：为何不该直接续签银行合同'), r:T('5 min read','5 分钟') },
    { cat:T('Market','市场'), t:T('Lower Mainland market update, spring 2026','大温地区市场动态，2026春季'), r:T('4 min read','4 分钟') },
    { cat:T('Newcomer guide','新移民指南'), t:T('Building Canadian credit from scratch: a newcomer checklist','从零建立加拿大信用：新移民清单'), r:T('7 min read','7 分钟') },
  ];
  return (
    <main>
      <PageHero eyebrow={T('Resources','资源中心')}
        title={T('Guides that answer the questions everyone’s afraid to ask.','解答人人想问却不敢问的问题。')}
        sub={T('Plain-language guides on immigration, mortgages, and buying in the Lower Mainland, written for newcomers and first-timers, in both languages.',
               '关于移民、贷款与大温地区购房的通俗指南，为新移民与首次购房者撰写，中英双语。')}
        imgLabel={T('Resources / reading','资源 / 阅读')} />
      <section className="section">
        <div className="wrap">
          <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:34 }}>
            {[T('All','全部'),T('Newcomer','新移民'),T('Mortgages','贷款'),T('Immigration','移民'),T('Real Estate','房地产'),T('Market','市场')].map((c,i)=>(
              <span key={i} style={{ padding:'9px 17px', borderRadius:999, fontSize:14, fontWeight:600, cursor:'pointer',
                background: i===0?'var(--teal)':'var(--surface)', color: i===0?'#fff':'var(--ink-soft)', border:'1px solid var(--line)' }}>{c}</span>
            ))}
          </div>
          <div className="res-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24 }}>
            {posts.map((p,i)=>(
              <a key={i} href="#" onClick={e=>e.preventDefault()} className="card res-card" style={{ overflow:'hidden', display:'block', transition:'transform .2s ease, box-shadow .2s ease' }}
                 onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='var(--shadow-lg)';}}
                 onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='var(--shadow-sm)';}}>
                <div style={{ padding:'24px 22px' }}>
                  <span className="eyebrow" style={{ marginBottom:12 }}>{p.cat}</span>
                  <h4 style={{ fontSize:19, lineHeight:1.25, marginBottom:14 }}>{p.t}</h4>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <span style={{ fontSize:13, color:'var(--ink-faint)' }}>{p.r}</span>
                    <span className="tlink">{T('Read','阅读')} <Icon name="arrow" size={14}/></span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}
window.ResourcesPage = ResourcesPage;

/* ================= CONTACT ================= */
function ContactPage({ go }) {
  const { T } = window.useTr();
  const { Icon } = window;
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name:'', email:'', service:'Mortgage / 贷款', lang:'Mandarin / 普通话', msg:'' });
  const set = (k)=>(e)=>setForm({ ...form, [k]: e.target.value });
  const field = { width:'100%', padding:'13px 15px', borderRadius:10, border:'1px solid var(--line)', background:'var(--surface)', fontFamily:'var(--font-sans)', fontSize:15.5, color:'var(--ink)' };
  const label = { fontSize:13.5, fontWeight:600, color:'var(--ink-soft)', marginBottom:7, display:'block' };

  return (
    <main>
      <PageHero eyebrow={T('Book a free consultation','预约免费咨询')}
        title={T('Tell us where you are. We’ll map the path.','告诉我们您的现状，我们为您规划路径。')}
        sub={T('Free 15-minute call, no obligation, in 普通话, 粤语 or English. Whether you’re landing, financing, or buying, start here.',
               '免费15分钟通话，无任何义务，国语、粤语或英语。无论您正在登陆、融资还是购房，从这里开始。')}
        imgLabel={T('Consultation','咨询洽谈')} />
      <section className="section">
        <div className="wrap contact-grid" style={{ display:'grid', gridTemplateColumns:'1fr 0.8fr', gap:48, alignItems:'start' }}>
          <div className="card" style={{ padding:'36px 36px' }}>
            {sent ? (
              <div style={{ textAlign:'center', padding:'40px 10px' }}>
                <span style={{ width:64, height:64, borderRadius:99, background:'var(--teal-wash)', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:20 }}><Icon name="check" size={32} color="var(--teal)" stroke={2.2}/></span>
                <h3 style={{ fontSize:25, marginBottom:10 }}>{T('Thank you, we’ll be in touch!','感谢您，我们会尽快联系！')}</h3>
                <p className="muted" style={{ fontSize:16, maxWidth:380, margin:'0 auto' }}>{T('A member of our family team will reach out within one business day to schedule your free call.','我们家族团队的成员将在一个工作日内与您联系，安排免费通话。')}</p>
                <button className="btn btn-ghost" style={{ marginTop:24 }} onClick={()=>setSent(false)}>{T('Send another','再发一条')}</button>
              </div>
            ) : (
              <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
                <h3 style={{ fontSize:23, marginBottom:6 }}>{T('Request your free call','申请免费通话')}</h3>
                <p className="muted" style={{ fontSize:15, marginBottom:24 }}>{T('We typically reply within one business day.','我们通常在一个工作日内回复。')}</p>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                  <div><label style={label}>{T('Your name','您的姓名')}</label><input required style={field} value={form.name} onChange={set('name')} placeholder="Jane Doe / 张小姐"/></div>
                  <div><label style={label}>{T('Email or phone','邮箱或电话')}</label><input required style={field} value={form.email} onChange={set('email')} placeholder="you@email.com"/></div>
                  <div><label style={label}>{T('I need help with','我需要协助的是')}</label>
                    <select style={field} value={form.service} onChange={set('service')}>
                      {['Mortgage / 贷款','Immigration / 移民','Real Estate / 房地产','All three / 三项全部','Not sure yet / 还不确定'].map(o=><option key={o}>{o}</option>)}
                    </select>
                  </div>
                  <div><label style={label}>{T('Preferred language','偏好语言')}</label>
                    <select style={field} value={form.lang} onChange={set('lang')}>
                      {['Mandarin / 普通话','Cantonese / 粤语','English / 英语'].map(o=><option key={o}>{o}</option>)}
                    </select>
                  </div>
                </div>
                <div style={{ marginTop:16 }}><label style={label}>{T('Tell us a little about your situation','简单介绍您的情况')}</label>
                  <textarea style={{ ...field, minHeight:110, resize:'vertical' }} value={form.msg} onChange={set('msg')} placeholder="e.g. New PR, looking to buy our first home in Surrey…"/></div>
                <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop:22, width:'100%' }}>{T('Request free consultation','申请免费咨询')} <Icon name="arrow" size={17}/></button>
                <p style={{ fontSize:12, color:'var(--ink-faint)', marginTop:14, textAlign:'center' }}>{T('This is a prototype, the form doesn’t send real messages yet.','这是原型，表单暂不会发送真实信息。')}</p>
              </form>
            )}
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
            {[['phone','Victor Mak',T('Immigration & Mortgages','移民 & 贷款'),'(604) 831-8833','6048318833'],
              ['phone','Neville Mak',T('Real Estate & Mortgages','房地产 & 贷款'),'(778) 688-6667','7786886667']].map(([ic,name,role,num,tel])=>(
              <a key={name} href={'tel:'+tel} className="card" style={{ padding:'20px 22px', display:'flex', gap:16, alignItems:'center' }}>
                <span style={{ flex:'0 0 auto', width:46, height:46, borderRadius:12, background:'var(--teal-wash)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={ic} size={21} color="var(--teal)"/></span>
                <div>
                  <div style={{ fontSize:17, fontWeight:700, color:'var(--ink)' }}>{name}</div>
                  <div style={{ fontSize:13, color:'var(--ink-faint)', fontWeight:600, marginTop:1 }}>{role}</div>
                  <div style={{ fontSize:16, fontWeight:600, color:'var(--teal-deep)', marginTop:4 }}>{num}</div>
                </div>
              </a>
            ))}
            <div className="card" style={{ padding:'20px 22px', display:'flex', gap:16, alignItems:'center' }}>
              <span style={{ flex:'0 0 auto', width:46, height:46, borderRadius:12, background:'var(--gold-wash)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="globe" size={21} color="var(--gold-deep)"/></span>
              <div>
                <div style={{ fontSize:13, color:'var(--ink-faint)', fontWeight:600 }}>{T('Languages','服务语言')}</div>
                <div style={{ fontSize:16, fontWeight:600, color:'var(--ink)' }}>{T('Mandarin · Cantonese · English','普通话 · 粤语 · 英语')}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.ContactPage = ContactPage;