import { PageHeader } from "../../src/components/PageHeader";
import { Reveal } from "../../src/components/Reveal";
import { Section } from "../../src/components/Section";
import { H3, LeadText, Label } from "../../src/components/Typography";
import { Card } from "../../src/components/Layout";
import { ContactForm } from "../../src/components/ContactForm";
import { GradientMesh, AbstractCircuit } from "../../src/components/Effects";

export default function ContactPage() {
  return (
    <div className="flex flex-col bg-white min-h-screen overflow-hidden relative">
      <AbstractCircuit />

      <PageHeader
        title={
          <>
            Kontakt<span className="text-slate-200">.</span>
          </>
        }
        description="Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich zeitnah bei Ihnen."
        backgroundSymbol="@"
      />

      <Section
        borderTop
        effects={
          <>
            <GradientMesh variant="metallic" className="opacity-70" />
          </>
        }
      >
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 lg:gap-24">
          {/* Form */}
          <div className="lg:col-span-7">
            <Reveal>
              <Card
                variant="glass"
                padding="normal"
                className="relative overflow-hidden p-5 md:p-12"
              >
                <ContactForm />
              </Card>
            </Reveal>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-5 space-y-4 md:space-y-8">
            <Reveal delay={0.2}>
              <Card
                variant="glass"
                padding="normal"
                techBorder
                className="group"
              >
                <div className="space-y-3 md:space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <Label className="text-slate-900 text-xs md:text-sm">
                      Verfügbarkeit
                    </Label>
                  </div>
                  <LeadText className="text-lg md:text-xl text-slate-400">
                    Aktuell nehme ich Projekte für{" "}
                    <span className="text-slate-900 font-bold">Q2 2026</span>{" "}
                    an.
                  </LeadText>
                </div>
              </Card>
            </Reveal>

            <Reveal delay={0.3}>
              <Card variant="glass" padding="normal" className="group">
                <div className="space-y-3 md:space-y-4">
                  <Label className="text-slate-900 text-xs md:text-sm">
                    Direkt per E-Mail
                  </Label>
                  <a
                    href="mailto:marc@mintel.me"
                    className="block text-lg md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
                  >
                    marc@mintel.me
                  </a>
                </div>
              </Card>
            </Reveal>

            <Reveal delay={0.4}>
              <div className="p-5 md:p-6 space-y-2 md:space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
                <Label className="text-slate-400 text-xs md:text-sm">
                  Antwortzeit
                </Label>
                <H3 className="text-lg md:text-2xl text-slate-300">
                  <span className="text-slate-900">&lt; 24h</span> an Werktagen.
                </H3>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>
    </div>
  );
}