import { Link, useForm, usePage } from '@inertiajs/react';
import { SeoHead } from '@/components/seo-head';
import { motion } from 'framer-motion';
import { ArrowRight, Facebook, Linkedin, Mail, MapPin, Phone, Send } from 'lucide-react';
import PublicLayout from '@/layouts/public-layout';

export default function Contact() {
    const { flash } = usePage().props as { flash: Record<string, string> };
    const { data, setData, post, processing, errors, reset, wasSuccessful } = useForm({
        name: '',
        email: '',
        subject: '',
        message: '',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post('/contact', {
            onSuccess: () => reset(),
        });
    }

    return (
        <div>
            <SeoHead
                title="Contact ABEC Africa"
                description="Get in touch with the African Biomedical Engineering Consortium. Reach us at our Mbarara, Uganda office or send a message online. We welcome partnership enquiries, media requests, and membership questions."
                image="/images/professional-reading-notebook.jpg"
                keywords="contact ABEC Africa, ABEC Africa email, biomedical engineering consortium contact Uganda, Mbarara biomedical engineering"
                url="https://abecafrica.org/contact"
                jsonLd={{
                    '@context': 'https://schema.org',
                    '@type': 'ContactPage',
                    url: 'https://abecafrica.org/contact',
                    name: 'Contact ABEC Africa',
                    isPartOf: { '@id': 'https://abecafrica.org/#website' },
                    inLanguage: 'en-GB',
                }}
            />
            {/* HERO */}
            <section className="relative min-h-[60vh] flex items-end overflow-hidden">
                <div className="absolute inset-0">
                    <img
                        src="/images/senior-professional-window.jpg"
                        alt="Senior professional at window"
                        className="w-full h-full object-cover object-center"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background:
                                'linear-gradient(105deg, rgba(17,17,19,0.97) 0%, rgba(94,0,6,0.82) 40%, rgba(27,38,92,0.45) 70%, transparent 100%)',
                        }}
                    />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 pt-48 w-full">
                    <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
                        <div className="flex items-center gap-3 mb-4">
                            <div className="w-8 h-px bg-[#d0d4ec]/60" />
                            <span className="text-[#d0d4ec]/70 text-xs tracking-[0.2em] uppercase font-semibold">Reach Out</span>
                        </div>
                        <h1 className="text-5xl lg:text-7xl font-black text-white tracking-tight leading-tight mb-4">Contact ABEC</h1>
                        <p className="text-white/60 text-lg max-w-xl leading-relaxed">
                            Whether you're a potential member, funder, partner, or simply want to learn more — we'd love to hear from you.
                        </p>
                    </motion.div>
                </div>
            </section>

            {/* CONTACT + FORM — stacked boxed layout */}
            <section className="bg-[#f0f1f8] py-16">
                <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

                    {/* Row 1 — Get in Touch */}
                    <div className="bg-white border border-[#d0d4ec]">
                        <div className="px-8 py-10">
                            <div className="section-rule" />
                            <h2 className="text-2xl font-black text-[#1b265c] tracking-tight mb-8">Get in Touch</h2>

                            <div className="grid sm:grid-cols-3 gap-6 mb-8">
                                <div className="flex gap-4 items-start">
                                    <div className="w-10 h-10 bg-[#1b265c] flex items-center justify-center flex-shrink-0">
                                        <MapPin size={16} className="text-white" />
                                    </div>
                                    <div>
                                        <h4 className="label-caps mb-1">Office</h4>
                                        <p className="text-sm text-[#1b265c]/70 leading-relaxed">
                                            Mbaguta Cell, Ruharo
                                            <br />
                                            Mbarara City, Uganda
                                            <br />
                                            P.O. Box 1807
                                        </p>
                                        <p className="text-xs text-[#555e8a] mt-1">c/o Soar Research Foundation</p>
                                    </div>
                                </div>

                                <div className="flex gap-4 items-start">
                                    <div className="w-10 h-10 bg-[#df2548] flex items-center justify-center flex-shrink-0">
                                        <Mail size={16} className="text-white" />
                                    </div>
                                    <div>
                                        <h4 className="label-caps mb-1">Email</h4>
                                        <a
                                            href="mailto:abec.uganda@gmail.com"
                                            className="text-sm text-[#1b265c] hover:text-[#df2548] transition-colors font-medium break-all"
                                        >
                                            abec.uganda@gmail.com
                                        </a>
                                    </div>
                                </div>

                                <div className="flex gap-4 items-start">
                                    <div className="w-10 h-10 bg-[#df2548] flex items-center justify-center flex-shrink-0">
                                        <Phone size={16} className="text-white" />
                                    </div>
                                    <div>
                                        <h4 className="label-caps mb-1">Phone</h4>
                                        <a
                                            href="tel:+256759542376"
                                            className="text-sm text-[#1b265c] hover:text-[#df2548] transition-colors font-medium"
                                        >
                                            +256 759 542 376
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div className="border-t border-[#d0d4ec] pt-6">
                                <h4 className="label-caps mb-3">Follow Us</h4>
                                <div className="flex gap-3">
                                    <a
                                        href="https://www.facebook.com/abec.africa"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="flex items-center gap-2 px-4 py-2 bg-[#1b265c] text-white text-xs font-semibold hover:bg-[#df2548] transition-colors"
                                    >
                                        <Facebook size={13} /> Facebook
                                    </a>
                                    <a
                                        href="https://www.linkedin.com/company/abec-african-biomedical-engineering-consortium/"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="flex items-center gap-2 px-4 py-2 bg-[#1b265c] text-white text-xs font-semibold hover:bg-[#df2548] transition-colors"
                                    >
                                        <Linkedin size={13} /> LinkedIn
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Row 2 — Send a Message */}
                    <div className="bg-white border border-[#d0d4ec]">
                        <div className="px-8 py-10">
                            <div className="section-rule" />
                            <h2 className="text-2xl font-black text-[#1b265c] tracking-tight mb-8">Send a Message</h2>

                            {(wasSuccessful || flash?.success) ? (
                                <motion.div
                                    initial={{ opacity: 0, scale: 0.97 }}
                                    animate={{ opacity: 1, scale: 1 }}
                                    className="border border-[#df2548] p-10 text-center"
                                >
                                    <div className="w-12 h-12 bg-[#df2548] flex items-center justify-center mx-auto mb-4">
                                        <Send size={20} className="text-white" />
                                    </div>
                                    <h3 className="text-xl font-extrabold text-[#1b265c] mb-2">Message Sent</h3>
                                    <p className="text-sm text-[#555e8a] leading-relaxed">
                                        Thank you for reaching out. The ABEC team will be in touch shortly.
                                    </p>
                                </motion.div>
                            ) : (
                                <form onSubmit={submit} className="space-y-5">
                                    <div className="grid sm:grid-cols-2 gap-4">
                                        <div>
                                            <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                                Full Name *
                                            </label>
                                            <input
                                                type="text"
                                                value={data.name}
                                                onChange={(e) => setData('name', e.target.value)}
                                                placeholder="Dr. Jane Mwangi"
                                                className="w-full h-10 px-3 border border-[#d0d4ec] text-sm text-[#1b265c] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                            />
                                            {errors.name && <p className="text-[#df2548] text-xs mt-1">{errors.name}</p>}
                                        </div>
                                        <div>
                                            <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                                Email Address *
                                            </label>
                                            <input
                                                type="email"
                                                value={data.email}
                                                onChange={(e) => setData('email', e.target.value)}
                                                placeholder="jane@university.ac.ke"
                                                className="w-full h-10 px-3 border border-[#d0d4ec] text-sm text-[#1b265c] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                            />
                                            {errors.email && <p className="text-[#df2548] text-xs mt-1">{errors.email}</p>}
                                        </div>
                                    </div>
                                    <div>
                                        <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                            Subject *
                                        </label>
                                        <input
                                            type="text"
                                            value={data.subject}
                                            onChange={(e) => setData('subject', e.target.value)}
                                            placeholder="Membership enquiry / Partnership / Summer School..."
                                            className="w-full h-10 px-3 border border-[#d0d4ec] text-sm text-[#1b265c] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                        />
                                        {errors.subject && <p className="text-[#df2548] text-xs mt-1">{errors.subject}</p>}
                                    </div>
                                    <div>
                                        <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                            Message *
                                        </label>
                                        <textarea
                                            rows={6}
                                            value={data.message}
                                            onChange={(e) => setData('message', e.target.value)}
                                            placeholder="Tell us about yourself and how you'd like to engage with ABEC..."
                                            className="w-full border border-[#d0d4ec] bg-white px-3 py-2.5 text-sm text-[#1b265c] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors resize-none"
                                        />
                                        {errors.message && <p className="text-[#df2548] text-xs mt-1">{errors.message}</p>}
                                    </div>
                                    <button
                                        type="submit"
                                        disabled={processing}
                                        className="w-full h-12 bg-[#1b265c] text-white text-xs font-bold tracking-[0.18em] uppercase inline-flex items-center justify-center gap-2 hover:bg-[#df2548] disabled:opacity-50 transition-colors"
                                    >
                                        {processing ? 'Sending...' : <><Send size={14} /> Send Message</>}
                                    </button>
                                </form>
                            )}
                        </div>
                    </div>

                </div>
            </section>
            {/* CTA */}
            <section className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img src="/images/african-woman-biology-books.jpg" alt="" className="w-full h-full object-cover" />
                    <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgba(10,38,71,0.97) 0%, rgba(10,38,71,0.92) 40%, rgba(10,38,71,0.35) 65%, transparent 100%)' }} />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
                    <div className="max-w-lg">
                        <span className="text-[#d0d4ec]/60 text-xs tracking-[0.2em] uppercase font-semibold block mb-3">Membership</span>
                        <h2 className="text-4xl font-black text-white tracking-tight mb-4">Ready to Join ABEC?</h2>
                        <p className="text-white/60 leading-relaxed mb-8 text-sm">
                            Students join free. Individuals from $5/year. Institutions from $100/year. Be part of Africa's biomedical engineering network.
                        </p>
                        <Link
                            href="/join"
                            className="inline-flex items-center gap-2 h-12 px-8 bg-[#d0d4ec] text-[#1b265c] text-xs font-bold tracking-[0.15em] uppercase hover:bg-white transition-colors"
                        >
                            Apply for Membership <ArrowRight size={14} />
                        </Link>
                    </div>
                </div>
            </section>
        </div>
    );
}

Contact.layout = (page: React.ReactNode) => <PublicLayout>{page}</PublicLayout>;