'use client';

import React from 'react';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import { motion } from 'framer-motion';
import { Mail, Phone, MapPin, Send } from 'lucide-react';
import { useSettings } from '@/context/SettingsContext';

const ContactPage = () => {
  const { settings } = useSettings();

  const contactEmail = (settings as any)?.contact_email || (settings as any)?.footer_email || 'support@nestorganic.com';
  const contactPhone = (settings as any)?.contact_phone || (settings as any)?.footer_phone || '+880 1234 567 890';
  const contactAddress = (settings as any)?.address || (settings as any)?.footer_address || '123 Elite Plaza, Gulshan-1, Dhaka, Bangladesh';
  const workingHours = (settings as any)?.working_hours || 'Mon-Fri from 9am to 6pm.';

  return (
    <div className="min-h-screen bg-zinc-50">
      <Header />
      
      <main className="max-w-7xl mx-auto px-4 py-16 md:py-24">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl md:text-6xl font-black text-zinc-900 mb-6 tracking-tight"
          >
            Get in Touch
          </motion.h1>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-lg text-zinc-500 font-medium"
          >
            Have a question or feedback? We'd love to hear from you. 
            Our team is typically responsive within 24 hours.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Contact Info */}
          <div className="space-y-6">
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.2 }}
              className="bg-white p-8 rounded-[2rem] shadow-sm border border-zinc-100"
            >
              <div className="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600 mb-6">
                <Mail className="w-6 h-6" />
              </div>
              <h3 className="text-xl font-bold text-zinc-900 mb-2">Email Us</h3>
              <p className="text-zinc-500 text-sm mb-4 font-medium">For general inquiries and support.</p>
              <a href={`mailto:${contactEmail}`} className="text-emerald-600 font-black text-sm hover:underline break-all">
                {contactEmail}
              </a>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 }}
              className="bg-white p-8 rounded-[2rem] shadow-sm border border-zinc-100"
            >
              <div className="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 mb-6">
                <Phone className="w-6 h-6" />
              </div>
              <h3 className="text-xl font-bold text-zinc-900 mb-2">Call Us</h3>
              <p className="text-zinc-500 text-sm mb-4 font-medium">{workingHours}</p>
              <a href={`tel:${contactPhone.replace(/\s+/g, '')}`} className="text-blue-600 font-black text-sm hover:underline">
                {contactPhone}
              </a>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.4 }}
              className="bg-white p-8 rounded-[2rem] shadow-sm border border-zinc-100"
            >
              <div className="w-12 h-12 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600 mb-6">
                <MapPin className="w-6 h-6" />
              </div>
              <h3 className="text-xl font-bold text-zinc-900 mb-2">Office</h3>
              <p className="text-zinc-500 text-sm mb-4 font-medium">Come say hello at our office.</p>
              <p className="text-zinc-900 font-bold text-sm whitespace-pre-line">
                {contactAddress}
              </p>
            </motion.div>
          </div>

          {/* Contact Form */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="lg:col-span-2 bg-white p-8 md:p-12 rounded-[2.5rem] shadow-sm border border-zinc-100"
          >
            <form className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="text-[10px] font-black text-zinc-400 uppercase tracking-widest ml-1">Full Name</label>
                  <input type="text" placeholder="John Doe" className="w-full px-6 py-4 bg-zinc-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500/10 transition-all" />
                </div>
                <div className="space-y-2">
                  <label className="text-[10px] font-black text-zinc-400 uppercase tracking-widest ml-1">Email Address</label>
                  <input type="email" placeholder="john@example.com" className="w-full px-6 py-4 bg-zinc-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500/10 transition-all" />
                </div>
              </div>

              <div className="space-y-2">
                <label className="text-[10px] font-black text-zinc-400 uppercase tracking-widest ml-1">Subject</label>
                <input type="text" placeholder="How can we help you?" className="w-full px-6 py-4 bg-zinc-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500/10 transition-all" />
              </div>

              <div className="space-y-2">
                <label className="text-[10px] font-black text-zinc-400 uppercase tracking-widest ml-1">Message</label>
                <textarea rows={6} placeholder="Write your message here..." className="w-full px-6 py-4 bg-zinc-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-emerald-500/10 transition-all"></textarea>
              </div>

              <button className="w-full md:w-auto px-12 py-5 bg-emerald-600 text-white rounded-2xl font-black text-xs uppercase tracking-widest shadow-xl shadow-emerald-500/20 hover:bg-emerald-700 transition-all active:scale-95 flex items-center justify-center gap-2">
                <Send className="w-4 h-4" />
                Send Message
              </button>
            </form>
          </motion.div>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default ContactPage;