'use client'

import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Phone, Mail, Clock } from "lucide-react"
import Link from "next/link"
import { ContactForm } from "@/components/forms/contact-form"

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 px-4 py-8 md:py-12 max-w-6xl">
      {/* Header */}
      <header className="text-center mb-12 md:mb-16">
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">Contact Us</h1>
        <div className="w-24 h-1 bg-gradient-to-r from-[var(--link-hover-color)] to-[var(--link-hover-color-dark)] mx-auto rounded-full" />
      </header>

      {/* Main Content - Form and Contact Info */}
      <div className="grid gap-8 md:grid-cols-2 mb-16">
        {/* Left Column - Contact Form */}
        <div>
          <h2 className="text-2xl md:text-3xl font-semibold mb-6 text-center md:text-left tracking-tight text-balance">
            Get in Touch with Us
          </h2>
          <Card className="border-border/50 shadow-lg transition-colors">
            <CardContent className="p-0 min-h-[738px]">
              <div className="p-6">
                <ContactForm onSubmit={(data) => console.log('Contact form submitted:', data)} />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right Column - Contact Information */}
        <div>
          <h2 className="text-2xl md:text-3xl font-semibold mb-6 text-center md:text-left tracking-tight text-balance">
            Contact Information
          </h2>
          <div className="space-y-6">
            <Card className="border-border/50 hover:border-secondary/50 transition-colors shadow-md">
              <CardContent className="p-6">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                    <Phone className="w-6 h-6 text-secondary" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2">Phone</h3>
                    <Link
                      href="tel:+14352339668"
                      className="hover:underline text-lg font-medium"
                    >
                      (435) 233-9668
                    </Link>
                    <p className="text-sm text-muted-foreground mt-1">
                      Call us during business hours
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors shadow-md">
              <CardContent className="p-6">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                    <Mail className="w-6 h-6 text-secondary" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2">Email</h3>
                    <Link
                      href="mailto:info@rockymountainvending.com?Subject=I%20Need%20More%20Information"
                      className="hover:underline text-lg font-medium break-all"
                    >
                      info@rockymountainvending.com
                    </Link>
                    <p className="text-sm text-muted-foreground mt-1">
                      Send us an email anytime
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

      {/* Hours of Operation */}
      <section className="mb-12">
        <h2 className="text-2xl md:text-3xl font-semibold mb-8 text-center tracking-tight text-balance">
          Hours of Operation
        </h2>
        <div className="grid gap-6 md:grid-cols-2 max-w-4xl mx-auto">
          <Card className="border-border/50 hover:border-secondary/50 transition-colors shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-2">
                <div className="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
                  <Clock className="w-5 h-5 text-secondary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Business Hours</h3>
              </div>
              <div className="space-y-3">
                {businessHours.map((schedule, index) => (
                  <div
                    key={index}
                    className={`flex justify-between items-center py-2 px-3 rounded-lg transition-colors ${
                      schedule.isClosed
                        ? 'bg-muted/50 text-muted-foreground'
                        : 'bg-secondary/5 hover:bg-secondary/10'
                    }`}
                  >
                    <span className="font-medium">{schedule.day}</span>
                    <span className={schedule.isClosed ? 'font-normal' : 'font-semibold text-secondary'}>
                      {schedule.hours}
                    </span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Additional Info Card */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors shadow-lg bg-secondary/5">
            <CardContent className="p-6 flex flex-col justify-center h-full">
              <h3 className="text-xl font-semibold mb-2">Need Help Outside Business Hours?</h3>
              <p className="text-muted-foreground mb-4 leading-relaxed">
                While our office hours are Monday through Friday, 8:00 AM to 5:00 PM, we understand that vending machine issues can happen anytime. For urgent matters, please leave us a message or send an email, and we'll get back to you as soon as possible.
              </p>
              <div className="mt-4 p-4 bg-card rounded-lg border border-border">
                <p className="text-sm font-semibold mb-2">Quick Response Options:</p>
                <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
                  <li>Text us at (435) 233-9668</li>
                  <li>Use the chat widget on our website</li>
                  <li>Submit the contact form above</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  )
}