'use client';

import { useState } from 'react';
import type { Metadata } from 'next';
import styles from './contact.module.css';

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

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

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // Handle form submission
        console.log('Form submitted:', formData);
        alert('Thank you for your message! We\'ll get back to you soon.');
    };

    const contactInfo = [
        {
            icon: '📧',
            title: 'Email',
            value: 'support@socialbuddy.com',
            link: 'mailto:support@socialbuddy.com',
        },
        {
            icon: '💬',
            title: 'Live Chat',
            value: 'Available 24/7',
            link: '#',
        },
        {
            icon: '📞',
            title: 'Phone',
            value: '+1 (555) 123-4567',
            link: 'tel:+15551234567',
        },
        {
            icon: '📍',
            title: 'Office',
            value: 'San Francisco, CA',
            link: '#',
        },
    ];

    return (
        <div className={styles.contactPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>
                            Get in <span className="gradient-text">Touch</span>
                        </h1>
                        <p className={styles.heroSubtitle}>
                            Have a question or need help? We're here for you 24/7.
                            Reach out and let's start a conversation.
                        </p>
                    </div>
                </div>
            </section>

            {/* Contact Info Cards */}
            <section className="section">
                <div className="container">
                    <div className={styles.contactGrid}>
                        {contactInfo.map((info, index) => (
                            <a key={index} href={info.link} className={styles.contactCard}>
                                <div className={styles.cardIcon}>{info.icon}</div>
                                <h3 className={styles.cardTitle}>{info.title}</h3>
                                <p className={styles.cardValue}>{info.value}</p>
                            </a>
                        ))}
                    </div>
                </div>
            </section>

            {/* Contact Form Section */}
            <section className={`section ${styles.formSection}`}>
                <div className="container">
                    <div className={styles.formContainer}>
                        <div className={styles.formInfo}>
                            <h2 className={styles.formTitle}>Send Us a Message</h2>
                            <p className={styles.formDescription}>
                                Fill out the form and our team will get back to you within 24 hours.
                            </p>

                            <div className={styles.benefits}>
                                <div className={styles.benefit}>
                                    <span className={styles.checkIcon}>✓</span>
                                    <span>Quick response time</span>
                                </div>
                                <div className={styles.benefit}>
                                    <span className={styles.checkIcon}>✓</span>
                                    <span>Expert support team</span>
                                </div>
                                <div className={styles.benefit}>
                                    <span className={styles.checkIcon}>✓</span>
                                    <span>Personalized solutions</span>
                                </div>
                            </div>

                            <div className={styles.socialLinks}>
                                <h3 className={styles.socialTitle}>Follow Us</h3>
                                <div className={styles.socialIcons}>
                                    <a href="#" className={styles.socialIcon}>🐦</a>
                                    <a href="#" className={styles.socialIcon}>📘</a>
                                    <a href="#" className={styles.socialIcon}>📷</a>
                                    <a href="#" className={styles.socialIcon}>💼</a>
                                </div>
                            </div>
                        </div>

                        <form className={styles.form} onSubmit={handleSubmit}>
                            <div className={styles.formGroup}>
                                <label htmlFor="name" className={styles.label}>
                                    Full Name *
                                </label>
                                <input
                                    type="text"
                                    id="name"
                                    name="name"
                                    value={formData.name}
                                    onChange={handleChange}
                                    className={styles.input}
                                    placeholder="John Doe"
                                    required
                                />
                            </div>

                            <div className={styles.formGroup}>
                                <label htmlFor="email" className={styles.label}>
                                    Email Address *
                                </label>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    value={formData.email}
                                    onChange={handleChange}
                                    className={styles.input}
                                    placeholder="john@example.com"
                                    required
                                />
                            </div>

                            <div className={styles.formGroup}>
                                <label htmlFor="company" className={styles.label}>
                                    Company
                                </label>
                                <input
                                    type="text"
                                    id="company"
                                    name="company"
                                    value={formData.company}
                                    onChange={handleChange}
                                    className={styles.input}
                                    placeholder="Your Company"
                                />
                            </div>

                            <div className={styles.formGroup}>
                                <label htmlFor="subject" className={styles.label}>
                                    Subject *
                                </label>
                                <select
                                    id="subject"
                                    name="subject"
                                    value={formData.subject}
                                    onChange={handleChange}
                                    className={styles.select}
                                    required
                                >
                                    <option value="">Select a subject</option>
                                    <option value="general">General Inquiry</option>
                                    <option value="support">Technical Support</option>
                                    <option value="sales">Sales Question</option>
                                    <option value="partnership">Partnership</option>
                                    <option value="feedback">Feedback</option>
                                </select>
                            </div>

                            <div className={styles.formGroup}>
                                <label htmlFor="message" className={styles.label}>
                                    Message *
                                </label>
                                <textarea
                                    id="message"
                                    name="message"
                                    value={formData.message}
                                    onChange={handleChange}
                                    className={styles.textarea}
                                    placeholder="Tell us how we can help you..."
                                    rows={6}
                                    required
                                />
                            </div>

                            <button type="submit" className="btn btn-primary btn-large">
                                Send Message
                                <span className={styles.arrow}>→</span>
                            </button>
                        </form>
                    </div>
                </div>
            </section>

            {/* FAQ Quick Links */}
            <section className={styles.quickLinks}>
                <div className="container">
                    <h2 className={styles.quickLinksTitle}>Looking for something specific?</h2>
                    <div className={styles.linksGrid}>
                        <a href="/docs" className={styles.linkCard}>
                            <span className={styles.linkIcon}>📚</span>
                            <span className={styles.linkText}>Documentation</span>
                        </a>
                        <a href="/pricing" className={styles.linkCard}>
                            <span className={styles.linkIcon}>💰</span>
                            <span className={styles.linkText}>Pricing</span>
                        </a>
                        <a href="/blog" className={styles.linkCard}>
                            <span className={styles.linkIcon}>📝</span>
                            <span className={styles.linkText}>Blog</span>
                        </a>
                        <a href="/features" className={styles.linkCard}>
                            <span className={styles.linkIcon}>✨</span>
                            <span className={styles.linkText}>Features</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    );
}