"use client";

import { m, LazyMotion, domAnimation } from "framer-motion";
import {
  BarChart3,
  CheckCircle2,
  ChevronRight,
  Shield,
  Zap,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Button } from "./Button";
import { Counter } from "./Counter";
import { Reveal } from "./Reveal";
import { TechBackground } from "./TechBackground";
import { TileGrid } from "./TileGrid";
import { useTranslations } from "next-intl";

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={90}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
          <TechBackground />
        </div>
        <TileGrid />

        <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>

      {/* Portfolio Section */}
      <section className="bg-slate-950 text-accent relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <Counter value={2} className="section-number !text-white/5" />
          <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
            <div>
              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
                {t("portfolio.tag")}
              </span>
              <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
                {t("portfolio.title")}
              </h2>
              <p className="text-slate-400 text-base md:text-xl">
                {t("portfolio.description")}
              </p>
            </div>
            <Link
              href="/ueber-uns"
              className="text-accent font-bold flex items-center gap-2 hover:text-white transition-colors group"
            >
              {t("portfolio.link")}{" "}
              <ChevronRight
                className="transition-transform group-hover:translate-x-1"
                size={20}
              />
            </Link>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                icon: <Zap size={32} />,
                title: t("portfolio.items.beratung.title"),
                desc: t("portfolio.items.beratung.desc"),
              },
              {
                icon: <Shield size={32} />,
                title: t("portfolio.items.begleitung.title"),
                desc: t("portfolio.items.begleitung.desc"),
              },
              {
                icon: <BarChart3 size={32} />,
                title: t("portfolio.items.beschaffung.title"),
                desc: t("portfolio.items.beschaffung.desc"),
              },
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="bg-white/5 p-8 rounded-2xl border border-white/10 group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full relative overflow-hidden">
                  <div className="absolute top-0 right-0 w-16 h-16 bg-accent/5 -mr-8 -mt-8 rounded-full group-hover:bg-accent/10 transition-colors" />
                  <div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors relative z-10">
                    {item.icon}
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-4 relative z-10">
                    {item.title}
                  </h3>
                  <p className="text-slate-400 leading-relaxed relative z-10">
                    {item.desc}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Expertise Section */}
      <section className="bg-white relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <Counter value={3} className="section-number" />
          <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
            <Reveal direction="right">
              <div className="relative overflow-hidden rounded-2xl shadow-lg group">
                <div className="absolute inset-0 bg-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10 pointer-events-none" />
                <Image
                  src="/media/cables/hs-kabel.png"
                  alt="Technical Engineering"
                  width={800}
                  height={600}
                  className="w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700"
                />
                <div className="tech-corner top-4 left-4 border-t-2 border-l-2 z-20" />
                <div className="tech-corner bottom-4 right-4 border-b-2 border-r-2 z-20" />
              </div>
            </Reveal>
            <div>
              <Reveal>
                <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
                  {t("expertise.tag")}
                </span>
                <h2 className="text-3xl md:text-5xl font-bold text-primary mb-6 md:mb-8">
                  {t("expertise.title")}
                </h2>
                <p className="text-slate-600 text-base md:text-xl mb-8 md:mb-12">
                  {t("expertise.description")}
                </p>
              </Reveal>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {t.raw("expertise.groups").map((item: string, i: number) => (
                  <Reveal key={i} delay={i * 0.05}>
                    <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group relative overflow-hidden">
                      <div className="absolute top-0 left-0 w-1 h-full bg-accent/0 group-hover:bg-accent/100 transition-all duration-300" />
                      <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
                        <CheckCircle2 size={16} />
                      </div>
                      <span className="text-primary font-semibold">{item}</span>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Technical Specs Section */}
      <section className="relative py-24 md:py-32 text-white overflow-hidden bg-slate-900">
        <div className="absolute inset-0 opacity-20">
          <Image
            src="/media/drums/about-hero.jpg"
            alt="Background"
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
        </div>
        <TechBackground />

        <div className="container-custom relative z-10">
          <Counter value={4} className="section-number !text-white/5" />
          {/* Data Stream Effect */}
          <div className="absolute -top-10 right-0 w-px h-64 bg-gradient-to-b from-transparent via-accent/50 to-transparent animate-pulse" />
          <div className="absolute -bottom-10 left-10 w-px h-64 bg-gradient-to-b from-transparent via-accent/30 to-transparent animate-pulse delay-700" />

          <Reveal className="mb-20">
            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
              {t("specs.tag")}
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
              {t("specs.title")}
            </h2>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            {[
              {
                label: t("specs.items.kabel.label"),
                value: t("specs.items.kabel.value"),
                desc: t("specs.items.kabel.desc"),
              },
              {
                label: t("specs.items.spannung.label"),
                value: t("specs.items.spannung.value"),
                desc: t("specs.items.spannung.desc"),
              },
              {
                label: t("specs.items.technologie.label"),
                value: t("specs.items.technologie.value"),
                desc: t("specs.items.technologie.desc"),
              },
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full relative group overflow-hidden">
                  <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
                  <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
                    {item.label}
                  </h4>
                  <p className="text-2xl font-bold text-white mb-4 leading-tight">
                    {item.value}
                  </p>
                  <p className="text-slate-400 leading-relaxed">{item.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-white relative overflow-hidden">
        <TechBackground />
        {/* Decorative Background Elements */}
        <div className="absolute top-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />

        <div className="container-custom relative z-10">
          <Counter value={5} className="section-number" />
          <Reveal>
            <div className="relative rounded-3xl md:rounded-[2.5rem] bg-primary p-8 md:p-24 overflow-hidden group">
              {/* Corner Accents */}
              <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
              <div className="tech-corner top-8 right-8 border-t-2 border-r-2" />
              <div className="tech-corner bottom-8 left-8 border-b-2 border-l-2" />
              <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />

              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
                <LazyMotion features={domAnimation}>
                  <svg
                    viewBox="0 0 400 400"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <m.circle
                      animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
                      transition={{
                        duration: 5,
                        repeat: Infinity,
                        ease: "easeInOut",
                      }}
                      cx="400"
                      cy="0"
                      r="400"
                      stroke="white"
                      strokeWidth="2"
                    />
                    <m.circle
                      animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
                      transition={{
                        duration: 4,
                        repeat: Infinity,
                        ease: "easeInOut",
                        delay: 0.5,
                      }}
                      cx="400"
                      cy="0"
                      r="300"
                      stroke="white"
                      strokeWidth="2"
                    />
                    <m.circle
                      animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
                      transition={{
                        duration: 3,
                        repeat: Infinity,
                        ease: "easeInOut",
                        delay: 1,
                      }}
                      cx="400"
                      cy="0"
                      r="200"
                      stroke="white"
                      strokeWidth="2"
                    />
                  </svg>
                </LazyMotion>
              </div>

              <div className="relative z-10">
                <h2 className="text-3xl md:text-6xl font-bold text-white mb-6 md:mb-8 leading-tight">
                  {t("cta.title")}
                </h2>
                <p className="text-slate-300 text-lg md:text-xl mb-8 md:mb-12 leading-relaxed">
                  {t("cta.subtitle")}
                </p>
                <Button
                  href="/kontakt"
                  variant="accent"
                  showArrow
                  className="w-full sm:w-auto !px-10 !py-5 text-lg"
                >
                  {t("cta.button")}
                </Button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}