import Image from "next/image";
import { PageHeader } from "../../src/components/PageHeader";
import { Section } from "../../src/components/Section";
import { Reveal } from "../../src/components/Reveal";
import {
  ExperienceIllustration,
  ResponsibilityIllustration,
  ResultIllustration,
  ConceptSystem,
  ContactIllustration,
  HeroLines,
  ParticleNetwork,
  GridLines,
} from "../../src/components/Landing";
import { Check } from "lucide-react";
import {
  H3,
  H4,
  LeadText,
  BodyText,
  Label,
  MonoLabel,
} from "../../src/components/Typography";
import { BackgroundGrid, Card, Container } from "../../src/components/Layout";
import { Button } from "../../src/components/Button";

export default function AboutPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      {/* Background Elements */}
      <ParticleNetwork className="opacity-20" />
      <BackgroundGrid />

      {/* Hero Section */}
      <section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
          <HeroLines className="w-full h-full" />
        </div>
        <div className="absolute right-0 top-0 w-96 h-96 opacity-5 pointer-events-none">
          <GridLines />
        </div>

        <Container variant="narrow" className="relative z-10">
          <div className="flex flex-col items-center text-center space-y-12">
            <Reveal>
              <div className="relative">
                {/* Structural rings around avatar */}
                <div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
                <div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />

                <div className="relative w-40 h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                  <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
                    <Image
                      src="https://img.infra.mintel.me/unsafe/rs:fill:800:800/plain/https://picsum.photos/seed/marc/800/800"
                      alt="Marc Mintel"
                      fill
                      className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0"
                      unoptimized
                    />
                  </div>
                </div>
              </div>
            </Reveal>

            <div className="space-y-6 max-w-3xl">
              <Reveal delay={0.1}>
                <div className="flex items-center justify-center gap-4 mb-4">
                  <div className="h-px w-8 bg-slate-900"></div>
                  <MonoLabel className="text-slate-900">
                    Digital Architect
                  </MonoLabel>
                  <div className="h-px w-8 bg-slate-900"></div>
                </div>
              </Reveal>
              <PageHeader
                title={
                  <>
                    Über <span className="text-slate-200">mich.</span>
                  </>
                }
                description="Warum ich tue, was ich tue – und wie Sie davon profitieren."
                className="pt-0 md:pt-0"
              />
            </div>
          </div>
        </Container>

        {/* Connector to first section */}
        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" />
      </section>

      {/* Section 01: Experience */}
      <Section
        number="01"
        title="Erfahrung"
        borderTop
        illustration={<ExperienceIllustration className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              15 Jahre Web-Entwicklung. <br />
              <span className="text-slate-200">
                Vom Designer zum Architekten.
              </span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <Reveal delay={0.1}>
              <div className="space-y-8">
                <LeadText className="text-xl md:text-2xl text-slate-400">
                  Ich habe Agenturen, Konzerne und Startups von innen gesehen.
                  Dabei habe ich gelernt, what really counts:{" "}
                  <span className="text-slate-900">
                    Ergebnisse, nicht Prozesse.
                  </span>
                </LeadText>
                <ul className="space-y-4">
                  {[
                    "Komplexe Systeme vereinfacht",
                    "Performance-Probleme gelöst",
                    "Nachhaltige Software-Architekturen gebaut",
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-4 group">
                      <div className="w-1.5 h-1.5 bg-slate-900 rounded-full group-hover:scale-150 transition-transform" />
                      <BodyText className="text-lg">{item}</BodyText>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <Card
                variant="gray"
                hover={false}
                padding="normal"
                className="group"
              >
                <H4 className="text-2xl mb-6">
                  Mein Fokus heute: Direkte Zusammenarbeit ohne
                  Reibungsverluste.
                </H4>
                <div className="flex flex-wrap gap-3">
                  {["Effizient", "Pragmatisch", "Verlässlich"].map((tag, i) => (
                    <span
                      key={i}
                      className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm"
                    >
                      <Label className="text-slate-900">{tag}</Label>
                    </span>
                  ))}
                </div>
              </Card>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 02: Responsibility */}
      <Section
        number="02"
        title="Verantwortung"
        variant="gray"
        borderTop
        illustration={<ResponsibilityIllustration className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Ich stehe für meine <br />
              <span className="text-slate-200">Arbeit gerade.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
            <div className="md:col-span-8 space-y-8">
              <Reveal delay={0.1}>
                <LeadText className="text-xl md:text-2xl text-slate-400">
                  In der klassischen Agenturwelt verschwindet Verantwortung oft
                  hinter Hierarchien. Bei mir gibt es nur{" "}
                  <span className="text-slate-900">einen Ansprechpartner:</span>{" "}
                  Mich.
                </LeadText>
              </Reveal>
              <Reveal delay={0.2}>
                <Card
                  variant="white"
                  padding="normal"
                  className="flex flex-row items-start gap-6 group"
                >
                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold text-xl group-hover:rotate-12 transition-transform duration-500">
                    !
                  </div>
                  <BodyText className="text-slate-900 font-medium text-lg md:text-xl leading-relaxed">
                    Ich übernehme die volle Verantwortung für die technische
                    Umsetzung und Qualität Ihres Projekts. Ohne Ausreden.
                  </BodyText>
                </Card>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* Section 03: Systems */}
      <Section
        number="03"
        title="Philosophie"
        borderTop
        illustration={<ConceptSystem className="w-24 h-24" />}
      >
        <div className="space-y-16">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Nachhaltigkeit durch <br />
              <span className="text-slate-200">sauberen Code.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="space-y-8">
              <Reveal delay={0.1}>
                <LeadText className="text-xl text-slate-400">
                  Ich baue keine Wegwerf-Produkte. Meine Systeme sind so
                  konzipiert, dass sie mit Ihrem Unternehmen{" "}
                  <span className="text-slate-900">wachsen können.</span>
                </LeadText>
              </Reveal>
              <div className="grid grid-cols-2 gap-4">
                {[
                  "Skalierbar",
                  "Wartbar",
                  "Performant",
                  "Sicher",
                  "Unabhängig",
                  "Zukunftssicher",
                ].map((item, i) => (
                  <Reveal key={i} delay={0.2 + i * 0.05}>
                    <div className="flex items-center gap-3 group">
                      <div className="w-5 h-5 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-slate-900 transition-colors duration-500">
                        <Check className="w-2.5 h-2.5 text-slate-400 group-hover:text-white" />
                      </div>
                      <Label className="text-slate-900">{item}</Label>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
            <Reveal delay={0.3}>
              <Card
                variant="dark"
                padding="normal"
                className="relative rounded-2xl overflow-hidden group"
              >
                <div className="absolute top-0 right-0 w-48 h-48 bg-white/5 -translate-y-24 translate-x-24 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-1000" />
                <H4 className="text-white text-2xl mb-6 relative z-10">
                  Kein Vendor Lock-in.
                </H4>
                <LeadText className="text-slate-400 text-lg relative z-10 leading-relaxed">
                  Sie behalten die volle Kontrolle über Ihren Code und Ihre
                  Daten. Keine Abhängigkeit von proprietären Systemen.
                </LeadText>
              </Card>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 04: Result */}
      <Section
        number="04"
        title="Ergebnis"
        borderTop
        illustration={<ResultIllustration className="w-24 h-24" />}
      >
        <div className="space-y-16">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Was Sie von mir <br />
              <span className="text-slate-200">erwarten können.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
            <div className="space-y-8">
              <div className="space-y-6">
                <Label>Kein:</Label>
                <div className="flex flex-wrap gap-3">
                  {[
                    "Agentur-Zirkus",
                    "Meeting-Marathon",
                    "Ticket-Wahnsinn",
                    "CMS-Frust",
                  ].map((item, i) => (
                    <span
                      key={i}
                      className="px-4 py-2 border border-slate-100 rounded-full bg-slate-50/50"
                    >
                      <BodyText className="text-slate-400 line-through text-base mb-0">
                        {item}
                      </BodyText>
                    </span>
                  ))}
                </div>
              </div>
            </div>
            <div className="space-y-8">
              <div className="space-y-6">
                <Label className="text-slate-900">Sondern:</Label>
                <div className="space-y-8">
                  {[
                    {
                      label: "Direkte Kommunikation",
                      desc: "Kurze Wege, schnelle Entscheidungen.",
                    },
                    {
                      label: "Echte Expertise",
                      desc: "Fundiertes Wissen aus 15 Jahren Praxis.",
                    },
                    {
                      label: "Messbare Qualität",
                      desc: "Code, der hält, was er verspricht.",
                    },
                  ].map((item, i) => (
                    <Reveal key={i} delay={0.2 + i * 0.1}>
                      <div className="flex gap-6 items-start group">
                        <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1 group-hover:scale-110 transition-transform">
                          <Check className="w-4 h-4 text-white" />
                        </div>
                        <div className="space-y-1">
                          <H4 className="text-xl">{item.label}</H4>
                          <BodyText className="text-base text-slate-400">
                            {item.desc}
                          </BodyText>
                        </div>
                      </div>
                    </Reveal>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Section 05: Today */}
      <Section
        number="05"
        title="Kontakt"
        variant="gray"
        borderTop
        illustration={<ContactIllustration className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Bereit für eine <br />
              <span className="text-slate-200">Zusammenarbeit?</span>
            </H3>
          </Reveal>

          <Card
            variant="white"
            hover={false}
            padding="large"
            className="rounded-3xl shadow-xl relative overflow-hidden group"
          >
            <div className="absolute top-0 right-0 w-96 h-96 bg-slate-50 -translate-y-1/2 translate-x-1/2 rounded-full blur-[80px] group-hover:bg-slate-100 transition-colors duration-1000" />

            <div className="relative z-10 space-y-8">
              <LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
                Lassen Sie uns gemeinsam etwas bauen, das{" "}
                <span className="text-slate-900">wirklich funktioniert.</span>
              </LeadText>

              <div className="pt-4">
                <Button href="/contact">Projekt anfragen</Button>
              </div>
            </div>
          </Card>
        </div>
      </Section>
    </div>
  );
}