import * as React from 'react';
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,
  ConceptTarget,
  ContactIllustration,
  ConnectorBranch,
  ConnectorStart,
  ConnectorEnd,
  ConnectorSplit,
  HeroLines,
  ParticleNetwork,
  GridLines
} from '../../src/components/Landing';
import { Check, ArrowRight } from 'lucide-react';

export default function AboutPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      {/* Background Elements */}
      <ParticleNetwork className="opacity-20" />
      <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
        backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
        backgroundSize: '80px 80px'
      }} />

      {/* Hero Section */}
      <section className="relative pt-40 pb-32 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>
        
        <div className="narrow-container 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_20s_linear_infinite] opacity-50" />
                <div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-30" />
                
                <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-2xl shadow-slate-200/50 bg-white p-1">
                  <div className="w-full h-full rounded-full overflow-hidden">
                    <img
                      src="/header.webp"
                      alt="Marc Mintel"
                      className="w-full h-full object-cover grayscale transition-all duration-1000 ease-in-out scale-110 hover:scale-100"
                    />
                  </div>
                </div>
              </div>
            </Reveal>

            <div className="space-y-6 max-w-2xl">
              <Reveal delay={0.1}>
                <div className="flex items-center justify-center gap-3 mb-4">
                    <div className="h-px w-8 bg-slate-900"></div>
                    <span className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900">Digital Architect</span>
                    <div className="h-px w-8 bg-slate-900"></div>
                </div>
              </Reveal>
              <PageHeader 
                title={<>Über <span className="text-slate-300">mich.</span></>}
                description="(oder: Warum das hier kein Agentur-Zirkus ist)"
              />
            </div>
          </div>
        </div>

        {/* 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
        connector={<ConnectorStart className="h-full" />}
        illustration={<ExperienceIllustration className="w-32 h-32" />}
      >
        <div className="space-y-12">
          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Ich baue Websites und Systeme seit über 15 Jahren. <br />
              <span className="text-slate-300">Weil ich es hasse, wenn Dinge nicht funktionieren.</span>
            </h3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <Reveal delay={0.1}>
              <div className="space-y-6">
                <p className="text-xl text-slate-600 font-serif italic">
                  In diesen 15 Jahren habe ich Agenturen von innen gesehen, Konzerne erlebt und Startups aufgebaut.
                </p>
                <ul className="space-y-4">
                  {[
                    'Marketingversprechen zerlegt',
                    'Systeme repariert, die „fertig“ waren',
                    'Gelernt, wie man Dinge baut, die einfach laufen'
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-slate-500">
                      <div className="w-1.5 h-1.5 bg-slate-300 rounded-full shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="p-8 bg-slate-50 rounded-3xl border border-slate-100">
                <p className="text-slate-900 font-bold text-lg mb-4">Heute mache ich das ohne Agentur-Zwischenschichten.</p>
                <div className="flex flex-wrap gap-4">
                  {['Direkt', 'Sauber', 'Verantwortlich'].map((tag, i) => (
                    <span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full text-xs font-bold uppercase tracking-widest text-slate-400">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 02: Responsibility */}
      <Section
        number="02"
        title="Verantwortung"
        variant="gray"
        borderTop
        connector={<ConnectorBranch className="h-full" />}
        illustration={<ResponsibilityIllustration className="w-32 h-32" />}
      >
        <div className="space-y-12">
          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Ich habe fast alle Fehler schon für Sie gemacht. <br />
              <span className="text-slate-300">(Damit Sie sie nicht machen müssen)</span>
            </h3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
            <div className="md:col-span-7 space-y-8">
              <Reveal delay={0.1}>
                <p className="text-xl text-slate-600 font-serif italic">
                  Ich habe als Designer angefangen, bin dann Entwickler geworden, und habe irgendwann gemerkt: Das Problem ist selten Technik. Es ist immer Zuständigkeit.
                </p>
              </Reveal>
              <Reveal delay={0.2}>
                <div className="flex items-start gap-6 p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold">!</div>
                  <p className="text-slate-900 font-medium">
                    Wenn keiner verantwortlich ist, passiert nichts. Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
                  </p>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* Section 03: Systems */}
      <Section
        number="03"
        title="Philosophie"
        borderTop
        connector={<ConnectorSplit className="h-full" />}
        illustration={<ConceptSystem className="w-32 h-32" />}
      >
        <div className="space-y-16">
          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Warum ich Websites wie Systeme baue.
            </h3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="space-y-8">
              <Reveal delay={0.1}>
                <p className="text-slate-500 font-serif italic text-lg">
                  Ich war viele Jahre Senior Developer in Firmen, in denen Millionenumsätze dranhingen, Fehler teuer waren und Performance nicht optional war.
                </p>
              </Reveal>
              <div className="grid grid-cols-2 gap-4">
                {['Schnell', 'Stabil', 'Boring', 'Erweiterbar', 'Wartungsarm', 'Unabhängig'].map((item, i) => (
                  <Reveal key={i} delay={0.2 + i * 0.05}>
                    <div className="flex items-center gap-2 text-slate-900 font-bold text-sm uppercase tracking-widest">
                      <Check className="w-4 h-4 text-slate-400" />
                      {item}
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
            <Reveal delay={0.3}>
              <div className="relative p-10 bg-slate-900 text-white rounded-3xl overflow-hidden group">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 -translate-y-16 translate-x-16 rounded-full blur-3xl group-hover:bg-white/10 transition-colors" />
                <h4 className="text-2xl font-bold mb-6 relative z-10">Das prägt.</h4>
                <p className="text-slate-400 font-serif italic text-lg relative z-10">
                  Meine Websites sind nicht abhängig von Plugins oder Agenturen. Sie sind gebaut, um zu bleiben.
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 04: Roles */}
      <Section
        number="04"
        title="Perspektive"
        variant="gray"
        borderTop
        connector={<ConnectorBranch className="h-full" />}
        illustration={<ConceptTarget className="w-32 h-32" />}
      >
        <div className="space-y-12">
          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Ich habe beide Seiten gesehen.
            </h3>
          </Reveal>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              'Webdesigner', 'Entwickler', 'Marketing', 'Vertrieb',
              'Agentur', 'Inhouse', 'Dienstleister', 'Unternehmer'
            ].map((role, i) => (
              <Reveal key={i} delay={i * 0.05}>
                <div className="p-4 bg-white border border-slate-100 rounded-xl text-center hover:border-slate-300 transition-colors group">
                  <span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-colors">{role}</span>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={0.4}>
            <p className="text-2xl text-slate-600 font-serif italic max-w-2xl">
              Ich weiß, was Unternehmen brauchen – und was sie nicht brauchen. (Meetings, Tickets, Workshops, PowerPoint.)
            </p>
          </Reveal>
        </div>
      </Section>

      {/* Section 05: Result */}
      <Section
        number="05"
        title="Ergebnis"
        borderTop
        connector={<ConnectorBranch className="h-full" />}
        illustration={<ResultIllustration className="w-32 h-32" />}
      >
        <div className="space-y-16">
          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Was Kunden davon haben.
            </h3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="space-y-8">
              <div className="space-y-4">
                <span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Sie bekommen kein:</span>
                <div className="flex flex-wrap gap-3">
                  {['Projektmanager', 'Prozess', 'Team', 'Ticket', 'CMS-Drama'].map((item, i) => (
                    <span key={i} className="px-4 py-2 border border-slate-100 rounded-full text-slate-400 line-through text-sm italic font-serif">
                      {item}
                    </span>
                  ))}
                </div>
              </div>
            </div>
            <div className="space-y-8">
              <div className="space-y-4">
                <span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-900">Sie bekommen:</span>
                <div className="space-y-4">
                  {[
                    { label: 'Eine Person', desc: 'Direkter Kontakt, keine Stille Post.' },
                    { label: 'Eine Verantwortung', desc: 'Ich stehe für das Ergebnis gerade.' },
                    { label: 'Ein Ergebnis', desc: 'Funktionierende Systeme, keine Ausreden.' }
                  ].map((item, i) => (
                    <Reveal key={i} delay={0.2 + i * 0.1}>
                      <div className="flex gap-4 items-start">
                        <div className="w-6 h-6 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1">
                          <Check className="w-3 h-3 text-white" />
                        </div>
                        <div>
                          <div className="font-bold text-slate-900">{item.label}</div>
                          <div className="text-slate-500 text-sm font-serif italic">{item.desc}</div>
                        </div>
                      </div>
                    </Reveal>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Section 06: Today */}
      <Section
        number="06"
        title="Heute"
        variant="gray"
        borderTop
        connector={<ConnectorEnd className="h-full" />}
        illustration={<ContactIllustration className="w-32 h-32" />}
      >
        <div className="space-y-12">
          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Heute baue ich Websites für Unternehmen, die keine Lust mehr auf Chaos haben.
            </h3>
          </Reveal>

          <div className="p-12 bg-white rounded-[3rem] border border-slate-100 shadow-2xl shadow-slate-200/50 relative overflow-hidden group">
            <div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -translate-y-32 translate-x-32 rounded-full blur-3xl group-hover:bg-slate-100 transition-colors" />
            
            <div className="relative z-10 space-y-8">
              <p className="text-2xl text-slate-600 font-serif italic leading-relaxed max-w-2xl">
                Ich übernehme das Thema komplett – damit es für Sie kein Thema mehr ist.
              </p>
              
              <div className="pt-8">
                <a
                  href="/contact"
                  className="inline-flex items-center gap-4 px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 group"
                >
                  Projekt anfragen
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}