'use client';

export default function RegisterPage() {
    return (
        <>
            <style jsx global>{`
                *, *::before, *::after { box-sizing: border-box; font-family: inherit; }

                :root {
                    --red: rgb(215, 45, 62);
                    --navy: #0f1b43;
                    --text: #515978;
                    --border: #e8e8e8;
                    --bg: #f6f6f6;
                    --white: #fff;
                    --input-border: #d4d4d4;
                    --label: #7b7e8e;
                    --link: #2563eb;
                }

                body {
                    color: var(--text);
                    background: var(--bg);
                    -webkit-font-smoothing: antialiased;
                    overflow-x: hidden;
                }

                .rzp-header {
                    background: var(--white);
                    border-bottom: 1px solid var(--border);
                    padding: 0 40px;
                    height: 72px;
                    display: flex;
                    align-items: center;
                }
                .rzp-brand {
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    border: 1px solid var(--border);
                    padding: 8px 16px 8px 8px;
                    border-radius: 4px;
                }
                .rzp-brand-logo {
                    width: 44px; height: 44px;
                    background: #f0f4ff;
                    border-radius: 4px;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 10px; font-weight: 700;
                    color: var(--navy); letter-spacing: 0.05em;
                }
                .rzp-brand-name { font-size: 15px; font-weight: 700; color: var(--navy); }

                #paymentpage-container { position: relative; }

                #desktop-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 40px;
                    display: grid;
                    grid-template-columns: 1fr 420px;
                    gap: 40px;
                    align-items: start;
                }

                .content { position: relative; background: var(--white); border-radius: 4px; }

                #paymentpage-container #desktop-container .content::before {
                    content: '';
                    position: absolute;
                    height: 100%;
                    width: calc(100% + (100vw - 100%) / 2 - 180px - 16px);
                    left: calc(-50vw + 50%);
                    border-left: 16px solid var(--red);
                    border-color: rgb(215, 45, 62);
                    background: #fcfcfc;
                    pointer-events: none;
                    z-index: 0;
                    top: 0;
                }

                .content-inner {
                    position: relative;
                    z-index: 1;
                    padding: 36px 40px 40px;
                }

                .page-title {
                    font-size: 28px; font-weight: 700;
                    color: var(--navy); line-height: 1.3; margin: 0 0 12px;
                }
                .title-underline {
                    width: 36px; height: 3px;
                    background: var(--red);
                    margin-bottom: 28px; border-radius: 2px;
                }

                .event-image {
                    width: 100%; max-width: 480px;
                    border-radius: 6px; overflow: hidden;
                    margin-bottom: 32px; aspect-ratio: 16/9;
                    background: #e8ecf5;
                }
                .event-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

                .section-heading {
                    font-size: 14px; font-weight: 700;
                    color: var(--navy); letter-spacing: 0.04em; margin: 0 0 14px;
                }
                .benefits-list { list-style: disc; padding-left: 20px; margin: 0 0 36px; }
                .benefits-list li { color: var(--link); font-size: 15px; margin-bottom: 8px; line-height: 1.5; }

                .share-label, .contact-label, .tnc-label {
                    font-size: 14px; font-weight: 700;
                    color: var(--navy); margin-bottom: 10px; margin-top: 0;
                }
                .share-icons { display: flex; gap: 10px; margin-bottom: 28px; }
                .share-icon {
                    width: 36px; height: 36px; border-radius: 50%;
                    display: flex; align-items: center; justify-content: center;
                    cursor: pointer; text-decoration: none;
                    font-weight: 700; font-size: 15px; color: white;
                }
                .si-fb { background: #1877f2; }
                .si-x  { background: #000; }
                .si-wa { background: #25d366; }

                .contact-section { margin-bottom: 28px; }
                .contact-item {
                    display: flex; align-items: center; gap: 10px;
                    font-size: 14px; color: var(--text); margin-bottom: 8px;
                }

                .tnc-section { margin-bottom: 36px; }
                .tnc-text { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0; }

                .rzp-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 24px; }

                .rzp-footer { display: flex; flex-direction: column; gap: 8px; }
                .rzp-footer-logo {
                    display: flex; align-items: center; gap: 6px;
                    font-size: 18px; font-weight: 900; color: #072654; text-decoration: none;
                }
                .rzp-tagline { font-size: 13px; color: var(--text); margin: 0; }
                .rzp-tagline a { color: var(--link); text-decoration: none; }
                .report-link {
                    display: flex; align-items: center; gap: 6px;
                    font-size: 13px; color: var(--link); text-decoration: none; margin-top: 4px;
                }

                .payment-panel {
                    background: var(--white);
                    border-radius: 4px; border: 1px solid var(--border);
                    overflow: hidden; position: sticky; top: 24px;
                }
                .panel-header { padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
                .panel-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
                .panel-title-bar { width: 36px; height: 3px; background: var(--red); border-radius: 2px; }
                .panel-body { padding: 20px 24px; }

                .rzp-field { margin-bottom: 18px; }
                .field-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 12px; align-items: center;
                }
                .field-label { font-size: 13px; color: var(--label); font-weight: 400; }
                .field-input {
                    width: 100%; height: 38px;
                    border: 1px solid var(--input-border);
                    border-radius: 3px; padding: 0 10px;
                    font-size: 14px; color: var(--navy);
                    outline: none; transition: border-color 0.2s;
                    background: var(--white);
                }
                .field-input:focus { border-color: var(--navy); }
                .field-input.amount-input {
                    border-color: #a0afc8; background: #f9fafc;
                    font-weight: 700; font-size: 15px;
                }

                .payment-methods {
                    display: flex; align-items: center;
                    justify-content: space-between;
                    padding: 14px 24px;
                    border-top: 1px solid var(--border); gap: 10px;
                }
                .pm-logos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
                .pm-badge {
                    background: #f4f6fb; border: 1px solid var(--border);
                    border-radius: 3px; padding: 3px 7px;
                    font-size: 10px; font-weight: 700;
                    letter-spacing: 0.04em; color: var(--text);
                }
                .pm-badge.upi   { color: #6739b7; border-color: #6739b7; }
                .pm-badge.visa  { color: #1a1f71; border-color: #1a1f71; }
                .pm-badge.rupay { color: #e5232a; border-color: #e5232a; }
                .pm-badge.amex  { color: #2e77bc; border-color: #2e77bc; }

                .pay-btn {
                    background: var(--red); color: white; border: none;
                    padding: 12px 24px; font-size: 15px; font-weight: 700;
                    border-radius: 3px; cursor: pointer;
                    white-space: nowrap; transition: background 0.2s;
                }
                .pay-btn:hover { background: #c01830; }

                @media (max-width: 960px) {
                    #paymentpage-container #desktop-container .content::before {
                        border-left-width: 8px;
                    }
                    #desktop-container {
                        grid-template-columns: 1fr;
                        padding: 24px 20px; gap: 24px;
                    }
                    .payment-panel { position: static; }
                }
                @media (max-width: 759px) {
                    #desktop-container .content::before {
                        min-width: 572px;
                        left: 0;
                    }
                    #desktop-container { padding: 16px; }
                    .content-inner { padding: 24px 20px; }
                    .rzp-header { padding: 0 16px; }
                    .page-title { font-size: 22px; }
                    .payment-methods { flex-direction: column; align-items: stretch; }
                    .pay-btn { width: 100%; text-align: center; }
                    .field-row { grid-template-columns: 1fr; }
                }
                @media (max-width: 480px) {
                    .page-title { font-size: 18px; }
                }
            `}</style>

            {/* Header */}
            <header className="rzp-header">
                <div className="rzp-brand">
                    <div className="rzp-brand-logo">NYRA</div>
                    <span className="rzp-brand-name">Nyra Leadership Consulting</span>
                </div>
            </header>

            {/* Main */}
            <div id="paymentpage-container">
                <div id="desktop-container">

                    {/* LEFT */}
                    <div className="content">
                        <div className="content-inner">

                            <h1 className="page-title">
                                Communicate to Differentiate<br />Masterclass
                            </h1>
                            <div className="title-underline" />

                            {/* Replace src with your actual banner image */}
                            <div className="event-image">
                                <img src="/payment.jpg" alt="Masterclass banner" />
                            </div>

                            <p className="section-heading">WHAT WILL YOU GET?</p>
                            <ul className="benefits-list">
                                <li>Playbook</li>
                                <li>2 hours masterclass</li>
                                <li>Certificate</li>
                            </ul>

                            <p className="share-label">Share this on:</p>
                            <div className="share-icons">
                                <a href="#" className="share-icon si-fb" aria-label="Facebook">f</a>
                                <a href="#" className="share-icon si-x" aria-label="X">𝕏</a>
                                <a href="#" className="share-icon si-wa" aria-label="WhatsApp">
                                    <svg width="18" height="18" viewBox="0 0 32 32" fill="white">
                                        <path d="M16 0C7.164 0 0 7.163 0 16c0 2.828.737 5.483 2.028 7.787L.698 30.5l7.032-1.843A15.93 15.93 0 0016 32c8.837 0 16-7.163 16-16S24.837 0 16 0z" />
                                    </svg>
                                </a>
                            </div>

                            <div className="contact-section">
                                <p className="contact-label">Contact Us:</p>
                                <div className="contact-item"><span>✉</span><span>nyraconsulting@gmail.com</span></div>
                                <div className="contact-item">
                                    <span>📞</span>
                                    <a href="tel:8451086645" style={{ color: 'var(--link)', textDecoration: 'none' }}>8451086645</a>
                                </div>
                            </div>

                            <div className="tnc-section">
                                <p className="tnc-label">Terms &amp; Conditions:</p>
                                <p className="tnc-text">You agree to share information entered on this page with Nyra Leadership Consulting (owner of this page) and Razorpay, adhering to applicable laws.</p>
                            </div>

                            <hr className="rzp-divider" />

                            <div className="rzp-footer">
                                <span className="rzp-footer-logo">
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none">
                                        <path d="M20 0L0 40h16L28 16l-8 24h12L40 0H20z" fill="#072654" />
                                        <path d="M20 0L8 40h8l12-40H20z" fill="#3395ff" />
                                    </svg>
                                    Razorpay
                                </span>
                                <p className="rzp-tagline">
                                    Want to create page like this for your Business? Visit{' '}
                                    <a href="#">Razorpay Payment Pages</a> ↗ to get started!
                                </p>
                                <a href="#" className="report-link">🚩 Report Page</a>
                            </div>

                        </div>
                    </div>

                    {/* RIGHT: Payment panel */}
                    <div className="payment-panel">
                        <div className="panel-header">
                            <p className="panel-title">Payment Details</p>
                            <div className="panel-title-bar" />
                        </div>
                        <div className="panel-body">
                            <div className="rzp-field">
                                <div className="field-row">
                                    <label className="field-label">Amount</label>
                                    <input className="field-input amount-input" type="text" defaultValue="₹ 99.00" readOnly />
                                </div>
                            </div>
                            <div className="rzp-field">
                                <div className="field-row">
                                    <label className="field-label">Name</label>
                                    <input className="field-input" type="text" />
                                </div>
                            </div>
                            <div className="rzp-field">
                                <div className="field-row">
                                    <label className="field-label">Email</label>
                                    <input className="field-input" type="email" />
                                </div>
                            </div>
                            <div className="rzp-field">
                                <div className="field-row">
                                    <label className="field-label">Whatsapp number</label>
                                    <input className="field-input" type="tel" />
                                </div>
                            </div>
                            <div className="rzp-field">
                                <div className="field-row">
                                    <label className="field-label">Organisation</label>
                                    <input className="field-input" type="text" />
                                </div>
                            </div>
                            <div className="rzp-field">
                                <div className="field-row">
                                    <label className="field-label" style={{ alignSelf: 'flex-start', paddingTop: '8px' }}>
                                        Expectation from the masterclass
                                    </label>
                                    <input className="field-input" type="text" />
                                </div>
                            </div>
                        </div>

                        <div className="payment-methods">
                            <div className="pm-logos">
                                <span className="pm-badge upi">UPI</span>
                                <span className="pm-badge visa">VISA</span>
                                <span className="pm-badge">MC</span>
                                <span className="pm-badge rupay">RuPay</span>
                                <span className="pm-badge amex">AMEX</span>
                            </div>
                            <button className="pay-btn">Pay &nbsp;₹ 99.00</button>
                        </div>
                    </div>

                </div>
            </div>
        </>
    );
}