"use client";

import { useConfiguratorStore } from "@/lib/store";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { User, Mail, Phone, MessageSquare } from "lucide-react";

export function StepContact() {
  const { name, email, phone, note, setName, setEmail, setPhone, setNote } =
    useConfiguratorStore();

  return (
    <div>
      <h2 className="mb-2 text-xl font-semibold">Contactgegevens</h2>
      <p className="mb-6 text-sm text-muted-foreground">
        Vul uw gegevens in zodat wij u een offerte kunnen sturen.
      </p>

      <div className="grid gap-5">
        <div className="space-y-2">
          <Label htmlFor="name" className="flex items-center gap-2">
            <User className="size-4 text-brand-orange" />
            Naam
          </Label>
          <Input
            id="name"
            placeholder="Uw volledige naam"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="h-11 focus-visible:ring-brand-orange"
          />
        </div>

        <div className="grid gap-5 sm:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="email" className="flex items-center gap-2">
              <Mail className="size-4 text-brand-orange" />
              E-mail
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="naam@bedrijf.nl"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="h-11 focus-visible:ring-brand-orange"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="phone" className="flex items-center gap-2">
              <Phone className="size-4 text-brand-orange" />
              Telefoon
            </Label>
            <Input
              id="phone"
              type="tel"
              placeholder="06 1234 5678"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              className="h-11 focus-visible:ring-brand-orange"
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="note" className="flex items-center gap-2">
            <MessageSquare className="size-4 text-brand-orange" />
            Opmerking
            <span className="text-xs font-normal text-muted-foreground">(optioneel)</span>
          </Label>
          <textarea
            id="note"
            rows={3}
            placeholder="Bijv. specifieke wensen, RAL-kleur, plaatsing..."
            value={note}
            onChange={(e) => setNote(e.target.value)}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
          />
        </div>
      </div>
    </div>
  );
}