"use client";

import Image from "next/image";
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 { Signature } from "@/src/components/Signature";
import { Check } from "lucide-react";
import {
  H1,
  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">
      {/* Hero Section */}
      <section className="relative pt-12 md:pt-32 pb-8 md: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-6 md:space-y-12">
            <Reveal width="fit-content">
              <div className="relative">
                <div className="relative w-32 h-32 md:w-40 md: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">
                    <img
                      src="/marc-mintel.png"
                      alt="Marc Mintel"
                      className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0 w-full h-full"
                    />
                  </div>
                </div>
              </div>
            </Reveal>

            <div className="space-y-3 md:space-y-6 max-w-3xl">
              <Reveal delay={0.1}>
                <div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
                  <div className="h-px w-6 md:w-8 bg-slate-900"></div>
                  <MonoLabel className="text-slate-900 text-[10px] md:text-sm">
                    Webentwickler
                  </MonoLabel>
                  <div className="h-px w-6 md:w-8 bg-slate-900"></div>
                </div>
              </Reveal>
              <Reveal delay={0.2}>
                <H1 className="text-4xl md:text-8xl leading-none tracking-tighter">
                  Über <span className="text-slate-400">mich.</span>
                </H1>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="text-slate-400 font-medium max-w-xl mx-auto text-sm md:text-xl">
                  15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
                  ersparen.
                </p>
              </Reveal>
            </div>
          </div>
        </Container>

        {/* Connector to first section */}
        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-12 md: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-8 md:space-y-12">
          <Reveal>
            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
              Aus der Praxis. <br />
              <span className="text-slate-400">Für die Praxis.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
            <Reveal delay={0.1}>
              <div className="space-y-6 md:space-y-8">
                <LeadText className="text-xl md:text-2xl text-slate-400">
                  Ich habe in Agenturen, Konzernen und Startups gearbeitet.
                  Dabei habe ich oft gesehen, woran Projekte scheitern: zu viele
                  Leute, zu viel Blabla, keine klaren Verantwortlichkeiten.{" "}
                  <span className="text-slate-900">
                    <Marker delay={0.2}>Das mache ich anders.</Marker>
                  </span>
                </LeadText>
                <IconList className="space-y-4">
                  {[
                    "Kein Fachchinesisch, sondern klare Kommunikation",
                    "Fokus auf Ergebnisse statt auf endlose Meetings",
                    "Eine Person, die Ihr Projekt von A bis Z kennt",
                  ].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-xl mb-6">
                  Meine Philosophie: Direkte Zusammenarbeit ohne
                  Reibungsverluste.
                </H4>
                <div className="flex flex-wrap gap-3">
                  {["Unkompliziert", "Persönlich", "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="Ablauf"
        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-2xl md:text-5xl leading-tight max-w-3xl">
              So einfach 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: "Kurzes Gespräch",
                desc: "Sie beschreiben, was Sie brauchen. Kein stundenlanger Workshop, nur die Fakten.",
              },
              {
                step: "02",
                title: "Klares Angebot",
                desc: "Sie erhalten einen Fixpreis. Ohne Sternchen, ohne Nachforderungen.",
              },
              {
                step: "03",
                title: "Schnelle Umsetzung",
                desc: "Ich baue Ihre Website. Sie müssen sich um nichts kümmern.",
              },
              {
                step: "04",
                title: "Go-Live & Sorglos-Paket",
                desc: "Die Seite geht online und ich übernehme ab sofort die Wartung und alle Änderungen für Sie.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={0.1 + i * 0.1}>
                <div className="flex gap-4 md:gap-6 py-2 md: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-1 md:space-y-2 pt-1">
                    <H4 className="text-base md:text-xl font-bold">
                      {item.title}
                    </H4>
                    <BodyText className="text-slate-500 text-sm md:text-base">
                      {item.desc}
                    </BodyText>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* Section 03: Garantie – The Pledge */}
      <Section number="03" title="Garantie" borderTop>
        <div className="relative">
          <Reveal>
            <div className="max-w-4xl text-left space-y-12 md:space-y-16 py-8 md:py-16">
              <H3 className="text-3xl md:text-6xl leading-tight">
                Ich stehe für <br />
                <span className="text-slate-400">meine Arbeit gerade.</span>
              </H3>

              <div className="prose prose-lg md:prose-2xl text-slate-500 leading-relaxed">
                <p>
                  Keine Hierarchien. Keine Ausreden. Wenn etwas nicht passt,
                  liegt die Verantwortung allein bei mir.
                </p>
                <p>
                  Sie beauftragen mich, damit Sie{" "}
                  <span className="text-slate-900 font-medium relative inline-block">
                    Ruhe
                    <svg
                      className="absolute -bottom-2 left-0 w-full h-3 text-blue-500/30"
                      viewBox="0 0 100 10"
                      preserveAspectRatio="none"
                    >
                      <path
                        d="M0 5 Q 50 10 100 5"
                        stroke="currentColor"
                        strokeWidth="2"
                        fill="none"
                      />
                    </svg>
                  </span>{" "}
                  haben. Und genau das bekommen Sie.
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl text-left">
                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
                  <h4 className="font-bold text-slate-900 mb-2">
                    Fixpreis-Garantie
                  </h4>
                  <p className="text-slate-500 text-sm">
                    Keine versteckten Kosten. Der vereinbarte Preis ist final.
                  </p>
                </div>
                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
                  <h4 className="font-bold text-slate-900 mb-2">
                    Zufriedenheitsgarantie
                  </h4>
                  <p className="text-slate-500 text-sm">
                    Wir gehen erst live, wenn Sie zu 100% zufrieden sind.
                  </p>
                </div>
              </div>

              <div className="pt-8 md:pt-12 flex flex-col items-start">
                <div className="w-64 md:w-80">
                  <Signature delay={0.5} />
                </div>
              </div>
            </div>
          </Reveal>
        </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-10 md:space-y-12">
          <Reveal>
            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
              Bereit, Ihre Website <br />
              <span className="text-slate-400">abzuhaken?</span>
            </H3>
          </Reveal>

          <Card
            variant="glass"
            hover={false}
            padding="normal"
            techBorder
            className="rounded-3xl shadow-xl relative overflow-hidden group"
          >
            <div className="relative z-10 space-y-6 md:space-y-8">
              <LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
                Lassen Sie uns das Thema Website ein für alle Mal{" "}
                <span className="text-slate-900">
                  sinnvoll <Marker delay={0.3}>lösen.</Marker>
                </span>
              </LeadText>

              <div className="pt-2 md:pt-4">
                <Button href="/contact" className="w-full md:w-auto">
                  Kostenlos anfragen
                </Button>
              </div>
            </div>
          </Card>
        </div>
      </Section>
    </div>
  );
}