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

export default function ContactPage() {
  return (
    <div className="flex flex-col gap-12 py-12 md:py-24">
      <PageHeader
        title={
          <>
            Projekt <br />
            <span className="text-slate-200">konfigurieren.</span>
          </>
        }
        description="Nutzen Sie den Konfigurator für eine erste Einschätzung oder schreiben Sie mir direkt eine Email."
        backLink={{ href: "/", label: "Zurück" }}
        backgroundSymbol="?"
      />

      <Section title="Konfigurator" containerVariant="wide" className="!py-12">
        <ContactForm />
      </Section>

      <Section title="Direkt" className="!py-12">
        <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>
        </div>
      </Section>
    </div>
  );
}