import { Info, Minus } from 'lucide-react';
import { PageHeader } from '../../src/components/PageHeader';
import { Reveal } from '../../src/components/Reveal';
import { Section } from '../../src/components/Section';

export default function WebsitesPage() {
  return (
    <div className="flex flex-col gap-48 py-12 md:py-24 overflow-hidden">
      <PageHeader 
        title={<>Websites <br /><span className="text-slate-200">& Preise.</span></>}
        description="Ich baue Websites mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen."
        backLink={{ href: '/', label: 'Zurück' }}
        backgroundSymbol="€"
      />

      {/* 1. Website - Designed Pricing */}
      <Section number="01" title="Die Basis">
        <div className="space-y-20">
          <Reveal>
            <div className="border-l-4 border-slate-900 pl-12 py-6">
              <div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
                <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
                <div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
              </div>
              <p className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tighter">
                Die Grundlage für jede Website.
              </p>
            </div>
          </Reveal>
          
          <Reveal delay={0.2}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
              {[
                'Projekt-Setup & Infrastruktur',
                'Hosting-Bereitstellung',
                'Grundstruktur & Design-Vorlage',
                'technisches SEO-Basics',
                'Analytics (mit Mail-Report)',
                'Livegang',
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif border-b border-slate-100 pb-4">
                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="pt-12 flex items-start gap-4 text-sm text-slate-400 italic font-serif max-w-md">
              <Info className="w-5 h-5 shrink-0 mt-0.5 text-slate-200" />
              <p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</p>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* 2. Entwicklung - Designed Grid */}
      <Section number="02" title="Produktion">
        <div className="space-y-32">
          {/* Seite */}
          <Reveal>
            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">S</div>
              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Seite</h3>
                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">800 €</div>
              </div>
              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
                Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
              </p>
            </div>
          </Reveal>

          {/* Feature */}
          <Reveal delay={0.2}>
            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">F</div>
              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Feature</h3>
                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
              </div>
              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
                Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
              </p>
              <div className="flex flex-wrap gap-x-8 gap-y-4">
                {['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
                  <span key={tag} className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-300 hover:text-slate-900 transition-colors cursor-default">{tag}</span>
                ))}
              </div>
            </div>
          </Reveal>

          {/* Funktion */}
          <Reveal delay={0.4}>
            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">L</div>
              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
              </div>
              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
                Funktionen liefern Logik und Interaktion.
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-6 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Kontaktformular</div>
                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Suche & Filter</div>
                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> PDF-Export</div>
                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> API-Anbindungen</div>
                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Mailversand</div>
                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Automatisierung</div>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* 5. Betrieb - Designed Box */}
      <Section number="03" title="Betrieb">
        <Reveal width="100%">
          <div className="bg-white border border-slate-200 rounded-[3rem] p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24 hover:border-slate-400 transition-all duration-500">
            <div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">B</div>
            <div className="flex items-baseline gap-6">
              <div className="text-7xl md:text-9xl font-bold tracking-tighter text-slate-900">120 €</div>
              <div className="text-slate-400 font-serif italic text-2xl">/ Monat</div>
            </div>
            <p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight text-slate-900">
              Hosting, Wartung & Sicherheit. <br />
              <span className="text-slate-400">Damit Sie sich um nichts kümmern müssen.</span>
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8 pt-12 border-t border-slate-200">
              {[
                'Webhosting & Verfügbarkeit',
                'Sicherheitsupdates & Backups',
                'Analytics inkl. Reports',
                'Medien-Speicher (20 GB)',
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif">
                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </Section>
    </div>
  );
}