'use client';
import { useState } from 'react';
import WorkWithNCAHD from '@/components/WorkWithNCAHD';

export default function Contact() {
  const [status, setStatus] = useState<string>('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('Sending...');
    
    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData.entries());
    
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        setStatus('Message sent successfully!');
      } else {
        setStatus('Failed to send message. Please try again.');
      }
    } catch (error) {
      console.error(error);
      setStatus('An error occurred.');
    }
  };

  return (
    <div className="flex flex-col w-full min-h-screen bg-surface">
      <section className="bg-primary text-white py-12 relative overflow-hidden">
        <div className="container mx-auto px-8 relative z-10 text-center">
            <h1 className="text-5xl md:text-6xl font-headline font-bold leading-tight mb-6 mt-6">Get in Touch with NCAHD.</h1>
            <p className="text-xl text-slate-300 font-body leading-relaxed max-w-2xl mx-auto">
              Connect with our analysts to see how the Enhanced State Licensure dataset can solve your specific workforce challenges.
            </p>
        </div>
      </section>

      {/* Contact Info & Map Section */}
      <section className="py-12 border-b border-outline-variant/20">
        <div className="container mx-auto px-8 max-w-6xl">
           <div className="flex flex-col lg:flex-row gap-8 items-start">
             {/* Text Details */}
             <div className="lg:w-1/3 flex flex-col gap-6">
               <div>
                  <h2 className="text-4xl font-headline font-bold text-[#861F41] mb-4">Visit Us</h2>
                  <p className="text-lg font-headline font-bold text-primary mb-6">
                     National Center for the Analysis of Healthcare Data
                  </p>
               </div>
               <div>
                  <h3 className="text-sm font-headline font-bold text-on-surface-variant uppercase tracking-widest mb-2">
                     Address:
                  </h3>
                  <p className="text-slate-600 font-body text-base">
                     309 North Knollwood<br/>Blacksburg, VA 24060
                  </p>
               </div>
               <div>
                  <h3 className="text-sm font-headline font-bold text-on-surface-variant uppercase tracking-widest mb-2">
                     Phone:
                  </h3>
                  <p className="text-slate-600 font-body text-base">
                     1 (573) 301-9654
                  </p>
               </div>
               <div>
                  <h3 className="text-sm font-headline font-bold text-on-surface-variant uppercase tracking-widest mb-2">
                     Email:
                  </h3>
                  <p className="text-slate-600 font-body text-base">
                     apeton@vcom.edu
                  </p>
               </div>
             </div>
             
             {/* Map Embed */}
             <div className="lg:w-2/3 h-[300px] w-full bg-slate-200 rounded-xl overflow-hidden shadow-md">
                <iframe 
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3164.209385614352!2d-80.42878642364024!3d37.52656912642594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x884d9520448fffff%3A0xe7a505b8cf0f2307!2s309%20N%20Knollwood%20Dr%2C%20Blacksburg%2C%20VA%2024060!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus" 
                  width="100%" 
                  height="100%" 
                  style={{ border: 0 }} 
                  allowFullScreen={false} 
                  loading="lazy" 
                  referrerPolicy="no-referrer-when-downgrade">
                </iframe>
             </div>
           </div>
        </div>
      </section>

      <WorkWithNCAHD />

      {/* Form Section */}
      <section className="py-24 bg-surface-container-lowest relative">
        <div className="container mx-auto px-8 max-w-4xl">
           <div className="bg-white p-10 md:p-14 rounded-2xl shadow-xl border border-outline-variant/10">
             <h2 className="text-3xl font-headline font-bold text-primary mb-8 text-center">Send Us a Message</h2>
             <form onSubmit={handleSubmit} className="flex flex-col gap-6">
               <div className="grid md:grid-cols-2 gap-6">
                  <div className="flex flex-col gap-2">
                    <label htmlFor="firstName" className="text-sm font-bold text-primary">First Name</label>
                    <input type="text" id="firstName" name="firstName" required className="bg-surface w-full p-4 rounded border border-outline-variant/50 focus:outline-none focus:border-primary focus:bg-primary-fixed focus:ring-1 focus:ring-primary transition-all" placeholder="Jane" />
                  </div>
                  <div className="flex flex-col gap-2">
                    <label htmlFor="lastName" className="text-sm font-bold text-primary">Last Name</label>
                    <input type="text" id="lastName" name="lastName" required className="bg-surface w-full p-4 rounded border border-outline-variant/50 focus:outline-none focus:border-primary focus:bg-primary-fixed focus:ring-1 focus:ring-primary transition-all" placeholder="Doe" />
                  </div>
               </div>
               <div className="flex flex-col gap-2">
                  <label htmlFor="organization" className="text-sm font-bold text-primary">Organization</label>
                  <input type="text" id="organization" name="organization" required className="bg-surface w-full p-4 rounded border border-outline-variant/50 focus:outline-none focus:border-primary focus:bg-primary-fixed focus:ring-1 focus:ring-primary transition-all" placeholder="Your Company or Organization" />
               </div>
               <div className="flex flex-col gap-2">
                  <label htmlFor="message" className="text-sm font-bold text-primary">How can we help?</label>
                  <textarea id="message" name="message" required rows={5} className="bg-surface w-full p-4 rounded border border-outline-variant/50 focus:outline-none focus:border-primary focus:bg-primary-fixed focus:ring-1 focus:ring-primary transition-all" placeholder="Tell us about your data needs..."></textarea>
               </div>
               <button type="submit" className="bg-[#861F41] text-white font-headline font-bold py-4 rounded hover:brightness-110 transition-all mt-4 shadow-md">
                  Submit Request
               </button>
               {status && <p className="text-center font-bold text-[#E87722] mt-2">{status}</p>}
             </form>
           </div>
        </div>
      </section>
    </div>
  );
}