"use client";

import { ArrowRight, Check, Clock, Mail, MapPin } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type FormEvent, useState } from "react";
import { cn } from "@/lib/utils";
import { TwoToneHeading } from "./two-tone-heading";

const APPLE_EASE = [0.22, 1, 0.36, 1] as const;
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const INFO_CARDS = [
  {
    icon: Mail,
    label: "Email us",
    value: "hello@company.com",
    href: "mailto:hello@company.com",
  },
  {
    icon: Clock,
    label: "Response time",
    value: "Within 24 hours",
  },
  {
    icon: MapPin,
    label: "Location",
    value: "San Francisco, CA",
  },
] as const;

const SUBJECT_OPTIONS = ["General inquiry", "Sales & pricing", "Technical support", "Partnership", "Press & media"];

export function ContactApple() {
  const prefersReduced = useReducedMotion();

  return (
    <section className="relative w-full overflow-hidden bg-background py-24 md:py-32 lg:py-40">
      {/* Background */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.1),transparent)] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.08),transparent)]" />
        <div
          className="absolute inset-0 opacity-[0.015] dark:opacity-[0.03]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
          }}
        />
        <div
          className="absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
          style={{
            backgroundImage: "radial-gradient(circle at center, hsl(var(--foreground) / 0.08) 1px, transparent 1px)",
            backgroundSize: "24px 24px",
          }}
        />
        <div className="absolute top-0 right-0 left-0 h-40 bg-gradient-to-b from-background to-transparent" />
        <div className="absolute right-0 bottom-0 left-0 h-40 bg-gradient-to-t from-background to-transparent" />
      </div>

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-5xl px-6">
        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
          {/* Left Column */}
          <motion.div
            className="flex flex-col gap-8"
            initial={prefersReduced ? false : { opacity: 0, y: 24 }}
            transition={{ duration: 0.8, delay: 0.1, ease: APPLE_EASE }}
            viewport={{ once: true, margin: "-80px" }}
            whileInView={{ opacity: 1, y: 0 }}
          >
            <div className="flex flex-col gap-4">
              <span className="font-medium text-muted-foreground/60 text-xs uppercase tracking-widest">
                Get in Touch
              </span>
              <TwoToneHeading
                align="left"
                as="h2"
                className="text-balance font-semibold text-3xl leading-[1.1] tracking-[-0.035em] sm:text-4xl md:text-5xl"
                primaryText="Let's build something"
                secondaryText="together."
              />
              <p className="mt-1 max-w-sm text-pretty text-base text-muted-foreground leading-[1.6]">
                Have a project in mind? We'd love to hear about it. Send us a message and we'll get back to you
                promptly.
              </p>
            </div>

            <div className="flex flex-col gap-3">
              {INFO_CARDS.map((card, i) => (
                <motion.div
                  className={cn(
                    "flex items-center gap-4 rounded-xl px-4 py-3.5 transition-shadow duration-200",
                    "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]",
                    "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(255,255,255,0.03),0px_2px_4px_0px_rgba(0,0,0,0.2)]"
                  )}
                  initial={prefersReduced ? false : { opacity: 0, y: 12 }}
                  key={card.label}
                  transition={{
                    duration: 0.5,
                    delay: 0.3 + i * 0.08,
                    ease: APPLE_EASE,
                  }}
                  viewport={{ once: true, margin: "-40px" }}
                  whileInView={{ opacity: 1, y: 0 }}
                >
                  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted/50">
                    <card.icon className="size-4.5 text-muted-foreground" strokeWidth={1.8} />
                  </div>
                  <div className="flex flex-col">
                    <span className="text-[13px] text-muted-foreground">{card.label}</span>
                    {"href" in card && card.href ? (
                      <a
                        className="text-[15px] text-foreground transition-colors hover:text-foreground/70"
                        href={card.href}
                      >
                        {card.value}
                      </a>
                    ) : (
                      <span className="text-[15px] text-foreground">{card.value}</span>
                    )}
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* Right Column — Form */}
          <motion.div
            initial={prefersReduced ? false : { opacity: 0, y: 24 }}
            transition={{ duration: 0.8, delay: 0.25, ease: APPLE_EASE }}
            viewport={{ once: true, margin: "-60px" }}
            whileInView={{ opacity: 1, y: 0 }}
          >
            <ContactForm />
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [status, setStatus] = useState<"idle" | "submitting" | "success">("idle");
  const [errors, setErrors] = useState<Record<string, string>>({});

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);
    const name = (data.get("name") as string).trim();
    const email = (data.get("email") as string).trim();
    const message = (data.get("message") as string).trim();

    const newErrors: Record<string, string> = {};
    if (!name) {
      newErrors.name = "Name is required";
    }
    if (!email) {
      newErrors.email = "Email is required";
    }
    if (!EMAIL_REGEX.test(email)) {
      newErrors.email = "Enter a valid email";
    }
    if (!message) {
      newErrors.message = "Message is required";
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    setErrors({});
    setStatus("submitting");
    setTimeout(() => setStatus("success"), 1500);
  }

  return (
    <div
      className={cn(
        "rounded-2xl bg-background p-6 md:p-8",
        "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.08),0px_4px_16px_0px_rgba(0,0,0,0.06)]",
        "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_4px_16px_0px_rgba(0,0,0,0.25)]"
      )}
    >
      <AnimatePresence initial={false} mode="wait">
        {status === "success" ? (
          <motion.div
            animate={{ opacity: 1, scale: 1 }}
            className="flex flex-col items-center justify-center gap-4 py-12 text-center"
            exit={{ opacity: 0, scale: 0.95 }}
            initial={{ opacity: 0, scale: 0.95 }}
            key="success"
            transition={{ type: "spring", bounce: 0, duration: 0.4 }}
          >
            <motion.div
              animate={{ scale: 1 }}
              className="flex size-12 items-center justify-center rounded-full bg-emerald-500/10"
              initial={{ scale: 0 }}
              transition={{ type: "spring", bounce: 0.3, duration: 0.5, delay: 0.1 }}
            >
              <Check className="size-6 text-emerald-500" strokeWidth={2.5} />
            </motion.div>
            <div className="flex flex-col gap-1">
              <h3 className="font-semibold text-foreground text-lg">Message sent</h3>
              <p className="text-[14px] text-muted-foreground">We'll get back to you within 24 hours.</p>
            </div>
            <button
              className="mt-2 cursor-pointer text-[14px] text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground"
              onClick={() => setStatus("idle")}
              type="button"
            >
              Send another message
            </button>
          </motion.div>
        ) : (
          <motion.form
            animate={{ opacity: 1 }}
            className="flex flex-col gap-5"
            exit={{ opacity: 0 }}
            initial={{ opacity: 1 }}
            key="form"
            onSubmit={handleSubmit}
          >
            <div className="flex flex-col gap-1.5">
              <label className="font-medium text-[13px] text-foreground" htmlFor="contact-name">
                Name
              </label>
              <input
                className={cn(
                  "h-10 rounded-lg bg-muted/40 px-3.5 text-[15px] text-foreground outline-none transition-shadow duration-200",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "focus:shadow-[0px_0px_0px_2px_rgba(99,102,241,0.25),0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:focus:shadow-[0px_0px_0px_2px_rgba(129,140,248,0.3),0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "placeholder:text-muted-foreground/50",
                  errors.name && "shadow-[0px_0px_0px_1px_rgba(239,68,68,0.5)]"
                )}
                id="contact-name"
                name="name"
                placeholder="Your name"
                type="text"
              />
              {errors.name && <span className="text-[12px] text-red-500">{errors.name}</span>}
            </div>

            <div className="flex flex-col gap-1.5">
              <label className="font-medium text-[13px] text-foreground" htmlFor="contact-email">
                Email
              </label>
              <input
                className={cn(
                  "h-10 rounded-lg bg-muted/40 px-3.5 text-[15px] text-foreground outline-none transition-shadow duration-200",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "focus:shadow-[0px_0px_0px_2px_rgba(99,102,241,0.25),0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:focus:shadow-[0px_0px_0px_2px_rgba(129,140,248,0.3),0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "placeholder:text-muted-foreground/50",
                  errors.email && "shadow-[0px_0px_0px_1px_rgba(239,68,68,0.5)]"
                )}
                id="contact-email"
                name="email"
                placeholder="you@company.com"
                type="email"
              />
              {errors.email && <span className="text-[12px] text-red-500">{errors.email}</span>}
            </div>

            <div className="flex flex-col gap-1.5">
              <label className="font-medium text-[13px] text-foreground" htmlFor="contact-subject">
                Subject
              </label>
              <select
                className={cn(
                  "h-10 appearance-none rounded-lg bg-muted/40 px-3.5 text-[15px] text-foreground outline-none transition-shadow duration-200",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "focus:shadow-[0px_0px_0px_2px_rgba(99,102,241,0.25),0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:focus:shadow-[0px_0px_0px_2px_rgba(129,140,248,0.3),0px_0px_0px_1px_rgba(255,255,255,0.08)]"
                )}
                defaultValue=""
                id="contact-subject"
                name="subject"
              >
                <option disabled value="">
                  Select a topic
                </option>
                {SUBJECT_OPTIONS.map((opt) => (
                  <option key={opt} value={opt}>
                    {opt}
                  </option>
                ))}
              </select>
            </div>

            <div className="flex flex-col gap-1.5">
              <label className="font-medium text-[13px] text-foreground" htmlFor="contact-message">
                Message
              </label>
              <textarea
                className={cn(
                  "min-h-[120px] resize-none rounded-lg bg-muted/40 px-3.5 py-2.5 text-[15px] text-foreground outline-none transition-shadow duration-200",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "focus:shadow-[0px_0px_0px_2px_rgba(99,102,241,0.25),0px_0px_0px_1px_rgba(0,0,0,0.06)] dark:focus:shadow-[0px_0px_0px_2px_rgba(129,140,248,0.3),0px_0px_0px_1px_rgba(255,255,255,0.08)]",
                  "placeholder:text-muted-foreground/50",
                  errors.message && "shadow-[0px_0px_0px_1px_rgba(239,68,68,0.5)]"
                )}
                id="contact-message"
                name="message"
                placeholder="Tell us about your project..."
              />
              {errors.message && <span className="text-[12px] text-red-500">{errors.message}</span>}
            </div>

            <motion.button
              className="group mt-1 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-foreground px-6 py-3 font-medium text-background text-sm transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] disabled:pointer-events-none disabled:opacity-50 dark:hover:shadow-[0_8px_30px_rgb(255,255,255,0.08)]"
              disabled={status === "submitting"}
              type="submit"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <span>{status === "submitting" ? "Sending..." : "Send Message"}</span>
              <ArrowRight
                className="size-4 transition-transform duration-300 group-hover:translate-x-0.5"
                strokeWidth={2}
              />
            </motion.button>
          </motion.form>
        )}
      </AnimatePresence>
    </div>
  );
}
Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options
