import type { ReactNode } from "react";
import type { Metadata } from "next";
import Link from "next/link";
import { LandingPricingSection } from "@/components/landing-pricing-section";
import { LandingStorySections } from "@/components/landing-story-sections";
import { SiteFooter } from "@/components/site-footer";
import {
  getMailAuthUrlForCurrentRequest,
  getMailEntryUrlForCurrentRequest,
  getSessionUser,
} from "@/lib/auth";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";

const navItems = [
  { href: "#about", label: "서비스 소개" },
  { href: "#features", label: "무료 혜택" },
  { href: "#domain-connect", label: "도메인 연결" },
  { href: "#mail-flow", label: "운영 흐름" },
  { href: "#pricing", label: "요금제" },
];

const homeUrl = getPublicSiteAbsoluteUrl("/");

export const metadata: Metadata = {
  alternates: {
    canonical: homeUrl,
    languages: {
      "ko-KR": homeUrl,
      "x-default": homeUrl,
    },
  },
};

const heroPerks = [
  "대표 메일 1개 무료",
  "1분 만에 가입",
  "신용카드 등록 없음",
];

const featureRail = [
  {
    title: "대표 메일 1개 무료",
    description: "대표님을 위한\n메일 계정 1개 무료 제공",
    icon: "mail",
  },
  {
    title: "우리 도메인 그대로",
    description: "이미 보유한 도메인으로\n바로 사용 가능",
    icon: "domain",
  },
  {
    title: "간편한 설정",
    description: "복잡한 IT 지식 없이\n쉽고 빠르게 세팅",
    icon: "setup",
  },
  {
    title: "안정적인 보안",
    description: "스팸 차단, 보안 필터로\n안전하게 보호",
    icon: "shield",
  },
];

const whyItems = [
  {
    title: "비용 걱정 없이 시작",
    description: "사업 초기 고정비를 줄이고,\n필요한 곳에 더 집중하세요.",
    icon: "briefcase",
  },
  {
    title: "전문적인 비즈니스 이미지",
    description: "우리 도메인의 메일 주소로\n신뢰도를 높이세요.",
    icon: "rocket",
  },
  {
    title: "성장해도 유연하게",
    description: "필요할 때 언제든\n추가 계정 및 기능 확장 가능",
    icon: "badge",
  },
];

const stats = [
  { value: "0원", label: "대표 메일 1개 무료 시작" },
  { value: "3,900원", label: "성장 플랜 팀 인원 1명 월 요금" },
  { value: "3단계", label: "도메인 연결부터 발신 인증까지" },
  { value: "AI", label: "요약·답장 릴레이 자동화" },
];

const successStories = [
  {
    category: "온라인 스토어",
    title: "개인메일로 흩어지던 주문·제휴 문의를 공식 도메인 메일로 통합",
    description:
      "대표 메일을 먼저 열고, CS 담당자와 운영 담당자를 성장플랜 멤버로 확장해 고객 응대 경로를 한 곳으로 정리했습니다.",
    result: "문의 응대 경로 통합",
  },
  {
    category: "신규 법인",
    title: "홈페이지 오픈과 동시에 ceo@, contact@ 주소를 맞춰 브랜드 신뢰도 확보",
    description:
      "DNS 연결, SPF·DKIM 발신 인증, 대표 메일 세팅까지 한 흐름에서 완료해 거래처 첫 응대부터 공식 주소를 사용했습니다.",
    result: "도메인 기반 첫인상 정비",
  },
  {
    category: "소규모 팀",
    title: "대표가 모든 메일을 직접 보지 않아도 AI 요약과 릴레이로 핵심만 확인",
    description:
      "중요한 수신 메일은 AI 요약 후 보조 메일로 릴레이하고, 답장은 원 발신자에게 연결되도록 운영 부담을 줄였습니다.",
    result: "반복 확인 시간 절감",
  },
];

const customerReviews = [
  {
    role: "온라인 스토어 이*희 대표",
    quote:
      "처음엔 광고인 줄 알고 끊으려 했어요. 그런데 고객 문의를 아직 개인 메일로 받고 있다는 말에 바로 걸렸습니다.",
    point: "개인 메일에서 대표 메일로 전환",
  },
  {
    role: "신규 법인 김*우 대표",
    quote:
      "법인 만들고 명함까지 찍었는데 메일만 네이버 주소였습니다. 첫 거래처에 견적서를 보내야 해서 그날 바로 바꿨습니다.",
    point: "첫 거래처 응대 정리",
  },
  {
    role: "소규모 제작사 박*진 대표",
    quote:
      "촬영 중엔 메일함을 못 봅니다. 요약만 먼저 오니까 급한 견적 문의만 골라서 봅니다.",
    point: "현장 업무 중 메일 확인",
  },
  {
    role: "브랜드 쇼핑몰 최*아 대표",
    quote:
      "처음엔 저 혼자라 대표 메일 하나면 됐습니다. CS 담당자를 뽑고 나서도 기존 주소를 버리지 않고 멤버만 붙이면 돼서 정리가 쉬웠어요.",
    point: "CS 담당자 추가 운영",
  },
  {
    role: "마케팅 대행사 정*훈 대표",
    quote:
      "제안서 보낼 때 개인 사업자냐는 말을 몇 번 들었습니다. 주소 바꾼 뒤엔 그 설명부터 안 해도 됩니다.",
    point: "제안 단계 신뢰도 보완",
  },
  {
    role: "인테리어 스튜디오 한*정 대표",
    quote:
      "도면 찾느라 20분씩 버린 적이 있습니다. 제 개인 메일, 직원 메일, 카톡까지 섞여 있었거든요. 지금은 견적 문의 주소를 하나로 고정해두고 필요한 사람에게 전달합니다.",
    point: "도면·견적 메일 통합",
  },
  {
    role: "교육 서비스 윤*서 대표",
    quote:
      "아침마다 메일함부터 뒤졌습니다.",
    point: "수강 문의 우선순위 확인",
  },
  {
    role: "B2B 솔루션 강*민 대표",
    quote:
      "기업 담당자에게 보낸 메일이 스팸함으로 갔다고 하더라고요. 그때 SPF, DKIM 같은 걸 처음 제대로 신경 썼습니다. 설정 상태가 화면에 보여서 덜 답답했습니다.",
    point: "스팸함 이슈 대응",
  },
  {
    role: "콘텐츠 스튜디오 서*연 대표",
    quote:
      "인스타 DM이랑 개인 메일을 오가던 외주 문의를 contact 주소 하나로 모았습니다.",
    point: "외주 문의 접점 정리",
  },
  {
    role: "법률 사무소 문*호 대표",
    quote:
      "상담 일정 안내를 개인 메일로 보내는 게 늘 마음에 걸렸습니다. 사무소 도메인 주소로 바꾸니 고객에게 보내는 문장도 괜히 더 정돈해서 쓰게 됩니다.",
    point: "상담 안내 메일 정비",
  },
  {
    role: "병원 컨설팅 오*준 대표",
    quote:
      "큰 그룹웨어는 필요 없었습니다.",
    point: "작은 조직 기준 운영",
  },
  {
    role: "프랜차이즈 본사 노*현 대표",
    quote:
      "가맹 문의를 직원 개인 주소로 받다가 퇴사 후 기록 찾느라 고생했습니다. 지금은 본사 주소로 받고 담당자만 바꿉니다. 이게 맞는 구조였어요.",
    point: "담당자 변경 리스크 감소",
  },
  {
    role: "물류 스타트업 배*준 대표",
    quote:
      "운송 일정 변경 메일은 한 번 놓치면 바로 꼬입니다. 공식 주소로 모아두니 누가 봤는지 설명할 일이 줄었습니다.",
    point: "운송 일정 메일 정리",
  },
  {
    role: "패션 브랜드 민*경 대표",
    quote:
      "협찬 메일을 한 번 놓쳤습니다.",
    point: "협찬·CS 문의 분리",
  },
  {
    role: "개발 에이전시 신*재 대표",
    quote:
      "외주 개발 문의를 Gmail로 받았더니 계약 직전에 회사 메일이 없냐고 묻더라고요. 처음엔 별것 아닌 줄 알았는데, 상대 입장에서는 확인하고 싶은 포인트였던 것 같습니다.",
    point: "계약 전 신뢰 보완",
  },
  {
    role: "제조 스타트업 조*원 대표",
    quote:
      "발주서가 제 개인 메일로만 오던 게 문제였습니다. 제가 없으면 공장 쪽에서 내용을 못 봤거든요.",
    point: "발주서 공유 속도 개선",
  },
  {
    role: "뷰티샵 김*라 대표",
    quote:
      "예약은 카톡이면 충분하다고 생각했습니다. 그런데 브랜드 제휴 제안이 들어오면서부터는 메일이 필요하더라고요. 업체 응대용 주소를 따로 둔 뒤로 훨씬 깔끔합니다.",
    point: "예약 외 제휴 응대",
  },
  {
    role: "부동산 중개법인 이*석 대표",
    quote:
      "개인 메일 주소가 보이는 게 싫었습니다.",
    point: "매물 자료 발송 정리",
  },
  {
    role: "행사 기획사 장*은 대표",
    quote:
      "행사 견적 문의는 놓치면 끝입니다. 요약 알림 덕분에 이동 중에도 급한 건 바로 잡습니다.",
    point: "견적 문의 대응 속도",
  },
  {
    role: "회계 사무소 류*태 대표",
    quote:
      "세무 자료 요청을 개인 메일로 보내는 게 계속 걸렸습니다. 사무소 도메인 주소로 바꾸고 나니 고객에게 '이쪽으로 보내주세요'라고 말하기가 훨씬 자연스러워졌습니다.",
    point: "자료 요청 메일 공식화",
  },
  {
    role: "커머스 셀러 임*영 대표",
    quote:
      "나중에 해도 된다고 생각했는데 고객 문의가 늘자 개인 메일로는 바로 한계가 왔습니다.",
    point: "초기 사업자 메일 전환",
  },
  {
    role: "디자인 스튜디오 홍*빈 대표",
    quote:
      "포트폴리오는 신경 써서 만들었는데 정작 제안 메일 주소는 예전 개인 계정이었습니다. 주소 하나 바꿨을 뿐인데 스튜디오가 정리돼 보인다는 말을 들었습니다.",
    point: "제안서 첫인상 개선",
  },
  {
    role: "IT 컨설팅 백*수 대표",
    quote:
      "미팅 중엔 제목만 보고 판단하기 어렵습니다. 요약이 오면 지금 답할지 나중에 볼지 바로 갈립니다.",
    point: "미팅 중 중요도 판단",
  },
  {
    role: "식품 브랜드 유*나 대표",
    quote:
      "납품 문의와 고객 불만 메일이 섞이면 하루가 복잡해집니다. 주소를 나눠두니 직원에게 넘길 때 설명이 줄었습니다.",
    point: "납품·고객 문의 분리",
  },
  {
    role: "채용 대행사 송*현 대표",
    quote:
      "지원자 메일이 담당자 개인 계정에 남아 있으면 인수인계 때마다 일이 생깁니다. 회사 메일로 받으니 기록이 사라지지 않아서 좋습니다.",
    point: "채용 기록 인수인계",
  },
  {
    role: "건축 사무소 안*재 대표",
    quote:
      "현장 사진, 계약서, 문의 메일이 전부 흩어져 있었습니다. 대표 메일로 받고 담당자에게 넘기는 식으로 바꾸니 어디서 찾아야 할지부터 명확해졌습니다.",
    point: "현장·계약 자료 정리",
  },
  {
    role: "온라인 강의 박*영 대표",
    quote:
      "강의 오픈 날에는 같은 질문이 수십 개씩 옵니다. 전체 메일을 다 열지 않고 요약으로 먼저 흐름을 봅니다.",
    point: "강의 오픈 문의 파악",
  },
  {
    role: "렌탈 서비스 전*호 대표",
    quote:
      "휴일 AS 메일이 제일 힘들었습니다.",
    point: "AS 응대 채널 분리",
  },
  {
    role: "헬스케어 브랜드 권*지 대표",
    quote:
      "팀이 작아서 큰 시스템은 부담스러웠습니다. 대표 메일로 시작하고 운영자가 생겼을 때 계정을 붙이는 정도가 딱 맞았습니다. 처음부터 무겁게 갈 필요가 없었어요.",
    point: "작게 시작해 확장",
  },
  {
    role: "로컬 브랜드 심*호 대표",
    quote:
      "홈페이지 연락처가 개인 메일이면 아무래도 허전합니다. contact 주소 하나 만든 것만으로도 브랜드 기본이 잡힌 느낌이었습니다.",
    point: "홈페이지 연락처 정비",
  },
];

function JsonLd({ data }: { data: Record<string, unknown> }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

function buildHomeSchemas() {
  const businessEmailUrl = getPublicSiteAbsoluteUrl("/business-email");
  const domainEmailUrl = getPublicSiteAbsoluteUrl("/domain-email");
  const aiEmailSummaryUrl = getPublicSiteAbsoluteUrl("/ai-email-summary");

  return [
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      brand: "OfficialMail",
      name: "오피셜메일",
      alternateName: "OfficialMail",
      url: homeUrl,
    },
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      inLanguage: "ko-KR",
      name: "오피셜메일",
      alternateName: "OfficialMail",
      potentialAction: {
        "@type": "ReadAction",
        target: [businessEmailUrl, domainEmailUrl, aiEmailSummaryUrl],
      },
      url: homeUrl,
    },
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      applicationCategory: "BusinessApplication",
      description:
        "대표 메일 1개 무료 시작, 도메인 메일 연결, AI 메일 요약, 팀 메일함을 지원하는 업무용 메일 서비스입니다.",
      name: "오피셜메일",
      offers: {
        "@type": "Offer",
        description: "대표 메일 1개 무료 시작",
        price: "0",
        priceCurrency: "KRW",
      },
      operatingSystem: "Web",
      url: homeUrl,
    },
  ];
}

function IconBase({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      {children}
    </svg>
  );
}

function LogoMark() {
  return (
    <div className="flex items-center justify-center gap-2.5 text-center sm:gap-3">
      <span className="flex items-center justify-center text-[#2f6df6]">
        <IconBase className="h-[32px] w-[32px] sm:h-[40px] sm:w-[40px]">
          <rect x="3.5" y="5.5" width="17" height="13" rx="2.5" />
          <path d="m4.8 7 7.2 5.6L19.2 7" />
        </IconBase>
      </span>
      <span className="text-[22px] font-extrabold tracking-[-0.08em] text-[#2f6df6]">
        오피셜메일
      </span>
    </div>
  );
}

function CircleIcon({
  type,
  soft = false,
}: {
  type:
    | "mail"
    | "domain"
    | "setup"
    | "shield"
    | "briefcase"
    | "rocket"
    | "badge"
    | "check";
  soft?: boolean;
}) {
  const wrapperClass = soft
    ? "bg-[radial-gradient(circle_at_top,#f7fbff_0%,#e8f0ff_100%)] text-[#2f6df6]"
    : "bg-[#f3f7ff] text-[#2f6df6]";

  return (
    <div
      className={`flex h-14 w-14 items-center justify-center rounded-full border border-[#dce7ff] shadow-[0_10px_24px_rgba(47,109,246,0.08)] ${wrapperClass}`}
    >
      {type === "mail" ? (
        <IconBase className="h-6 w-6">
          <rect x="4.5" y="5.5" width="15" height="13" rx="2.2" />
          <path d="m5.4 7 6.6 5 6.6-5" />
        </IconBase>
      ) : null}
      {type === "domain" ? (
        <IconBase className="h-6 w-6">
          <circle cx="12" cy="12" r="4.8" />
          <path d="M4.5 12h15" />
          <path d="M12 4.5c2.2 2.4 3.3 4.9 3.3 7.5 0 2.6-1.1 5.1-3.3 7.5-2.2-2.4-3.3-4.9-3.3-7.5 0-2.6 1.1-5.1 3.3-7.5Z" />
        </IconBase>
      ) : null}
      {type === "setup" ? (
        <IconBase className="h-6 w-6">
          <path d="M12 4v4" />
          <path d="M12 16v4" />
          <path d="M4 12h4" />
          <path d="M16 12h4" />
          <circle cx="12" cy="12" r="3.6" />
        </IconBase>
      ) : null}
      {type === "shield" ? (
        <IconBase className="h-6 w-6">
          <path d="M12 3.8 18.5 6v5.8c0 3.8-2.6 6.6-6.5 8.4-3.9-1.8-6.5-4.6-6.5-8.4V6z" />
          <path d="m9.6 11.9 1.6 1.8 3.4-3.9" />
        </IconBase>
      ) : null}
      {type === "briefcase" ? (
        <IconBase className="h-6 w-6">
          <path d="M4 8.5h16v8.3a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 16.8z" />
          <path d="M8.5 8V6.5A1.5 1.5 0 0 1 10 5h4a1.5 1.5 0 0 1 1.5 1.5V8" />
          <path d="M4 11.2h16" />
        </IconBase>
      ) : null}
      {type === "rocket" ? (
        <IconBase className="h-6 w-6">
          <path d="M9.5 14.5c-2-3.6.2-7.8 6.1-9 1.2 5.8-.2 10.1-4 11.8" />
          <path d="m9.3 14.7-3.1 3.1" />
          <path d="m8 9.8-2.8.3.4-2.6 2.4-.8" />
          <path d="m14.3 16 1 2.4 2.6.4-.3-2.8" />
          <circle cx="13.9" cy="9.6" r="1" />
        </IconBase>
      ) : null}
      {type === "badge" ? (
        <IconBase className="h-6 w-6">
          <path d="M12 4.8 18 7v4.6c0 3-1.9 5.6-6 7.6-4.1-2-6-4.6-6-7.6V7z" />
          <path d="m9.9 12.1 1.5 1.6 2.9-3.2" />
        </IconBase>
      ) : null}
      {type === "check" ? (
        <IconBase className="h-7 w-7">
          <circle cx="12" cy="12" r="8.2" />
          <path d="m8.8 12.2 2.1 2.2 4.2-4.4" />
        </IconBase>
      ) : null}
    </div>
  );
}

function SparkArrow() {
  return (
    <svg
      viewBox="0 0 90 120"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="h-[102px] w-[76px] text-[#2f6df6]"
    >
      <path
        d="M44 6c10 10 13 20 11 32-2 12-9 18-15 24-8 8-10 18-3 31 6 10 2 19-8 25"
        stroke="currentColor"
        strokeWidth="3.2"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeDasharray="6 8"
      />
      <path d="m24 100 5 18 16-10" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function HeroPreview() {
  const menuItems = ["받은 메일함", "보낸 메일함", "임시 보관함", "휴지통", "스팸 메일함"];
  const messages = [
    ["고객 문의", "브랜드 협업 관련 미팅 일정...", "10:30"],
    ["파트너사 A", "제안서 공유드립니다", "어제"],
    ["세금계산서 전송", "6월 청구서 메일입니다", "어제"],
    ["디자인 외뢰 건", "디자인 제안 드립니다", "10:22"],
    ["마케팅 제안", "신규 파트너십 제안서", "10:22"],
  ];

  return (
    <div className="relative mx-auto flex h-[318px] w-full max-w-[390px] items-start justify-center overflow-visible sm:h-[430px] sm:max-w-none lg:h-[470px] xl:h-[540px] 2xl:h-[620px]">
      <div className="relative h-[540px] w-[660px] origin-top overflow-visible -translate-x-[12px] scale-[0.5] min-[390px]:-translate-x-[14px] min-[390px]:scale-[0.56] sm:translate-x-0 sm:scale-[0.72] lg:scale-[0.74] xl:scale-[0.9] 2xl:scale-[1]">
        <div className="absolute inset-x-[46px] top-[60px] h-[360px] rounded-[38px] bg-[radial-gradient(circle_at_top,#dce8ff_0%,rgba(220,232,255,0)_68%)] blur-2xl" />

        <div className="absolute left-[40px] top-[82px] w-[506px] rounded-[34px] border border-white/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(244,248,255,0.9))] shadow-[0_30px_80px_rgba(63,103,200,0.18)] backdrop-blur-xl">
          <div className="flex items-center gap-3 border-b border-[#edf2fc] px-5 py-4">
            <div className="flex items-center gap-2">
              <span className="h-2.5 w-2.5 rounded-full bg-[#f8c3c2]" />
              <span className="h-2.5 w-2.5 rounded-full bg-[#f5d687]" />
              <span className="h-2.5 w-2.5 rounded-full bg-[#b5ebc8]" />
            </div>
            <div className="flex h-10 flex-1 items-center gap-2 rounded-full border border-[#eef3ff] bg-white px-4 text-[12px] text-[#91a0ba]">
              <IconBase className="h-4 w-4">
                <circle cx="11" cy="11" r="5.4" />
                <path d="m19 19-3.6-3.6" />
              </IconBase>
              메일 검색
            </div>
          </div>

          <div className="grid grid-cols-[134px_minmax(0,1fr)]">
            <div className="border-r border-[#edf2fc] px-4 py-5">
              <div className="flex h-11 items-center justify-center rounded-[14px] bg-[#2f6df6] text-[13px] font-semibold text-white shadow-[0_12px_28px_rgba(47,109,246,0.24)]">
                메일 답변
              </div>
              <div className="mt-4 space-y-2">
                {menuItems.map((item, index) => (
                  <div
                    key={item}
                    className={`flex items-center gap-2 whitespace-nowrap rounded-[12px] px-3 py-2 text-[11px] ${
                      index === 0
                        ? "bg-[#edf3ff] font-semibold text-[#2f6df6]"
                        : "text-[#7d8aa6]"
                    }`}
                  >
                    <span className="h-3 w-3 rounded-full border border-current" />
                    {item}
                  </div>
                ))}
              </div>
            </div>

            <div className="px-5 py-5">
              <div className="grid grid-cols-[54px_1fr_48px] border-b border-[#eff3fb] pb-3 text-[11px] text-[#9aa7bf]">
                <span>이름</span>
                <span>제목</span>
                <span className="text-right">시간</span>
              </div>
              <div className="space-y-1.5 pt-3">
                {messages.map(([name, subject, time], index) => (
                  <div
                    key={`${name}-${time}`}
                    className="grid grid-cols-[54px_1fr_48px] items-center rounded-[12px] px-2 py-2 transition-colors hover:bg-[#f8fbff]"
                  >
                    <div className="flex items-center gap-2">
                      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-[#eef3ff] text-[11px] font-semibold text-[#2f6df6]">
                        {name.slice(0, 1)}
                      </span>
                    </div>
                    <div className="min-w-0">
                      <p className="truncate text-[12px] font-semibold text-[#10203f]">{name}</p>
                      <p className="truncate text-[11px] text-[#8695b2]">{subject}</p>
                    </div>
                    <span className="text-right text-[11px] text-[#9aa7bf]">{index === 1 ? "어제" : time}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="absolute right-[0] top-[130px] flex h-[350px] w-[266px] flex-col items-center rounded-[40px] border border-white/90 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(244,247,255,0.94))] px-7 py-10 shadow-[0_28px_80px_rgba(63,103,200,0.24)]">
          <div className="mt-1">
            <CircleIcon type="mail" />
          </div>
          <div className="mt-14 text-center">
            <p className="inline-block whitespace-nowrap text-[16px] font-semibold leading-[1.28] tracking-[-0.03em] text-[#10203f]">
              ceo@yourcompany.com
            </p>
            <p className="mt-3 text-[14px] text-[#9ba7be]">대표 메일 1개</p>
          </div>
          <p className="mt-11 text-[28px] font-semibold tracking-[-0.04em] text-[#2f6df6]">
            무료 사용 중
          </p>
          <div className="mt-6">
            <CircleIcon type="check" />
          </div>
        </div>

        <div className="absolute right-[-6px] top-[124px] flex h-[74px] w-[74px] items-center justify-center rounded-full bg-[#2f6df6] text-[25px] font-semibold tracking-[-0.04em] text-white shadow-[0_18px_44px_rgba(47,109,246,0.34)]">
          FREE
        </div>

        <div className="absolute right-[28px] top-[12px] flex flex-col items-center text-[#2f6df6]">
          <p className="rotate-[-8deg] text-right text-[24px] font-semibold leading-[1.16] tracking-[-0.04em]">
            복잡한 설정 없이
            <br />
            바로 사용!
          </p>
          <div className="mt-1 translate-x-3">
            <SparkArrow />
          </div>
        </div>
      </div>
    </div>
  );
}

function StatItem({ value, label }: { value: string; label: string }) {
  return (
    <div className="flex flex-col items-center gap-2 text-center">
      <p className="text-[36px] font-semibold tracking-[-0.06em] text-[#2f6df6] sm:text-[44px]">{value}</p>
      <p className="text-[15px] leading-6 text-[#5d6b86] sm:text-[17px]">{label}</p>
    </div>
  );
}

function ReviewCard({
  ariaHidden = false,
  point,
  quote,
  role,
}: {
  ariaHidden?: boolean;
  point: string;
  quote: string;
  role: string;
}) {
  return (
    <article
      aria-hidden={ariaHidden}
      className="w-[310px] shrink-0 rounded-[22px] border border-[#e1e9f8] bg-white/86 px-5 py-5 shadow-[0_18px_44px_rgba(47,109,246,0.09)] backdrop-blur-xl sm:w-[360px] sm:px-6 sm:py-6"
    >
      <div className="flex items-center justify-between gap-3">
        <div aria-label="별점 5점" className="flex text-[14px] tracking-[0.08em] text-[#2f6df6]">
          {"★★★★★"}
        </div>
      </div>
      <p className="mt-4 line-clamp-4 text-[15px] font-semibold leading-[1.55] tracking-[-0.035em] text-[#16213d] sm:text-[16px]">
        “{quote}”
      </p>
      <div className="mt-5 flex items-end justify-between gap-4">
        <p className="text-[13px] font-semibold text-[#2f6df6]">{role}</p>
        <p className="text-right text-[12px] leading-5 text-[#7a89a3]">{point}</p>
      </div>
    </article>
  );
}

function ReviewMarquee() {
  const rollingReviews = [...customerReviews, ...customerReviews];

  return (
    <div className="fade-up mt-10 sm:mt-12">
      <div className="review-marquee-mask -mx-4 overflow-hidden px-4 pb-[76px] pt-10 sm:-mx-8 sm:px-8 xl:-mx-10 xl:px-10">
        <div className="review-marquee-track flex w-max gap-4">
          {rollingReviews.map((review, index) => (
            <ReviewCard
              key={`${review.role}-${index}`}
              ariaHidden={index >= customerReviews.length}
              point={review.point}
              quote={review.quote}
              role={review.role}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

function PrimaryCta({
  href,
  children,
  size = "md",
}: {
  href: string;
  children: ReactNode;
  size?: "sm" | "md" | "lg";
}) {
  const sizeClass =
    size === "sm"
      ? "h-12 rounded-[14px] px-6 text-[16px]"
      : size === "lg"
        ? "h-[58px] rounded-[14px] px-8 text-[20px]"
        : "h-[54px] rounded-[14px] px-7 text-[18px]";

  const className = `om-btn-primary ${sizeClass}`;

  if (/^https?:\/\//.test(href)) {
    return <a href={href} className={className}>{children}</a>;
  }

  return (
    <Link href={href} className={className}>
      {children}
    </Link>
  );
}

export default async function Home() {
  const user = await getSessionUser();
  const mailEntryUrl = await getMailEntryUrlForCurrentRequest(user);
  const loginHref = user
    ? mailEntryUrl
    : await getMailAuthUrlForCurrentRequest("/login");
  const primaryHref = user
    ? mailEntryUrl
    : await getMailAuthUrlForCurrentRequest("/login");
  const loginLabel = user ? "메일 홈" : "로그인";
  const primaryLabel = user ? "메일 홈 열기" : "무료로 시작하기";
  const schemas = buildHomeSchemas();

  return (
    <div className="min-h-screen bg-[#fbfcff] text-[#101a34]" style={{ overflowX: "clip" }}>
      {schemas.map((schema) => (
        <JsonLd key={schema["@type"] as string} data={schema} />
      ))}
      <div className="pointer-events-none absolute inset-x-0 top-0 h-[960px] bg-[radial-gradient(circle_at_50%_12%,rgba(47,109,246,0.16),rgba(47,109,246,0)_42%),radial-gradient(circle_at_15%_15%,rgba(145,183,255,0.16),rgba(145,183,255,0)_28%),radial-gradient(circle_at_80%_28%,rgba(194,214,255,0.22),rgba(194,214,255,0)_24%)]" />

      <div className="relative z-50 bg-gradient-to-r from-[#2563eb] to-[#1d4ed8] px-3 py-2 text-center text-[11px] font-medium text-white sm:px-4 sm:text-sm">
        <div className="mx-auto flex max-w-[1420px] items-center justify-center gap-2">
          <span className="rounded-full bg-yellow-400 px-2 py-0.5 text-[10px] font-bold uppercase text-slate-900">
            NEW
          </span>
          <span className="leading-[1.3] sm:leading-normal">
            <span>대표 메일 1개 무료 · 성장 플랜은 팀 인원당 월 3,900원 · </span>
            <span className="block sm:inline">도메인 연결 후 바로 사용</span>
          </span>
          <a
            href="#pricing"
            className="ml-4 hidden items-center gap-1 font-bold underline transition-colors hover:text-yellow-300 md:inline-flex"
          >
            요금제 보기
          </a>
        </div>
      </div>

      <div className="sticky top-0 z-40 border-b border-black/5 bg-white/65 backdrop-blur-xl backdrop-saturate-150 shadow-sm">
        <header className="fade-up mx-auto flex h-[62px] w-full max-w-[1420px] items-center justify-between px-4 sm:h-20 sm:px-8 xl:px-10">
          <Link href="/" className="shrink-0">
            <LogoMark />
          </Link>

          <nav className="hidden items-center gap-8 text-[15px] font-medium text-[#5a6882] md:flex lg:gap-10 xl:text-[16px]">
            {navItems.map((item) => (
              <a key={item.href} href={item.href} className="transition-colors hover:text-[#2f6df6]">
                {item.label}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-2 sm:gap-3">
            {/^https?:\/\//.test(loginHref) ? (
              <a
                href={loginHref}
                className="om-btn-secondary hidden h-10 rounded-[12px] px-3.5 text-[13px] sm:inline-flex sm:h-11 sm:px-5 sm:text-base"
              >
                {loginLabel}
              </a>
            ) : (
              <Link
                href={loginHref}
                className="om-btn-secondary hidden h-10 rounded-[12px] px-3.5 text-[13px] sm:inline-flex sm:h-11 sm:px-5 sm:text-base"
              >
                {loginLabel}
              </Link>
            )}
            {/^https?:\/\//.test(primaryHref) ? (
              <a
                href={primaryHref}
                className="om-btn-primary h-10 rounded-[12px] px-3.5 text-[13px] sm:h-11 sm:px-5 sm:text-base"
              >
                <span className="sm:hidden">
                  {user ? primaryLabel : "시작하기"}
                </span>
                <span className="hidden sm:inline">{primaryLabel}</span>
              </a>
            ) : (
              <Link
                href={primaryHref}
                className="om-btn-primary h-10 rounded-[12px] px-3.5 text-[13px] sm:h-11 sm:px-5 sm:text-base"
              >
                <span className="sm:hidden">
                  {user ? primaryLabel : "시작하기"}
                </span>
                <span className="hidden sm:inline">{primaryLabel}</span>
              </Link>
            )}
          </div>
        </header>
      </div>

      <main className="relative z-10 mx-auto flex w-full max-w-[1420px] flex-col px-4 pb-20 pt-8 sm:px-8 sm:pb-24 sm:pt-10 xl:px-10">

        <section
          id="about"
          className="grid gap-10 pb-12 pt-8 sm:gap-12 sm:pb-16 sm:pt-10 lg:grid-cols-[minmax(0,580px)_minmax(0,1fr)] lg:items-center lg:gap-10 xl:grid-cols-[minmax(0,620px)_minmax(0,660px)] xl:gap-16 xl:pt-[68px] 2xl:grid-cols-[minmax(0,660px)_minmax(0,700px)]"
        >
          <div className="flex max-w-[660px] flex-col lg:max-w-[580px] xl:max-w-[620px] 2xl:max-w-[660px]">
            <p className="fade-up text-[20px] font-semibold tracking-[-0.04em] text-[#2f6df6] sm:text-[24px]">
              사업 시작하셨나요?
            </p>
            <h1
              className="fade-up mt-4 text-[28px] font-semibold leading-[1.16] tracking-[-0.06em] text-[#111a33] sm:mt-5 sm:text-[38px] lg:text-[46px]"
              style={{ animationDelay: "80ms" }}
            >
              대표님 혼자 운영하시는 동안
              <br />
              기업메일은 무료입니다.
            </h1>
            <p
              className="fade-up mt-6 text-[16px] leading-[1.72] text-[#4e5d79] sm:mt-8 sm:text-[19px]"
              style={{ animationDelay: "140ms" }}
            >
              도메인은 이미 샀는데 메일 때문에 매달 비용을 내고 있었다면,
              <br className="hidden sm:block" />
              오피셜메일이 대표 메일 하나를 가장 빠르게 열어드립니다.
            </p>

            <div
              className="fade-up mt-8 sm:mt-10"
              style={{ animationDelay: "180ms" }}
            >
              <PrimaryCta href={primaryHref} size="lg">
                {primaryLabel}
                <span aria-hidden className="text-white/95">→</span>
              </PrimaryCta>
            </div>

            <div
              className="fade-up mt-8 grid grid-cols-2 gap-x-4 gap-y-3 text-[14px] text-[#2f6df6] sm:mt-10 sm:flex sm:flex-wrap sm:gap-6 sm:text-[17px]"
              style={{ animationDelay: "220ms" }}
            >
              {heroPerks.map((perk) => (
                <div key={perk} className="flex items-center gap-3">
                  <span className="flex h-6 w-6 items-center justify-center rounded-full border border-[#d8e6ff] bg-white text-[#2f6df6]">
                    <IconBase className="h-3.5 w-3.5">
                      <path d="m6 12.4 3.1 3.2L18 7.8" />
                    </IconBase>
                  </span>
                  <span className="font-medium text-[#32508d]">{perk}</span>
                </div>
              ))}
            </div>
          </div>

          <div
            className="fade-up flex items-center justify-center lg:justify-end"
            style={{ animationDelay: "120ms" }}
          >
            <div className="w-full max-w-[420px] sm:max-w-[500px] xl:max-w-[660px] 2xl:max-w-[700px]">
              <HeroPreview />
            </div>
          </div>
        </section>

        <section
          id="features"
          className="fade-up rounded-[26px] border border-white/90 bg-white/88 p-4 shadow-[0_24px_70px_rgba(37,99,235,0.08)] backdrop-blur-xl sm:rounded-[30px] sm:p-6"
          style={{ animationDelay: "120ms" }}
        >
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {featureRail.map((feature) => (
              <div key={feature.title} className="flex items-start gap-4 rounded-[24px] px-3 py-3 sm:px-4 sm:py-4">
                <CircleIcon type={feature.icon as "mail" | "domain" | "setup" | "shield"} />
                <div className="pt-1">
                  <p className="text-[17px] font-semibold tracking-[-0.04em] text-[#1b2540] sm:text-[19px]">
                    {feature.title}
                  </p>
                  <p className="mt-2 whitespace-pre-line text-[14px] leading-[1.65] text-[#66748d] sm:mt-3 sm:text-[16px]">
                    {feature.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <LandingStorySections />

        <section id="why" className="pb-6 pt-[60px] text-center sm:pt-[72px]">
          <p className="fade-up text-[15px] font-semibold tracking-[0.16em] text-[#2f6df6]">
            WHY OFFICIAL MAIL
          </p>
          <h2
            className="fade-up mt-4 text-[28px] font-semibold tracking-[-0.06em] text-[#111a33] sm:mt-5 sm:text-[38px] lg:text-[46px]"
            style={{ animationDelay: "80ms" }}
          >
            왜 오피셜메일인가요?
          </h2>

          <div className="mt-10 grid gap-6 sm:mt-16 sm:grid-cols-2 lg:grid-cols-3">
            {whyItems.map((item, index) => (
              <div
                key={item.title}
                className={`fade-up px-4 py-6 sm:px-6 sm:py-8 ${index > 0 ? "lg:border-l lg:border-[#edf1fa]" : ""}`}
                style={{ animationDelay: `${120 + index * 80}ms` }}
              >
                <div className="mx-auto flex w-fit justify-center">
                  <CircleIcon type={item.icon as "briefcase" | "rocket" | "badge"} soft />
                </div>
                <p className="mt-6 text-[22px] font-semibold tracking-[-0.05em] text-[#16213d] sm:mt-8 sm:text-[27px]">
                  {item.title}
                </p>
                <p className="mt-4 whitespace-pre-line text-[15px] leading-[1.72] text-[#68758d] sm:mt-5 sm:text-[17px]">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </section>

        <section id="domain" className="pb-10 pt-[72px] text-center">
          <p className="fade-up text-[18px] text-[#5f6e88] sm:text-[20px]">
            대표 메일부터 팀 확장까지, 필요한 만큼만 운영하세요
          </p>

          <div className="mt-10 grid gap-6 sm:mt-14 sm:grid-cols-2 lg:grid-cols-4">
            {stats.map((item, index) => (
              <div
                key={item.label}
                className={`fade-up px-4 py-2 sm:px-6 sm:py-4 ${index > 0 ? "lg:border-l lg:border-[#edf1fa]" : ""}`}
                style={{ animationDelay: `${80 + index * 70}ms` }}
              >
                <StatItem value={item.value} label={item.label} />
              </div>
            ))}
          </div>
        </section>

        <section className="pb-10 pt-8 sm:pb-14 sm:pt-12">
          <div className="grid gap-8 border-t border-[#e9eef8] pt-9 sm:pt-12 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)] lg:gap-14">
            <div className="fade-up">
              <p className="text-[14px] font-semibold tracking-[-0.02em] text-[#2f6df6]">
                성공사례
              </p>
              <h2 className="mt-4 text-[28px] font-semibold leading-[1.15] tracking-[-0.06em] text-[#111a33] sm:text-[38px]">
                작은 팀이 먼저 정리하는{" "}
                <br className="hidden sm:block" />
                메일 운영 방식
              </h2>
              <p className="mt-5 text-[15px] leading-[1.72] text-[#64718c] sm:text-[17px]">
                오피셜메일은 거창한 그룹웨어보다 먼저 필요한 공식 주소, 팀 계정, AI 요약 릴레이를 빠르게 붙이는 방식에 집중합니다.
              </p>
            </div>

            <div className="divide-y divide-[#e9eef8] border-y border-[#e9eef8]">
              {successStories.map((story, index) => (
                <article
                  key={story.title}
                  className="fade-up grid gap-4 py-6 sm:gap-6 sm:py-7 lg:grid-cols-[116px_minmax(0,1fr)] 2xl:grid-cols-[126px_minmax(0,1fr)_150px]"
                  style={{ animationDelay: `${100 + index * 80}ms` }}
                >
                  <div>
                    <p className="text-[13px] font-semibold text-[#2f6df6] sm:text-[14px]">
                      {story.category}
                    </p>
                  </div>
                  <div className="min-w-0">
                    <h3 className="text-[19px] font-semibold leading-[1.35] tracking-[-0.04em] text-[#16213d] sm:text-[22px]">
                      {story.title}
                    </h3>
                    <p className="mt-3 text-[14px] leading-[1.75] text-[#65738e] sm:text-[16px]">
                      {story.description}
                    </p>
                  </div>
                  <div className="flex items-start lg:col-start-2 2xl:col-start-auto 2xl:justify-end">
                    <span className="text-[13px] font-semibold leading-6 text-[#2f6df6] 2xl:text-right">
                      {story.result}
                    </span>
                  </div>
                </article>
              ))}
            </div>
          </div>

          <ReviewMarquee />
        </section>

        <LandingPricingSection primaryHref={primaryHref} />

      </main>

      <SiteFooter className="border-t-0 bg-transparent pb-10 pt-2" />
    </div>
  );
}