"use client";
import React, { useState } from "react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";


// DO NOT OVERRIDE — Advertise page contact info and media kit sections
const adZones = [
  { name: "Leaderboard (Top)", dimensions: "728×90", placement: "Above the fold, homepage and article pages", cpm: "Contact for rates" },
  { name: "Sidebar Rectangle", dimensions: "300×250", placement: "Right sidebar, all pages", cpm: "Contact for rates" },
  { name: "In-Article Banner", dimensions: "728×90 or 300×250", placement: "Mid-article, high engagement zone", cpm: "Contact for rates" },
  { name: "Footer Leaderboard", dimensions: "728×90", placement: "Site-wide footer", cpm: "Contact for rates" },
  { name: "Mobile Banner", dimensions: "320×50", placement: "Mobile top banner", cpm: "Contact for rates" },
  { name: "Newsletter Leaderboard", dimensions: "728×90", placement: "Bi-weekly newsletter, top slot", cpm: "Contact for rates" },
  { name: "Newsletter Rectangle", dimensions: "300×250", placement: "Bi-weekly newsletter, mid-content", cpm: "Contact for rates" },
];

const stats = [
  { label: "Monthly Unique Visitors", value: "250,000+" },
  { label: "Newsletter Subscribers", value: "45,000+" },
  { label: "Social Media Followers", value: "30,000+" },
  { label: "Average Time on Site", value: "4:32 min" },
];

export default function AdvertisePage() {
  const [formData, setFormData] = useState({ name: "", company: "", email: "", phone: "", message: "", budget: "" });
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Stub: log and show success
    console.warn("[Advertise] Contact form submitted:", formData);
    setTimeout(() => {
      setSubmitted(true);
      setLoading(false);
    }, 800);
  };

  return (
    <div className="min-h-screen bg-background">
      <Header />

      {/* Hero */}
      {/* DO NOT OVERRIDE — Advertise page hero section */}
      <div className="bg-[#0d1520] border-b border-[#DCE6F2] py-12">
        <div className="max-w-container mx-auto px-4 text-center">
          <span className="section-label mb-3 inline-block">Advertise</span>
          <h1 className="font-heading text-white text-4xl font-bold mb-4">Reach Pro AV &amp; Live Production Professionals</h1>
          <p className="text-[#aaa] font-body text-lg max-w-2xl mx-auto mb-6">
            AV Beat is the leading digital platform for pro AV, live production, and display tech professionals. Connect your brand with decision-makers, integrators, and executives across the pro AV industry.
          </p>
          <a
            href="#contact"
            className="btn-subscribe py-3 px-8 text-base inline-block">
            Request Media Kit
          </a>
        </div>
      </div>

      <main className="max-w-container mx-auto px-4 py-10">
        {/* Audience stats */}
        <section className="mb-12">
          <div className="flex items-center gap-3 mb-6">
            <span className="section-label">Our Audience</span>
            <div className="flex-1 h-px bg-[#DCE6F2]" />
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {stats.map((stat) => (
              <div key={stat.label} className="bg-[#111] border border-[#222] p-5 text-center">
                <div className="font-heading text-[#1D4ED8] text-2xl font-bold mb-1">{stat.value}</div>
                <div className="font-body text-[#777] text-xs uppercase tracking-wide">{stat.label}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Ad zones */}
        <section className="mb-12">
          <div className="flex items-center gap-3 mb-6">
            <span className="section-label">Ad Placements</span>
            <div className="flex-1 h-px bg-[#DCE6F2]" />
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm font-body">
              <thead>
                <tr className="border-b border-[#222]">
                  <th className="text-left py-3 px-4 text-[#1D4ED8] font-bold text-xs uppercase tracking-wider">Placement</th>
                  <th className="text-left py-3 px-4 text-[#1D4ED8] font-bold text-xs uppercase tracking-wider">Dimensions</th>
                  <th className="text-left py-3 px-4 text-[#1D4ED8] font-bold text-xs uppercase tracking-wider">Location</th>
                  <th className="text-left py-3 px-4 text-[#1D4ED8] font-bold text-xs uppercase tracking-wider">Rate</th>
                </tr>
              </thead>
              <tbody>
                {adZones.map((zone, i) => (
                  <tr key={zone.name} className={`border-b border-[#FFFFFF] ${i % 2 === 0 ? "bg-[#F8FAFC]" : "bg-[#111]"}`}>
                    <td className="py-3 px-4 text-[#e0e0e0] font-medium">{zone.name}</td>
                    <td className="py-3 px-4 text-[#888] font-mono text-xs">{zone.dimensions}</td>
                    <td className="py-3 px-4 text-[#777]">{zone.placement}</td>
                    <td className="py-3 px-4 text-[#1D4ED8] font-medium">{zone.cpm}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="text-[#555] text-xs font-body mt-3">
            * Newsletter placements exclude Blackmagic Design per client agreement. All other placements available site-wide.
          </p>
        </section>

        {/* Contact form */}
        {/* DO NOT OVERRIDE — Contact form and sales contact info */}
        <section id="contact" className="mb-12">
          <div className="flex items-center gap-3 mb-6">
            <span className="section-label">Contact Sales</span>
            <div className="flex-1 h-px bg-[#DCE6F2]" />
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
            {/* Contact info */}
            <div className="lg:col-span-4">
              <div className="bg-[#111] border border-[#222] p-6">
                <h3 className="font-heading text-[#e0e0e0] text-lg font-bold mb-4">Sales Contact</h3>
                <div className="space-y-4">
                  <div>
                    <p className="font-body text-[#1D4ED8] text-xs font-bold uppercase tracking-wider mb-1">Advertising Sales</p>
                    <p className="font-body text-[#e0e0e0] font-medium">Jeff Victor</p>
                    <a href="mailto:jeff@avbeat.com" className="font-body text-[#1D4ED8] text-sm hover:underline">
                      jeff@avbeat.com
                    </a>
                  </div>
                  <div className="border-t border-[#222] pt-4">
                    <p className="font-body text-[#1D4ED8] text-xs font-bold uppercase tracking-wider mb-1">Publication</p>
                    <p className="font-body text-[#777] text-sm">AV Beat</p>
                    <p className="font-body text-[#777] text-sm">Relevant Media Properties</p>
                  </div>
                  <div className="border-t border-[#222] pt-4">
                    <p className="font-body text-[#1D4ED8] text-xs font-bold uppercase tracking-wider mb-2">What We Offer</p>
                    <ul className="space-y-1.5">
                      {["Display advertising (web)", "Newsletter sponsorships", "Sponsored content", "Event coverage partnerships", "Podcast sponsorships"].map((item) => (
                        <li key={item} className="flex items-start gap-2 text-[#777] text-sm font-body">
                          <span className="text-[#1D4ED8] mt-0.5">✓</span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            {/* Form */}
            <div className="lg:col-span-8">
              {submitted ? (
                <div className="bg-[#111] border border-[#1D4ED8] p-8 text-center">
                  <div className="w-12 h-12 rounded-full bg-[#1D4ED8]/20 flex items-center justify-center mx-auto mb-4">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                      <path d="M5 12l4 4 10-10" stroke="#1D4ED8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  <h3 className="font-heading text-[#e0e0e0] text-xl font-bold mb-2">Message Sent!</h3>
                  <p className="font-body text-[#777] text-sm">
                    Thanks for reaching out. Jeff will be in touch within one business day at{" "}
                    <a href="mailto:jeff@avbeat.com" className="text-[#1D4ED8] hover:underline">jeff@avbeat.com</a>.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="bg-[#111] border border-[#222] p-6 space-y-4">
                  <h3 className="font-heading text-[#e0e0e0] text-lg font-bold mb-2">Request Media Kit / Start a Campaign</h3>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Your Name *</label>
                      <input
                        type="text"
                        required
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        className="search-input w-full py-2.5 px-3 text-sm"
                        placeholder="Jane Smith"
                      />
                    </div>
                    <div>
                      <label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Company *</label>
                      <input
                        type="text"
                        required
                        value={formData.company}
                        onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                        className="search-input w-full py-2.5 px-3 text-sm"
                        placeholder="Acme AV Systems"
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Email *</label>
                      <input
                        type="email"
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        className="search-input w-full py-2.5 px-3 text-sm"
                        placeholder="jane@company.com"
                      />
                    </div>
                    <div>
                      <label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Phone</label>
                      <input
                        type="tel"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        className="search-input w-full py-2.5 px-3 text-sm"
                        placeholder="+1 (555) 000-0000"
                      />
                    </div>
                  </div>
                  <div>
                    <label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Estimated Budget</label>
                    <select
                      value={formData.budget}
                      onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
                      className="search-input w-full py-2.5 px-3 text-sm bg-[#FFFFFF]">
                      <option value="">Select a range...</option>
                      <option value="under-5k">Under $5,000</option>
                      <option value="5k-15k">$5,000 – $15,000</option>
                      <option value="15k-50k">$15,000 – $50,000</option>
                      <option value="50k-plus">$50,000+</option>
                    </select>
                  </div>
                  <div>
                    <label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Message *</label>
                    <textarea
                      required
                      rows={4}
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      className="search-input w-full py-2.5 px-3 text-sm resize-none"
                      placeholder="Tell us about your campaign goals, target audience, and any specific placements you're interested in..."
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={loading}
                    className={`btn-subscribe py-3 px-8 text-sm w-full sm:w-auto ${loading ? "opacity-70 cursor-not-allowed" : ""}`}>
                    {loading ? "Sending..." : "Send Inquiry"}
                  </button>
                  <p className="text-[#555] text-xs font-body">
                    Or email directly: <a href="mailto:jeff@avbeat.com" className="text-[#1D4ED8] hover:underline">jeff@avbeat.com</a>
                  </p>
                </form>
              )}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}