"use client"

import { Clock, Mail, Phone } from "lucide-react"
import { ContactForm } from "@/components/forms/contact-form"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"
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="public-page">
      <PublicPageHeader
        align="center"
        eyebrow="Contact Rocky Mountain Vending"
        title="Tell us what you need and we'll point you to the right team."
        description="Use the form for repairs, moving, manuals, machine sales, or general questions. If you'd rather talk now, call us during business hours."
      />

      <div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:items-start">
        <PublicSurface id="contact-form" as="section" className="p-5 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)}
          />
        </PublicSurface>

        <aside className="space-y-5">
          <PublicSurface className="overflow-hidden 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-white px-4 py-4 transition hover:border-primary/35"
              >
                <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-white px-4 py-4 transition hover:border-primary/35"
              >
                <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>
          </PublicSurface>

          <PublicSurface 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) => (
                <PublicInset
                  key={schedule.day}
                  className={`flex items-center justify-between rounded-xl px-3 py-2 shadow-none ${
                    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>
                </PublicInset>
              ))}
            </div>
          </PublicSurface>
        </aside>
      </div>
    </div>
  )
}