/**
 * 인트로 페이지 — intro.html 기반
 * 요청사항-003: pCNT 인트로 페이지
 * 수정사항-036: 하단 메뉴 고정, 전체 폭, 한 줄 표시
 * 수정사항-036-2: pCNT 텍스트 제거, 공개 Info 페이지 링크
 */
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/auth';
import styled, { keyframes } from 'styled-components';

const fadeInUp = keyframes`
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
`;

const Page = styled.div`
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
`;

// Fixed Background
const Background = styled.div`
  position: fixed;
  inset: 0;
  z-index: 0;
`;

const BackgroundImage = styled.div`
  position: absolute;
  inset: 0;
  background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAkEZbA4UrGfVTUhssj2UXpOV3-jSku0-scgVwobpRQq1pnNKWPFB6ILVUg7HrYAjtfPweGbEJpsX_Nuq6ctonYvTsYkOneS0-TJAeMijvQVDkTjsfa60llBPGo-Sakf6SWzEhbU9f3eoKM8C43IdggtvrJBPAzuqEdfODxluBRcy49ZnQ9dQkINLtnzUTn0O8aQWCw1FQAmt6RL6EIIEIVukZVf0zOMpvR1h4_q3BSKSKfeL');
  background-size: cover;
  background-position: center;
`;

const BackgroundOverlay = styled.div`
  position: absolute;
  inset: 0;
  background: rgba(45, 49, 51, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
`;

// Main Content
const Main = styled.main`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  padding-bottom: 100px;
  position: relative;
  z-index: 10;
`;

const Content = styled.div`
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
`;

const IconWrapper = styled.div`
  margin-bottom: 24px;
  animation: ${fadeInUp} 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
`;

const LogoCircle = styled.div`
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(188, 201, 198, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
`;

const LogoIcon = styled.img`
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0) invert(1);
`;

const Title = styled.h1`
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  animation: ${fadeInUp} 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 100ms;
  opacity: 0;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
`;

const Subtitle = styled.p`
  font-size: 17px;
  line-height: 1.5;
  color: #e6e8ea;
  margin-bottom: 48px;
  animation: ${fadeInUp} 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 200ms;
  opacity: 0;
  max-width: 320px;
  letter-spacing: 0;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
`;

const CTAContainer = styled.div`
  animation: ${fadeInUp} 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 300ms;
  opacity: 0;
  width: 100%;

  @media (min-width: 768px) {
    width: auto;
  }
`;

const StartButton = styled.button`
  width: 100%;
  height: 56px;
  padding: 0 32px;
  border-radius: 9999px;
  background: #00685f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.15s;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;

  &:hover {
    background: #006a61;
  }

  &:active {
    transform: scale(0.98);
  }

  @media (min-width: 768px) {
    width: auto;
  }
`;

const ArrowIcon = styled.span`
  font-size: 18px;
  transition: transform 0.3s;

  ${StartButton}:hover & {
    transform: translateX(4px);
  }
`;

// Footer — 브라우저 하단 고정, 전체 폭, 중앙정렬
const Footer = styled.footer`
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(247, 249, 251, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(188, 201, 198, 0.2);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
`;

const FooterLinks = styled.div`
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px 12px;
  overflow: hidden;
`;

const FooterLink = styled.a`
  font-size: 11px;
  color: #e6e8ea;
  text-decoration: underline;
  transition: color 0.15s;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  white-space: nowrap;

  &:hover {
    color: #89f5e7;
  }
`;

const FooterCopyright = styled.div`
  font-size: 11px;
  color: #e6e8ea;
  opacity: 0.7;
  text-align: center;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  white-space: nowrap;
`;

// 재사용 가능한 Footer 컴포넌트 (IntroLayout에서 사용)
export const IntroFooter = () => (
  <Footer>
    <FooterLinks>
      <FooterLink href="/privacy-policy">Privacy Policy</FooterLink>
      <FooterLink href="/terms-of-service">Terms of Service</FooterLink>
      <FooterLink href="/research">Research</FooterLink>
      <FooterLink href="/support">Support</FooterLink>
    </FooterLinks>
    <FooterCopyright>© 2026 askato Lab.</FooterCopyright>
  </Footer>
);

export default function Intro() {
  const navigate = useNavigate();
  const accessToken = useAuthStore((s) => s.accessToken);

  useEffect(() => {
    if (accessToken) {
      navigate('/home', { replace: true });
    }
  }, [accessToken, navigate]);

  const handleStart = () => {
    navigate('/signin');
  };

  return (
    <Page>
      <Background>
        <BackgroundImage />
        <BackgroundOverlay />
      </Background>

      <Main>
        <Content>
          <IconWrapper>
            <LogoCircle>
              <LogoIcon
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfraM3f3OO2_-iPaWVePcZ433BqVYhEWoa-Zkx7G9aaq3-2qc3UDOBn9vzioMsj2AQJTaeK6qApDBhsI6561o_FSbliOYUBby9icUEzwscSwFdx2rCzZYZFF4I_HNnnVbl87d-PFmCVC09PKOxcE_6WNTEKPhgnuu1o8cm9GJ72MCEaZNO6gAgrXtP1AnyS1JoCGmvOK4SbF315mXqZ_CMw1_zCn8FdvVQDAIcpoqRJ-QFEH3kJcxCs6pmdZlOu57Q8Q"
                alt="Askato Logo"
              />
            </LogoCircle>
          </IconWrapper>

          <Title>pCNT</Title>

          <Subtitle>
            personal Computerized NeuroCognitive Function Test
          </Subtitle>

          <CTAContainer>
            <StartButton onClick={handleStart}>
              <span>Get START</span>
              <ArrowIcon className="material-symbols-outlined">arrow_forward</ArrowIcon>
            </StartButton>
          </CTAContainer>
        </Content>
      </Main>

      <IntroFooter />
    </Page>
  );
}