import type { Metadata } from "next";
import localFont from "next/font/local";
import Script from "next/script";
import "quill/dist/quill.snow.css";
import { MarketingFunnelTracker } from "@/components/marketing-funnel-tracker";
import { getPublicSiteUrl } from "@/lib/mail-urls";
import "./globals.css";

const ogImage = {
  url: "/images/officialmail-og.png",
  width: 1200,
  height: 630,
  alt: "오피셜메일 - 무료로 시작하는 기업메일",
};

const pretendard = localFont({
  src: "./fonts/PretendardVariable.woff2",
  variable: "--font-pretendard",
  weight: "45 920",
  style: "normal",
  display: "swap",
});

export const metadata: Metadata = {
  metadataBase: new URL(getPublicSiteUrl()),
  title: "오피셜메일 - 무료로 시작하는 기업메일",
  description:
    "혼자 시작하는 사업자와 작은 팀을 위한 무료 기업메일 서비스. 도메인 메일, AI 메일 요약, 팀 메일함, 보안 메일 운영을 한곳에서 시작하세요.",
  keywords: [
    "오피셜메일",
    "기업메일",
    "회사메일",
    "도메인 메일",
    "무료 기업메일",
    "AI 메일 요약",
    "팀 메일함",
    "업무용 이메일",
  ],
  openGraph: {
    title: "오피셜메일 - 무료로 시작하는 기업메일",
    description:
      "대표 메일 1개 무료 시작, 도메인 메일 연결, AI 메일 요약, 팀 확장을 지원하는 업무용 메일 서비스입니다.",
    url: "/",
    images: [ogImage],
    siteName: "오피셜메일",
    locale: "ko_KR",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "오피셜메일 - 무료로 시작하는 기업메일",
    description:
      "작은 회사도 공식 도메인 메일을 빠르게 만들고 AI 요약으로 업무 메일을 더 빠르게 처리합니다.",
    images: [ogImage.url],
  },
  robots: {
    index: true,
    follow: true,
  },
  manifest: "/manifest.webmanifest",
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any", type: "image/x-icon" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/officialmail-icon.svg", type: "image/svg+xml" },
      { url: "/icon-192.png", sizes: "192x192", type: "image/png" },
      { url: "/icon-512.png", sizes: "512x512", type: "image/png" },
    ],
    shortcut: [{ url: "/favicon.ico", type: "image/x-icon" }],
    apple: [
      { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
    ],
  },
  verification: {
    google: "ywn7GZ9U_ZXU-PqkPynXf_0BngEzlZTBPsQRn9NL4d4",
    other: {
      "naver-site-verification": "2f15a2c2af13d3a4b3d6fc5814a2b9f41a4d3e6d",
    },
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko" className={`${pretendard.variable} h-full antialiased`}>
      <body className="min-h-full flex flex-col">
        <MarketingFunnelTracker />
        {children}
      </body>
      <Script id="channel-io" strategy="afterInteractive">
        {`
          (function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var ch=function(){ch.c(arguments);};ch.q=[];ch.c=function(args){ch.q.push(args);};w.ChannelIO=ch;function l(){if(w.ChannelIOInitialized){return;}w.ChannelIOInitialized=true;var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src="https://cdn.channel.io/plugin/ch-plugin-web.js";var x=document.getElementsByTagName("script")[0];if(x.parentNode){x.parentNode.insertBefore(s,x);}}if(document.readyState==="complete"){l();}else{w.addEventListener("DOMContentLoaded",l);w.addEventListener("load",l);}})();

          ChannelIO('boot', {
            "pluginKey": "cb5acf2e-e3d0-4b39-bcbf-5acf81992063"
          });
        `}
      </Script>
    </html>
  );
}
