/* DarkSection.jsx — immersive brand-dark section with trust metrics
   Reuses the DS DarkSection visual recipe verbatim (#1c1e54 + magenta
   nebula glow). Copy reframed from Stripe's "Reliability / 99.999%" to
   SRIKI's "Kakao within 30 min" trust asset.
   Rationale: spec §2.6 + §9 (PDF 시나리오 C). */

const DarkSection = () => {
  const t = window.useT();
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, #0B0F2E 0%, #1c1e54 50%, #0d253d 100%)',
      color: '#fff',
      padding: '104px 24px',
    }}>
      {/* nebula glows */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: '60%', top: '-25%',
        width: 720, height: 720, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(249,107,238,0.40), rgba(234,34,97,0) 60%)',
        filter: 'blur(48px)', pointerEvents: 'none',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', left: '-15%', bottom: '-35%',
        width: 620, height: 620, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(167,139,250,0.32), transparent 60%)',
        filter: 'blur(56px)', pointerEvents: 'none',
      }} />
      {/* subtle grid overlay */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
        <div className="label-ko" style={{
          marginBottom: 22, color: '#C4B5FD',
        }}>{t('dark.eyebrow')}</div>
        <h2 className="dark-h2" style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 48, fontWeight: 700, letterSpacing: '-0.88px',
          lineHeight: 1.18, margin: 0, maxWidth: 820, color: '#fff',
          whiteSpace: 'pre-line',
        }}>{t('dark.h2')}</h2>

        <div className="dark-metrics" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24, marginTop: 56, maxWidth: 1040,
        }}>
          {[
            ['dark.m1.n', 'dark.m1.l'],
            ['dark.m2.n', 'dark.m2.l'],
            ['dark.m3.n', 'dark.m3.l'],
          ].map(([n, l]) => (
            <div key={l} style={{
              padding: '28px 28px',
              borderLeft: '2px solid rgba(196,181,253,0.32)',
            }}>
              <div className="tnum dark-metric-n" style={{
                fontFamily: 'var(--font-sans)', fontFeatureSettings: '"tnum"',
                fontSize: 44, fontWeight: 800, letterSpacing: '-0.8px',
                lineHeight: 1.05,
                background: 'linear-gradient(180deg, #FFFFFF 0%, #E9D5FF 120%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
                filter: 'drop-shadow(0 0 24px rgba(167,139,250,0.45))',
              }}>{t(n)}</div>
              <div style={{
                fontSize: 14, fontWeight: 500,
                color: 'rgba(255,255,255,0.82)', marginTop: 18,
                fontFeatureSettings: '"ss01"', lineHeight: 1.65,
                letterSpacing: '-0.01em',
              }}>{t(l)}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .dark-metrics { grid-template-columns: 1fr !important; gap: 8px !important; }
        }
        @media (max-width: 767px) {
          /* 48px is over-balanced for a 2-line headline on phones — scale down
             but keep pre-line wrapping (intentional 2 lines, no nowrap). */
          .dark-h2 {
            font-size: 24px !important;
            line-height: 1.30 !important;
            letter-spacing: -0.4px !important;
          }
          /* Metric numerals — desktop 44px is still too loud on phones,
             especially for the longer "퀀트 애널리스트" label which would
             otherwise wrap and tower over the body copy. */
          .dark-metric-n {
            font-size: 32px !important;
            letter-spacing: -0.5px !important;
          }
        }
        @media (max-width: 380px) {
          .dark-metric-n {
            font-size: 28px !important;
            letter-spacing: -0.4px !important;
          }
        }
      `}</style>
    </section>
  );
};

window.DarkSection = DarkSection;