"use client";

import Image from "next/image";
import { Button } from "./Button";
import { Counter } from "./Counter";
import { Reveal } from "./Reveal";
import { TechBackground } from "./TechBackground";
import { useTranslations } from "next-intl";

import dynamic from "next/dynamic";

const PortfolioSection = dynamic(() =>
  import("./sections/PortfolioSection").then((mod) => mod.PortfolioSection),
);
const ExpertiseSection = dynamic(() =>
  import("./sections/ExpertiseSection").then((mod) => mod.ExpertiseSection),
);
const TechnicalSpecsSection = dynamic(() =>
  import("./sections/TechnicalSpecsSection").then(
    (mod) => mod.TechnicalSpecsSection,
  ),
);
const CTASection = dynamic(() =>
  import("./sections/CTASection").then((mod) => mod.CTASection),
);

export default function Home() {
  const t = useTranslations("Index");

  const serviceJsonLd = {
    "@context": "https://schema.org",
    "@type": "Service",
    name: t("portfolio.items.beratung.title"),
    provider: {
      "@type": "Organization",
      name: "MB Grid Solutions & Services GmbH",
    },
    description: t("portfolio.description"),
    areaServed: "Europe",
    hasOfferCatalog: {
      "@type": "OfferCatalog",
      name: t("portfolio.title"),
      itemListElement: [
        {
          "@type": "Offer",
          itemOffered: {
            "@type": "Service",
            name: t("portfolio.items.beratung.title"),
          },
        },
        {
          "@type": "Offer",
          itemOffered: {
            "@type": "Service",
            name: t("portfolio.items.begleitung.title"),
          },
        },
        {
          "@type": "Offer",
          itemOffered: {
            "@type": "Service",
            name: t("portfolio.items.beschaffung.title"),
          },
        },
      ],
    },
  };

  return (
    <div className="overflow-hidden relative">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceJsonLd) }}
      />

      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center pt-44 pb-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="/media/business/hero-bg.jpg"
            alt="MB Grid Solutions Hero"
            fill
            className="object-cover"
            priority
            quality={75}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
          <TechBackground />
        </div>

        <div className="container-custom relative z-10">
          <div className="text-left relative">
            <Counter value={1} className="section-number" />
            <Reveal delay={0.1}>
              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
                </span>
                {t("hero.tag")}
              </span>
            </Reveal>

            <Reveal delay={0.2}>
              <h1 className="text-4xl sm:text-5xl md:text-7xl font-extrabold text-primary mb-6 md:mb-8 leading-[1.1]">
                {t("hero.title") ===
                "Spezialisierter Partner für Energiekabelprojekte" ? (
                  <>
                    Spezialisierter Partner für{" "}
                    <span className="text-accent">Energiekabelprojekte</span>
                  </>
                ) : (
                  t("hero.title")
                )}
              </h1>
            </Reveal>

            <Reveal delay={0.3}>
              <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8 md:mb-12 max-w-2xl">
                {t("hero.subtitle")}
              </p>
            </Reveal>

            <Reveal delay={0.4}>
              <div className="flex flex-wrap gap-4">
                <Button href="/kontakt" variant="accent" showArrow>
                  {t("hero.ctaPrimary")}
                </Button>
                <Button href="/ueber-uns" variant="ghost">
                  {t("hero.ctaSecondary")}
                </Button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Dynamic Sections */}
      <PortfolioSection />
      <ExpertiseSection />
      <TechnicalSpecsSection />
      <CTASection />
    </div>
  );
}