'use client';

export default function ContactUsPage() {
    return (
        <>
            {/* ===== HERO SECTION ===== */}
            <section className="contact-hero">
                <div className="hero-content">
                    <h1 className="hero-title">Take your business to the next level.</h1>
                    <div className="hero-underline"></div>
                </div>
            </section>

            {/* ===== CONTACT FORM SECTION ===== */}
            <section className="contact-section">
                <div className="contact-container">
                    <div className="contact-grid">

                        {/* LEFT — Contact Info */}
                        <div className="contact-info">
                            <h6 className="info-label">Get in touch</h6>
                            <h3 className="info-title">We'd love to hear from you.</h3>
                            <div className="info-details">
                                <p className="info-text">
                                    Email us or call us with any questions or inquiries
                                </p>
                                <a href="mailto:connect@nyraleadership.com" className="info-link">
                                    connect@nyraleadership.com
                                </a>
                                <p className="info-phone">+91 90827 73406</p>
                                <p className="info-text">
                                    We would be happy to answer your questions and set up a meeting with you.
                                </p>
                            </div>
                        </div>

                        {/* RIGHT — Form */}
                        <div className="contact-form-wrapper">
                            <form className="contact-form">
                                <div className="form-row">
                                    <div className="form-field">
                                        <label>Your name</label>
                                        <input type="text" name="name" required />
                                    </div>
                                    <div className="form-field">
                                        <label>Your email</label>
                                        <input type="email" name="email" required />
                                    </div>
                                </div>
                                <div className="form-field">
                                    <label>Subject</label>
                                    <input type="text" name="subject" required />
                                </div>
                                <div className="form-field">
                                    <label>Your message (optional)</label>
                                    <textarea name="message" rows={8}></textarea>
                                </div>
                                <button type="submit" className="submit-btn">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

            {/* WhatsApp Button */}
            <a
                href="https://wa.me/919082773406"
                target="_blank"
                rel="noopener noreferrer"
                className="whatsapp-btn"
                aria-label="Chat on WhatsApp"
            >
                <svg viewBox="0 0 32 32" className="whatsapp-icon">
                    <path fill="currentColor" d="M16 0c-8.837 0-16 7.163-16 16 0 2.825 0.737 5.607 2.137 8.048l-2.137 7.952 7.933-2.127c2.42 1.37 5.173 2.127 8.067 2.127 8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 29.467c-2.482 0-4.908-0.646-7.07-1.87l-0.507-0.292-5.003 1.342 1.356-5.036-0.31-0.517c-1.268-2.123-1.933-4.556-1.933-7.094 0-7.448 6.052-13.5 13.5-13.5s13.5 6.052 13.5 13.5c0 7.448-6.052 13.467-13.533 13.467zM21.5 18.3c-0.3-0.15-1.767-0.867-2.042-0.967s-0.475-0.15-0.675 0.15c-0.2 0.3-0.767 0.967-0.942 1.167s-0.35 0.225-0.65 0.075-1.267-0.467-2.417-1.492c-0.892-0.8-1.492-1.783-1.667-2.083s-0.017-0.458 0.133-0.608c0.133-0.133 0.3-0.35 0.45-0.525s0.2-0.3 0.3-0.5 0.050-0.375-0.025-0.525-0.675-1.625-0.925-2.225c-0.242-0.583-0.492-0.5-0.675-0.508-0.175-0.008-0.375-0.008-0.575-0.008s-0.525 0.075-0.8 0.375-1.050 1.025-1.050 2.5 1.075 2.9 1.225 3.1 2.117 3.233 5.133 4.533c0.717 0.308 1.275 0.492 1.717 0.633 0.717 0.225 1.367 0.192 1.883 0.117 0.575-0.083 1.767-0.717 2.017-1.408s0.25-1.292 0.175-1.417-0.275-0.2-0.575-0.35z" />
                </svg>
            </a>

            <style jsx>{`
                *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

                /* ── Hero ── */
                .contact-hero {
                    margin-top: 103px;
                    height: 500px;
                    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                                url('/contact-hero.jpg') center / cover no-repeat;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 20px;
                }
                .hero-content {
                    text-align: center;
                    max-width: 1140px;
                    width: 100%;
                }
                .hero-title {
                    font-family: 'Optima', Helvetica, Arial, sans-serif;
                    font-size: 56px;
                    font-weight: 400;
                    color: #ffffff;
                    margin: 0 0 30px;
                    line-height: 1.3;
                }
                .hero-underline {
                    width: 260px;
                    height: 3px;
                    background: #ffffff;
                    margin: 0 auto;
                }

                /* ── Contact section ── */
                .contact-section {
                    padding: 100px 0 120px;
                    background: #f8f9fa;
                }
                .contact-container {
                    max-width: 1140px;
                    margin: 0 auto;
                    padding: 0 15px;
                }

                /* Two-column grid */
                .contact-grid {
                    display: grid;
                    grid-template-columns: 45% 55%;
                    gap: 60px;
                    align-items: start;
                }

                /* ── Left — Info ── */
                .contact-info { padding-right: 20px; }

                .info-label {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 12px;
                    font-weight: 400;
                    color: #181B31;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    margin: 0 0 15px;
                }
                .info-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 30px;
                    font-weight: 400;
                    color: #181B31;
                    margin: 0 0 15px;
                    line-height: 1.2;
                }
                .info-details {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                }
                .info-text {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 400;
                    color: #5D6371;
                    line-height: 1.6;
                    margin: 0;
                }
                .info-link {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 400;
                    color: #B74273;
                    text-decoration: none;
                    transition: opacity 0.3s;
                    word-break: break-word;
                }
                .info-link:hover { opacity: 0.7; }
                .info-phone {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 400;
                    color: #5D6371;
                    margin: 0;
                    line-height: 1.6;
                }

                /* ── Right — Form ── */
                .contact-form-wrapper { padding-left: 20px; }
                .contact-form { width: 100%; }

                .form-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 40px;
                }
                .form-field { margin-bottom: 40px; }

                .form-field label {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 400;
                    color: #5D6371;
                    display: block;
                    margin: 0 0 6px;
                }
                .form-field input {
                    width: 100%;
                    padding: 6px 0;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 16px;
                    color: #333;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid #ccc;
                    outline: none;
                    transition: border-color 0.3s;
                }
                .form-field textarea {
                    width: 100%;
                    padding: 12px 0;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 16px;
                    color: #333;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid #ccc;
                    outline: none;
                    transition: border-color 0.3s;
                    resize: vertical;
                    min-height: 160px;
                }
                .form-field input:focus,
                .form-field textarea:focus { border-bottom-color: #184341; }

                .submit-btn {
                    width: 100%;
                    max-width: 426px;
                    padding: 18px 50px;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 500;
                    color: #ffffff;
                    background: #0F1B43;
                    border: none;
                    cursor: pointer;
                    transition: background 0.3s;
                    margin-top: 40px;
                }
                .submit-btn:hover { background: #081129; }

                /* ── WhatsApp ── */
                .whatsapp-btn {
                    position: fixed;
                    width: 60px; height: 60px;
                    bottom: 40px; right: 40px;
                    background: #25d366;
                    border-radius: 50%;
                    display: flex; align-items: center; justify-content: center;
                    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
                    z-index: 100;
                    transition: all 0.3s;
                }
                .whatsapp-btn:hover { background: #128c7e; transform: scale(1.1); }
                .whatsapp-icon { width: 35px; height: 35px; color: #fff; }

                /* ══════════════════════════════════════════
                   RESPONSIVE BREAKPOINTS
                ══════════════════════════════════════════ */

                /* 1200px — large tablet / small laptop */
                @media (max-width: 1200px) {
                    .contact-container { padding: 0 30px; }
                    .hero-title { font-size: 50px; }
                    .contact-section { padding: 80px 0 100px; }
                }

                /* 1024px */
                @media (max-width: 1024px) {
                    .contact-hero { margin-top: 90px; height: 450px; }
                    .hero-title { font-size: 44px; }
                    .contact-grid { gap: 40px; }
                    .info-title { font-size: 26px; }
                    .contact-section { padding: 70px 0 90px; }
                }

                /* 991px — stack to single column */
                @media (max-width: 991px) {
                    .contact-grid {
                        grid-template-columns: 1fr;
                        gap: 50px;
                    }
                    .contact-info { padding-right: 0; }
                    .contact-form-wrapper { padding-left: 0; }
                    .hero-title { font-size: 40px; }
                    .contact-hero { height: 400px; }
                    .submit-btn { max-width: 100%; }
                }

                /* 768px — tablet portrait */
                @media (max-width: 768px) {
                    .contact-hero {
                        margin-top: 75px;
                        height: 340px;
                        padding: 0 24px;
                    }
                    .hero-title { font-size: 32px; margin-bottom: 22px; }
                    .hero-underline { width: 180px; }

                    .contact-section { padding: 55px 0 70px; }
                    .contact-container { padding: 0 24px; }

                    .info-title { font-size: 24px; }
                    .info-text, .info-link, .info-phone { font-size: 16px; }
                    .info-label { font-size: 11px; }

                    .form-row { grid-template-columns: 1fr; gap: 0; }
                    .form-field { margin-bottom: 30px; }
                    .form-field label { font-size: 16px; }
                    .form-field input, .form-field textarea { font-size: 15px; }
                    .form-field textarea { min-height: 130px; }

                    .submit-btn {
                        font-size: 16px;
                        padding: 16px 40px;
                        margin-top: 28px;
                        max-width: 100%;
                    }

                    .whatsapp-btn { width: 54px; height: 54px; bottom: 24px; right: 20px; }
                    .whatsapp-icon { width: 30px; height: 30px; }
                }

                /* 600px */
                @media (max-width: 600px) {
                    .contact-hero { height: 300px; margin-top: 68px; padding: 0 20px; }
                    .hero-title { font-size: 26px; margin-bottom: 18px; }
                    .hero-underline { width: 140px; height: 2px; }

                    .contact-section { padding: 44px 0 60px; }
                    .contact-container { padding: 0 20px; }

                    .info-details { gap: 10px; }
                    .info-title { font-size: 22px; }
                    .info-text, .info-link, .info-phone { font-size: 15px; }

                    .form-field { margin-bottom: 24px; }
                    .form-field label { font-size: 15px; }
                    .form-field textarea { min-height: 110px; }
                    .submit-btn { font-size: 15px; padding: 14px 32px; margin-top: 22px; }
                }

                /* 480px — large phone */
                @media (max-width: 480px) {
                    .contact-hero { height: 270px; margin-top: 62px; padding: 0 16px; }
                    .hero-title { font-size: 22px; margin-bottom: 16px; }
                    .hero-underline { width: 110px; }

                    .contact-section { padding: 36px 0 50px; }
                    .contact-container { padding: 0 16px; }

                    .info-label { font-size: 10px; letter-spacing: 0.8px; margin-bottom: 10px; }
                    .info-title { font-size: 20px; margin-bottom: 12px; }
                    .info-text, .info-link, .info-phone { font-size: 14px; }

                    .form-field { margin-bottom: 20px; }
                    .form-field label { font-size: 14px; }
                    .form-field input, .form-field textarea { font-size: 14px; }
                    .form-field textarea { min-height: 100px; }

                    .submit-btn {
                        font-size: 14px;
                        padding: 13px 24px;
                        margin-top: 18px;
                        width: 100%;
                    }

                    .whatsapp-btn { width: 48px; height: 48px; bottom: 20px; right: 16px; }
                    .whatsapp-icon { width: 26px; height: 26px; }
                }

                /* 360px — small phone */
                @media (max-width: 360px) {
                    .contact-hero { height: 240px; margin-top: 58px; }
                    .hero-title { font-size: 19px; margin-bottom: 14px; }
                    .hero-underline { width: 90px; }

                    .contact-section { padding: 28px 0 40px; }
                    .contact-container { padding: 0 14px; }

                    .info-title { font-size: 18px; }
                    .info-text, .info-link, .info-phone { font-size: 13px; }

                    .form-field label { font-size: 13px; }
                    .form-field input, .form-field textarea { font-size: 13px; }
                    .submit-btn { font-size: 13px; padding: 12px 20px; margin-top: 14px; }

                    .whatsapp-btn { width: 44px; height: 44px; bottom: 16px; right: 14px; }
                    .whatsapp-icon { width: 24px; height: 24px; }
                }
            `}</style>
        </>
    );
}