@extends('layouts.auth')

@section('title', 'InsightsReady • Sign Up')

@push('styles')
    <style>
        /* Reuse same CSS from sign-in page */
        *,*::before,*::after{box-sizing:border-box}
        :root{
            --brand-teal:#4ea3a1;
            --brand-teal-600:#3a8b89;
            --brand-teal-700:#2f7a78;
            --bg:#f7f7f8;
            --text-900:#1f2937;
            --text-700:#4b5563;
            --muted:#9ca3af;
            --border:#e5e7eb;
            --radius:14px;
            --shadow:0 10px 25px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
            --focus:0 0 0 3px rgba(78,163,161,.25);
        }
        html,body{height:100%}
        body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--text-900);background:var(--bg);line-height:1.5}
        .auth{min-height:100vh;display:grid;grid-template-columns:1fr}
        @media (min-width: 980px){.auth{grid-template-columns: 1.1fr 0.9fr}}
        .auth__hero{position:relative;background:var(--brand-teal);color:#fff;padding:32px 28px 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
        .auth__hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(335deg,rgba(255,255,255,.55) 0 4px,transparent 4px 70px);opacity:.28;pointer-events:none}
        .auth__brand{display:flex;align-items:center;gap:12px}
        .auth__brand img{height:44px;width:auto}
        .auth__title{font-size:clamp(28px,5.2vw,56px);line-height:1.05;margin:0 0 12px}
        .auth__subtitle{font-size:clamp(16px,2vw,20px);margin:0;opacity:.9}
        .auth__panel{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:36px;gap:16px}
        @media (min-width: 620px){.auth__panel{padding:54px}}
        .card{max-width:520px;width:100%;margin:0 auto}
        .card__title{font-size:32px;margin:0 0 14px;font-weight:700;color:var(--text-900)}
        .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:600;border:1px solid var(--border);background:#fff;color:var(--text-900);border-radius:12px;padding:12px 16px;cursor:pointer;transition:.2s}
        .btn:hover{box-shadow:var(--shadow)}
        .btn:focus-visible{outline:none;box-shadow:var(--focus)}
        .btn--primary{background:var(--brand-teal);color:#fff;border-color:transparent}
        .btn--primary:hover{background:var(--brand-teal-600)}
        .divider{text-align:center;color:var(--muted);margin:8px 0;position:relative}
        .divider span{background:#fff;padding:0 10px;position:relative;z-index:1;font-weight:500}
        .divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border)}
        .field{display:grid;gap:6px;margin:10px 0}
        .label{font-size:14px;color:var(--text-700);font-weight:600}
        .input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font-size:16px;color:var(--text-900)}
        .input:focus{outline:none;border-color:var(--brand-teal);box-shadow:var(--focus)}
        .actions{display:grid;gap:12px;margin-top:8px}
        .links{display:flex;flex-direction:column;gap:8px;margin-top:10px;font-size:14px}
        .links a{color:var(--brand-teal-700);text-decoration:none}
        .links a:hover{text-decoration:underline}
    </style>
@endpush

@section('content')
<div class="auth">
    <!-- Left / Hero -->
    <section class="auth__hero">
        <header class="auth__brand">
            <img src="business_insights_modules_bim_logo.jpeg" alt="Insights Ready logo" />
            <span class="sr-only">InsightsReady</span>
        </header>
        <div>
            <h1 class="auth__title">Join InsightsReady</h1>
            <p class="auth__subtitle">Create your free account to start exploring analytics</p>
        </div>
    </section>

    <!-- Right / Form -->
    <main class="auth__panel">
        <div class="card">
            <h2 class="card__title">Sign up</h2>

            <button class="btn" type="button">Continue with Microsoft</button>
            <button class="btn" type="button">Continue with Google</button>

            <div class="divider"><span>or</span></div>

            <form action="{{ route('register') }}" method="post" novalidate>
                @csrf
                <div class="field">
                    <label for="name" class="label">Full name</label>
                    <input class="input" type="text" id="name" name="name" placeholder="John Doe" value="{{ old('name') }}" required />
                </div>
                <div class="field">
                    <label for="company" class="label">Company name</label>
                    <input class="input" type="text" id="company" name="company" placeholder="Acme Inc."
                           value="{{ old('company') }}" required />
                </div>
                <div class="field">
                    <label for="email" class="label">Email address</label>
                    <input class="input" type="email" id="email" name="email" placeholder="name@company.com" autocomplete="email" value="{{ old('email') }}" required />
                </div>
                <div class="field">
                    <label for="password" class="label">Password</label>
                    <input class="input" type="password" id="password" name="password" placeholder="••••••••" autocomplete="new-password" required />
                </div>
                <div class="field">
                    <label for="password_confirmation" class="label">Confirm password</label>
                    <input class="input"
                           type="password"
                           id="password_confirmation"
                           name="password_confirmation"
                           placeholder="••••••••"
                           autocomplete="new-password"
                           required />
                </div>
                <div class="actions">
                    <button class="btn btn--primary" type="submit">Create Account</button>
                </div>
            </form>

            <div class="links">
                <div>Already have an account? <a href="{{ url('/signin') }}">Sign in</a></div>
            </div>
        </div>
    </main>
</div>

@if ($errors->any())
    <script>
        @foreach ($errors->all() as $error)
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'error',
            title: '{{ $errors->first() }}',
            showConfirmButton: false,
            timer: 4000
        });
        @endforeach
    </script>
@endif
@endsection