'use client'

import { useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Phone, Mail, Clock } from "lucide-react"
import Link from "next/link"

export function ContactPage() {
  useEffect(() => {
    // Load the form embed script
    const script = document.createElement("script")
    script.src = "https://link.sluice-box.io/js/form_embed.js"
    script.async = true
    document.body.appendChild(script)

    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

  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 mb-4">Contact Us</h1>
        <div className="w-24 h-1 bg-gradient-to-r from-[#c4142c] to-[#a01020] mx-auto rounded-full"></div>
      </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">
            Get in Touch with Us
          </h2>
          <Card className="border-2 shadow-lg">
            <CardContent className="p-0">
              <iframe
                src="https://link.sluice-box.io/widget/form/zQqWU1J1XcUxjAotZQlk"
                style={{ border: 'none', width: '100%', minHeight: '600px' }}
                scrolling="no"
                id="zQqWU1J1XcUxjAotZQlk"
                title="Contact Form"
                className="rounded-lg"
              />
            </CardContent>
          </Card>
        </div>

        {/* Right Column - Contact Information */}
        <div>
          <h2 className="text-2xl md:text-3xl font-semibold mb-6 text-center md:text-left">
            Contact Information
          </h2>
          <div className="space-y-6">
            <Card className="border-2 hover:border-primary/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-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
                    <Phone className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-1">Phone</h3>
                    <Link
                      href="tel:+14352339668"
                      className="text-primary 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-2 hover:border-primary/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-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
                    <Mail className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-1">Email</h3>
                    <Link
                      href="mailto:info@rockymountainvending.com?Subject=I%20Need%20More%20Information"
                      className="text-primary 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">
          Hours of Operation
        </h2>
        <div className="grid gap-6 md:grid-cols-2 max-w-4xl mx-auto">
          <Card className="border-2 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
                  <Clock className="w-5 h-5 text-primary" />
                </div>
                <h3 className="text-xl font-semibold">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-accent/30 hover:bg-accent/50'
                    }`}
                  >
                    <span className="font-medium">{schedule.day}</span>
                    <span className={schedule.isClosed ? 'font-normal' : 'font-semibold text-primary'}>
                      {schedule.hours}
                    </span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Additional Info Card */}
          <Card className="border-2 shadow-lg bg-gradient-to-br from-primary/5 to-secondary/5">
            <CardContent className="p-6 flex flex-col justify-center h-full">
              <h3 className="text-xl font-semibold mb-4">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>
  )
}