"use client"

import { useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Phone, MapPin } from "lucide-react"

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

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

  return (
    <section id="contact" className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="grid gap-12 lg:grid-cols-2 items-start">
          {/* Left Content */}
          <div>
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
              Have Detailed Questions? Let's Talk!
            </h2>
            <p className="text-lg text-muted-foreground mb-8 text-pretty leading-relaxed">
              Already submitted the quick form above? Great! We'll contact you soon. If you have specific requirements or detailed questions, feel free to share more below—we're here to help.
            </p>

            <div className="space-y-6">
              <Card className="border-border/50">
                <CardContent className="p-6">
                  <div className="flex items-start gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary/10 flex-shrink-0">
                      <Phone className="h-6 w-6 text-secondary" />
                    </div>
                    <div>
                      <div className="font-semibold mb-1">Call or Text Us</div>
                      <a
                        href="tel:+14352339668"
                        className="text-muted-foreground hover:text-foreground transition-colors"
                      >
                        (435) 233-9668
                      </a>
                      <p className="text-xs text-muted-foreground mt-1">Mon-Fri: 8:00 AM - 5:00 PM</p>
                      <a
                        href="sms:+14352339668"
                        className="text-xs text-secondary hover:underline mt-2 block"
                      >
                        Or send a text message
                      </a>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-border/50">
                <CardContent className="p-6">
                  <div className="flex items-start gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary/10 flex-shrink-0">
                      <MapPin className="h-6 w-6 text-secondary" />
                    </div>
                    <div>
                      <div className="font-semibold mb-1">Service Areas</div>
                      <p className="text-muted-foreground">Davis, Salt Lake & Utah Counties</p>
                      <p className="text-xs text-muted-foreground mt-1">Serving 20+ cities across Utah</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

          {/* Right Form - Long Form */}
          <Card className="border-border/50">
            <CardContent className="pt-6">
              <div className="mb-4">
                <h3 className="text-xl font-semibold mb-2">Contact Form</h3>
                <p className="text-sm text-muted-foreground">
                  Tell us more about your needs and we'll get back to you within 24 hours.
                </p>
              </div>
              <iframe
                src="https://link.sluice-box.io/widget/form/zQqWU1J1XcUxjAotZQlk"
                style={{ width: "100%", height: "750px", border: "none", borderRadius: "4px" }}
                id="inline-zQqWU1J1XcUxjAotZQlk"
                data-layout="{'id':'INLINE'}"
                data-trigger-type="alwaysShow"
                data-trigger-value=""
                data-activation-type="alwaysActivated"
                data-activation-value=""
                data-deactivation-type="neverDeactivate"
                data-deactivation-value=""
                data-form-name="Contact From Long"
                data-height="738"
                data-layout-iframe-id="inline-zQqWU1J1XcUxjAotZQlk"
                data-form-id="zQqWU1J1XcUxjAotZQlk"
                title="Detailed Contact Form"
              />
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}