'use client';

import { motion } from 'framer-motion';
import { Icon, WhatsappGlyph } from './icons';
import { Button } from './ui/button';
import { site } from '@/lib/site';
import { waGeneralInquiry } from '@/lib/whatsapp';
import { SectionHead } from './category-grid';

export function ContactSection() {
    return (
        <section className="section-pad bg-mesh-steel bg-noise relative">
            <div className="container-jt">
                <SectionHead eyebrow="Talk to us" title="Get in touch" sub="WhatsApp, phone, or come by the showroom in Industrial Area, Kampala." />
                <div className="grid lg:grid-cols-[1.1fr_1fr] gap-8 mt-12">
                    {/* Form */}
                    <motion.form
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5 }}
                        action={`mailto:${site.email}`}
                        method="post"
                        encType="text/plain"
                        className="glass rounded-2xl p-7 lg:p-9"
                    >
                        <div className="grid sm:grid-cols-2 gap-4">
                            <Field label="Full Name" name="name" required />
                            <Field label="Phone" name="phone" type="tel" required />
                            <Field label="Email" name="email" type="email" className="sm:col-span-2" />
                            <Field label="Company" name="company" className="sm:col-span-2" />
                            <div className="sm:col-span-2">
                                <label className="block font-mono text-[11px] uppercase tracking-widest text-steel-400 mb-2">Tell us what you need</label>
                                <textarea
                                    name="message"
                                    rows={5}
                                    required
                                    placeholder="e.g. 15 kVA standby genset for a small clinic, runtime ~6 hrs/day"
                                    className="w-full bg-white/[0.03] border border-white/10 rounded-md px-4 py-3 text-sm text-white placeholder:text-steel-500 focus:outline-none focus:border-orange-500/60 transition-colors"
                                />
                            </div>
                        </div>
                        <div className="mt-6 flex flex-wrap gap-3">
                            <Button type="submit" size="lg" variant="primary">
                                <Icon.Send className="w-4 h-4" /> Send Message
                            </Button>
                            <Button asChild variant="whatsapp" size="lg">
                                <a href={waGeneralInquiry()} target="_blank" rel="noopener">
                                    <WhatsappGlyph className="w-4 h-4" /> Or WhatsApp Us
                                </a>
                            </Button>
                        </div>
                    </motion.form>

                    {/* Info card + map */}
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5, delay: 0.1 }}
                        className="space-y-4"
                    >
                        <div className="glass rounded-2xl p-6">
                            <h3 className="font-display text-xl text-white mb-4">Headquarters</h3>
                            <ul className="space-y-3 text-sm">
                                <InfoRow icon={Icon.MapPin}>{site.address.street}, {site.address.city}, {site.address.country}</InfoRow>
                                <InfoRow icon={Icon.Phone} href={`tel:${site.phone}`}>{site.phoneDisplay}</InfoRow>
                                <InfoRow icon={Icon.Mail} href={`mailto:${site.email}`}>{site.email}</InfoRow>
                                <InfoRow icon={Icon.Clock}>{site.hours}</InfoRow>
                            </ul>
                        </div>
                        <div className="aspect-[4/3] rounded-2xl overflow-hidden glass">
                            <iframe
                                title="JamaliTech location"
                                src="https://www.google.com/maps?q=Industrial+Area,+Kampala&z=14&output=embed"
                                loading="lazy"
                                referrerPolicy="no-referrer-when-downgrade"
                                className="w-full h-full grayscale-[0.6] contrast-[1.1] opacity-90"
                            />
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}

function Field({ label, name, type = 'text', required = false, className = '' }: { label: string; name: string; type?: string; required?: boolean; className?: string }) {
    return (
        <div className={className}>
            <label className="block font-mono text-[11px] uppercase tracking-widest text-steel-400 mb-2">{label}</label>
            <input
                type={type}
                name={name}
                required={required}
                className="w-full h-11 bg-white/[0.03] border border-white/10 rounded-md px-4 text-sm text-white placeholder:text-steel-500 focus:outline-none focus:border-orange-500/60 transition-colors"
            />
        </div>
    );
}

function InfoRow({ icon: I, href, children }: { icon: typeof Icon.Phone; href?: string; children: React.ReactNode }) {
    const content = (
        <>
            <span className="w-9 h-9 rounded-md bg-orange-600/10 text-orange-500 inline-flex items-center justify-center shrink-0">
                <I className="w-4 h-4" />
            </span>
            <span className="text-steel-200">{children}</span>
        </>
    );
    return (
        <li>
            {href ? (
                <a href={href} className="flex items-center gap-3 hover:text-orange-500 transition-colors">{content}</a>
            ) : (
                <div className="flex items-center gap-3">{content}</div>
            )}
        </li>
    );
}