@extends('layouts.master')

@section('title', 'Register - Industrial Pump Logic')

@section('content')
<main style="background:var(--bg-main); display:flex; align-items:center; justify-content:center; height:calc(100vh - var(--header-height));">
    <div class="card" style="width:100%; max-width:400px; padding:32px; background:white; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,0.05); border:1px solid var(--border)">
        <div style="text-align:center; margin-bottom:24px;">
            <div style="width:48px; height:48px; background:var(--primary); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:white; margin-bottom:16px;">
                <i data-lucide="user-plus" size="24"></i>
            </div>
            <h2 style="font-size:24px; font-weight:700; color:var(--text-main)">Create Account</h2>
            <p style="font-size:14px; color:var(--text-muted)">Join our industrial logic platform.</p>
        </div>

        @if($errors->any())
            <div style="background:#fee2e2; color:#ef4444; padding:12px; border-radius:8px; margin-bottom:16px; font-size:13px;">
                @foreach($errors->all() as $error)
                    <div>{{ $error }}</div>
                @endforeach
            </div>
        @endif

        <form action="{{ route('register.post') }}" method="POST">
            @csrf
            <div class="property-group" style="padding:0; gap:16px;">
                <div class="field">
                    <label>Full Name</label>
                    <input type="text" name="name" class="input" placeholder="John Doe" required value="{{ old('name') }}">
                </div>
                <div class="field">
                    <label>Email Address</label>
                    <input type="email" name="email" class="input" placeholder="name@company.com" required value="{{ old('email') }}">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input type="password" name="password" class="input" placeholder="••••••••" required>
                </div>
                <div class="field">
                    <label>Confirm Password</label>
                    <input type="password" name="password_confirmation" class="input" placeholder="••••••••" required>
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; height:42px; margin-top:8px;">
                    Create Free Account
                </button>
            </div>
        </form>

        <div style="text-align:center; margin-top:24px; font-size:13px; color:var(--text-muted)">
            Already have an account? <a href="{{ route('login') }}" style="color:var(--primary); font-weight:600; text-decoration:none;">Login here</a>
        </div>
    </div>
</main>
@endsection