// Home, Services, Industries pages
const { useState: _useState_main } = React;

function HomePage({ t, setPage, lang }) {
  return (
    <div className="page-shell">
      {/* Hero */}
      <section className="hero">
        <div className="hero-bg"></div>
        <div className="hero-grid-bg"></div>
        <HeroNetwork />
        <div className="wrap hero-inner">
          <div>
            <div className="eyebrow">{t.hero.eyebrow}</div>
            <h1 className="display">
              {t.hero.title_a} <em>{t.hero.title_em}</em>{t.hero.title_b}
            </h1>
            <p className="lede">{t.hero.lede}</p>
            <div className="hero-actions">
              <button className="cta-btn solid" onClick={()=>{setPage("contact"); window.scrollTo({top:0});}}>{t.hero.cta_a}</button>
              <button className="cta-btn ghost" onClick={()=>{setPage("services"); window.scrollTo({top:0});}}>{t.hero.cta_b}</button>
            </div>
          </div>
          <aside className="hero-side">
            <div className="hero-side-label">{t.hero.side_label}</div>
            {t.hero.facts.map(([k, v], i) => (
              <div className="cred-row" key={i}>
                <span className="cred-key">{k}</span>
                <span className="cred-val">{v}</span>
              </div>
            ))}
          </aside>
        </div>
      </section>

      <ComplianceStrip lang={lang} />

      {/* Credentials matrix (replaces trust strip) */}
      <section className="block">
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.credentials.kicker}</div>
              <h2 className="section-title">{t.credentials.title_a}<em>{t.credentials.title_em}</em>{t.credentials.title_b}</h2>
              <p className="section-kicker">{t.credentials.lede}</p>
            </div>
          </div>
          <div className="cred-grid">
            {t.credentials.items.map((c, i) => (
              <div className="cred-card" key={i}>
                <div className="cred-tag">{c.tag}</div>
                <div className="cred-val">{c.val}</div>
                <div className="cred-note">{c.note}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services preview */}
      <section className="block">
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.services.kicker}</div>
              <h2 className="section-title">{t.services.title_a}<em>{t.services.title_em}</em>.</h2>
              <p className="section-kicker">{t.services.lede}</p>
            </div>
            <button className="cta-btn ghost" onClick={()=>{setPage("services"); window.scrollTo({top:0});}}>
              {lang === "en" ? "All services →" : "查看全部 →"}
            </button>
          </div>
          <div className="service-grid">
            {t.services.items.map((s, i) => (
              <article className="service-card" key={i}>
                <div className="svc-num">{s.num}</div>
                <h3 className="svc-title">{s.title}</h3>
                <div className="svc-title-cn">{s.cn}</div>
                <p className="svc-desc">{s.desc}</p>
                <div className="svc-tags">
                  {s.tags.map((tag, j) => <span className="svc-tag" key={j}>{tag}</span>)}
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Approach */}
      <section className="block" style={{background: "var(--bg-1)"}}>
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.approach.kicker}</div>
              <h2 className="section-title">{t.approach.title_a}<em>{t.approach.title_em}</em>.</h2>
            </div>
          </div>
          <div className="approach-list">
            {t.approach.steps.map(([num, title, cn, desc], i) => (
              <div className="approach-row" key={i}>
                <div className="approach-num">{num}</div>
                <div>
                  <div className="approach-title">{title}</div>
                  <div className="approach-title-cn">{cn}</div>
                </div>
                <div className="approach-desc">{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Industries preview */}
      <section className="block">
        <div className="wrap">
          <div className="section-head">
            <div className="heading-stack">
              <div className="eyebrow">{t.industries.kicker}</div>
              <h2 className="section-title">{t.industries.title_a}<em>{t.industries.title_em}</em>.</h2>
              <p className="section-kicker">{t.industries.lede}</p>
            </div>
          </div>
          <div className="industries-grid">
            {t.industries.items.map(([tag, title, desc], i) => (
              <article className="ind-card" key={i}>
                <div className="ind-tag">{tag}</div>
                <div className="ind-title">{title}</div>
                <p className="ind-desc">{desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Partners */}
      <section className="block tight">
        <div className="wrap">
          <div style={{marginBottom: 32}}>
            <div className="eyebrow">{t.partners.title}</div>
            <p className="section-kicker" style={{marginTop:14}}>{t.partners.note}</p>
          </div>
          <div className="partners">
            {t.partners.items.map((p, i) => <div className="partner-cell" key={i}>{p}</div>)}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="block" style={{background:"var(--bg-1)"}}>
        <div className="wrap-narrow">
          <div className="eyebrow">{t.faq.kicker}</div>
          <h2 className="section-title" style={{marginTop:18, marginBottom:40}}>{t.faq.title_a}<em>{t.faq.title_em}</em>{t.faq.title_b}</h2>
          <FAQ t={t} />
        </div>
      </section>

      <CTABlock t={t} setPage={setPage} />
    </div>
  );
}

function ServicesPage({ t, setPage, lang }) {
  return (
    <div className="page-shell">
      <section className="block" style={{paddingTop: 80}}>
        <div className="wrap">
          <div className="eyebrow">{t.services.kicker}</div>
          <h2 className="section-title" style={{maxWidth:880, marginTop:18}}>{t.services.title_a}<em>{t.services.title_em}</em>.</h2>
          <p className="section-kicker" style={{marginTop:24, marginBottom:64, maxWidth:760}}>{t.services.lede}</p>

          {/* expanded service rows */}
          <div style={{display:"grid", gap:20}}>
            {t.services.items.map((s, i) => (
              <article key={i} style={{background:"var(--bg-1)", padding:"48px 40px", display:"grid", gridTemplateColumns:"1fr 2fr", gap:60, border:"1px solid var(--line)", borderRadius:"var(--r-lg)"}}
                className="svc-row">
                <div>
                  <div className="svc-num">{s.num}</div>
                  <h3 className="svc-title" style={{marginTop:18, fontSize:30}}>{s.title}</h3>
                  <div className="svc-title-cn">{s.cn}</div>
                  <div className="svc-tags" style={{marginTop: 24}}>
                    {s.tags.map((tag, j) => <span className="svc-tag" key={j}>{tag}</span>)}
                  </div>
                </div>
                <div>
                  <p style={{color:"var(--ink-2)", fontSize:16, lineHeight:1.75, marginBottom:24}}>{s.desc}</p>
                  <ServiceDetails i={i} lang={lang} />
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Approach */}
      <section className="block" style={{background: "var(--bg-1)"}}>
        <div className="wrap">
          <div className="eyebrow">{t.approach.kicker}</div>
          <h2 className="section-title" style={{marginTop:18, marginBottom:48}}>{t.approach.title_a}<em>{t.approach.title_em}</em>.</h2>
          <div className="approach-list">
            {t.approach.steps.map(([num, title, cn, desc], i) => (
              <div className="approach-row" key={i}>
                <div className="approach-num">{num}</div>
                <div>
                  <div className="approach-title">{title}</div>
                  <div className="approach-title-cn">{cn}</div>
                </div>
                <div className="approach-desc">{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABlock t={t} setPage={setPage} />
    </div>
  );
}

function ServiceDetails({ i, lang }) {
  const data = {
    en: [
      ["Landing Zone & Account Structure","Workload Migration (Lift / Shift / Refactor)","Network & Identity Architecture","Cost Discipline & FinOps","Resilience & Disaster Recovery","Managed Operations & SRE Handoff"],
      ["Digital Transformation Roadmap","Cloud & SaaS Strategy","Architecture Review & Due Diligence","Vendor Selection & RFP Support","M&A Technology Integration","Executive & Board Advisory"],
      ["Multi-vendor SaaS Sourcing","License Consolidation & Right-sizing","Renewal Negotiation","Usage Analytics & Cost Allocation","Procurement Process Design","Global Tax & Compliance Handling"]
    ],
    zh: [
      ["Landing Zone 与账号体系","工作负载迁移（Lift / Shift / 重构）","网络与身份架构","成本与 FinOps 管控","韧性与灾备","托管运维与 SRE 交接"],
      ["数字化转型路线图","云与 SaaS 战略规划","架构评审与尽职调查","供应商遴选与 RFP 支持","并购技术整合","面向高管与董事会的咨询"],
      ["多厂商 SaaS 采购","许可证整合与规模优化","续约谈判","用量分析与成本分摊","采购流程设计","全球税务与合规处理"]
    ]
  };
  const items = data[lang][i] || [];
  return (
    <ul style={{listStyle:"none", display:"grid", gridTemplateColumns:"1fr 1fr", gap:"10px 24px"}}>
      {items.map((x, idx) => (
        <li key={idx} style={{display:"flex", gap:10, alignItems:"baseline", fontSize:13.5, color:"var(--ink-2)"}}>
          <span style={{color:"var(--gold)", fontFamily:"var(--mono)", fontSize:10}}>◆</span>
          <span>{x}</span>
        </li>
      ))}
    </ul>
  );
}

function IndustriesPage({ t, setPage, lang }) {
  return (
    <div className="page-shell">
      <section className="block">
        <div className="wrap">
          <div className="eyebrow">{t.industries.kicker}</div>
          <h2 className="section-title" style={{maxWidth:880, marginTop:18}}>{t.industries.title_a}<em>{t.industries.title_em}</em>.</h2>
          <p className="section-kicker" style={{marginTop:24, marginBottom:56, maxWidth:760}}>{t.industries.lede}</p>
          <div className="industries-grid">
            {t.industries.items.map(([tag, title, desc], i) => (
              <article className="ind-card" key={i} style={{minHeight:220}}>
                <div className="ind-tag">{tag}</div>
                <div className="ind-title">{title}</div>
                <p className="ind-desc">{desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="block tight" style={{background:"var(--bg-1)"}}>
        <div className="wrap">
          <div className="eyebrow">{t.partners.title}</div>
          <p className="section-kicker" style={{marginTop:14, marginBottom:32}}>{t.partners.note}</p>
          <div className="partners">
            {t.partners.items.map((p, i) => <div className="partner-cell" key={i}>{p}</div>)}
          </div>
        </div>
      </section>

      <CTABlock t={t} setPage={setPage} />
    </div>
  );
}

Object.assign(window, { HomePage, ServicesPage, IndustriesPage });