<?php
include "config2.php";
require_once __DIR__ . '/../pages/dbInfo.php';
require_once __DIR__ . '/../pages/dbFunctions.php';
$website_settings = getWebsiteSettings();
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https://" : "http://";
$site_url = $protocol . $_SERVER["HTTP_HOST"];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $website_settings['title'] ?> - Register</title>

    <!-- Favicons -->
    <link href="<?= $site_url ?>/<?= $website_settings['favicon'] ?>" rel="icon">
    <link href="<?= $site_url ?>/<?= $website_settings['favicon'] ?>" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Google Sign-In -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>

    <style>
        :root {
            --blue: #1971ff;
            --maroon: #8b1538;
            --ink: #0a0c14;
        }
        * { box-sizing: border-box; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--ink);
            color: #e7e9ee;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            margin: 0;
        }
        a { text-decoration: none !important; }

        .back-home { display: inline-flex; align-items: center; gap: 8px; color: #cfd4de; font-size: 14px; font-weight: 500; margin-bottom: 26px; }
        .back-home:hover { color: #fff; }

        .auth-wrap { flex: 1; display: flex; align-items: center; padding: 48px 0; }
        .auth-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }

        /* Left: brand/visual panel -- dashboard mockup, matches the same
           component already used on the homepage's About section. */
        .auth-visual { padding: 10px 10px 10px 0; }
        .auth-visual h1 { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 14px; }
        .auth-visual h1 span {
            background-image: linear-gradient(115deg, var(--blue) 30%, #ffa37b 100%);
            color: transparent; background-clip: text; -webkit-background-clip: text;
        }
        .auth-visual > p { color: #9aa4b2; font-size: 15px; margin-bottom: 26px; max-width: 460px; }
        .auth-feature-list { list-style: none; padding: 0; margin: 0 0 30px; }
        .auth-feature-list li { display: flex; align-items: center; gap: 10px; color: #cfd4de; font-size: 14.5px; margin-bottom: 12px; }
        .auth-feature-list svg { width: 18px; height: 18px; flex: none; color: #3ddb92; }

        .mockup-scene { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
        .mockup-glow { position: absolute; border-radius: 50%; filter: blur(85px); z-index: 0; pointer-events: none; }
        .mockup-glow-a { width: 280px; height: 280px; background: #1971ff4d; top: -10px; right: 30px; }
        .mockup-glow-b { width: 220px; height: 220px; background: #8b15384d; bottom: -10px; left: 10px; }
        .mockup-dots {
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
            background-size: 22px 22px;
            -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 75%);
            mask-image: radial-gradient(circle at center, #000 40%, transparent 75%);
            z-index: 0; pointer-events: none;
        }
        .dashboard-mockup {
            position: relative; z-index: 1; width: 300px;
            background: rgba(13,17,23,0.92); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 20px; padding: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.5); text-align: left;
        }
        .dashboard-header { font-weight: 700; color: #fff; font-size: 13px; margin-bottom: 12px; }
        .txn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
        .txn-row:first-of-type { border-top: none; padding-top: 0; }
        .txn-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
        .txn-icon-upi { background: var(--blue); }
        .txn-icon-crypto { background: var(--maroon); }
        .txn-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .txn-title { color: #fff; font-size: 12.5px; font-weight: 600; }
        .txn-sub { color: #9aa4b2; font-size: 11.5px; }
        .txn-badge { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; flex: none; }
        .txn-badge-success { background: #17a46333; color: #3ddb92; }
        .txn-badge-pending { background: #ff903433; color: #ffb066; }
        .floating-badge {
            position: absolute; z-index: 2; right: -6px; top: 16px;
            display: flex; align-items: center; gap: 6px;
            background: var(--maroon); color: #fff; font-size: 11.5px; font-weight: 600;
            padding: 8px 13px; border-radius: 30px; box-shadow: 0 15px 35px rgba(139,21,56,0.45);
            white-space: nowrap;
        }
        .floating-badge svg { width: 14px; height: 14px; flex: none; }

        /* Right: the actual sign-up card -- kept light/white so Google's
           own sign-in button renders normally and stays fully readable. */
        .auth-card { background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); padding: 40px 36px; color: #1c2230; text-align: center; }
        .auth-card h3 { font-weight: 800; font-size: 22px; margin-bottom: 6px; color: #14161c; }
        .auth-card .auth-sub { color: #7c8494; font-size: 14px; margin-bottom: 28px; }
        .auth-footer-note { font-size: 11.5px; color: #9aa1b0; text-align: center; margin-top: 22px; line-height: 1.6; }

        .disclaimer-modal .modal-content { border-radius: 16px; border: none; overflow: hidden; }
        .disclaimer-modal .modal-header { background: linear-gradient(135deg, var(--blue), #2c3eef); color: #fff; border: none; }
        .disclaimer-modal .modal-title { font-weight: 700; }
        .disclaimer-modal .btn-primary { background-color: var(--blue); border-color: var(--blue); border-radius: 10px !important; font-weight: 600; }
        .disclaimer-modal .btn-primary:hover { background-color: var(--maroon); border-color: var(--maroon); }

        .site-footer { padding: 22px 0; text-align: center; }
        .site-footer p { margin: 0; color: #7a8194; font-size: 12.5px; }

        @media (max-width: 991px) {
            .auth-grid { grid-template-columns: 1fr; }
            .auth-visual { text-align: center; padding: 0; }
            .auth-visual > p { margin-left: auto; margin-right: auto; }
            .auth-feature-list { display: inline-block; text-align: left; }
            .mockup-scene { min-height: 260px; margin-bottom: 10px; }
        }
        @media (max-width: 480px) {
            .auth-card { padding: 30px 24px; }
        }
    </style>
</head>
<body>
    <!-- Disclaimer Modal -->
    <div class="modal fade disclaimer-modal" id="disclaimer" tabindex="-1" aria-labelledby="Disclaimer" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Disclaimer Notice</h5>
                </div>
                <div class="modal-body">
                    <p>This <?= $website_settings['title'] ?> does not provide any Payment Gateway services, UPI Accounts, or UPI Merchant Accounts.</p>
                    <p>We only provide an API to Generate a QR code for your UPI ID.</p>
                    <p>We are not involved in any kind of transaction. Please read our terms and conditions before using our service.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" onclick="window.location.href='<?= $site_url ?>'">Leave</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">I Agree</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container auth-wrap">
        <div class="auth-grid" style="width:100%">
            <div>
                <a class="back-home" href="<?= $site_url ?>/"><i class="fas fa-arrow-left"></i>Back to Home</a>

                <div class="auth-visual">
                    <h1>Start Accepting <span>UPI Payments</span></h1>
                    <p>Create your free merchant account and get a dashboard for every order &mdash; UPI and crypto, tracked automatically.</p>
                    <ul class="auth-feature-list">
                        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg> Free registration, no setup fees</li>
                        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg> 0% transaction fees on UPI</li>
                        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg> Real-time transaction dashboard</li>
                    </ul>

                    <div class="mockup-scene">
                        <div class="mockup-glow mockup-glow-a"></div>
                        <div class="mockup-glow mockup-glow-b"></div>
                        <div class="mockup-dots"></div>

                        <div class="dashboard-mockup">
                            <div class="dashboard-header">Recent Transactions</div>
                            <div class="txn-row">
                                <div class="txn-icon txn-icon-upi">UPI</div>
                                <div class="txn-info">
                                    <span class="txn-title">Order #PG48213</span>
                                    <span class="txn-sub">UPI</span>
                                </div>
                                <span class="txn-badge txn-badge-success">Success</span>
                            </div>
                            <div class="txn-row">
                                <div class="txn-icon txn-icon-crypto">₿</div>
                                <div class="txn-info">
                                    <span class="txn-title">Order #PG77190</span>
                                    <span class="txn-sub">Crypto</span>
                                </div>
                                <span class="txn-badge txn-badge-success">Success</span>
                            </div>
                            <div class="txn-row">
                                <div class="txn-icon txn-icon-upi">UPI</div>
                                <div class="txn-info">
                                    <span class="txn-title">Order #PG10234</span>
                                    <span class="txn-sub">UPI</span>
                                </div>
                                <span class="txn-badge txn-badge-pending">Pending</span>
                            </div>
                        </div>

                        <div class="floating-badge">
                            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><path d="M2 21v-1a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v1"/><circle cx="17" cy="8" r="2.5"/><path d="M17 13a5 5 0 0 1 5 5v1"/></svg>
                            Multi-user access
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="auth-card">
                    <h3>Create Your Account</h3>
                    <p class="auth-sub">Start with your free account today</p>

                    <div id="g_id_onload"
                         data-client_id="<?= htmlspecialchars(getenv('GOOGLE_CLIENT_ID') ?: '') ?>"
                         data-callback="handleGoogleCredentialResponse">
                    </div>
                    <div class="g_id_signin d-flex justify-content-center mb-3"
                         data-type="standard" data-width="330"></div>

                    <p class="mb-0" style="font-size:14px;color:#7c8494;">Already have an account? <a href="index" style="color:var(--blue);font-weight:600;">Login here</a></p>

                    <p class="auth-footer-note">
                        *<?= $website_settings['title'] ?> Gateway provides Dynamic QR Generating service. It does not offer payment gateway service, nor does it provide UPI ID and UPI Merchant account. Please read our policy and T&amp;C before using our services.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <footer class="site-footer">
        <p>© <?= date('Y') ?> <?= $website_settings['title'] ?>. All rights reserved.</p>
    </footer>

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/register.js"></script>

    <script>
        $(document).ready(function() {
            $('#disclaimer').modal({
                backdrop: 'static',
                keyboard: false
            });
        });
    </script>
</body>
</html>
