import type { Metadata } from "next";
import Link from "next/link";
import { PartnerInquiryForm } from "@/components/partner-inquiry-form";
import { PublicBlogHeader } from "@/components/public-blog-header";
import { SiteFooter } from "@/components/site-footer";
import { ServerStaticUiLocalizer } from "@/components/server-static-ui-localizer";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";
import { resolveRequestLocale } from "@/lib/i18n-server";
import { buildPublicPageMetadata, getPublicSeoCopy } from "@/lib/public-seo-i18n";

const pageUrl = getPublicSiteAbsoluteUrl("/partner");
const ogImageUrl = getPublicSiteAbsoluteUrl("/images/officialmail-og-20260923.png");

export async function generateMetadata(): Promise<Metadata> {
  return buildPublicPageMetadata({
    imageUrl: ogImageUrl,
    locale: await resolveRequestLocale(),
    page: "partner",
    pathname: "/partner",
  });
}

const partnershipAreas = [
  {
    number: "01",
    title: "고객 도입 연계",
    description: "기업 도메인 메일이 필요한 고객과 입주사에 오피셜메일을 소개하는 협업을 검토합니다.",
  },
  {
    number: "02",
    title: "콘텐츠·교육 협업",
    description: "창업팀의 기업메일 운영을 돕는 가이드, 교육, 공동 콘텐츠를 함께 기획합니다.",
  },
  {
    number: "03",
    title: "제품·기술 연동",
    description: "웹사이트, 도메인, 업무 도구와 자연스럽게 연결되는 제품·기술 협업을 논의합니다.",
  },
] as const;

const partnerTypes = [
  "공유오피스",
  "창업보육센터",
  "액셀러레이터",
  "도메인·호스팅",
  "웹빌더·커머스",
  "교육·커뮤니티",
] as const;

export default async function PartnerPage() {
  const locale = await resolveRequestLocale();
  const schema = {
    "@context": "https://schema.org",
    "@type": "ContactPage",
    name: "오피셜메일 제휴 문의",
    description: getPublicSeoCopy("partner", locale).description,
    inLanguage: locale,
    url: pageUrl,
    about: {
      "@type": "SoftwareApplication",
      name: "오피셜메일",
      applicationCategory: "BusinessApplication",
      operatingSystem: "Web",
      url: getPublicSiteAbsoluteUrl("/"),
    },
  };

  return (
    <ServerStaticUiLocalizer locale={locale}>
    <main className="min-h-screen overflow-x-clip bg-[#fbfcff] text-[#14213a]">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
      <PublicBlogHeader active="partner" />

      <section className="relative isolate overflow-hidden border-b border-[#e8eef8]">
        <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_82%_18%,rgba(47,109,246,0.17),transparent_31%),radial-gradient(circle_at_16%_76%,rgba(93,146,255,0.11),transparent_31%),linear-gradient(180deg,#f8faff_0%,#ffffff_100%)]" />
        <div className="om-partner-hero-grid mx-auto grid w-full max-w-[1420px] gap-12 px-4 py-16 sm:px-8 sm:py-24 lg:items-end xl:px-10 xl:py-28">
          <div>
            <p className="text-[13px] font-semibold tracking-[0.14em] text-[#2f6df6]">OFFICIALMAIL PARTNERSHIP</p>
            <h1 className="mt-5 max-w-[850px] text-balance text-[36px] font-semibold leading-[1.14] tracking-[-0.07em] text-[#111a33] sm:text-[52px] lg:text-[60px]">
              더 나은 기업메일 경험을
              <br className="hidden sm:block" /> 함께 만들어갑니다.
            </h1>
            <p className="mt-7 max-w-[780px] text-[17px] leading-8 text-[#53637d] sm:text-[20px] sm:leading-9">
              1인 창업자와 스타트업을 위한 AI 기반 기업 도메인 메일 솔루션,
              <strong className="font-semibold text-[#17243c]"> 오피셜메일(OfficialMail)</strong>입니다.
              도메인, 웹사이트, 창업 지원, 교육, 커뮤니티 분야의 기업·기관과 다양한 협업 가능성을 열어두고 있습니다.
            </p>
            <div className="mt-9 flex flex-wrap gap-3">
              <a href="#inquiry" className="inline-flex h-12 items-center rounded-[12px] bg-[#2f6df6] px-6 text-[14px] font-semibold text-white transition hover:bg-[#245ddd]">제휴 문의하기</a>
              <Link href="/business-email" className="inline-flex h-12 items-center rounded-[12px] border border-[#cfdcf1] bg-white/75 px-6 text-[14px] font-semibold text-[#40516e] transition hover:border-[#a9c3f7] hover:text-[#2f6df6]">서비스 먼저 보기</Link>
            </div>
          </div>

          <div className="border-l-2 border-[#2f6df6] pl-6 sm:pl-8">
            <p className="text-[12px] font-semibold tracking-[0.1em] text-[#7587a5]">PARTNER OUTCOME</p>
            <p className="mt-3 text-[26px] font-semibold leading-[1.3] tracking-[-0.05em] text-[#182742] sm:text-[30px]">각자의 강점을 연결해,<br />고객 경험을 넓힙니다.</p>
            <p className="mt-4 text-[14px] leading-7 text-[#697a96]">협업 목적과 대상에 맞춰 필요한 운영 범위를 함께 정리합니다.</p>
          </div>
        </div>
      </section>

      <section className="mx-auto w-full max-w-[1420px] px-4 py-16 sm:px-8 sm:py-20 xl:px-10">
        <div className="grid border-y border-[#dce5f2] lg:grid-cols-3">
          {partnershipAreas.map((area, index) => (
            <article key={area.number} className={`py-8 lg:px-8 lg:py-10 ${index > 0 ? "border-t border-[#dce5f2] lg:border-l lg:border-t-0" : ""}`}>
              <p className="text-[12px] font-semibold text-[#2f6df6]">{area.number}</p>
              <h2 className="mt-5 text-[22px] font-semibold tracking-[-0.05em] text-[#182641]">{area.title}</h2>
              <p className="mt-3 text-[14px] leading-7 text-[#697a94]">{area.description}</p>
            </article>
          ))}
        </div>

        <div className="mt-20 grid gap-10 lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.18fr)] lg:items-start lg:gap-20">
          <div className="lg:sticky lg:top-28">
            <p className="text-[13px] font-semibold text-[#2f6df6]">제휴 진행 방식</p>
            <h2 className="mt-4 text-[32px] font-semibold leading-[1.2] tracking-[-0.06em] text-[#17243d] sm:text-[40px]">목적과 범위를 확인하고<br />함께 설계합니다.</h2>
            <p className="mt-5 max-w-[500px] text-[15px] leading-7 text-[#657690]">기관과 서비스의 특성, 지원 대상, 희망 일정을 확인한 뒤 적합한 협업 방식을 개별적으로 논의합니다.</p>
            <div className="mt-8 flex flex-wrap gap-2">
              {partnerTypes.map((type) => <span key={type} className="border-b border-[#b9cdf5] px-1 py-1 text-[13px] font-medium text-[#536989]">{type}</span>)}
            </div>
          </div>

          <ol className="border-t border-[#dce5f2]">
            {[
              ["문의 접수", "기관과 서비스 소개, 협업 목적, 지원 대상, 희망 일정을 전달해주세요."],
              ["협업 적합성 검토", "제안 내용을 바탕으로 상호 강점과 고객에게 제공할 수 있는 가치를 확인합니다."],
              ["운영 범위 협의", "역할, 일정, 안내 방식, 기술 연동 여부 등 필요한 사항을 개별적으로 협의합니다."],
              ["진행 및 점검", "합의한 범위에 따라 협업을 진행하고 운영 결과를 함께 점검합니다."],
            ].map(([title, description], index) => (
              <li key={title} className="grid grid-cols-[46px_1fr] gap-4 border-b border-[#dce5f2] py-7 sm:grid-cols-[70px_1fr] sm:gap-6">
                <span className="pt-1 text-[12px] font-semibold text-[#93a3ba]">0{index + 1}</span>
                <div>
                  <h3 className="text-[20px] font-semibold tracking-[-0.045em] text-[#1b2943]">{title}</h3>
                  <p className="mt-2 text-[14px] leading-7 text-[#6a7b95]">{description}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section id="inquiry" className="border-y border-[#e2eaf6] bg-white">
        <div className="mx-auto grid w-full max-w-[1420px] gap-12 px-4 py-16 sm:px-8 sm:py-20 lg:grid-cols-[380px_minmax(0,1fr)] lg:gap-20 xl:px-10">
          <div>
            <p className="text-[13px] font-semibold text-[#2f6df6]">PARTNERSHIP INQUIRY</p>
            <h2 className="mt-4 text-[32px] font-semibold leading-[1.2] tracking-[-0.06em] text-[#17243d] sm:text-[40px]">기관에 맞는 제휴안을<br />함께 설계합니다.</h2>
            <p className="mt-5 text-[14px] leading-7 text-[#687995]">지원 대상과 운영 프로그램을 알려주시면 협업 가능 여부와 다음 논의 사항을 정리해 회신드립니다.</p>
            <dl className="mt-8 border-t border-[#e0e8f4] text-[13px]">
              <div className="flex justify-between gap-4 border-b border-[#e0e8f4] py-4"><dt className="text-[#7c8ca5]">검토 범위</dt><dd className="text-right font-semibold text-[#283a59]">도입·콘텐츠·교육·기술 연동</dd></div>
              <div className="flex justify-between gap-4 border-b border-[#e0e8f4] py-4"><dt className="text-[#7c8ca5]">세부 조건</dt><dd className="text-right font-semibold text-[#283a59]">문의 접수 후 개별 협의</dd></div>
              <div className="flex justify-between gap-4 border-b border-[#e0e8f4] py-4"><dt className="text-[#7c8ca5]">문의</dt><dd className="text-right font-semibold text-[#283a59]">sanghyun@officialsite.kr</dd></div>
            </dl>
            <p className="mt-4 text-[11px] leading-5 text-[#8695aa]">세부 제휴 조건과 지원 범위는 제안 내용을 검토한 후 개별적으로 안내합니다.</p>
          </div>
          <PartnerInquiryForm />
        </div>
      </section>

      <SiteFooter className="pt-12" />
    </main>
    </ServerStaticUiLocalizer>
  );
}