import React from 'react';
import { Info, ArrowLeft, Mail, Minus } from 'lucide-react';
import Link from 'next/link';

export default function WebsitesPage() {
  return (
    <div className="flex flex-col gap-48 py-24 md:py-48 overflow-hidden">
      {/* Header - Designed */}
      <section className="narrow-container relative">
        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">€</div>
        <Link href="/" className="inline-flex items-center gap-2 text-slate-300 hover:text-slate-900 mb-16 transition-colors font-mono text-xs uppercase tracking-[0.3em]">
          <ArrowLeft className="w-3 h-3" /> Zurück
        </Link>
        <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] mb-12">
          Websites <br />
          <span className="text-slate-200">& Preise.</span>
        </h1>
        <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
          Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen.
        </p>
      </section>

      {/* 1. Website - Designed Pricing */}
      <section className="narrow-container relative">
        <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div>
        <div className="space-y-20">
          <div className="border-l-4 border-slate-900 pl-12 py-4">
            <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Die Basis</h2>
            <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 font-bold text-slate-900 leading-tight tracking-tight">
              Die Grundlage für jede Website.
            </p>
          </div>
          
          <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>
          <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>
        </div>
      </section>

      {/* 2. Entwicklung - Designed Grid */}
      <section className="narrow-container relative">
        <div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">02</div>
        <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Produktion</h2>
        <div className="space-y-32">
          {/* Seite */}
          <div className="relative group">
            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
            <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
              <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Seite</h3>
              <div className="text-4xl font-bold text-slate-900 tracking-tighter">800 €</div>
            </div>
            <p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl">
              Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
            </p>
          </div>

          {/* Feature */}
          <div className="relative group">
            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">F</div>
            <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
              <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Feature</h3>
              <div className="text-4xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
            </div>
            <p className="text-2xl text-slate-500 font-serif leading-relaxed 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-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
              ))}
            </div>
          </div>

          {/* Funktion */}
          <div className="relative group">
            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">L</div>
            <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
              <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
              <div className="text-4xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
            </div>
            <p className="text-2xl text-slate-500 font-serif leading-relaxed 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-sm 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>
        </div>
      </section>

      {/* 5. Betrieb - Designed Box */}
      <section className="narrow-container relative">
        <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">03</div>
        <div className="bg-slate-900 text-white p-16 md:p-24 space-y-16 relative overflow-hidden">
          <div className="absolute top-0 right-0 text-[20rem] font-bold text-white/5 select-none translate-x-1/4 -translate-y-1/4">B</div>
          <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-500">Betrieb</h2>
          <div className="flex items-baseline gap-6">
            <div className="text-7xl md:text-9xl font-bold tracking-tighter">120 €</div>
            <div className="text-slate-500 font-serif italic text-2xl">/ Monat</div>
          </div>
          <p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight">
            Hosting, Wartung & Sicherheit. <br />
            <span className="text-slate-500">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-white/10">
            {[
              '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-400 font-serif">
                <div className="w-1.5 h-1.5 bg-white rounded-full"></div>
                <span>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA - Designed Impact */}
      <section className="narrow-container text-center py-32 border-t border-slate-100">
        <h2 className="text-6xl md:text-8xl font-bold text-slate-900 mb-12 tracking-tighter">Bereit?</h2>
        <p className="text-2xl md:text-3xl text-slate-500 font-serif mb-20 leading-tight italic max-w-xl mx-auto">
          Schreiben Sie mir einfach, was Sie vorhaben. Ich erstelle Ihnen ein passendes Angebot.
        </p>
        <a 
          href="mailto:marc@mintel.me" 
          className="inline-flex items-center gap-6 bg-slate-900 text-white px-12 py-6 font-bold text-2xl hover:bg-slate-800 transition-all hover:scale-[1.05]"
        >
          <Mail className="w-8 h-8" />
          Anfrage senden
        </a>
      </section>
    </div>
  );
}