/* Programs.jsx — Option C: refined premium grid
   Keeps 3×2 layout but strips noise: no pill chips, no dashed rules, no
   "01/06" counters, no rainbow tints. Single purple accent on icons. The
   confidence comes from typography + shadow depth, not decoration. */

const PIcon = ({ d, size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);

const PROG_ICONS = {
  offline: <><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 18v3"/></>,
  app:     <><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></>,
  weekly:  <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/></>,
  tools:   <><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="12" cy="18" r="3"/></>,
  camp:    <><path d="M3 21l9-18 9 18"/><path d="M8 21l4-8 4 8"/></>,
  global:  <><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20"/><path d="M12 2a15 15 0 0 0 0 20"/></>,
};

const Programs = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const pick = pair => pair[lang === 'ko' ? 0 : 1];
  const items = [
    { icon: 'offline', label: 'prog.1.label', title: 'prog.1.title', body: 'prog.1.body',
      kpi: pick(['90분 × 24주', '90 min × 24 weeks']), metric: pick(['6-8명 정원', '6–8 students']) },
    { icon: 'app',     label: 'prog.2.label', title: 'prog.2.title', body: 'prog.2.body',
      kpi: pick(['매일 5분', '5 min daily']),         metric: pick(['iOS · AOS', 'iOS · Android']) },
    { icon: 'weekly',  label: 'prog.3.label', title: 'prog.3.title', body: 'prog.3.body',
      kpi: pick(['주 1호', '1 issue / week']),         metric: pick(['24호 시리즈', '24-issue series']) },
    { icon: 'tools',   label: 'prog.4.label', title: 'prog.4.title', body: 'prog.4.body',
      kpi: pick(['학기당 2종', '2 kits per semester']), metric: pick(['집·교실 겸용', 'Home + class']) },
    { icon: 'camp',    label: 'prog.5.label', title: 'prog.5.title', body: 'prog.5.body',
      kpi: pick(['7월 · 8월', 'Jul · Aug']),           metric: pick(['5일 집중', '5-day intensive']) },
    { icon: 'global',  label: 'prog.6.label', title: 'prog.6.title', body: 'prog.6.body',
      kpi: 'Year 2+',                                  metric: 'AMC · KMC' },
  ];

  return (
    <section id="programs" className="section" style={{ background: '#F8FAFC' }}>
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('prog.eyebrow')}</div>
        <h2 className="prog-h2" style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(15px, 4.6vw, 38px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, maxWidth: 760, lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('prog.h2')}</h2>

        <div className="prem-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16, marginTop: 48,
        }}>
          {items.map((it, i) => (
            <a key={it.label} href="#" className="prem-card" style={{
              display: 'flex', flexDirection: 'column',
              textDecoration: 'none',
              position: 'relative',
              background: '#FFFFFF',
              border: '1px solid #E8ECF2',
              borderRadius: 18,
              padding: '28px 28px 24px',
              minHeight: 248,
              boxShadow: '0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -16px rgba(15,23,42,0.08)',
              transition: 'transform 280ms cubic-bezier(0.2,0.6,0.25,1), box-shadow 280ms cubic-bezier(0.2,0.6,0.25,1), border-color 240ms ease',
            }}>
              {/* Top — large icon with soft purple disc backdrop */}
              <div style={{
                width: 52, height: 52, borderRadius: 14,
                background: 'linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%)',
                color: '#6D28D9',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                marginBottom: 22,
                transition: 'transform 280ms cubic-bezier(0.2,0.6,0.25,1), background 240ms ease',
              }} className="prem-icon">
                <PIcon d={PROG_ICONS[it.icon]} size={26} />
              </div>

              {/* Title + body */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                <div className="prem-title" style={{
                  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                  fontSize: 20, fontWeight: 700, letterSpacing: '-0.28px',
                  color: '#0B1727', lineHeight: 1.28,
                  transition: 'color 220ms ease',
                }}>{t(it.title)}</div>
                <div style={{
                  fontSize: 14, fontWeight: 400,
                  color: '#475569', lineHeight: 1.65,
                }}>{t(it.body)}</div>
              </div>

              {/* Footer — KPI line + arrow (no dashed rule, just spacing) */}
              <div style={{
                marginTop: 22, paddingTop: 18,
                borderTop: '1px solid #EEF0F5',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 12,
              }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
                  <span style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01" "tnum"',
                    fontSize: 14.5, fontWeight: 700,
                    color: '#0B1727', letterSpacing: '-0.01em',
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{it.kpi}</span>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 600,
                    color: '#94A3B8', letterSpacing: '0.08em', textTransform: 'uppercase',
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{it.metric}</span>
                </div>
                <span className="prem-arrow" aria-hidden="true" style={{
                  width: 34, height: 34, borderRadius: '50%',
                  border: '1px solid #E2E8F0',
                  color: '#0B1727',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                  transition: 'transform 280ms cubic-bezier(0.2,0.6,0.25,1), background 240ms ease, border-color 240ms ease, color 240ms ease',
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12"/>
                    <polyline points="12 5 19 12 12 19"/>
                  </svg>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .prem-card:hover {
          transform: translateY(-4px);
          border-color: #C4B5FD;
          box-shadow:
            0 2px 4px rgba(15,23,42,0.04),
            0 24px 48px -24px rgba(109,40,217,0.22);
        }
        .prem-card:hover .prem-icon {
          transform: scale(1.06) rotate(-4deg);
          background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
        }
        .prem-card:hover .prem-title { color: #5B21B6; }
        .prem-card:hover .prem-arrow {
          transform: translateX(3px);
          background: #6D28D9; border-color: #6D28D9; color: #FFFFFF;
        }
        .prem-card:focus-visible {
          outline: 2px solid #6D28D9;
          outline-offset: 3px;
        }

        /* Tablet — 2 columns, slightly tighter padding */
        @media (max-width: 980px) {
          .prem-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
          .prem-card { padding: 24px 22px 20px !important; min-height: 220px !important; }
        }

        /* Mobile — drop vertical cards entirely.
           Stack as horizontal rows: icon disc on the left, title + KPI inline,
           arrow at the right. Tighter spacing, real touch targets, KPI metric
           hidden (subordinate info), section bg flattens to plain background. */
        @media (max-width: 600px) {
          .prem-grid {
            grid-template-columns: 1fr !important;
            gap: 10px !important;
          }
          .prem-card {
            flex-direction: row !important;
            align-items: center !important;
            gap: 16px !important;
            padding: 16px 16px !important;
            min-height: 0 !important;
            border-radius: 14px !important;
            box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important;
          }
          .prem-card:hover { transform: none !important; }
          .prem-icon {
            width: 44px !important; height: 44px !important;
            border-radius: 12px !important;
            margin-bottom: 0 !important;
            flex-shrink: 0;
          }
          .prem-card > div:nth-of-type(2) {
            /* title+body block becomes the flex-growing middle */
            flex: 1 1 auto !important; min-width: 0;
            gap: 4px !important;
          }
          .prem-title { font-size: 16px !important; letter-spacing: -0.2px !important; }
          .prem-card > div:nth-of-type(2) > div:nth-of-type(2) {
            /* body line — clamp to 1 line on mobile to keep rows compact */
            font-size: 12.5px !important;
            line-height: 1.45 !important;
            color: #64748B !important;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .prem-card > div:nth-of-type(3) {
            /* footer KPI block — re-arrange to right-side compact column */
            margin-top: 0 !important;
            padding-top: 0 !important;
            border-top: 0 !important;
            flex-shrink: 0;
            flex-direction: row !important;
            align-items: center !important;
            gap: 10px !important;
          }
          .prem-card > div:nth-of-type(3) > div:first-child {
            display: none !important; /* drop verbose KPI on tightest screens */
          }
          .prem-arrow {
            width: 36px !important; height: 36px !important;
          }
        }

        /* Mobile font-size now driven by the inline clamp() on .prog-h2 —
           the previous 26px override fought the one-line-on-mobile goal. */
      `}</style>
    </section>
  );
};

window.Programs = Programs;