"use client";

import { useInView } from "@/hooks/use-in-view";
import { Button } from "@/components/ui/button";
import { Mail, Phone, MapPin, Zap } from "lucide-react";

export function ContactSection() {
  const { ref, isInView } = useInView(0.1);

  return (
    <section id="contact" className="py-24 px-4 bg-brown-dark/30" ref={ref}>
      <div className="mx-auto max-w-6xl">
        <div className="text-center mb-16">
          <h2
            className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-4 ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
          >
            Ready to <span className="text-neon">Power Up</span>?
          </h2>
          <p
            className={`text-cream-dim text-lg max-w-2xl mx-auto ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
            style={{ animationDelay: "0.1s" }}
          >
            Let&apos;s talk about making your next festival poop-powered.
            Seriously.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Contact form */}
          <div
            className={`${isInView ? "animate-fade-in-up" : "opacity-0"}`}
            style={{ animationDelay: "0.2s" }}
          >
            <form
              action="mailto:hello@portapower.buzz"
              method="POST"
              encType="text/plain"
              className="space-y-5"
            >
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label
                    htmlFor="name"
                    className="block text-sm font-medium text-cream mb-1.5"
                  >
                    Name
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    required
                    className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
                    placeholder="Your name"
                  />
                </div>
                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-cream mb-1.5"
                  >
                    Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    required
                    className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
                    placeholder="you@festival.com"
                  />
                </div>
              </div>

              <div>
                <label
                  htmlFor="festival"
                  className="block text-sm font-medium text-cream mb-1.5"
                >
                  Festival / Event Name
                </label>
                <input
                  type="text"
                  id="festival"
                  name="festival"
                  className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
                  placeholder="Your festival name"
                />
              </div>

              <div>
                <label
                  htmlFor="attendees"
                  className="block text-sm font-medium text-cream mb-1.5"
                >
                  Expected Attendance
                </label>
                <select
                  id="attendees"
                  name="attendees"
                  className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
                >
                  <option value="">Select attendance range</option>
                  <option value="under-1000">Under 1,000</option>
                  <option value="1000-5000">1,000 - 5,000</option>
                  <option value="5000-10000">5,000 - 10,000</option>
                  <option value="10000-25000">10,000 - 25,000</option>
                  <option value="25000+">25,000+</option>
                </select>
              </div>

              <div>
                <label
                  htmlFor="message"
                  className="block text-sm font-medium text-cream mb-1.5"
                >
                  Tell Us About Your Event
                </label>
                <textarea
                  id="message"
                  name="message"
                  rows={4}
                  className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors resize-none"
                  placeholder="Dates, location, power needs, number of stages..."
                />
              </div>

              <Button type="submit" size="lg" className="w-full">
                <Zap className="h-5 w-5" />
                Send Inquiry
              </Button>
            </form>
          </div>

          {/* Contact info */}
          <div
            className={`flex flex-col justify-center gap-8 ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
            style={{ animationDelay: "0.3s" }}
          >
            <div>
              <h3 className="text-2xl font-bold text-cream mb-4">
                Let&apos;s Make Shift Happen
              </h3>
              <p className="text-cream-dim leading-relaxed">
                Whether you&apos;re running a 500-person campout or a 50,000-person
                mega-festival, we&apos;ll design a custom poop-to-power solution
                that fits your event perfectly. Our team handles everything from
                planning to teardown.
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
                  <Mail className="h-5 w-5 text-neon" />
                </div>
                <div>
                  <p className="text-sm text-cream-dim">Email</p>
                  <p className="font-medium text-cream">
                    hello@portapower.buzz
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
                  <Phone className="h-5 w-5 text-neon" />
                </div>
                <div>
                  <p className="text-sm text-cream-dim">Phone</p>
                  <p className="font-medium text-cream">1-800-POO-POWER</p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
                  <MapPin className="h-5 w-5 text-neon" />
                </div>
                <div>
                  <p className="text-sm text-cream-dim">Headquarters</p>
                  <p className="font-medium text-cream">
                    Austin, TX (We deploy nationwide)
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-xl border border-neon/20 bg-neon/5 p-5">
              <p className="text-sm text-neon font-medium mb-1">
                Fun fact 💩⚡
              </p>
              <p className="text-sm text-cream-dim">
                A single festival-goer produces enough waste over a 3-day event
                to generate roughly 2 kWh of electricity — enough to fully
                charge a smartphone 100 times.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}