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

export default function WebsitesPage() {
  return (
    <div className="flex flex-col gap-24 py-20 md:py-32">
      {/* Header */}
      <section className="narrow-container">
        <Link href="/" className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-mono text-xs uppercase tracking-widest">
          <ArrowLeft className="w-3 h-3" /> Zurück
        </Link>
        <h1 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tight mb-8 leading-tight">
          Websites & Preise
        </h1>
        <p className="text-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
          Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen.
        </p>
      </section>

      {/* 1. Website - Fixpreis */}
      <section className="narrow-container">
        <div className="border-t-4 border-slate-900 pt-12">
          <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-8">1. Website – Fixpreis</h2>
          <div className="flex flex-col md:flex-row md:items-baseline gap-4 mb-12">
            <div className="text-6xl font-bold text-slate-900">6.000 €</div>
            <div className="text-slate-400 font-serif italic text-xl">einmalige Basis</div>
          </div>
          
          <div className="space-y-10">
            <p className="text-xl text-slate-700 font-serif leading-relaxed">
              Die Grundlage für jede Website:
            </p>
            <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4">
              {[
                'Projekt-Setup & Infrastruktur',
                'Hosting-Bereitstellung',
                'Grundstruktur & Design-Vorlage',
                'technisches SEO-Basics',
                'Analytics (mit Mail-Report)',
                'Livegang',
              ].map((item, i) => (
                <li key={i} className="flex items-center gap-3 border-b border-slate-50 pb-2">
                  <Check className="w-4 h-4 text-slate-900 shrink-0" />
                  <span className="text-slate-600 font-serif">{item}</span>
                </li>
              ))}
            </ul>
            <div className="pt-8 flex items-start gap-3 text-sm text-slate-400 italic font-serif">
              <Info className="w-4 h-4 shrink-0 mt-0.5 text-slate-300" />
              <p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</p>
            </div>
          </div>
        </div>
      </section>

      {/* 2. Entwicklung (Produktion) */}
      <section className="narrow-container">
        <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-12">2. Entwicklung (Produktion)</h2>
        <div className="space-y-16">
          {/* Seite */}
          <div className="group">
            <div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
              <h3 className="text-2xl font-bold text-slate-900">Seite</h3>
              <div className="text-2xl font-bold text-slate-900">800 €</div>
            </div>
            <p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl">
              Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
            </p>
          </div>

          {/* Feature */}
          <div className="group">
            <div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
              <h3 className="text-2xl font-bold text-slate-900">Feature (System)</h3>
              <div className="text-2xl font-bold text-slate-900">2.000 €</div>
            </div>
            <p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-6">
              Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
            </p>
            <div className="flex flex-wrap gap-x-4 gap-y-2">
              {['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
                <span key={tag} className="text-xs font-mono uppercase tracking-widest text-slate-400">{tag}</span>
              ))}
            </div>
          </div>

          {/* Funktion */}
          <div className="group">
            <div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
              <h3 className="text-2xl font-bold text-slate-900">Funktion (Logik)</h3>
              <div className="text-2xl font-bold text-slate-900">1.000 €</div>
            </div>
            <p className="text-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-8">
              Funktionen liefern Logik und Interaktion.
            </p>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm font-mono uppercase tracking-wider text-slate-400">
              <div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Kontaktformular</div>
              <div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Suche & Filter</div>
              <div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> PDF-Export</div>
              <div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> API-Anbindungen</div>
              <div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Mailversand</div>
              <div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Automatisierung</div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Design & Interaktion */}
      <section className="narrow-container">
        <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-12">3. Design & Interaktion (Extras)</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          <div>
            <h3 className="font-bold text-slate-900 mb-2 text-lg">Visuelle Inszenierung</h3>
            <div className="text-slate-900 font-bold mb-4 text-xl">2.000 € <span className="text-sm text-slate-400 font-normal">/ Abschnitt</span></div>
            <p className="text-slate-500 font-serif leading-relaxed">
              Erweiterte Gestaltung: Hero-Story, visuelle Abläufe, Scroll-Effekte, speziell inszenierte Sektionen.
            </p>
          </div>
          <div>
            <h3 className="font-bold text-slate-900 mb-2 text-lg">Komplexe Interaktion</h3>
            <div className="text-slate-900 font-bold mb-4 text-xl">1.500 € <span className="text-sm text-slate-400 font-normal">/ Interaktion</span></div>
            <p className="text-slate-500 font-serif leading-relaxed">
              Dargestellte, interaktive UI-Erlebnisse: Konfiguratoren, Live-Previews, mehrstufige Auswahlprozesse.
            </p>
          </div>
        </div>
      </section>

      {/* 5. Betrieb & Wartung */}
      <section className="narrow-container">
        <div className="bg-slate-50 p-12 rounded-sm border border-slate-100">
          <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-8">5. Betrieb & Wartung (Pflicht)</h2>
          <div className="flex items-baseline gap-2 mb-10">
            <div className="text-5xl font-bold text-slate-900">120 €</div>
            <div className="text-slate-400 font-serif italic text-xl">/ Monat</div>
          </div>
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-slate-600 font-serif">
            <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Webhosting & Verfügbarkeit</li>
            <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Sicherheitsupdates & Backups</li>
            <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Analytics inkl. Reports</li>
            <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Medien-Speicher (20 GB)</li>
          </ul>
        </div>
      </section>

      {/* CTA */}
      <section className="narrow-container text-center py-20 border-t border-slate-100">
        <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-8 tracking-tight">Bereit für ein Projekt?</h2>
        <p className="text-xl text-slate-500 font-serif mb-12 leading-relaxed">
          Schreiben Sie mir einfach, was Sie vorhaben. <br />
          Ich erstelle Ihnen ein passendes Angebot.
        </p>
        <a 
          href="mailto:marc@mintel.me" 
          className="inline-flex items-center gap-3 bg-slate-900 text-white px-10 py-5 rounded-sm font-bold text-lg hover:bg-slate-800 transition-colors"
        >
          <Mail className="w-5 h-5" />
          Anfrage senden
        </a>
      </section>
    </div>
  );
}