"use client";

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,
  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 { Card, Container } from "../../src/components/Layout";
import { Button } from "../../src/components/Button";
import { IconList, IconListItem } from "../../src/components/IconList";
import {
  GradientMesh,
  CodeSnippet,
  AbstractCircuit,
} from "../../src/components/Effects";
import { Marker } from "../../src/components/Marker";

export default function AboutPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      <AbstractCircuit />

      {/* Hero Section */}
      <section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50">
        <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="/marc-mintel.png"
                      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"
                    />
                  </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-400">mich.</span>
                  </>
                }
                description="15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen halten."
                backLink={{ href: "/", label: "Zurück" }}
                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: Story */}
      <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">
              Vom Designer <br />
              <span className="text-slate-400">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">
                  Agenturen, Konzerne, Startups – ich habe die Branche von allen
                  Seiten kennengelernt. Was hängen geblieben ist:{" "}
                  <span className="text-slate-900">
                    <Marker delay={0.2} color="rgba(148,163,184,0.15)">
                      Ergebnisse zählen.
                    </Marker>{" "}
                    Nicht der Weg dorthin.
                  </span>
                </LeadText>
                <IconList className="space-y-4">
                  {[
                    "Frontend, Backend, Infrastruktur – Fullstack",
                    "Komplexe Systeme auf das Wesentliche reduziert",
                    "Performance-Probleme systematisch gelöst",
                  ].map((item, i) => (
                    <IconListItem key={i} bullet>
                      <BodyText className="text-lg">{item}</BodyText>
                    </IconListItem>
                  ))}
                </IconList>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <Card
                variant="gray"
                hover={false}
                padding="normal"
                className="group"
              >
                <H4 className="text-2xl mb-6">
                  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: Arbeitsweise – HOW I work */}
      <Section
        number="02"
        title="Arbeitsweise"
        variant="gray"
        borderTop
        illustration={<ResponsibilityIllustration className="w-24 h-24" />}
        effects={<GradientMesh variant="subtle" className="opacity-60" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              So läuft ein Projekt <br />
              <span className="text-slate-400">bei mir ab.</span>
            </H3>
          </Reveal>

          {/* Timeline Steps */}
          <div className="space-y-1 relative">
            {/* Connecting line */}
            <div className="absolute left-[15px] top-8 bottom-8 w-px bg-slate-200 hidden md:block" />

            {[
              {
                step: "01",
                title: "Briefing",
                desc: "Sie beschreiben Ihr Vorhaben. Ich höre zu und stelle die richtigen Fragen.",
              },
              {
                step: "02",
                title: "Angebot",
                desc: "Ein Fixpreis-Angebot mit klarem Leistungsumfang. Keine Überraschungen.",
              },
              {
                step: "03",
                title: "Umsetzung",
                desc: "Schnelle Iterationen. Sie sehen regelmäßig den Fortschritt und geben Feedback.",
              },
              {
                step: "04",
                title: "Launch",
                desc: "Go-Live mit automatisiertem Deployment. Dokumentiert und übergabereif.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={0.1 + i * 0.1}>
                <div className="flex gap-6 py-6 group">
                  <div className="relative z-10 shrink-0">
                    <div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
                      <span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
                        {item.step}
                      </span>
                    </div>
                  </div>
                  <div className="space-y-2 pt-1">
                    <H4 className="text-xl">{item.title}</H4>
                    <BodyText className="text-slate-500">{item.desc}</BodyText>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* Section 03: Philosophie – what drives me */}
      <Section number="03" title="Philosophie" borderTop>
        <div className="space-y-16">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Ich stehe für <br />
              <span className="text-slate-400">meine Arbeit gerade.</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">
                  Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
                  liegt die Verantwortung bei mir – und ich{" "}
                  <span className="text-slate-900">
                    <Marker color="rgba(255,235,59,0.5)">löse es.</Marker>
                  </span>
                </LeadText>
              </Reveal>
              <div className="grid grid-cols-2 gap-4">
                {[
                  "Vollständige Transparenz",
                  "Ein Ansprechpartner",
                  "Messbare Qualität",
                  "Langfristige Partnerschaft",
                ].map((item, i) => (
                  <Reveal key={i} delay={0.2 + i * 0.05}>
                    <div className="flex items-center gap-3 group">
                      <div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
                        <Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
                      </div>
                      <Label className="text-slate-900">{item}</Label>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>

            {/* Decorative terminal */}
            <Reveal delay={0.3}>
              <CodeSnippet variant="terminal" className="opacity-70" />
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 04: CTA */}
      <Section
        number="04"
        title="Kontakt"
        variant="gray"
        borderTop
        illustration={<ContactIllustration className="w-24 h-24" />}
        effects={<GradientMesh variant="metallic" className="opacity-60" />}
      >
        <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-400">Zusammenarbeit?</span>
            </H3>
          </Reveal>

          <Card
            variant="glass"
            hover={false}
            padding="large"
            techBorder
            className="rounded-3xl shadow-xl relative overflow-hidden group"
          >
            <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">
                  <Marker delay={0.3} color="rgba(148,163,184,0.15)">
                    wirklich funktioniert.
                  </Marker>
                </span>
              </LeadText>

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