/**
 * About — about pCNT 페이지 (Phase 2)
 * 공용 TopAppBar + BottomNav (Layout에 포함됨)
 * 시안: 0040_Debug/subpages/about.html
 */
import styled from 'styled-components';
import MatIcon from '../../components/MatIcon';

const Container = styled.div`
  padding: 16px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
`;

const SectionTitle = styled.h2`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md3-on-surface);
  margin: 0 0 12px;
`;

const BodyLg = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md3-on-surface-variant);
  margin: 0;
`;

const Card = styled.section`
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
`;

const WhyHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
`;

const WhyIcon = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md3-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md3-on-primary-container);
  flex-shrink: 0;
`;

const WhyTitle = styled.h3`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--md3-on-surface);
  margin: 0;
`;

const CheckList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 12px;
`;

const CheckRow = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);

  strong {
    color: var(--md3-on-surface);
    font-weight: 600;
  }
`;

const H3 = styled.h3`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--md3-on-surface);
  margin: 0 0 16px;
  padding: 0 4px;
`;

const ComparisonGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
`;

const CompareCard = styled.article<{ $highlight?: boolean }>`
  position: relative;
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
`;

const CompareAccent = styled.div<{ $highlight?: boolean }>`
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: ${(p) => (p.$highlight ? 'var(--md3-primary)' : 'var(--md3-surface-variant)')};
`;

const CompareLabel = styled.span`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--md3-on-surface);
`;

const CompareGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
`;

const CompareCol = styled.div``;

const CompareHeader = styled.span<{ $primary?: boolean }>`
  display: block;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: ${(p) => (p.$primary ? 600 : 500)};
  color: ${(p) => (p.$primary ? 'var(--md3-primary)' : 'var(--md3-on-surface-variant)')};
  margin-bottom: 4px;
`;

const CompareValue = styled.span<{ $primary?: boolean; $strike?: boolean }>`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: ${(p) => (p.$primary ? 500 : 400)};
  color: ${(p) => (p.$primary ? 'var(--md3-primary)' : 'var(--md3-on-surface)')};
  text-decoration: ${(p) => (p.$strike ? 'line-through' : 'none')};
  text-decoration-color: ${(p) => (p.$strike ? 'var(--md3-error)' : 'transparent')};
`;

const Reasons = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const ReasonCard = styled.div`
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
`;

const ReasonTitle = styled.h4`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--md3-primary);
  margin: 0 0 8px;
`;

const ReasonBody = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);
  margin: 0;
`;

const Quote = styled.section`
  background: var(--md3-primary-container);
  border: 1px solid var(--md3-primary);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-top: 8px;
`;

const QuoteText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
  color: var(--md3-on-primary-container);
  margin: 0;
`;

interface CompareItem {
  label: string;
  mbti: string;
  pcnt: string;
  mbtiStrike?: boolean;
  highlight?: boolean;
}

const COMPARE_ITEMS: CompareItem[] = [
  {
    label: '측정 방식',
    mbti: '주관적 자기보고',
    pcnt: '객관적 신경인지 과제',
    mbtiStrike: false,
  },
  {
    label: '측정 대상',
    mbti: '자신이 생각하는 \'성격 및 선호도\'',
    pcnt: '실제 \'뇌 인지 기능\' 및 정서·행동 제어력',
  },
  {
    label: '결과 왜곡',
    mbti: '바람직한 답을 선택하는 \'자기보고 오류\' 발생',
    pcnt: '실제 반응 속도/오류율 측정으로 조작 불가능',
  },
  {
    label: '프로파일',
    mbti: '16가지 성격 유형',
    pcnt: '216가지 임상 페르소나',
  },
  {
    label: '결과',
    mbti: '단순 유형 분류',
    pcnt: '실천적인 임상 솔루션',
    highlight: true,
  },
];

const REASONS = [
  {
    title: '1. "내가 보는 나"가 아닌 "실제 나의 뇌"를 측정합니다',
    body: 'MBTI는 "나는 집중력이 좋은가?"라는 질문에 본인의 착각이나 바람으로 답할 수 있습니다. 반면 pCNT는 N-BACK(기억력), CST(카드 옮기기), MC(소근육) 등 실제 행동 과제(Task)를 수행하게 하여 오차 없이 정밀한 인지·행동 데이터를 도출합니다.',
  },
  {
    title: '2. 16가지의 한계를 넘어선 216가지 세밀한 페르소나',
    body: 'MBTI는 16가지 틀에 사람을 가두어 "나랑 똑같은 유형인데 왜 이렇게 다르지?"라는 한계가 있습니다. pCNT는 정서, 인지, 행동 3차원의 조합(216개 유형)을 통해 개인의 미세한 차이까지 완벽하게 반영하는 \'초개인화\'된 결과를 제공합니다.',
  },
  {
    title: '3. 단점을 규명하는 데 그치지 않고 \'뇌 성장 솔루션\'을 제시합니다',
    body: 'MBTI가 "당신은 이런 성격입니다"라는 라벨을 붙여주는 것에 그친다면, pCNT는 정신과 CNT 시스템에 기반하여 자신의 인지적 약점을 극복할 수 있는 실천적 제안(뽀모도로, 행동 브레이크 훈련 등)을 함께 제공합니다.',
  },
];

export default function About() {
  return (
    <Container>
      {/* 섹션 1: pCNT 소개 */}
      <section>
        <SectionTitle>pCNT 소개</SectionTitle>
        <BodyLg>
          pCNT는 정신과적 평가와 정서·인지검사를 결합한 모바일 우선 플랫폼입니다.
          정밀한 검사 결과를 통해 사용자의 현재 상태와 변화 추이를 확인하고,
          시간의 경과에 따른 변화를 추적하여 사용자의 정서상태와 인지기능을 종합적으로 측정합니다.
        </BodyLg>
      </section>

      {/* 섹션 2: 왜 pCNT가 중요한가? */}
      <Card>
        <WhyHeader>
          <WhyIcon>
            <MatIcon name="psychology" size={22} />
          </WhyIcon>
          <WhyTitle>왜 pCNT가 중요한가요?</WhyTitle>
        </WhyHeader>
        <CheckList>
          <CheckRow>
            <MatIcon name="check_circle" size={20} color="var(--md3-primary)" />
            <p>
              <strong>7개의 정서 설문</strong>과 <strong>5개의 인지 행동 검사</strong>를 결합해 평가합니다.
            </p>
          </CheckRow>
          <CheckRow>
            <MatIcon name="check_circle" size={20} color="var(--md3-primary)" />
            <p>
              우울, 자폐, ADHD, 강박 등 <strong>13개의 표준화된 지표로 현재 상태를 진단</strong>합니다.
            </p>
          </CheckRow>
          <CheckRow>
            <MatIcon name="check_circle" size={20} color="var(--md3-primary)" />
            <p>
              <strong>216가지의 고유한 페르소나 프로파일</strong>을 기반으로 정밀한 통찰을 제공합니다.
            </p>
          </CheckRow>
          <CheckRow>
            <MatIcon name="check_circle" size={20} color="var(--md3-primary)" />
            <p>
              시간의 경과 변화를 추적하여 실질적인 <strong>뇌-성장솔루션 솔루션</strong>역할을 제공합니다.
            </p>
          </CheckRow>
        </CheckList>
      </Card>

      {/* 섹션 3: MBTI vs pCNT 비교 */}
      <section>
        <H3>MBTI vs pCNT 비교</H3>
        <ComparisonGrid>
          {COMPARE_ITEMS.map((item) => (
            <CompareCard key={item.label} $highlight={item.highlight}>
              <CompareAccent $highlight={item.highlight} />
              <CompareLabel>{item.label}</CompareLabel>
              <CompareGrid>
                <CompareCol>
                  <CompareHeader>MBTI</CompareHeader>
                  <CompareValue $strike={item.mbtiStrike}>{item.mbti}</CompareValue>
                </CompareCol>
                <CompareCol>
                  <CompareHeader $primary>pCNT</CompareHeader>
                  <CompareValue $primary>{item.pcnt}</CompareValue>
                </CompareCol>
              </CompareGrid>
            </CompareCard>
          ))}
        </ComparisonGrid>
      </section>

      {/* 섹션 4: MBTI보다 pCNT가 더 나은 3가지 이유 */}
      <section>
        <H3>MBTI보다 pCNT가 더 나은 3가지 이유</H3>
        <Reasons>
          {REASONS.map((r) => (
            <ReasonCard key={r.title}>
              <ReasonTitle>{r.title}</ReasonTitle>
              <ReasonBody>{r.body}</ReasonBody>
            </ReasonCard>
          ))}
        </Reasons>
      </section>

      {/* 인용구 */}
      <Quote>
        <QuoteText>
          "단순히 내 성격을 아는 것을 넘어, 실제 뇌 능력을 발견하고 성장을 위한 맞춤형 솔루션을 받는 것."
        </QuoteText>
      </Quote>
    </Container>
  );
}