/* About.jsx — Why SRIKI + 3-card rationale + founder card
   Reuses DS FeatureGrid card pattern verbatim (1px hairline, 6px radius,
   elev-2 hover). Domain text re-mapped via i18n. Founder card added below
   (rationale: spec §2.3 — Korean parents weight "owner-operated school"
   heavily; CMS / 필즈 pattern). */

const ICONS = {
  /* Lucide-style icons matched to the three SRIKI pillars:
     book-open (교과수학) · brain (사고력) · banknote (금융) */
  book:  (<><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></>),
  brain: (<><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2"/></>),
  bill:  (<><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.4"/><path d="M6 12h.01"/><path d="M18 12h.01"/></>),
};

const About = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const isKo = lang === 'ko';
  const cards = [
    { iconKey: 'book',  label: 'about.card.1.label', title: 'about.card.1.title', body: 'about.card.1.body',
      track: 'track-math',     accent: '#A78BFA', accentDeep: '#5B21B6', bg: 'rgba(167,139,250,0.10)' },
    { iconKey: 'brain', label: 'about.card.2.label', title: 'about.card.2.title', body: 'about.card.2.body',
      track: 'track-thinking', accent: '#3B82F6', accentDeep: '#1E3A8A', bg: 'rgba(59,130,246,0.10)' },
    { iconKey: 'bill', label: 'about.card.3.label', title: 'about.card.3.title', body: 'about.card.3.body',
      track: 'track-finance',  accent: '#F59E0B', accentDeep: '#92400E', bg: 'rgba(245,158,11,0.12)' },
  ];

  return (
    <section id="why" className="section">
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('about.eyebrow')}</div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(16px, 5vw, 42px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, maxWidth: '100%', lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('about.h2')}</h2>

        <style>{`
          /* Mobile keeps inline clamp + nowrap from the h2 above —
             no override needed. (Previous rule forced white-space:normal
             which defeated the one-line-on-mobile goal.) */
          @media (max-width: 767px) {
            /* Card titles: single line, no wrap, smaller font on phones.
               Overrides inline whiteSpace: pre-line + fontSize: 22 above. */
            .about-card-title {
              white-space: nowrap !important;
              font-size: 16px !important;
              line-height: 1.30 !important;
              letter-spacing: -0.3px !important;
              overflow: hidden !important;
              text-overflow: ellipsis !important;
            }
          }
        `}</style>

        <div className="about-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 18, marginTop: 48,
        }}>
          {cards.map(c => (
            <div key={c.label} className="card" style={{
              padding: 0, display: 'flex', flexDirection: 'column',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* Header band — minimal tinted strip with flat line icon + chip */}
              <div style={{
                padding: '22px 24px 18px',
                background: `linear-gradient(135deg, ${c.accent}14 0%, ${c.accent}05 100%)`,
                borderBottom: `1px solid ${c.accent}1A`,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 12,
              }}>
                {/* Flat outline icon — no fill box, accent-color stroke */}
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
                  stroke={c.accentDeep} strokeWidth="1.6"
                  strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  {ICONS[c.iconKey]}
                </svg>
                <span style={{
                  padding: '5px 11px', borderRadius: 9999,
                  background: '#FFFFFF',
                  border: `1px solid ${c.accent}40`,
                  color: c.accentDeep,
                  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                  fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em',
                  whiteSpace: 'nowrap',
                }}>{t(c.label)}</span>
              </div>

              {/* Content */}
              <div style={{
                padding: '22px 24px 26px',
                display: 'flex', flexDirection: 'column', gap: 14,
                flex: 1,
              }}>
                <div className="about-card-title" style={{
                  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                  /* Use clamp so card 3's longer title (26 chars) still fits on one line
                     at the narrowest 3-column desktop width (~290px inner). Cards 1/2 (14–16 chars)
                     read fine at this size too — visual rhythm stays consistent. */
                  fontSize: 'clamp(14px, 1.6vw, 18px)', fontWeight: 700, letterSpacing: '-0.32px',
                  color: '#0B1727', lineHeight: 1.32,
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }}>{t(c.title)}</div>
                <div style={{
                  fontSize: 14.5, fontWeight: 400,
                  color: '#475569', lineHeight: 1.72,
                  letterSpacing: '-0.01em',
                }}>{t(c.body)}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Founder card — text-only, elegant single-column layout */}
        <div className="founder-card" style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: '420px 1fr',
          gap: 36, alignItems: 'start',
          background: 'linear-gradient(135deg, #FFFFFF 0%, #FAFCFE 60%, #F5F3FF 130%)',
          border: '1px solid #E2E8F0', borderRadius: 16,
          padding: 30,
          boxShadow: '0 1px 2px rgba(15,23,42,0.04), 0 16px 36px -18px rgba(109,40,217,0.18)',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* Top gradient accent bar */}
          <span aria-hidden="true" style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 3,
            background: 'linear-gradient(90deg, #A78BFA, #6D28D9 50%, #C084FC)',
            zIndex: 1,
          }} />

          {/* Founder photo — natural aspect ratio, vertically centered */}
          <div className="founder-photo" style={{
            position: 'relative',
            borderRadius: 12, overflow: 'hidden',
            border: '1px solid #E2E8F0',
            boxShadow: '0 4px 14px rgba(15,23,42,0.08), 0 24px 48px -20px rgba(109,40,217,0.22)',
            background: '#0B1727',
            alignSelf: 'center',
            lineHeight: 0,
          }}>
            <img
              src="assets/프로필.png"
              alt={isKo ? '안지선 대표 원장' : 'Founder · Director Ji-Sun Ahn'}
              loading="lazy"
              style={{
                display: 'block',
                width: '100%', height: 'auto',
                objectFit: 'contain',
              }}
              onError={(e) => {
                e.currentTarget.style.display = 'none';
                const fb = e.currentTarget.parentElement.querySelector('.photo-fallback');
                if (fb) fb.style.display = 'flex';
              }}
            />
            <div className="photo-fallback" style={{
              display: 'none',
              position: 'absolute', inset: 0,
              alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column', gap: 10,
              background: 'linear-gradient(135deg, #1c1e54 0%, #0d253d 100%)',
              color: 'rgba(255,255,255,0.7)',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              textTransform: 'uppercase', letterSpacing: '0.08em',
              padding: 20, textAlign: 'center',
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <circle cx="8.5" cy="8.5" r="1.5"/>
                <polyline points="21 15 16 10 5 21"/>
              </svg>
              <div>assets/프로필.png</div>
              <div style={{ opacity: 0.6 }}>{isKo ? '이미지 업로드 필요' : 'Image upload pending'}</div>
            </div>
          </div>

          {/* Right column — text content */}
          <div style={{ position: 'relative' }}>
            {/* Decorative large quote glyph in background */}
            <span aria-hidden="true" style={{
              position: 'absolute', top: -20, right: -10,
              fontFamily: 'Georgia, serif', fontSize: 180,
              color: 'rgba(109,40,217,0.05)', lineHeight: 1,
              pointerEvents: 'none', userSelect: 'none',
              fontWeight: 700,
            }}>"</span>

            <div className="label-ko" style={{ marginBottom: 14, position: 'relative' }}>
              {t('founder.eyebrow')}
            </div>

            <div style={{
              fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
              fontSize: 32, fontWeight: 800, letterSpacing: '-0.5px',
              color: '#0B1727', lineHeight: 1.20,
              position: 'relative',
            }}>{t('founder.name')}</div>

            <div style={{
              fontSize: 13.5, color: '#6D28D9', marginTop: 8,
              fontWeight: 700, letterSpacing: '-0.01em',
              position: 'relative',
            }}>{t('founder.role')}</div>

            {/* Career credential chips */}
            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 6,
              marginTop: 18, position: 'relative',
            }}>
              {(isKo ? [
                '연세대 학사·석사',
                '現 유진투자증권',
                '前 KB자산운용',
                '前 다올투자증권 (現 KTB)',
                'YTN·매경·한경 출연',
              ] : [
                'Yonsei BA & MA',
                'Current: Eugene Securities',
                'Former: KB Asset Management',
                'Former: Daol Securities (now KTB)',
                'Featured on YTN, Maekyung, Hankyung',
              ]).map(chip => (
                <span key={chip} style={{
                  padding: '5px 10px', borderRadius: 7,
                  background: 'rgba(109,40,217,0.06)',
                  border: '1px solid rgba(109,40,217,0.18)',
                  fontFamily: 'var(--font-ko)', fontSize: 11.5, fontWeight: 600,
                  color: '#5B21B6', letterSpacing: '-0.01em',
                }}>{chip}</span>
              ))}
            </div>

            <p style={{
              fontSize: 14.5, color: '#1E293B', lineHeight: 1.75, marginTop: 22,
              fontWeight: 400,
              position: 'relative',
              letterSpacing: '-0.01em',
            }}>
              {t('founder.bio')}
            </p>

            <blockquote style={{
              margin: '24px 0 0', padding: '20px 24px',
              borderLeft: '4px solid #6D28D9',
              background: 'linear-gradient(90deg, #F5F3FF 0%, rgba(245,243,255,0.4) 100%)',
              borderRadius: '0 10px 10px 0',
              fontSize: 14.5, fontWeight: 500,
              color: '#1E293B', lineHeight: 1.85,
              fontStyle: 'normal',
              position: 'relative',
              letterSpacing: '-0.01em',
            }}>{t('founder.quote')}</blockquote>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 940px) {
          .about-grid { grid-template-columns: 1fr !important; }
          .founder-card { grid-template-columns: 1fr !important; padding: 24px !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
};

window.About = About;