"use client"

import { Clock, Mail, Phone } from "lucide-react"
import { ContactForm } from "@/components/forms/contact-form"
import { Card, CardContent } from "@/components/ui/card"
import { businessConfig } from "@/lib/seo-config"

export function ContactPage() {
  const businessHours = [
    { day: "Sunday", hours: "Closed", isClosed: true },
    { day: "Monday", hours: "8:00 AM to 5:00 PM", isClosed: false },
    { day: "Tuesday", hours: "8:00 AM to 5:00 PM", isClosed: false },
    { day: "Wednesday", hours: "8:00 AM to 5:00 PM", isClosed: false },
    { day: "Thursday", hours: "8:00 AM to 5:00 PM", isClosed: false },
    { day: "Friday", hours: "8:00 AM to 5:00 PM", isClosed: false },
    { day: "Saturday", hours: "Closed", isClosed: true },
  ]

  return (
    <div className="container mx-auto max-w-6xl px-4 py-10 md:py-14">
      <header className="mx-auto max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary/80">Contact Rocky Mountain Vending</p>
        <h1 className="mt-3 text-4xl font-bold tracking-tight text-balance md:text-5xl">Tell us what you need and we'll point you to the right team.</h1>
        <p className="mt-4 text-base leading-relaxed text-muted-foreground md:text-lg">
          Use the form for repairs, moving, manuals, machine sales, or general questions. If you'd rather talk now, call us during business hours.
        </p>
      </header>

      <div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:items-start">
        <section id="contact-form" className="rounded-[2rem] border border-border/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.92),rgba(249,247,242,0.92))] p-5 shadow-[0_24px_60px_rgba(0,0,0,0.08)] md:p-7">
          <div className="mb-6 flex flex-wrap items-center gap-3">
            <div className="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-primary">
              Contact Form
            </div>
            <p className="text-sm text-muted-foreground">For repairs or moving, include the machine model and a clear description of what's happening.</p>
          </div>
          <ContactForm onSubmit={(data) => console.log("Contact form submitted:", data)} />
        </section>

        <aside className="space-y-5">
          <Card className="overflow-hidden rounded-[2rem] border-border/70 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
            <CardContent className="bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.98))] p-6">
              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">Direct Options</p>
              <h2 className="mt-2 text-2xl font-semibold text-foreground">Reach the team directly</h2>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                We monitor calls, texts, and email throughout the business day. If you're sending repair photos or videos, text them to the number below.
              </p>

              <div className="mt-6 space-y-4">
                <a href={businessConfig.publicCallUrl} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background/85 px-4 py-4 transition hover:border-primary/35 hover:bg-primary/[0.04]">
                  <div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <Phone className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-foreground">Call</p>
                    <p className="mt-1 text-base font-medium text-foreground">{businessConfig.publicCallNumber}</p>
                    <p className="mt-1 text-sm text-muted-foreground">Best for immediate questions during business hours.</p>
                  </div>
                </a>

                <a href={`mailto:${businessConfig.email}?Subject=Rocky%20Mountain%20Vending%20Inquiry`} className="flex items-start gap-4 rounded-2xl border border-border/60 bg-background/85 px-4 py-4 transition hover:border-primary/35 hover:bg-primary/[0.04]">
                  <div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <Mail className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-foreground">Email</p>
                    <p className="mt-1 break-all text-base font-medium text-foreground">{businessConfig.email}</p>
                    <p className="mt-1 text-sm text-muted-foreground">Good for longer requests and supporting details.</p>
                  </div>
                </a>
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-[2rem] border-border/70 shadow-[0_18px_45px_rgba(0,0,0,0.06)]">
            <CardContent className="p-6">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                  <Clock className="h-5 w-5" />
                </div>
                <div>
                  <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">Business Hours</p>
                  <h2 className="text-xl font-semibold text-foreground">When we're available</h2>
                </div>
              </div>

              <div className="mt-5 space-y-2">
                {businessHours.map((schedule) => (
                  <div
                    key={schedule.day}
                    className={`flex items-center justify-between rounded-xl px-3 py-2 ${
                      schedule.isClosed ? "bg-muted/55 text-muted-foreground" : "bg-primary/[0.04]"
                    }`}
                  >
                    <span className="font-medium text-foreground">{schedule.day}</span>
                    <span className={schedule.isClosed ? "text-sm" : "text-sm font-semibold text-primary"}>{schedule.hours}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </aside>
      </div>
    </div>
  )
}