export default function YourTarotMainPage() {
  const socialIcons = [
    { label: '링크 복사', src: '/assets/Switch container.png', alt: 'copy link' },
    { label: '카카오톡', src: '/assets/Button container.png', alt: 'kakao talk' },
    { label: '페이스북', src: '/assets/Switch container-1.png', alt: 'facebook' },
    { label: 'X', src: '/assets/Container.png', alt: 'x' },
  ];

  const footerLinks = [
    '이용약관',
    '개인정보처리방침',
    '면책조항',
    '제휴문의',
  ];

  return (
    <div className="min-h-screen bg-[#17193a] text-white">
      <header className="sticky top-0 z-20 border-b border-white/5 bg-[#141634]/95 backdrop-blur">
        <div className="mx-auto flex h-[70px] w-full max-w-[680px] items-center justify-between px-5">
          <button
            type="button"
            aria-label="메뉴 열기"
            className="flex h-[44px] w-[44px] items-center justify-center rounded-full transition hover:bg-white/5"
          >
            <img src="/assets/Text input container-1.png" alt="menu" className="h-[28px] w-[28px]" />
          </button>

          <img
            src="/assets/Vertical container.png"
            alt="YourTarot logo"
            className="h-[50px] w-[50px] object-contain opacity-90"
          />

          <button
            type="button"
            aria-label="프로필"
            className="flex h-[44px] w-[44px] items-center justify-center rounded-full transition hover:bg-white/5"
          >
            <img
              src="/assets/Text input container.png"
              alt="profile"
              className="h-[40px] w-[40px] rounded-full object-cover"
            />
          </button>
        </div>
      </header>

      <main>
        <section className="mx-auto max-w-[680px] px-8 pb-16 pt-16 text-center sm:px-10">
          <h1 className="mx-auto max-w-[520px] text-[34px] font-extrabold leading-[1.35] tracking-[-0.04em] sm:text-[56px]">
            오늘 당신의 마음은
            <br />
            어떤 별을 품고 있나요?
          </h1>

          <p className="mx-auto mt-8 max-w-[560px] text-[19px] font-light leading-[1.7] text-white/80 sm:text-[31px]">
            카드가 전하는 오늘의 감정 흐름과 행동 힌트를 1분 안에
            <br className="hidden sm:block" />
            확인해 보세요.
          </p>

          <div className="mt-14 flex justify-center sm:mt-16">
            <img
              src="/assets/Text input.png"
              alt="crystal ball"
              className="w-[260px] max-w-full drop-shadow-[0_18px_30px_rgba(0,0,0,0.35)] sm:w-[430px]"
            />
          </div>

          <button
            type="button"
            className="mt-10 w-full rounded-[18px] bg-[#7027c9] px-6 py-6 text-[24px] font-semibold tracking-[-0.03em] transition hover:brightness-110 sm:mt-12 sm:rounded-[20px] sm:py-8 sm:text-[52px]"
          >
            오늘의 운세 보러 가기
          </button>

          <p className="mt-8 text-[16px] text-white/72 sm:mt-10 sm:text-[28px]">
            지금까지 123명이 테스트했어요.
          </p>
        </section>

        <section className="bg-[#131533] py-16 sm:py-24">
          <div className="mx-auto max-w-[680px] px-8 text-center sm:px-10">
            <h2 className="text-[30px] font-light tracking-[-0.04em] sm:text-[56px]">친구에게 공유하기</h2>

            <div className="mt-10 flex items-center justify-center gap-5 sm:mt-14 sm:gap-8">
              {socialIcons.map((item) => (
                <button
                  key={item.label}
                  type="button"
                  aria-label={item.label}
                  className="rounded-full transition hover:scale-105"
                >
                  <img
                    src={item.src}
                    alt={item.alt}
                    className="h-[64px] w-[64px] object-contain sm:h-[84px] sm:w-[84px]"
                  />
                </button>
              ))}
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-[#131533] pb-10 pt-10 text-center sm:pb-14">
        <div className="mx-auto max-w-[680px] px-8 sm:px-10">
          <img
            src="/assets/Vertical container.png"
            alt="footer logo"
            className="mx-auto h-[48px] w-[48px] object-contain opacity-90 sm:h-[60px] sm:w-[60px]"
          />

          <div className="mt-8 border-t border-b border-white/30 py-6 sm:mt-10 sm:py-8">
            <nav className="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 text-[15px] text-white/90 sm:text-[22px]">
              {footerLinks.map((link, index) => (
                <div key={link} className="flex items-center gap-3">
                  <a href="#" className="transition hover:text-white">
                    {link}
                  </a>
                  {index < footerLinks.length - 1 && <span className="text-white/45">|</span>}
                </div>
              ))}
            </nav>
          </div>

          <div className="mt-8 space-y-3 text-left text-[13px] leading-[1.7] text-white/38 sm:mt-10 sm:text-[18px]">
            <p>ASOG Co., Ltd. | CEO: Jungyoungchheol</p>
            <p>Address:</p>
            <p>Hancheon-Ro, Gangbuk-Gu, Seoul, Republic Of Korea</p>
            <p>Business Registration Number: 370-54-00601</p>
            <p>Mail-Order Business Registration Number:</p>
            <p>2021-Seoul-Seodaemun-0013</p>
            <p>Copyright © YourTarot Co., Ltd. All Rights Reserved.</p>
          </div>

          <div className="mt-10 flex items-center justify-center gap-3 sm:mt-12 sm:gap-4">
            <a href="#" aria-label="Instagram" className="transition hover:scale-105">
              <img src="/assets/instagram.png" alt="instagram" className="h-[50px] w-[50px] sm:h-[64px] sm:w-[64px]" />
            </a>
            <a href="#" aria-label="KakaoTalk" className="transition hover:scale-105">
              <img src="/assets/Image.png" alt="kakao talk" className="h-[50px] w-[50px] rounded-[12px] sm:h-[64px] sm:w-[64px]" />
            </a>
          </div>

          <div className="mt-12 border-t border-white/5" />
        </div>
      </footer>
    </div>
  );
}