// pages/news.jsx — 最新消息（i18n 化）

function NewsHero({ isMobile }) {
  const t = useT();
  return (
    <Section mobile={isMobile} style={{ paddingTop: isMobile ? 56 : 120, paddingBottom: isMobile ? 32 : 56 }}>
      <Eyebrow>{t('news.hero.eyebrow')}</Eyebrow>
      <h1 style={{
        margin: '16px 0 0', fontSize: isMobile ? 40 : 84,
        fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05,
      }}>
        {t('news.hero.title1')}<br/>
        <span style={{ color: REF.ink3, fontWeight: 300 }}>{t('news.hero.title2')}</span>
      </h1>
      <p style={{
        margin: '32px 0 0', fontSize: isMobile ? 15 : 18,
        color: REF.ink2, lineHeight: 1.65, maxWidth: 720,
      }}>{t('news.hero.body')}</p>
    </Section>
  );
}

function NewsRecent({ isMobile }) {
  const t = useT();
  const years = [
    { y: '2025', note: t('news.recent.2025') },
    { y: '2024', note: t('news.recent.2024') },
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('news.recent.eyebrow')} title={<>{t('news.recent.title')}</>} />
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {years.map((y, i) => (
          <div key={y.y} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '64px 1fr' : '120px 1fr',
            gap: isMobile ? 16 : 32,
            padding: isMobile ? '20px 0' : '28px 0',
            borderTop: i === 0 ? `1px solid ${REF.ink}` : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
          }}>
            <div className="mono" style={{
              fontSize: isMobile ? 14 : 18, fontWeight: 500, color: REF.ink, letterSpacing: '0.02em',
            }}>{y.y}</div>
            <div style={{
              fontSize: isMobile ? 14 : 16, color: REF.ink3, fontStyle: 'italic', lineHeight: 1.65,
            }}>{y.note}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function NewsAwards({ isMobile }) {
  const t = useT();
  const rows = [
    ['2022', t('news.aw.r1.a'), t('news.aw.r1.p')],
    ['2021', t('news.aw.r2.a'), t('news.aw.r2.p')],
    ['2021', t('news.aw.r3.a'), t('news.aw.r3.p')],
    ['2020', t('news.aw.r4.a'), t('news.aw.r4.p')],
    ['2018', t('news.aw.r5.a'), t('news.aw.r5.p')],
    ['2015', t('news.aw.r6.a'), t('news.aw.r6.p')],
    [t('news.aw.r7.y'), t('news.aw.r7.a'), t('news.aw.r7.p')],
    [t('news.aw.r8.y'), t('news.aw.r8.a'), t('news.aw.r8.p')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('news.aw.eyebrow')}
        title={<>{t('news.aw.title1')}<br/>{t('news.aw.title2')}</>}
      />
      <div style={{
        background: REF.paper, borderRadius: isMobile ? 14 : 18,
        border: `1px solid ${REF.rule}`, overflow: 'hidden',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '64px 1fr 80px' : '120px 1fr 200px',
          padding: isMobile ? '14px 16px' : '20px 28px',
          background: REF.paperAlt,
          borderBottom: `1px solid ${REF.rule}`,
          fontSize: isMobile ? 11 : 12, color: REF.ink3, letterSpacing: '0.16em',
        }} className="mono">
          <span>{t('news.aw.h.year')}</span>
          <span>{t('news.aw.h.award')}</span>
          <span>{t('news.aw.h.product')}</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '64px 1fr 80px' : '120px 1fr 200px',
            padding: isMobile ? '14px 16px' : '18px 28px',
            borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
            fontSize: isMobile ? 13 : 15,
          }}>
            <span className="mono" style={{ color: REF.ink3, fontSize: isMobile ? 12 : 13 }}>{r[0]}</span>
            <span style={{ color: REF.ink, fontWeight: 500, letterSpacing: '-0.01em' }}>{r[1]}</span>
            <span style={{ color: REF.ink2 }}>{r[2]}</span>
          </div>
        ))}
      </div>
    </Section>
  );
}

function NewsCrowdfunding({ isMobile }) {
  const t = useT();
  const rows = [
    { y: '2015', proj: t('news.cf.r1.proj'), plat: t('news.cf.r1.plat'), amt: t('news.cf.r1.amt'), sub: t('news.cf.r1.sub') },
    { y: '—',    proj: t('news.cf.r2.proj'), plat: t('news.cf.r2.plat'), amt: t('news.cf.r2.amt'), sub: '' },
    { y: '—',    proj: t('news.cf.r3.proj'), plat: t('news.cf.r3.plat'), amt: t('news.cf.r3.amt'), sub: '' },
    { y: '—',    proj: t('news.cf.r4.proj'), plat: t('news.cf.r4.plat'), amt: t('news.cf.r4.amt'), sub: '' },
    { y: '—',    proj: t('news.cf.r5.proj'), plat: t('news.cf.r5.plat'), amt: t('news.cf.r5.amt'), sub: '' },
    { y: '—',    proj: t('news.cf.r6.proj'), plat: t('news.cf.r6.plat'), amt: t('news.cf.r6.amt'), sub: t('news.cf.r6.sub') },
  ];
  return (
    <Section dark mobile={isMobile}>
      <SectionHead
        dark mobile={isMobile}
        eyebrow={t('news.cf.eyebrow')}
        title={<>{t('news.cf.title1')}<br/>{t('news.cf.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, maxWidth: 360 }}>
            {t('news.cf.aside')}
          </p>
        )}
      />
      <div style={{
        background: 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(255,255,255,0.1)',
        borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
      }}>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : '60px 1.2fr 1.4fr 1.5fr',
            gap: isMobile ? 4 : 24,
            padding: isMobile ? '16px 20px' : '20px 28px',
            borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.1)',
            alignItems: 'baseline',
          }}>
            {!isMobile && (
              <span className="mono" style={{ color: 'rgba(255,255,255,0.4)', fontSize: 12 }}>{r.y}</span>
            )}
            <div style={{
              fontSize: isMobile ? 16 : 18, color: '#fff', fontWeight: 500, letterSpacing: '-0.015em',
              gridColumn: isMobile ? '1 / -1' : 'auto',
            }}>{r.proj}</div>
            <div style={{ fontSize: isMobile ? 12 : 14, color: 'rgba(255,255,255,0.6)' }}>{r.plat}</div>
            <div style={{ textAlign: isMobile ? 'right' : 'left' }}>
              <div className="mono" style={{
                fontSize: isMobile ? 16 : 22, color: REF.accent, fontWeight: 500,
                letterSpacing: '-0.01em', fontFamily: 'Inter',
              }}>{r.amt}</div>
              {r.sub && (
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>{r.sub}</div>
              )}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function NewsMilestones({ isMobile }) {
  const t = useT();
  const items = [
    { y: '2022', t: t('news.ms.m1.t'), d: t('news.ms.m1.d') },
    { y: '2021', t: t('news.ms.m2.t'), d: t('news.ms.m2.d') },
    { y: '2019', t: t('news.ms.m3.t'), d: t('news.ms.m3.d') },
    { y: '2018', t: t('news.ms.m4.t'), d: t('news.ms.m4.d') },
    { y: '2015', t: t('news.ms.m5.t'), d: t('news.ms.m5.d') },
    { y: '2014', t: t('news.ms.m6.t'), d: t('news.ms.m6.d') },
    { y: '2013', t: t('news.ms.m7.t'), d: t('news.ms.m7.d') },
    { y: '2011', t: t('news.ms.m8.t'), d: t('news.ms.m8.d') },
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('news.ms.eyebrow')}
        title={<>{t('news.ms.title1')}<br/>{t('news.ms.title2')}</>}
      />
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {items.map((it, i) => (
          <div key={it.y + it.t} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '64px 1fr' : '120px 1fr 1.6fr',
            gap: isMobile ? 16 : 32,
            padding: isMobile ? '20px 0' : '28px 0',
            borderTop: i === 0 ? `1px solid ${REF.ink}` : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
          }}>
            <div className="mono" style={{
              fontSize: isMobile ? 14 : 17, color: REF.ink, fontWeight: 500, letterSpacing: '0.02em',
            }}>{it.y}</div>
            <div style={{ fontSize: isMobile ? 17 : 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{it.t}</div>
            {!isMobile && <div style={{ fontSize: 15, color: REF.ink2, lineHeight: 1.6 }}>{it.d}</div>}
            {isMobile && (
              <div style={{
                gridColumn: '2 / 3', marginTop: 4, fontSize: 13, color: REF.ink2, lineHeight: 1.6,
              }}>{it.d}</div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}

function NewsPress({ isMobile }) {
  const t = useT();
  const cats = [
    [t('news.pr.c1.k'), t('news.pr.c1.v')],
    [t('news.pr.c2.k'), t('news.pr.c2.v')],
    [t('news.pr.c3.k'), t('news.pr.c3.v')],
    [t('news.pr.c4.k'), t('news.pr.c4.v')],
    [t('news.pr.c5.k'), t('news.pr.c5.v')],
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('news.pr.eyebrow')}
        title={<>{t('news.pr.title1')}<br/>{t('news.pr.title2')}</>}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(5, 1fr)',
        gap: isMobile ? 10 : 12,
      }}>
        {cats.map(([k, v]) => (
          <div key={k} style={{
            background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 12,
            padding: isMobile ? '18px 18px' : '22px 20px',
          }}>
            <Eyebrow>{k}</Eyebrow>
            <p style={{
              margin: '12px 0 0', fontSize: isMobile ? 13 : 13.5,
              color: REF.ink2, lineHeight: 1.55,
            }}>{v}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function NewsPressKit({ isMobile }) {
  const t = useT();
  return (
    <Section dark mobile={isMobile}>
      <div style={{
        display: isMobile ? 'block' : 'flex', justifyContent: 'space-between',
        alignItems: 'flex-end', gap: 56,
      }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow dark>{t('news.pk.eyebrow')}</Eyebrow>
          <h2 style={{
            margin: '14px 0 0', fontSize: isMobile ? 28 : 48,
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.1,
          }}>{t('news.pk.title1')}<br/>{t('news.pk.title2')}</h2>
          <p style={{
            margin: '20px 0 0', fontSize: isMobile ? 14 : 16,
            color: 'rgba(255,255,255,0.55)', lineHeight: 1.65, fontStyle: 'italic',
          }}>{t('news.pk.body')}</p>
        </div>
        <div style={{
          marginTop: isMobile ? 24 : 0, display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <Btn primary dark href="mailto:sales@maktar.com">sales@maktar.com →</Btn>
          <span className="mono" style={{
            color: 'rgba(255,255,255,0.5)', fontSize: 12, marginLeft: 4, letterSpacing: '0.04em',
          }}>02-6604-0020</span>
        </div>
      </div>
    </Section>
  );
}

function NewsPage() {
  const isMobile = useIsMobile();
  return (
    <>
      <NewsHero isMobile={isMobile} />
      <NewsRecent isMobile={isMobile} />
      <NewsMilestones isMobile={isMobile} />
      <NewsAwards isMobile={isMobile} />
      <NewsCrowdfunding isMobile={isMobile} />
      <NewsPress isMobile={isMobile} />
      <NewsPressKit isMobile={isMobile} />
    </>
  );
}
Object.assign(window, { NewsPage });