"use client";

import React, { useState } from 'react';
import styles from './domains.module.css';
import { tldPricing } from '@/data/mockApi';

export default function Domains() {
    const [searchTerm, setSearchTerm] = useState('');
    const [error, setError] = useState('');

    const validateDomain = (domain: string) => {
        // Same robust regex as Hero component
        const regex = /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.[a-zA-Z]{2,}$/;
        if (!regex.test(domain)) {
            setError("Please enter a valid domain (e.g., example.com)");
            return false;
        }
        setError("");
        return true;
    };

    const handleSearch = () => {
        if (validateDomain(searchTerm)) {
            alert(`Checking availability for ${searchTerm}...`);
        }
    };

    return (
        <main className={styles.main}>
            {/* Domain Search Hero */}
            <section className={styles.hero}>
                <div className={styles.container}>
                    <h1 className={styles.title}>Find your perfect <span className={styles.highlight}>domain name</span></h1>
                    <p className={styles.subtitle}>
                        Secure your brand identity with our powerful domain search tools.
                    </p>

                    <div className={`${styles.searchWrapper} ${error ? styles.errorInput : ''}`}>
                        <input
                            type="text"
                            placeholder="Type your desired domain name..."
                            className={styles.searchInput}
                            value={searchTerm}
                            onChange={(e) => {
                                setSearchTerm(e.target.value);
                                if (error) setError('');
                            }}
                        />
                        <button className={styles.searchBtn} onClick={handleSearch}>Search</button>
                    </div>
                    {error && <div className={styles.errorMessage}>{error}</div>}

                    <div className={styles.popularTlds}>
                        <span>Popular:</span>
                        <span className={styles.tag}>.com</span>
                        <span className={styles.tag}>.net</span>
                        <span className={styles.tag}>.io</span>
                        <span className={styles.tag}>.shop</span>
                    </div>
                </div>
            </section>

            {/* Pricing Table */}
            <section className={styles.pricing}>
                <div className={styles.container}>
                    <h2 className={styles.sectionTitle}>Transparent Domain Pricing</h2>
                    <div className={styles.tableWrapper}>
                        <table className={styles.table}>
                            <thead>
                                <tr>
                                    <th>TLD</th>
                                    <th>Registration</th>
                                    <th>Renewal</th>
                                    <th>Transfer</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tldPricing.map((item, index) => (
                                    <tr key={index}>
                                        <td className={styles.tldCell}>{item.tld}</td>
                                        <td>{item.register}</td>
                                        <td>{item.renew}</td>
                                        <td>{item.transfer}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            {/* Features / Why Us */}
            <section className={styles.features}>
                <div className={styles.container}>
                    <div className={styles.featuresGrid}>
                        <div className={styles.featureCard}>
                            <h3>Full Control</h3>
                            <p>Manage DNS, renewals, and transfers from an easy-to-use dashboard.</p>
                        </div>
                        <div className={styles.featureCard}>
                            <h3>Privacy Protection</h3>
                            <p>We include WHOIS privacy protection for free with every eligible domain.</p>
                        </div>
                        <div className={styles.featureCard}>
                            <h3>24/7 Support</h3>
                            <p>Our team is always here to help you finding the right domain.</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    );
}