/**
 * TermsOfService — 서비스 이용약관 페이지 (Phase3)
 * 시안: D:\0040_Dev\0040_SC_301\0040_Debug\subpages\termsofservice.html
 * 상단 타이틀: 기존 TopAppBar 사용
 * 하단 메뉴: 시안의 푸터 사용 (기존 하단메뉴 미사용)
 * 하단 '거부', '동의 및 계속' 버튼 삭제
 */
import { Link } from 'react-router-dom';
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;
  max-width: 720px;
  margin: 0 auto;
`;

const PageHeader = styled.div`
  margin-bottom: 8px;
`;

const PageTitle = 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 4px;
  line-height: 1.2;
`;

const PageSubtitle = 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 0 4px;
`;

const PageDate = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--md3-secondary);
  margin: 0;
`;

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

  @media (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }
`;

const Card = styled.section`
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const FullWidthCard = styled(Card)`
  @media (min-width: 600px) {
    grid-column: span 2;
  }
`;

const MedicalCard = styled(FullWidthCard)`
  background: var(--md3-surface-container-lowest);
  border-left: 4px solid var(--md3-status-warning);
  position: relative;
  overflow: hidden;
`;

const MedicalWatermark = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  padding: 16px;
  opacity: 0.1;
  font-size: 96px;
  line-height: 1;
  pointer-events: none;
`;

const CardHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--md3-surface-variant);
`;

const CardIcon = styled(MatIcon).attrs({ size: 24 })`
  color: var(--md3-primary);
`;

const WarningIcon = styled(MatIcon).attrs({ size: 24 })`
  color: var(--md3-status-warning);
`;

// 섹션 1, 4: headline-md (22px)
const CardTitleLg = styled.h3`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md3-on-surface);
  margin: 0;
`;

// 섹션 2, 3, 5: label-strong (14px)
const CardTitleSm = styled.h3`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md3-on-surface);
  margin: 0;
`;

const CardBody = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md3-on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;

  p {
    margin: 0;
  }
`;

const CardBodySm = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;

  p {
    margin: 0;
  }
`;

const List = styled.ul`
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);

  li {
    margin-bottom: 8px;
  }
`;

const WarningTitle = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--md3-status-warning);
  margin: 0;
`;

const ContactLink = styled.a`
  color: var(--md3-primary);
  text-decoration: underline;
`;

const Footer = styled.footer`
  margin-top: 48px;
  padding: 24px 0 16px;
  border-top: 1px solid var(--md3-outline-variant);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;

  @media (min-width: 600px) {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
`;

const FooterBrand = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md3-primary);
`;

const FooterLinks = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;

  @media (min-width: 768px) {
    justify-content: flex-start;
    flex: 1;
  }
`;

const FooterLink = styled(Link)`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--md3-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;

  &:hover {
    color: var(--md3-primary);
  }

  &.primary {
    color: var(--md3-primary);
    text-decoration: underline;
  }
`;

const FooterCopyright = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--md3-secondary);
`;

export default function TermsOfService() {
  return (
    <Container>
      {/* 페이지 헤더 */}
      <PageHeader>
        <PageTitle>이용약관</PageTitle>
        <PageSubtitle>Terms of Service</PageSubtitle>
        <PageDate>최종 수정일: 2024년 5월 1일</PageDate>
      </PageHeader>

      {/* 메인 콘텐츠 - Bento-style Cards */}
      <ContentGrid>
        {/* 1. 서비스 개요 */}
        <Card className="full-width">
          <CardHeader>
            <CardIcon name="info" />
            <CardTitleLg>1. 서비스 개요 (Service Overview)</CardTitleLg>
          </CardHeader>
          <CardBody>
            <p>
              본 약관은 pCNT(이하 "앱")가 제공하는 신경인지 평가 및 관련 서비스의 이용 조건 및 절차,
              사용자와 앱 간의 권리, 의무 및 책임 사항을 규정함을 목적으로 합니다.
            </p>
            <p>
              앱은 사용자의 인지 기능을 평가하고 추적하는 도구를 제공하며, 수집된 데이터는
              개인정보 처리방침에 따라 안전하게 관리됩니다.
            </p>
          </CardBody>
        </Card>

        {/* 2. 사용자 책임 */}
        <Card>
          <CardHeader>
            <CardIcon name="assignment_ind" />
            <CardTitleSm>2. 사용자 책임 (User Responsibilities)</CardTitleSm>
          </CardHeader>
          <List>
            <li>사용자는 본인의 정확한 정보를 제공해야 합니다.</li>
            <li>계정 비밀번호 및 보안 유지 책임은 사용자에게 있습니다.</li>
            <li>앱의 정상적인 작동을 방해하거나 데이터를 무단으로 조작하는 행위는 금지됩니다.</li>
          </List>
        </Card>

        {/* 3. 구독 및 결제 */}
        <Card>
          <CardHeader>
            <CardIcon name="credit_card" />
            <CardTitleSm>3. 구독 및 결제 (Subscription Terms)</CardTitleSm>
          </CardHeader>
          <List>
            <li>상세리포트보기 기능은 건당 결제를 통해 이용 가능합니다.</li>
            <li>결제는 신용카드를 통해 청구됩니다.</li>
            <li>
              구독의 경우 별도 과정을 거쳐 관리자 승인하에 이루어지며, 취소는 현재 결제 주기
              종료 24시간 전까지 설정에서 가능합니다.
            </li>
          </List>
        </Card>

        {/* 4. 의료적 면책 조항 (Highlighted) */}
        <MedicalCard>
          <MedicalWatermark>
            <MatIcon name="warning" size={96} />
          </MedicalWatermark>
          <CardHeader>
            <WarningIcon name="medical_information" />
            <CardTitleLg>4. 의료적 면책 조항 (Medical Disclaimer)</CardTitleLg>
          </CardHeader>
          <CardBody>
            <WarningTitle>본 앱은 임상적 진단을 대체하지 않습니다.</WarningTitle>
            <p>
              pCNT에서 제공하는 평가 결과 및 인지 분석 데이터는 정보 제공 및 모니터링 목적으로만
              사용되어야 합니다. 이는 전문 의료진의 진단, 의학적 조언 또는 치료를 대신할 수 없습니다.
            </p>
            <p>
              의학적 우려가 있거나 전문적인 진단이 필요한 경우, 반드시 자격을 갖춘 의료 전문가나
              기관과 상담하십시오.
            </p>
          </CardBody>
        </MedicalCard>

        {/* 5. 문의하기 */}
        <Card className="full-width">
          <CardHeader>
            <CardIcon name="mail" />
            <CardTitleSm>문의하기</CardTitleSm>
          </CardHeader>
          <CardBodySm>
            <p>
              약관과 관련된 문의 사항이 있으시면
              <ContactLink href="mailto:support@pcnt.app">support@pcnt.app</ContactLink> 으로 연락
              주시기 바랍니다.
            </p>
          </CardBodySm>
        </Card>
      </ContentGrid>

      {/* 푸터 - 시안의 푸터 사용 */}
      <Footer>
        <FooterBrand>pCNT</FooterBrand>
        <FooterLinks>
          <FooterLink to="/info/privacy-policy">Privacy Policy</FooterLink>
          <FooterLink className="primary" to="/info/terms-of-service">Terms of Service</FooterLink>
          <FooterLink to="/info/research">Research</FooterLink>
          <FooterLink to="/info/support">Support</FooterLink>
        </FooterLinks>
        <FooterCopyright>© 2024 pCNT askato Lab. All rights reserved.</FooterCopyright>
      </Footer>
    </Container>
  );
}