"use client";

import React from "react";
import Image from "next/image";
import {
  Award,
  Clock,
  Lightbulb,
  Linkedin,
  MessageSquare,
  ShieldCheck,
  Truck,
} from "lucide-react";
import { Reveal } from "./Reveal";
import { TechBackground } from "./TechBackground";
import { Counter } from "./Counter";
import { Button } from "./Button";
import { useTranslations } from "next-intl";

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

  const manifestIcons = [
    Award,
    Clock,
    Lightbulb,
    Truck,
    MessageSquare,
    ShieldCheck,
  ];

  return (
    <div className="overflow-hidden relative">
      {/* Hero Section */}
      <section className="relative min-h-[60vh] flex items-center pt-44 pb-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="/media/drums/about-hero.jpg"
            alt="About MB Grid Solutions"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
          <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="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
                {t("hero.tagline")}
              </span>
            </Reveal>
            <Reveal delay={0.2}>
              <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
                {t.rich("hero.title", {
                  accent: (chunks) => (
                    <span className="text-accent">{chunks}</span>
                  ),
                })}
              </h1>
            </Reveal>
            <Reveal delay={0.3}>
              <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8">
                {t("hero.subtitle")}
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Content Section */}
      <section className="bg-white relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <div className="section-number">02</div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <Reveal direction="right">
              <div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
                <div className="absolute -left-4 top-0 w-1 h-full bg-accent/10" />
                <p>{t("intro.p1")}</p>
                <p>{t("intro.p2")}</p>
              </div>
            </Reveal>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {[
                {
                  name: "Michael Bodemer",
                  role: t("team.bodemer"),
                  linkedin:
                    "https://www.linkedin.com/in/michael-bodemer-33b493122/",
                },
                {
                  name: "Klaus Mintel",
                  role: t("team.mintel"),
                  linkedin:
                    "https://www.linkedin.com/in/klaus-mintel-b80a8b193/",
                },
              ].map((person, i) => (
                <Reveal key={i} delay={i * 0.1}>
                  <div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
                    <div className="flex justify-between items-start mb-4 relative z-10">
                      <h3 className="text-xl font-bold text-primary">
                        {person.name}
                      </h3>
                      <a
                        href={person.linkedin}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-[#0077b5] hover:scale-110 transition-transform"
                      >
                        <Linkedin size={20} />
                      </a>
                    </div>
                    <p className="text-accent text-sm font-bold uppercase tracking-wider relative z-10">
                      {person.role}
                    </p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Manifest Section */}
      <section className="bg-slate-950 text-accent relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <Counter value={3} className="section-number !text-white/5" />
          <Reveal className="mb-20">
            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
              {t("manifest.tagline")}
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
              {t("manifest.title")}
            </h2>
            <p className="text-slate-400 text-base md:text-lg">
              {t("manifest.subtitle")}
            </p>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {t
              .raw("manifest.items")
              .map((item: { title: string; desc: string }, i: number) => {
                const Icon = manifestIcons[i];
                return (
                  <Reveal key={i} delay={i * 0.1}>
                    <div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative 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" />
                      <div className="text-accent mb-6">
                        <Icon size={32} />
                      </div>
                      <h4 className="text-xl font-bold text-white mb-4">
                        {i + 1}. {item.title}
                      </h4>
                      <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 />
        <div className="container-custom relative z-10">
          <div className="section-number">04</div>
          <Reveal>
            <div className="relative rounded-3xl md:rounded-[2.5rem] bg-slate-900 p-8 md:p-24 overflow-hidden group">
              <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
              <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
              <div className="relative z-10 max-w-2xl">
                <h2 className="text-3xl md:text-5xl font-bold text-white mb-6 md:mb-8">
                  {t("cta.title")}
                </h2>
                <p className="text-slate-400 text-lg md:text-xl mb-8 md:mb-12">
                  {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>
  );
}