import * as React from 'react';
import { Reveal } from '../../src/components/Reveal';
import { PageHeader } from '../../src/components/PageHeader';
import { Section } from '../../src/components/Section';

export default function ContactPage() {
  return (
    <div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
      <PageHeader 
        title={<>Kontakt <br /><span className="text-slate-200">& Anfrage.</span></>}
        description="Haben Sie ein Projekt im Kopf? Schreiben Sie mir einfach. Ich antworte meistens innerhalb von 24 Stunden."
        backLink={{ href: '/', label: 'Zurück' }}
        backgroundSymbol="@"
      />

      <Section number="01" title="Direkt">
        <div className="grid grid-cols-1 gap-24">
          <Reveal delay={0.4}>
            <div className="space-y-8">
              <a 
                href="mailto:marc@mintel.me" 
                className="group block space-y-2"
              >
                <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">Email</span>
                <p className="text-3xl md:text-6xl font-bold text-slate-900 border-b border-slate-100 group-hover:border-slate-900 transition-all duration-500 pb-6 tracking-tighter">
                  marc@mintel.me
                </p>
              </a>
            </div>
          </Reveal>

          <Reveal delay={0.6}>
            <div className="p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white relative overflow-hidden hover:border-slate-400 transition-all duration-500">
              <div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">!</div>
              <div className="relative z-10 space-y-8">
                <h2 className="text-2xl font-bold text-slate-900">Was ich von Ihnen brauche:</h2>
                <ul className="space-y-6 text-xl md:text-2xl text-slate-600 font-serif italic">
                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">01</span> Was ist das Ziel des Projekts?</li>
                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">02</span> Gibt es eine Deadline?</li>
                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">03</span> Welches Budget ist eingeplant?</li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}