// Medway MSS — About + Industries

function About({ accent, t }) {
  const isMobile = useIsMobile();
  return (
    <section id="about" data-screen-label="02 About" style={{
      padding: isMobile ? '72px 20px' : '120px 32px',
      background: `linear-gradient(180deg, var(--bg) 0%, ${accent}0b 100%)`,
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 28 : 64, marginBottom: isMobile ? 44 : 72,
        }}>
          <div>
            <Eyebrow accent={accent}>{t('about.eyebrow')}</Eyebrow>
            <div style={{ marginTop: 16, fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--fg-3)' }}>
              <Num size={13}>§ 01 / 04</Num>
            </div>
          </div>
          <h2 style={{
            margin: 0,
            fontFamily: 'Inter, sans-serif',
            fontSize: 'clamp(28px, 4.6vw, 64px)',
            fontWeight: 500, lineHeight: 1.06, letterSpacing: isMobile ? '-0.02em' : '-0.035em',
            color: 'var(--fg-1)', maxWidth: 980,
          }}>
            {t('about.title')}<span style={{ color: 'var(--fg-3)' }}>{t('about.title.muted')}</span>{t('about.title.tail')}
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr 1fr',
          gap: isMobile ? 24 : 64, paddingTop: isMobile ? 32 : 48, borderTop: '1px solid var(--border)',
        }}>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)',
          }}>{t('about.our_work')}</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)' }}>
            <p style={{ margin: 0 }}>{t('about.body.1')}</p>
            <p style={{ margin: '20px 0 0' }}>{t('about.body.2')}</p>
          </div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)' }}>
            <p style={{ margin: 0 }}>{t('about.body.3')}</p>
            <p style={{ margin: '20px 0 0' }}>{t('about.body.4')}</p>
          </div>
        </div>

        <div style={{
          marginTop: isMobile ? 56 : 96,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 0,
          borderTop: '1px solid var(--border)',
          background: `linear-gradient(90deg, ${accent}0d, transparent 44%, ${accent}08)`,
        }}>
          {[1, 2, 3].map((n, i) => (
            <div key={n} style={{
              padding: isMobile ? '28px 0' : '40px 32px 40px 0',
              paddingLeft: isMobile ? 0 : (i === 0 ? 0 : 32),
              borderRight: !isMobile && i < 2 ? '1px solid var(--border)' : 'none',
              borderBottom: isMobile && i < 2 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 500,
                color: accent, letterSpacing: '0.06em',
                fontVariantNumeric: 'tabular-nums',
              }}>{`0${n}`}</div>
              <div style={{
                marginTop: 28,
                fontFamily: 'Inter, sans-serif', fontSize: 26, fontWeight: 500,
                letterSpacing: '-0.02em', color: 'var(--fg-1)',
              }}>{t(`about.pillar.${n}.t`)}</div>
              <div style={{
                marginTop: 14,
                fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.6,
                color: 'var(--fg-2)',
              }}>{t(`about.pillar.${n}.b`)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Industries({ accent, t }) {
  const isMobile = useIsMobile();
  const items = [
    { k: t('industries.1.k'), n: '01', d: t('industries.1.d') },
    { k: t('industries.2.k'), n: '02', d: t('industries.2.d') },
    { k: t('industries.3.k'), n: '03', d: t('industries.3.d') },
    { k: t('industries.4.k'), n: '04', d: t('industries.4.d') },
    { k: t('industries.5.k'), n: '05', d: t('industries.5.d') },
    { k: t('industries.6.k'), n: '06', d: t('industries.6.d') },
  ];
  return (
    <section id="industries" data-screen-label="04 Industries" style={{
      padding: isMobile ? '72px 20px' : '120px 32px',
      background: `linear-gradient(180deg, var(--gray-50) 0%, ${accent}0c 100%)`,
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 28 : 64, marginBottom: isMobile ? 44 : 72,
        }}>
          <div>
            <Eyebrow accent={accent}>{t('industries.eyebrow')}</Eyebrow>
            <div style={{ marginTop: 16, fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--fg-3)' }}>
              <Num size={13}>§ 03 / 04</Num>
            </div>
          </div>
          <h2 style={{
            margin: 0,
            fontFamily: 'Inter, sans-serif',
            fontSize: 'clamp(28px, 4.6vw, 64px)',
            fontWeight: 500, lineHeight: 1.06, letterSpacing: isMobile ? '-0.02em' : '-0.035em',
            color: 'var(--fg-1)', maxWidth: 900,
          }}>{t('industries.title')}</h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 0,
          background: 'var(--bg)', border: '1px solid var(--border)',
          boxShadow: `0 18px 60px ${accent}14`,
        }}>
          {items.map((it, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            return (
              <div key={it.k} style={{
                padding: isMobile ? '28px 24px' : '40px 32px',
                borderRight: !isMobile && col < 2 ? '1px solid var(--border)' : 'none',
                borderBottom: isMobile ? (i < items.length - 1 ? '1px solid var(--border)' : 'none') : (row < 1 ? '1px solid var(--border)' : 'none'),
              }}>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
                  letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)',
                }}>{it.k}</div>
                <div style={{
                  marginTop: 24,
                  fontFamily: 'Inter, sans-serif',
                  fontSize: isMobile ? 40 : 56, fontWeight: 400,
                  letterSpacing: '-0.04em', color: accent, lineHeight: 1,
                  fontVariantNumeric: 'tabular-nums',
                }}>{it.n}</div>
                <div style={{
                  marginTop: 24,
                  fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55,
                  color: 'var(--fg-2)', maxWidth: 320,
                }}>{it.d}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Industries });