import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import type { Metadata } from "next";
import dynamic from "next/dynamic";
import IndustryJsonLd from "@/components/IndustryJsonLd";

// Static imports (above-the-fold, critical path)
import HealthcareHero from "./components/HealthcareHero";
import BookingMethodsSection from "./components/BookingMethodsSection";

// Dynamic imports (below-the-fold, lazy loaded for better performance)
const WhatsAppAgentSection = dynamic(
  () => import("./components/WhatsAppAgentSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const VoiceAgentSection = dynamic(
  () => import("./components/VoiceAgentSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const PatientDataSection = dynamic(
  () => import("./components/PatientDataSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const HealthcareFAQ = dynamic(() => import("./components/HealthcareFAQ"), {
  loading: () => <SectionSkeleton />,
});
const PackagesSection = dynamic(() => import("./components/PackagesSection"), {
  loading: () => <SectionSkeleton />,
});
const RemindersSection = dynamic(
  () => import("./components/RemindersSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const SecuritySection = dynamic(() => import("./components/SecuritySection"), {
  loading: () => <SectionSkeleton />,
});
const IntegrationsSection = dynamic(
  () => import("./components/IntegrationsSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const AnalyticsSection = dynamic(
  () => import("./components/AnalyticsSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const AdminFeaturesSection = dynamic(
  () => import("./components/AdminFeaturesSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const GetStartedSection = dynamic(
  () => import("./components/GetStartedSection"),
  {
    loading: () => <SectionSkeleton />,
  },
);
const HealthcareCTA = dynamic(() => import("./components/HealthcareCTA"), {
  loading: () => <SectionSkeleton />,
});
const TrustSection = dynamic(() => import("./components/TrustSection"), {
  loading: () => <SectionSkeleton />,
});

// Loading skeleton component
function SectionSkeleton() {
  return (
    <div className="py-16 animate-pulse">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="h-8 bg-slate-200 dark:bg-slate-700 rounded-lg w-1/3 mx-auto mb-4" />
        <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-2/3 mx-auto mb-12" />
        <div className="grid md:grid-cols-3 gap-6">
          {[1, 2, 3].map((i) => (
            <div
              key={i}
              className="h-48 bg-slate-200 dark:bg-slate-700 rounded-2xl"
            />
          ))}
        </div>
      </div>
    </div>
  );
}

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.healthcareTitle} | ${SITE.brand}`,
    description: t.healthcareHeroSubline,
    openGraph: {
      title: `${t.healthcareTitle} | ${SITE.brand}`,
      description: t.healthcareHeroSubline,
      type: "website",
    },
  };
}

export default function HealthcarePage({ params }: { params: { lang: Lang } }) {
  const dir = UI[params.lang].dir;
  const t = UI[params.lang].t;

  const faqs = [
    { question: t.healthcareFAQQ1, answer: t.healthcareFAQA1 },
    { question: t.healthcareFAQQ2, answer: t.healthcareFAQA2 },
    { question: t.healthcareFAQQ3, answer: t.healthcareFAQA3 },
    { question: t.healthcareFAQQ4, answer: t.healthcareFAQA4 },
    { question: t.healthcareFAQQ5, answer: t.healthcareFAQA5 },
  ];

  return (
    <main
      className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800"
      dir={dir}
    >
      {/* Hero Section - Static import for fast LCP */}
      <HealthcareHero lang={params.lang} />

      {/* Booking Methods - Static import (above fold) */}
      <BookingMethodsSection lang={params.lang} />

      {/* WhatsApp Agent Section */}
      <WhatsAppAgentSection lang={params.lang} />

      {/* Voice Agent Section */}
      <VoiceAgentSection lang={params.lang} />

      {/* Patient Data & Doctor Tools */}
      <PatientDataSection lang={params.lang} />

      {/* FAQ Section */}
      <HealthcareFAQ lang={params.lang} />

      {/* Trust Section - Testimonials, Partners, Certifications */}
      <TrustSection lang={params.lang} />

      {/* Packages & Offers */}
      <PackagesSection lang={params.lang} />

      {/* Reminders & Follow-ups */}
      <RemindersSection lang={params.lang} />

      {/* Security & Privacy */}
      <SecuritySection lang={params.lang} />

      {/* Integrations */}
      <IntegrationsSection lang={params.lang} />

      {/* Analytics Dashboard */}
      <AnalyticsSection lang={params.lang} />

      {/* Admin Features */}
      <AdminFeaturesSection lang={params.lang} />

      {/* Get Started Steps */}
      <GetStartedSection lang={params.lang} />

      {/* Final CTA */}
      <HealthcareCTA lang={params.lang} />

      {/* Structured Data */}
      <IndustryJsonLd industry="health-care" lang={params.lang} faqs={faqs} />
    </main>
  );
}