"use client";

import { Phone, Mail, MapPin, Clock } from "lucide-react";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import Button from "@/components/ui/Button";
import { CONTACT } from "@/lib/constants";

export default function ContactSection() {
  return (
    <section id="kontakt" className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="contact-heading">
      <Container>
        <SectionHeading
          title="Sprechen Sie mit uns"
          subtitle="Rufen Sie an, schreiben Sie uns — oder kommen Sie einfach in Reutte vorbei."
        />
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2" id="contact-heading">
          {/* Contact Info */}
          <div>
            <h3 className="text-lg font-semibold text-neutral-900">Direkt erreichen</h3>
            <p className="mt-2 text-neutral-600 leading-relaxed">
              Kein Callcenter, keine automatische Weiterleitung. Bei uns landen Sie direkt bei den richtigen Leuten.
            </p>
            <div className="mt-8 space-y-6">
              <a
                href={`tel:${CONTACT.phone.replace(/\s/g, "")}`}
                className="flex items-center gap-4 group"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 transition-colors group-hover:bg-primary-200">
                  <Phone className="h-5 w-5 text-primary-700" aria-hidden="true" />
                </div>
                <div>
                  <p className="text-sm text-neutral-500">Telefon</p>
                  <p className="font-semibold text-neutral-900">{CONTACT.phone}</p>
                </div>
              </a>
              <a
                href={`mailto:${CONTACT.email}`}
                className="flex items-center gap-4 group"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 transition-colors group-hover:bg-primary-200">
                  <Mail className="h-5 w-5 text-primary-700" aria-hidden="true" />
                </div>
                <div>
                  <p className="text-sm text-neutral-500">E-Mail</p>
                  <p className="font-semibold text-neutral-900">{CONTACT.email}</p>
                </div>
              </a>
              <div className="flex items-center gap-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100">
                  <MapPin className="h-5 w-5 text-primary-700" aria-hidden="true" />
                </div>
                <div>
                  <p className="text-sm text-neutral-500">Adresse</p>
                  <address className="not-italic font-semibold text-neutral-900">
                    {CONTACT.address[1]}, {CONTACT.address[2]}
                  </address>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100">
                  <Clock className="h-5 w-5 text-primary-700" aria-hidden="true" />
                </div>
                <div>
                  <p className="text-sm text-neutral-500">Öffnungszeiten</p>
                  <p className="font-semibold text-neutral-900">Mo–Fr: 8:00–17:00 Uhr</p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="rounded-card bg-white p-8 shadow-sm border border-neutral-200">
            <h3 className="text-lg font-semibold text-neutral-900">Nachricht senden</h3>
            <p className="mt-1 text-sm text-neutral-500">Wir melden uns zeitnah bei Ihnen.</p>
            <form className="mt-6 space-y-4" action={`mailto:${CONTACT.email}`} method="POST" encType="text/plain">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-neutral-700">
                  Name
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  required
                  className="mt-1 block w-full rounded-lg border border-neutral-300 px-4 py-3 text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
                  placeholder="Ihr Name"
                />
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-neutral-700">
                  E-Mail
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  required
                  className="mt-1 block w-full rounded-lg border border-neutral-300 px-4 py-3 text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
                  placeholder="ihre@email.at"
                />
              </div>
              <div>
                <label htmlFor="phone-field" className="block text-sm font-medium text-neutral-700">
                  Telefon <span className="text-neutral-400">(optional)</span>
                </label>
                <input
                  type="tel"
                  id="phone-field"
                  name="phone"
                  className="mt-1 block w-full rounded-lg border border-neutral-300 px-4 py-3 text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
                  placeholder="+43 ..."
                />
              </div>
              <div>
                <label htmlFor="message" className="block text-sm font-medium text-neutral-700">
                  Nachricht
                </label>
                <textarea
                  id="message"
                  name="message"
                  rows={4}
                  required
                  className="mt-1 block w-full rounded-lg border border-neutral-300 px-4 py-3 text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none"
                  placeholder="Wie können wir Ihnen helfen?"
                />
              </div>
              <Button type="submit" variant="primary" size="md" className="w-full">
                Nachricht absenden
              </Button>
            </form>
          </div>
        </div>
      </Container>
    </section>
  );
}
