"use client";

import { Reveal } from "@/src/components/Reveal";
import { Section } from "@/src/components/Section";
import { Signature } from "@/src/components/Signature";
import {
  H1,
  H3,
  LeadText,
  BodyText,
  Label,
  MonoLabel,
} from "@/src/components/Typography";
import { Button } from "@/src/components/Button";
import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
import { GlitchText } from "@/src/components/GlitchText";

export default function AboutPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      <AbstractCircuit />
      {/* Hero Section */}
      <section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
          <div className="flex flex-col items-center text-center space-y-12">
            <Reveal width="fit-content">
              <div className="w-40 h-40 md:w-56 md:h-56 rounded-full overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
                <img
                  src="/marc-mintel.png"
                  alt="Marc Mintel"
                  className="object-cover w-full h-full"
                />
              </div>
            </Reveal>

            <div className="space-y-6 max-w-4xl">
              <Reveal delay={0.1}>
                <MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
                  WEBENTWICKLER
                </MonoLabel>
              </Reveal>
              <Reveal delay={0.2}>
                <H1 className="text-6xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                  Über <span className="text-slate-400">mich.</span>
                </H1>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="text-slate-500 max-w-2xl mx-auto text-xl md:text-3xl leading-snug">
                  15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
                  ersparen.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Section 01: Story */}
      <Section number="01" title="Erfahrung" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
              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-12 md:gap-24">
            <Reveal delay={0.1}>
              <LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
                Ich habe in Agenturen, Konzernen und Startups gearbeitet. Dabei
                habe ich gesehen, woran Projekte scheitern: zu viele Leute, zu
                viel Blabla.
              </LeadText>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="space-y-12">
                <BodyText className="text-slate-500 text-lg md:text-xl">
                  Das mache ich anders. Keine Hierarchien, kein Fachchinesisch,
                  sondern klare Kommunikation. Fokus auf Ergebnisse statt auf
                  endlose Meetings.
                </BodyText>
                <div className="space-y-6 border-l border-slate-100 pl-8">
                  <div>
                    <Label className="text-slate-900 text-lg">Direkt</Label>
                    <BodyText className="text-slate-500">
                      Sie sprechen immer mit mir.
                    </BodyText>
                  </div>
                  <div>
                    <Label className="text-slate-900 text-lg">
                      Unkompliziert
                    </Label>
                    <BodyText className="text-slate-500">
                      Wir beschränken uns auf das Wesentliche.
                    </BodyText>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 02: Ablauf */}
      <Section number="02" title="Ablauf" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
              So einfach läuft <br />
              <span className="text-slate-400">ein Projekt ab.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
            {[
              {
                step: "01",
                title: "Kurzes Gespräch",
                desc: "Kein Workshop, nur die Fakten.",
              },
              {
                step: "02",
                title: "Klares Angebot",
                desc: "Fixpreis ohne Sternchen.",
              },
              {
                step: "03",
                title: "Umsetzung",
                desc: "Ich baue, Sie entspannen.",
              },
              {
                step: "04",
                title: "Go-Live & Support",
                desc: "Ich übernehme die Wartung.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={0.1 * i}>
                <div className="space-y-6 pt-6 border-t border-slate-900">
                  <Label className="text-slate-400 font-mono text-sm">
                    {item.step}
                  </Label>
                  <div className="space-y-2">
                    <Label className="text-slate-900 text-xl">
                      {item.title}
                    </Label>
                    <BodyText className="text-slate-500 text-lg">
                      {item.desc}
                    </BodyText>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* Section 03: Garantie */}
      <Section number="03" title="Garantie" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
              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 md:gap-24 items-end">
            <Reveal delay={0.1}>
              <div className="space-y-8">
                <LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
                  Wenn etwas nicht passt, liegt die Verantwortung allein bei
                  mir.
                </LeadText>
                <BodyText className="text-slate-500 text-lg md:text-xl">
                  Sie beauftragen mich, damit Sie Ruhe haben. Fixpreis bedeutet
                  Fixpreis. Wir gehen erst live, wenn Sie zu 100% zufrieden
                  sind.
                </BodyText>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="pb-8">
                <Signature />
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 04: CTA */}
      <Section
        number="04"
        title="Kontakt"
        borderTop
        effects={<GradientMesh variant="metallic" className="opacity-60" />}
      >
        <div className="py-12 md:py-24 relative z-10">
          <div className="space-y-16 md:space-y-24">
            <Reveal>
              <H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                Bereit, das Thema <br />
                <span className="text-slate-400">
                  <GlitchText delay={0.5} duration={1}>
                    abzuhaken?
                  </GlitchText>
                </span>
              </H3>
            </Reveal>

            <Reveal delay={0.2}>
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
                <LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
                  Schreiben Sie mir einfach – wir finden die beste Lösung für
                  Ihre Website.
                </LeadText>
                <Button
                  href="/contact"
                  className="w-full md:w-auto px-12 py-6 text-xl"
                >
                  Sagen Sie Hallo
                </Button>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>
    </div>
  );
}