import { CheckCircle2, Mail, Phone } from "lucide-react";

import InfoGrid from "@/components/common/InfoGrid";
import DemoForm from "@/components/demo/DemoForm";
import LeadForm from "@/components/forms/LeadForm";
import CTASection from "@/components/home/CTASection";
import LegalPage from "@/components/pages/LegalPage";
import { siteConfig } from "@/config/site.config";
import { getIndustries } from "@/data/industries.data";
import { getPageCopy } from "@/data/pages.data";
import { getPricingPlans } from "@/data/pricing.data";
import { getSolutions } from "@/data/solutions.data";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/locales";
import type { MarketingSlug } from "@/lib/routes";
import type { ProductSlug } from "@/lib/routes";
import { isLegalSlug } from "@/data/legal.data";

export default function MarketingPage({
  dictionary,
  locale,
  slug,
  productSlug,
}: {
  dictionary: Dictionary;
  locale: Locale;
  slug: MarketingSlug;
  productSlug?: ProductSlug;
}) {
  const { title } = getPageCopy(dictionary, slug);
 
  if (isLegalSlug(slug))
    return <LegalPage dictionary={dictionary} locale={locale} slug={slug} />;

  return (
    <>
      {slug === "solutions" ? (
        <CardGrid items={getSolutions(dictionary)} />
      ) : null}
      {slug === "industries" ? (
        <CardGrid items={getIndustries(dictionary)} />
      ) : null}
      {slug === "pricing" ? <PricingGrid dictionary={dictionary} /> : null}
      {slug === "contact" || slug === "demo" ? (
        <ContactSection
          dictionary={dictionary}
          locale={locale}
          mode={slug}
          productSlug={productSlug}
        />
      ) : null}
      {hasPoints(slug) ? (
        <InfoGrid items={dictionary.pagePoints[slug]} title={title} />
      ) : null}
      {slug !== "contact" && slug !== "demo" ? (
        <CTASection
          bookDemo={dictionary.common.bookDemo}
          description={dictionary.home.ctaDescription}
          locale={locale}
          talkSales={dictionary.common.talkSales}
          title={dictionary.home.ctaTitle}
        />
      ) : null}
    </>
  );
}

function hasPoints(
  slug: MarketingSlug,
): slug is Extract<MarketingSlug, keyof Dictionary["pagePoints"]> {
  return [
    "solutions",
    "industries",
    "resources",
    "privacy",
    "terms",
    "security",
  ].includes(slug);
}

function CardGrid({
  items,
}: {
  items: { title: string; description: string }[];
}) {
  
  return (
    <section className="mx-auto grid max-w-[1120px] gap-4 px-6 py-12 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((item) => (
        <article
          key={item.title}
          className="rounded-2xl border border-[#e5eaf4] bg-white p-5 shadow-[0_8px_22px_rgba(51,66,116,0.045)]"
        >
          <CheckCircle2 size={20} className="text-[#5f70ed]" />
          <h2 className="mt-3 text-[17px] font-extrabold text-[#253052]">
            {item.title}
          </h2>
          <p className="mt-2 text-[13px] leading-6 text-[#72809a]">
            {item.description}
          </p>
        </article>
      ))}
    </section>
  );
}

function PricingGrid({ dictionary }: { dictionary: Dictionary }) {
  const plans = getPricingPlans(dictionary);
  return (
    <section className="mx-auto grid max-w-[1120px] gap-4 px-6 py-12 lg:grid-cols-3">
      {plans.map((plan, index) => (
        <article
          key={plan.name}
          className={`rounded-2xl border bg-white p-6 shadow-[0_12px_30px_rgba(51,66,116,0.06)] ${index === 1 ? "border-[#8d91ff] ring-4 ring-[#eef0ff]" : "border-[#e5eaf4]"}`}
        >
          <h2 className="text-2xl font-extrabold tracking-[-0.04em] text-[#253052]">
            {plan.name}
          </h2>
          <p className="mt-3 min-h-[52px] text-[13px] leading-6 text-[#72809a]">
            {plan.description}
          </p>
          <div className="mt-5 space-y-3">
            {plan.features.map((feature) => (
              <p
                key={feature}
                className="flex gap-2 text-[13px] text-[#59657d]"
              >
                <CheckCircle2 size={16} className="shrink-0 text-[#5f70ed]" />
                {feature}
              </p>
            ))}
          </div>
        </article>
      ))}
    </section>
  );
}

function ContactSection({
  dictionary,
  locale,
  mode,
  productSlug,
}: {
  dictionary: Dictionary;
  locale: Locale;
  mode: "contact" | "demo";
  productSlug?: ProductSlug;
}) {
  const phone = "+919638373601";

  const email = siteConfig.email.trim();

  const gmailComposeUrl = `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(
    email,
  )}&su=${encodeURIComponent("PureSaaS Inquiry")}`;

  return (
    <section className="mx-auto grid max-w-[1120px] gap-6 px-6 py-12 lg:grid-cols-[0.75fr_1.25fr]">
      <div className="rounded-2xl bg-gradient-to-br from-[#5264ee] to-[#7756eb] p-6 text-white shadow-[0_16px_35px_rgba(91,87,231,0.2)]">
        <h2 className="text-2xl font-extrabold tracking-[-0.04em]">
          {dictionary.common.talkSales}
        </h2>
a
        <p className="mt-3 text-[13px] leading-6 text-[#e4e6ff]">
          {dictionary.pages.contact[2]}
        </p>

        <div className="mt-6 space-y-4 text-[13px] font-semibold">
          <a
            href={gmailComposeUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-3 transition hover:text-white/85"
          >
            <Mail size={17} />
            <span>{email}</span>
          </a>

          <a
            href={`tel:${phone}`}
            className="flex items-center gap-3 transition hover:text-white/85"
          >
            <Phone size={17} />
            <span>{siteConfig.phone}</span>
          </a>
        </div>
      </div>

      {mode === "demo" ? (
        <DemoForm locale={locale} productSlug={productSlug} />
      ) : (
        <LeadForm dictionary={dictionary} locale={locale} mode={mode} />
      )}
    </section>
  );
}