'use client';

import { useState } from 'react';
import Image from 'next/image';

export default function ContactPage() {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        company: '',
        phone: '',
        service: '',
        message: ''
    });

    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);

        try {
            // First try the PHP backend
            const formDataToSend = new FormData();
            formDataToSend.append('name', formData.name);
            formDataToSend.append('email', formData.email);
            formDataToSend.append('company', formData.company);
            formDataToSend.append('phone', formData.phone);
            formDataToSend.append('service', formData.service);
            formDataToSend.append('message', formData.message);

            const response = await fetch('/api/send-email', {
                method: 'POST',
                body: formDataToSend
            });

            const data = await response.json();

            if (response.ok && data.success) {
                setSubmitStatus('success');
                setFormData({
                    name: '',
                    email: '',
                    company: '',
                    phone: '',
                    service: '',
                    message: ''
                });
                setTimeout(() => setSubmitStatus('idle'), 5000);
            } else {
                setSubmitStatus('error');
                setTimeout(() => setSubmitStatus('idle'), 5000);
            }

        } catch (error) {
            console.error('Error:', error);
            setSubmitStatus('error');
            setTimeout(() => setSubmitStatus('idle'), 5000);
        } finally {
            setIsSubmitting(false);
        }
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });
    };

    return (
        <div className="min-h-screen bg-orange-25 pt-20">
            {/* Hero Section */}
            <section
                className="relative px-4 sm:px-6 lg:px-8 bg-top bg-no-repeat"
                style={{
                    backgroundImage: "url('/legacy/SirenTuomala_office.jpg')",
                    backgroundSize: 'cover',
                    backgroundPosition: 'center top',
                    backgroundRepeat: 'no-repeat',
                    backgroundAttachment: 'fixed',
                    minHeight: '100vh' // Full viewport height like Services page
                }}
            >
                <div className="max-w-7xl mx-auto">
                    {/* Hero Content */}
                    <div className="flex flex-col justify-center min-h-screen py-20">
                        <div className="text-center relative z-10">
                            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6" style={{
                                textShadow: '2px 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.6)'
                            }}>
                                Contact Information
                            </h1>
                            <div className="max-w-3xl mx-auto mb-12">
                                <div className="bg-white rounded-2xl p-6 shadow-2xl" style={{ backgroundColor: 'rgba(255, 255, 255, 0.9125)' }}>
                                    <p className="text-xl sm:text-2xl font-bold" style={{ color: '#134074' }}>
                                        Contact us and book a consultation
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Partner Cards */}
                        <div className="relative z-10">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
                                {/* Nils Siren */}
                                <div className="bg-white p-6 md:p-8 rounded-2xl ring-1 ring-slate-200 shadow-lg">
                                    <div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6">
                                        <div className="flex-shrink-0 mx-auto md:mx-0">
                                            <Image
                                                src="/legacy/Nils_Siren_25.jpg"
                                                alt="Nils Siren"
                                                width={240}
                                                height={300}
                                                className="w-48 md:w-60 h-60 md:h-75 object-cover rounded-lg shadow-md"
                                                unoptimized
                                            />
                                        </div>
                                        <div className="flex-1 text-center md:text-left">
                                            <h3 className="text-2xl font-bold text-slate-700 mb-2 text-center md:text-left">Nils Siren</h3>
                                            <p className="text-lg text-slate-600 mb-4 text-center md:text-left">Partner, BSc (Econ), KLT</p>

                                            <div className="space-y-3">
                                                <div className="flex items-center justify-center md:justify-start">
                                                    <div className="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                                        <svg className="w-3 h-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                                                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                                        </svg>
                                                    </div>
                                                    <a href="mailto:nils@sirentuomala.fi" className="text-slate-700 hover:text-blue-600">
                                                        nils@sirentuomala.fi
                                                    </a>
                                                </div>

                                                <div className="flex items-center justify-center md:justify-start">
                                                    <div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                                        <svg className="w-3 h-3 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                                                        </svg>
                                                    </div>
                                                    <a href="tel:+358456386013" className="text-slate-700 hover:text-green-600">
                                                        +358 45 638 6013
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {/* Kasimir Tuomala */}
                                <div className="bg-white p-6 md:p-8 rounded-2xl ring-1 ring-slate-200 shadow-lg">
                                    <div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6">
                                        <div className="flex-shrink-0 mx-auto md:mx-0">
                                            <Image
                                                src="/legacy/Kasimir_Tuomala_27.jpg"
                                                alt="Kasimir Tuomala"
                                                width={240}
                                                height={300}
                                                className="w-48 md:w-60 h-60 md:h-75 object-cover rounded-lg shadow-md"
                                                unoptimized
                                            />
                                        </div>
                                        <div className="flex-1 text-center md:text-left">
                                            <h3 className="text-2xl font-bold text-slate-700 mb-2 text-center md:text-left">Kasimir Tuomala</h3>
                                            <p className="text-lg text-slate-600 mb-4 text-center md:text-left">CEO, Partner, BBA, KLT</p>

                                            <div className="space-y-3">
                                                <div className="flex items-center justify-center md:justify-start">
                                                    <div className="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                                        <svg className="w-3 h-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                                                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                                        </svg>
                                                    </div>
                                                    <a href="mailto:kasimir@sirentuomala.fi" className="text-slate-700 hover:text-blue-600">
                                                        kasimir@sirentuomala.fi
                                                    </a>
                                                </div>

                                                <div className="flex items-center justify-center md:justify-start">
                                                    <div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                                        <svg className="w-3 h-3 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                                                        </svg>
                                                    </div>
                                                    <a href="tel:+358451339084" className="text-slate-700 hover:text-green-600">
                                                        +358 45 133 9084
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Contact Information */}
            <section className="py-10 px-4 sm:px-6 lg:px-8">
                <div className="max-w-7xl mx-auto">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        {/* Left Column: Contact Details + Map */}
                        <div>
                            <h2 className="text-3xl font-bold text-slate-700 mb-6">
                                Contact us
                            </h2>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div className="flex items-start">
                                    <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-lg font-semibold text-slate-700 mb-2">Phone</h3>
                                        <p className="text-slate-700">+358 45 638 6013</p>
                                    </div>
                                </div>

                                <div className="flex items-start">
                                    <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-lg font-semibold text-slate-700 mb-2">Email</h3>
                                        <p className="text-slate-700">nils@sirentuomala.fi</p>
                                    </div>
                                </div>

                                <div className="flex items-start">
                                    <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-lg font-semibold text-slate-700 mb-2">Office</h3>
                                        <p className="text-slate-700">Livornonkatu 12</p>
                                        <p className="text-slate-700">00220 Helsinki, Finland</p>
                                    </div>
                                </div>

                                <div className="flex items-start">
                                    <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-lg font-semibold text-slate-700 mb-2">Company information</h3>
                                        <p className="text-slate-700">Y-tunnus: 3243684-5</p>
                                        <p className="text-slate-700">Siren & Tuomala Taloushallintopalvelut Oy</p>
                                    </div>
                                </div>

                                <div className="flex items-start">
                                    <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-lg font-semibold text-slate-700 mb-2">Facebook</h3>
                                        <a
                                            href="https://www.facebook.com/profile.php?id=61567410746596"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-blue-600 hover:text-blue-700"
                                        >
                                            Follow us on Facebook
                                        </a>
                                    </div>
                                </div>
                            </div>

                            {/* Office Map */}
                            <div className="mt-8">
                                <h3 className="text-lg font-semibold text-slate-700 mb-4">We are here</h3>
                                <div className="w-full h-48 rounded-lg overflow-hidden ring-1 ring-blue-200 shadow-lg">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1995.753464066915!2d24.91394787717898!3d60.157345275025875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46920a4cfdae8463%3A0xcd6910f7ac2a6daa!2sLivornonkatu%2012%2C%2000220%20Helsinki!5e1!3m2!1sen!2sfi!4v1759334262830!5m2!1sen!2sfi"
                                        width="100%"
                                        height="100%"
                                        style={{ border: 0 }}
                                        allowFullScreen
                                        loading="lazy"
                                        referrerPolicy="no-referrer-when-downgrade"
                                        title="Siren & Tuomala Taloushallintopalvelut Oy - Livornonkatu 12, 00220 Helsinki"
                                    ></iframe>
                                </div>
                                <p className="text-sm text-slate-500 mt-2">Livornonkatu 12, 00220 Helsinki</p>
                            </div>
                        </div>

                        {/* Right Column: Contact Form */}
                        <div className="bg-white p-6 rounded-2xl ring-1 ring-blue-200 shadow-lg">
                            <h2 className="text-2xl font-bold text-slate-700 mb-4">
                                Send message
                            </h2>

                            {submitStatus === 'success' && (
                                <div className="mb-6 p-4 bg-green-100 border border-green-300 text-green-800 rounded-lg">
                                    Message sent successfully! We will contact you soon.
                                </div>
                            )}

                            {submitStatus === 'error' && (
                                <div className="mb-6 p-4 bg-red-100 border border-red-300 text-red-800 rounded-lg">
                                    Message sending failed. Please try again later.
                                </div>
                            )}

                            <form onSubmit={handleSubmit} className="space-y-4">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-2">
                                            Name *
                                        </label>
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            required
                                            value={formData.name}
                                            onChange={handleChange}
                                            className="w-full px-4 py-3 bg-white text-slate-700 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="First name Last name"
                                        />
                                    </div>

                                    <div>
                                        <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
                                            Email *
                                        </label>
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            required
                                            value={formData.email}
                                            onChange={handleChange}
                                            className="w-full px-4 py-3 bg-white text-slate-700 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="firstname@yritys.fi"
                                        />
                                    </div>
                                </div>

                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label htmlFor="company" className="block text-sm font-medium text-slate-700 mb-2">
                                            Company
                                        </label>
                                        <input
                                            type="text"
                                            id="company"
                                            name="company"
                                            value={formData.company}
                                            onChange={handleChange}
                                            className="w-full px-4 py-3 bg-white text-slate-700 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="Company name"
                                        />
                                    </div>

                                    <div>
                                        <label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-2">
                                            Phone
                                        </label>
                                        <input
                                            type="tel"
                                            id="phone"
                                            name="phone"
                                            value={formData.phone}
                                            onChange={handleChange}
                                            className="w-full px-4 py-3 bg-white text-slate-700 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            placeholder="+358 45 638 6013"
                                        />
                                    </div>
                                </div>

                                <div>
                                    <label htmlFor="service" className="block text-sm font-medium text-slate-700 mb-2">
                                        Service
                                    </label>
                                    <select
                                        id="service"
                                        name="service"
                                        value={formData.service}
                                        onChange={handleChange}
                                        className="w-full px-4 py-3 bg-white text-slate-700 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    >
                                        <option value="">Select a service</option>
                                        <option value="kirjanpito">Accounting and financial statements</option>
                                        <option value="palkanlaskenta">Payroll</option>
                                        <option value="verotus">Taxation and other professional services</option>
                                        <option value="muu">Other</option>
                                    </select>
                                </div>

                                <div>
                                    <label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-2">
                                        Message *
                                    </label>
                                    <textarea
                                        id="message"
                                        name="message"
                                        required
                                        rows={4}
                                        value={formData.message}
                                        onChange={handleChange}
                                        className="w-full px-4 py-3 bg-white text-slate-700 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        placeholder="Please tell us more about the service you need..."
                                    />
                                </div>

                                <button
                                    type="submit"
                                    disabled={isSubmitting}
                                    className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-blue-400 text-white font-semibold py-3 px-6 rounded-full transition-colors duration-200"
                                >
                                    {isSubmitting ? 'Sending...' : 'Send message'}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-orange-25">
                <div className="max-w-4xl mx-auto">
                    <div className="rounded-2xl p-8 shadow-2xl" style={{ backgroundColor: 'rgba(241, 245, 249, 0.95)', border: '2px solid #134074' }}>
                        <div className="text-center">
                            <h2 className="text-3xl sm:text-4xl font-bold mb-8" style={{ color: '#134074' }}>
                                Contact us and book a consultation
                            </h2>
                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <a
                                    href="tel:+358456386013"
                                    className="text-white hover:opacity-90 font-semibold py-3 px-8 rounded-full transition-colors duration-200 shadow-lg"
                                    style={{ backgroundColor: '#134074' }}
                                >
                                    Call now
                                </a>
                                <a
                                    href="mailto:nils@sirentuomala.fi"
                                    className="border-2 font-semibold py-3 px-8 rounded-full transition-colors duration-200"
                                    style={{ borderColor: '#134074', color: '#134074' }}
                                    onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = '#134074'; (e.target as HTMLElement).style.color = '#EEF4ED'; }}
                                    onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { (e.target as HTMLElement).style.backgroundColor = 'transparent'; (e.target as HTMLElement).style.color = '#134074'; }}
                                >
                                    Send email
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}