<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Details - <?= APP_NAME ?></title>
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/app.css">
    <style>
        body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-base); padding: 40px 20px;}
        .onboarding-card {
            width: 100%; max-width: 600px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 40px;
            box-shadow: var(--shadow-lg);
        }
        .steps { display: flex; gap: 10px; margin-bottom: 30px; }
        .step { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-raised); transition: background 0.3s; }
        .step.active { background: var(--primary); }
        .step.done { background: var(--success); }
    </style>
</head>
<body>

    <div class="onboarding-card">
        <div class="steps">
            <div class="step active"></div>
            <div class="step"></div>
            <div class="step"></div>
        </div>

        <h1 class="page-header" style="justify-content: center; margin-bottom: 10px;"><h2>Tell us about your business</h2></h1>
        <p class="text-center text-muted mb-6">We'll use this to set up your receipts and default warehouse.</p>

        <form action="<?= APP_URL ?>/onboarding/business" method="POST">
            <?= Security::csrfField() ?>
            
            <div class="form-group">
                <label class="form-label">Business Name</label>
                <input type="text" name="business_name" class="form-control" value="<?= e(Auth::tenant()['business_name']) ?>" required>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="business_phone" class="form-control" placeholder="+1 234 567 8900">
                </div>
                <div class="form-group">
                    <label class="form-label">Industry</label>
                    <select name="industry" class="form-control">
                        <option value="">Select Industry...</option>
                        <option value="retail">Retail</option>
                        <option value="electronics">Electronics</option>
                        <option value="grocery">Grocery & Food</option>
                        <option value="clothing">Clothing & Apparel</option>
                        <option value="hardware">Hardware / Tools</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Business Address</label>
                <textarea name="business_address" class="form-control" placeholder="123 Main St, City, Country" rows="3"></textarea>
            </div>

            <div class="flex justify-between mt-6">
                <div class="flex-1"></div>
                <button type="submit" class="btn btn-primary">
                    Next Step
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
                </button>
            </div>
        </form>
    </div>

</body>
</html>
