'use client';

import { Info, Check, Zap, Shield, Code, MessageSquare, RefreshCw, Layout, ArrowRight } from 'lucide-react';
import { PageHeader } from '../../src/components/PageHeader';
import { Reveal } from '../../src/components/Reveal';
import { Section } from '../../src/components/Section';
import { 
  ConceptSystem, 
  ConceptCode, 
  ConceptWebsite, 
  ConceptAutomation, 
  ConceptCommunication,
  ConceptMessy,
  ConceptTarget
} from '../../src/components/Landing/Illustrations';
import { motion } from 'framer-motion';

export default function WebsitesPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      {/* Subtle Grid Pattern Overlay */}
      <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'
      }} />

      <PageHeader
        title={<>Websites, die <br /><span className="text-slate-300">einfach funktionieren.</span></>}
        description="Die meisten Websites funktionieren. Bis jemand sie anfasst. Ich baue Websites so, dass das alles egal ist."
        backLink={{ href: '/', label: 'Zurück' }}
        backgroundSymbol="W"
      />

      {/* Intro / Problem */}
      <Section 
        number="01" 
        title="Der Ansatz"
        borderTop
        illustration={<ConceptSystem className="w-16 h-16" />}
      >
        <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 wie Systeme – <br />
              <span className="text-slate-300 font-serif italic">nicht wie Broschüren.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
              Eine Website ist kein Flyer. Sie ist ein System, das jeden Tag arbeitet. 
              Deshalb baue ich sie stabil, schnell und vorhersehbar.
            </p>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
              {[
                { label: 'Stabil', icon: Shield },
                { label: 'Schnell', icon: Zap },
                { label: 'Vorhersehbar', icon: Layout },
                { label: 'Sicher', icon: Info },
              ].map((item, i) => (
                <div key={i} className="flex flex-col gap-3">
                  <item.icon className="w-5 h-5 text-slate-300" />
                  <span className="text-[10px] font-bold uppercase tracking-widest text-slate-900">{item.label}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Speed */}
      <Section 
        number="02" 
        title="Performance"
        borderTop
        illustration={<ConceptTarget className="w-16 h-16" />}
      >
        <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">
              Geschwindigkeit ist <br />
              <span className="text-slate-300 font-serif italic">kein Extra. Sie ist Standard.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
              Viele Websites sind langsam, weil sie zusammengeklickt sind. Meine sind schnell, weil sie gebaut sind.
            </p>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 pt-8">
            <Reveal delay={0.4}>
              <ul className="space-y-6">
                {[
                  'Seiten laden sofort',
                  'Google mag sie (SEO)',
                  'Besucher bleiben länger',
                  'Bessere Sichtbarkeit',
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-4 text-lg text-slate-600 font-serif italic">
                    <div className="w-1.5 h-1.5 bg-slate-900 rounded-full" />
                    {item}
                  </li>
                ))}
              </ul>
            </Reveal>
            <Reveal delay={0.6}>
              <div className="p-10 bg-slate-50 rounded-3xl border border-slate-100 flex flex-col justify-center items-center text-center group">
                <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-500">90+</div>
                <div className="text-slate-400 font-serif italic text-lg mt-4">Pagespeed Normalzustand</div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* No Maintenance */}
      <Section 
        number="03" 
        title="Wartungsfrei"
        borderTop
        illustration={<ConceptCode className="w-16 h-16" />}
      >
        <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">
              Keine Plugins. <br />
              <span className="text-slate-300 font-serif italic">Keine Wartungshölle.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
              Ich nutze keine Baukästen oder Plugin-Sammlungen, die sich selbst zerstören. 
              Ihre Website besteht aus sauberem Code und einer klaren Struktur.
            </p>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
              <div className="p-8 bg-white border border-slate-100 rounded-2xl shadow-sm hover:border-slate-300 transition-colors">
                <div className="font-bold text-slate-900 mb-2 uppercase tracking-widest text-[10px]">Technik</div>
                <p className="text-slate-500 font-serif italic">Sauberer Code & feste Bausteine.</p>
              </div>
              <div className="p-8 bg-white border border-slate-100 rounded-2xl shadow-sm hover:border-slate-300 transition-colors">
                <div className="font-bold text-slate-900 mb-2 uppercase tracking-widest text-[10px]">Sicherheit</div>
                <p className="text-slate-500 font-serif italic">Wenn etwas geändert wird, geht nichts kaputt.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Content/Tech Separation */}
      <Section 
        number="04" 
        title="Inhalte"
        borderTop
        illustration={<ConceptAutomation className="w-16 h-16" />}
      >
        <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">
              Inhalte & Technik <br />
              <span className="text-slate-300 font-serif italic">sind getrennt. Absichtlich.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
              Sie können Inhalte selbst pflegen, ohne das Design oder die Technik zu gefährden. 
              Sie können nichts kaputt machen. Ich verspreche es.
            </p>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="flex flex-wrap gap-12 pt-8">
              <div className="space-y-4">
                <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Was Sie tun</div>
                <div className="flex items-center gap-3 text-xl font-bold text-slate-900">
                  <Check className="w-5 h-5" />
                  Inhalte pflegen
                </div>
              </div>
              <div className="space-y-4 opacity-30">
                <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Was Sie ignorieren</div>
                <div className="flex flex-col gap-2">
                  <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Design</div>
                  <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Struktur</div>
                  <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Technik</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Simple Changes */}
      <Section 
        number="05" 
        title="Service"
        borderTop
        illustration={<ConceptCommunication className="w-16 h-16" />}
      >
        <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">
              Änderungen sind <br />
              <span className="text-slate-300 font-serif italic">einfach. Wirklich.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
              Neue Seite? Neue Funktion? Neue Idee? <br />
              Kein Ticket. Kein Formular. Kein Projektplan.
            </p>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-8">
              <div className="p-10 bg-white border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-500 group">
                <MessageSquare className="w-10 h-10 text-slate-200 group-hover:text-slate-900 transition-colors mb-6" />
                <h4 className="text-2xl font-bold text-slate-900 mb-2">Kurze Wege</h4>
                <p className="text-slate-500 font-serif italic">Sie schreiben mir, was Sie brauchen.</p>
              </div>
              <div className="p-10 bg-white border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-500 group">
                <RefreshCw className="w-10 h-10 text-slate-200 group-hover:text-slate-900 transition-colors mb-6" />
                <h4 className="text-2xl font-bold text-slate-900 mb-2">Schnelle Umsetzung</h4>
                <p className="text-slate-500 font-serif italic">Ich setze es um. Fertig.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Why */}
      <Section 
        number="06" 
        title="Warum"
        borderTop
        illustration={<ConceptMessy className="w-16 h-16" />}
      >
        <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">
              15 Jahre Agenturen <br />
              <span className="text-slate-300 font-serif italic">waren genug.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
              Zu viele Meetings. Zu viele Konzepte. Zu viele Übergaben. Zu viele „eigentlich müsste man mal“. 
              Meine Websites sind dafür gebaut, dass Dinge einfach passieren.
            </p>
          </Reveal>
        </div>
      </Section>

      {/* Result */}
      <Section
        number="07"
        title="Ergebnis"
        borderTop
        variant="gray"
      >
        <div className="space-y-16">
          <Reveal>
            <h2 className="text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
              Eine Website, die sich wie eine <br />
              <span className="text-slate-300 font-serif italic">erledigte Aufgabe</span> anfühlt.
            </h2>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {[
              { title: 'Kein Stress', desc: 'Keine Wartungspflicht, keine Überraschungen.' },
              { title: 'Keine Abhängigkeit', desc: 'Sauberer Code, der Ihnen gehört.' },
              { title: 'Keine Agentur', desc: 'Direkter Kontakt, schnelle Ergebnisse.' },
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="space-y-4">
                  <div className="text-2xl font-bold tracking-tight text-slate-900">{item.title}</div>
                  <p className="text-slate-500 font-serif italic text-lg">{item.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={0.4}>
            <div className="pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
              <div className="space-y-2">
                <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Technik</div>
                <p className="text-slate-500 font-serif italic text-lg">
                  Modern, sicher, schnell. Aber das ist mein Problem, nicht Ihres.
                </p>
              </div>
              <motion.a 
                href="/contact"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="inline-flex items-center gap-4 px-12 py-6 bg-slate-900 text-white rounded-full font-bold uppercase tracking-widest text-xs hover:bg-slate-800 transition-colors group"
              >
                Projekt anfragen
                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </motion.a>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}