// pages/enterprise.jsx — 企業合作（依老闆草稿原文重寫，i18n 化）

function EntHero({ isMobile }) {
  const t = useT();
  const stats = [
    [t('ent.hero.s1.n'), t('ent.hero.s1.l')],
    [t('ent.hero.s2.n'), t('ent.hero.s2.l')],
    [t('ent.hero.s3.n'), t('ent.hero.s3.l')],
    [t('ent.hero.s4.n'), t('ent.hero.s4.l')],
  ];
  return (
    <Section mobile={isMobile} style={{ paddingTop: isMobile ? 56 : 120, paddingBottom: isMobile ? 48 : 80 }}>
      <Eyebrow>{t('ent.hero.eyebrow')}</Eyebrow>
      <h1 style={{
        margin: '16px 0 0', fontSize: isMobile ? 40 : 88,
        fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, maxWidth: 1100,
      }}>
        {t('ent.hero.title1')}<br/>{t('ent.hero.title2')}
      </h1>
      <p style={{
        margin: isMobile ? '24px 0 0' : '36px 0 0',
        fontSize: isMobile ? 15 : 19, color: REF.ink2, lineHeight: 1.65, maxWidth: 760,
      }}>
        {t('ent.hero.body')}
      </p>
      <div style={{
        marginTop: isMobile ? 28 : 44,
        display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 10 : 14,
      }}>
        {stats.map(([n, l]) => (
          <div key={l} style={{
            background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 12,
            padding: isMobile ? '14px 16px' : '20px 22px',
          }}>
            <div style={{
              fontSize: isMobile ? 22 : 32, fontWeight: 600, letterSpacing: '-0.025em',
              color: REF.accent, fontVariantNumeric: 'tabular-nums',
            }}>{n}</div>
            <div className="mono" style={{ marginTop: 4, fontSize: 11, color: REF.ink3, letterSpacing: '0.12em' }}>{l}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─── 電信營運商：Archive as a Service ────────────────────
function EntCarrier({ isMobile }) {
  const t = useT();
  const journey = [
    { l: t('ent.cr.j1.l'), d: t('ent.cr.j1.d') },
    { l: t('ent.cr.j2.l'), d: t('ent.cr.j2.d') },
    { l: t('ent.cr.j3.l'), d: t('ent.cr.j3.d') },
    { l: t('ent.cr.j4.l'), d: t('ent.cr.j4.d') },
  ];
  const value = [
    { t: t('ent.cr.v1.t'), d: t('ent.cr.v1.d') },
    { t: t('ent.cr.v2.t'), d: t('ent.cr.v2.d') },
    { t: t('ent.cr.v3.t'), d: t('ent.cr.v3.d') },
    { t: t('ent.cr.v4.t'), d: t('ent.cr.v4.d') },
  ];
  const integration = [
    [t('ent.cr.i.r1.c'), t('ent.cr.i.r1.m'), t('ent.cr.i.r1.o')],
    [t('ent.cr.i.r2.c'), t('ent.cr.i.r2.m'), t('ent.cr.i.r2.o')],
    [t('ent.cr.i.r3.c'), t('ent.cr.i.r3.m'), t('ent.cr.i.r3.o')],
    [t('ent.cr.i.r4.c'), t('ent.cr.i.r4.m'), t('ent.cr.i.r4.o')],
    [t('ent.cr.i.r5.c'), t('ent.cr.i.r5.m'), t('ent.cr.i.r5.o')],
    [t('ent.cr.i.r6.c'), t('ent.cr.i.r6.m'), t('ent.cr.i.r6.o')],
    [t('ent.cr.i.r7.c'), t('ent.cr.i.r7.m'), t('ent.cr.i.r7.o')],
  ];
  const deploy = [
    [t('ent.cr.d1.t'), t('ent.cr.d1.d')],
    [t('ent.cr.d2.t'), t('ent.cr.d2.d')],
    [t('ent.cr.d3.t'), t('ent.cr.d3.d')],
  ];
  return (
    <Section dark mobile={isMobile} style={{ position: 'relative', overflow: 'hidden' }}>
      {!isMobile && (
        <div aria-hidden style={{
          position: 'absolute', inset: 0, opacity: 0.4,
          backgroundImage: `linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
          backgroundSize: '64px 64px', pointerEvents: 'none',
        }}/>
      )}
      <div style={{ position: 'relative' }}>
        <SectionHead
          dark mobile={isMobile}
          eyebrow={t('ent.cr.eyebrow')}
          title={<>{t('ent.cr.title1')}<br/><span style={{ color: 'rgba(255,255,255,0.55)', fontWeight: 300 }}>{t('ent.cr.title2')}</span></>}
        />

        <div>
          <Eyebrow dark>{t('ent.cr.j.eyebrow')}</Eyebrow>
          <div style={{
            marginTop: 16,
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: isMobile ? 10 : 16,
          }}>
            {journey.map((j, i) => (
              <div key={j.l} style={{
                background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: 12, padding: isMobile ? '18px 18px' : '22px 22px 26px',
              }}>
                <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ marginTop: 8, fontSize: isMobile ? 17 : 19, fontWeight: 600, letterSpacing: '-0.015em', color: '#fff' }}>{j.l}</div>
                <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)' }}>{j.d}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: isMobile ? 36 : 64 }}>
          <Eyebrow dark>{t('ent.cr.v.eyebrow')}</Eyebrow>
          <div style={{
            marginTop: 16,
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 12 : 16,
          }}>
            {value.map(v => (
              <div key={v.t} style={{
                background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: 12, padding: isMobile ? '20px 22px' : '26px 28px 30px',
              }}>
                <div style={{ fontSize: isMobile ? 17 : 20, fontWeight: 500, letterSpacing: '-0.02em', color: '#fff' }}>{v.t}</div>
                <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)' }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: isMobile ? 36 : 64 }}>
          <Eyebrow dark>{t('ent.cr.i.eyebrow')}</Eyebrow>
          <div style={{
            marginTop: 16,
            background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: isMobile ? 12 : 14, overflow: 'hidden',
          }}>
            <div className="mono" style={{
              display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1.4fr 1.4fr',
              padding: isMobile ? '12px 16px' : '14px 24px',
              borderBottom: '1px solid rgba(255,255,255,0.08)',
              fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.16em',
            }}>
              <div>{t('ent.cr.i.h.comp')}</div>
              {!isMobile && <div>{t('ent.cr.i.h.mak')}</div>}
              <div>{isMobile ? t('ent.cr.i.h.both') : t('ent.cr.i.h.op')}</div>
            </div>
            {integration.map((r, i) => (
              <div key={r[0]} style={{
                display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr 1.4fr',
                gap: isMobile ? 4 : 16,
                padding: isMobile ? '14px 16px' : '16px 24px',
                borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.06)',
              }}>
                <div className="mono" style={{ fontSize: isMobile ? 11 : 13, color: REF.accent, letterSpacing: '0.04em' }}>{r[0]}</div>
                <div style={{ fontSize: isMobile ? 13 : 14, color: '#fff', lineHeight: 1.55 }}>
                  {isMobile && <span className="mono" style={{ color: 'rgba(255,255,255,0.4)', fontSize: 10 }}>M：</span>} {r[1]}
                </div>
                <div style={{ fontSize: isMobile ? 13 : 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>
                  {isMobile && <span className="mono" style={{ color: 'rgba(255,255,255,0.4)', fontSize: 10 }}>OP：</span>} {r[2]}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: isMobile ? 36 : 56 }}>
          <Eyebrow dark>{t('ent.cr.d.eyebrow')}</Eyebrow>
          <div style={{
            marginTop: 16,
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 10 : 14,
          }}>
            {deploy.map(([title, d]) => (
              <div key={title} style={{
                background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 12, padding: isMobile ? '18px 20px' : '22px 24px 26px',
              }}>
                <div style={{ fontSize: isMobile ? 16 : 18, fontWeight: 600, color: '#fff', letterSpacing: '-0.015em' }}>{title}</div>
                <p style={{ margin: '8px 0 0', fontSize: isMobile ? 12.5 : 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─── 科技品牌 MFi 方案 ──────────────────────────────────
function EntBrands({ isMobile }) {
  const t = useT();
  const offer = [
    [t('ent.br.o1.t'), t('ent.br.o1.d')],
    [t('ent.br.o2.t'), t('ent.br.o2.d')],
    [t('ent.br.o3.t'), t('ent.br.o3.d')],
    [t('ent.br.o4.t'), t('ent.br.o4.d')],
    [t('ent.br.o5.t'), t('ent.br.o5.d')],
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('ent.br.eyebrow')}
        title={<>{t('ent.br.title1')}<br/>{t('ent.br.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>
            {t('ent.br.aside')}
          </p>
        )}
      />
      <div>
        <Eyebrow>{t('ent.br.o.eyebrow')}</Eyebrow>
        <div style={{
          marginTop: 14,
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
        }}>
          {offer.map((r, i) => (
            <div key={r[0]} style={{
              display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 4 : 32,
              padding: isMobile ? '16px 20px' : '20px 32px',
              borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            }}>
              <div className="mono" style={{ fontSize: 12, color: REF.accent, letterSpacing: '0.12em' }}>{r[0]}</div>
              <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.65 }}>{r[1]}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: isMobile ? 32 : 56 }}>
        <Eyebrow>{t('ent.br.l.eyebrow')}</Eyebrow>
        <p style={{
          margin: '14px 0 0', fontSize: isMobile ? 14 : 16, color: REF.ink2, lineHeight: 1.7, maxWidth: 760,
        }}>
          {t('ent.br.l.p1.a')}
          <strong style={{ color: REF.ink, fontWeight: 500 }}>{t('ent.br.l.p1.bold')}</strong>
          {t('ent.br.l.p1.b')}
        </p>
        <p style={{ margin: '14px 0 0', fontSize: isMobile ? 13 : 15, color: REF.ink3, lineHeight: 1.65, maxWidth: 760 }}>
          {t('ent.br.l.p2')}
        </p>
      </div>
    </Section>
  );
}

// ─── 企業 IT ──────────────────────────────────────────────
function EntIT({ isMobile }) {
  const t = useT();
  const features = [
    [t('ent.it.f1.t'), t('ent.it.f1.d')],
    [t('ent.it.f2.t'), t('ent.it.f2.d')],
    [t('ent.it.f3.t'), t('ent.it.f3.d')],
    [t('ent.it.f4.t'), t('ent.it.f4.d')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('ent.it.eyebrow')}
        title={<>{t('ent.it.title1')}<br/>{t('ent.it.title2')}</>}
      />
      <p style={{ margin: 0, fontSize: isMobile ? 14 : 17, color: REF.ink2, lineHeight: 1.7, maxWidth: 760 }}>
        {t('ent.it.body')}
      </p>
      <div style={{
        marginTop: isMobile ? 24 : 36,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 10 : 14,
      }}>
        {features.map(([title, d]) => (
          <div key={title} style={{
            background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: 12,
            padding: isMobile ? '18px 20px' : '22px 24px 26px',
          }}>
            <div style={{ fontSize: isMobile ? 15 : 17, fontWeight: 600, letterSpacing: '-0.015em' }}>{title}</div>
            <p style={{ margin: '8px 0 0', fontSize: isMobile ? 12.5 : 14, lineHeight: 1.6, color: REF.ink2 }}>{d}</p>
          </div>
        ))}
      </div>
      <p style={{ margin: isMobile ? '24px 0 0' : '32px 0 0', fontSize: isMobile ? 13 : 14, color: REF.ink3, lineHeight: 1.65 }}>
        {t('ent.it.foot')}
      </p>
    </Section>
  );
}

// ─── 為什麼選擇 Maktar ─────────────────────────────────
function EntWhy({ isMobile }) {
  const t = useT();
  const reasons = [
    [t('ent.why.r1.t'), t('ent.why.r1.d')],
    [t('ent.why.r2.t'), t('ent.why.r2.d')],
    [t('ent.why.r3.t'), t('ent.why.r3.d')],
    [t('ent.why.r4.t'), t('ent.why.r4.d')],
    [t('ent.why.r5.t'), t('ent.why.r5.d')],
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('ent.why.eyebrow')} title={<>{t('ent.why.title')}</>} />
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {reasons.map((r, i) => (
          <div key={r[0]} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '40px 280px 1fr',
            gap: isMobile ? 6 : 32,
            padding: isMobile ? '20px 0' : '28px 0',
            borderTop: i === 0 ? `1px solid ${REF.ink}` : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
          }}>
            {!isMobile && (
              <div className="mono" style={{ fontSize: 12, color: REF.accent, letterSpacing: '0.16em' }}>
                {String(i+1).padStart(2,'0')}
              </div>
            )}
            <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{r[0]}</div>
            <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.65 }}>{r[1]}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─── 開始對話 ─────────────────────────────────────────
function EntCTA({ isMobile }) {
  const t = useT();
  const partners = [
    [t('ent.cta.p1.t'), t('ent.cta.p1.d')],
    [t('ent.cta.p2.t'), t('ent.cta.p2.d')],
    [t('ent.cta.p3.t'), t('ent.cta.p3.d')],
    [t('ent.cta.p4.t'), t('ent.cta.p4.d')],
  ];
  return (
    <Section dark mobile={isMobile}>
      <SectionHead
        dark mobile={isMobile}
        eyebrow={t('ent.cta.eyebrow')}
        title={<>{t('ent.cta.title')}</>}
      />
      <p style={{ margin: 0, fontSize: isMobile ? 14 : 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, maxWidth: 720 }}>
        {t('ent.cta.body')}
      </p>
      <div style={{
        marginTop: isMobile ? 24 : 36,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 10 : 14,
      }}>
        {partners.map(([title, d]) => (
          <div key={title} style={{
            background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 12, padding: isMobile ? '18px 20px' : '22px 24px',
          }}>
            <div style={{ fontSize: isMobile ? 16 : 18, fontWeight: 600, color: '#fff', letterSpacing: '-0.015em' }}>{title}</div>
            <p style={{ margin: '8px 0 0', fontSize: isMobile ? 12.5 : 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)' }}>{d}</p>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: isMobile ? 28 : 44,
        display: isMobile ? 'block' : 'flex', alignItems: 'center', gap: 16,
      }}>
        <Btn primary dark href="mailto:sales@maktar.com">{t('ent.cta.email')}</Btn>
        <span className="mono" style={{
          marginLeft: isMobile ? 0 : 4, marginTop: isMobile ? 12 : 0,
          display: isMobile ? 'block' : 'inline',
          fontSize: 13, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em',
        }}>
          {t('ent.cta.phone')}
        </span>
      </div>
    </Section>
  );
}

function EnterprisePage() {
  const isMobile = useIsMobile();
  return (
    <>
      <EntHero isMobile={isMobile} />
      <EntCarrier isMobile={isMobile} />
      <EntBrands isMobile={isMobile} />
      <EntIT isMobile={isMobile} />
      <EntWhy isMobile={isMobile} />
      <EntCTA isMobile={isMobile} />
    </>
  );
}
Object.assign(window, { EnterprisePage });