@extends('layouts.brand')

@section('title', 'Bharat Ayur Setu - Home')

@section('styles')
<style>
    .hero {
        background: linear-gradient(135deg, #ffffff 0%, #f0f7f0 100%);
        padding: 120px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: 0;
        width: 100%;
        height: 100px;
        background: var(--bg-light);
        border-radius: 50%;
    }
    .hero h1 {
        font-size: 56px;
        color: var(--primary);
        margin-bottom: 25px;
        line-height: 1.2;
    }
    .hero span.highlight {
        color: var(--ayurveda);
        position: relative;
    }
    .hero p {
        font-size: 22px;
        color: var(--text-muted);
        max-width: 800px;
        margin: 0 auto 45px;
    }
    .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        margin-top: 60px;
    }
    .stats-section {
        background: var(--white);
        padding: 80px 0;
        margin: 40px 0;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 40px;
        text-align: center;
    }
    .stat-item h2 {
        font-size: 48px;
        color: var(--primary);
        margin-bottom: 10px;
    }
    .stat-item p {
        color: var(--text-muted);
        font-weight: 500;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
    }
    .how-it-works {
        padding: 100px 0;
    }
    .step-card {
        text-align: center;
        padding: 40px;
    }
    .step-number {
        width: 60px;
        height: 60px;
        background: var(--gold);
        color: var(--white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 700;
        margin: 0 auto 20px;
    }
    .category-icon {
        font-size: 48px;
        margin-bottom: 20px;
        display: block;
        transition: transform 0.3s;
    }
    .card:hover .category-icon {
        transform: scale(1.1) rotate(10deg);
    }
    .cta-banner {
        background: linear-gradient(rgba(68, 84, 106, 0.9), rgba(68, 84, 106, 0.9)), url('https://images.unsplash.com/photo-1576091160550-217359f42f8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 100px 0;
        text-align: center;
        border-radius: 30px;
        margin: 80px 20px;
    }
</style>
@endsection

@section('content')
<section class="hero">
    <div class="container animate-fade-in">
        <span style="color: var(--ayurveda); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">Digital Health Mission</span>
        <h1>Bridging <span class="highlight">India's</span> Healthcare<br>for a Digital Future</h1>
        <p>Connecting traditional Ayurvedic wisdom with modern Allopathic precision. Your complete health ecosystem in one unified portal.</p>
        <div class="hero-btns">
            <a href="{{ url('/login') }}" class="btn btn-primary" style="padding: 18px 45px; font-size: 18px;">Access Your Portal</a>
            <a href="#services" class="btn btn-outline" style="padding: 18px 45px; font-size: 18px; margin-left: 20px;">View Services</a>
        </div>
    </div>
</section>

<section class="stats-section">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item">
                <h2>10k+</h2>
                <p>Verified Doctors</p>
            </div>
            <div class="stat-item">
                <h2>500+</h2>
                <p>Lab Partners</p>
            </div>
            <div class="stat-item">
                <h2>1M+</h2>
                <p>Patients Served</p>
            </div>
            <div class="stat-item">
                <h2>24/7</h2>
                <p>Support Access</p>
            </div>
        </div>
    </div>
</section>

<section id="services" style="padding: 80px 0;">
    <div class="container">
        <div class="section-title" style="text-align: center; margin-bottom: 60px;">
            <h2 style="font-size: 42px; color: var(--primary);">Holistic Health Solutions</h2>
            <div style="width: 80px; height: 5px; background: var(--gold); margin: 20px auto;"></div>
        </div>
        
        <div class="service-grid">
            <div class="card">
                <span class="category-icon">🌿</span>
                <h3>Ayurveda Consultation</h3>
                <p>Natural healing through ancient wisdom. Connect with Nadi Pariksha experts and herbal specialists.</p>
                <a href="{{ url('/login') }}" class="btn btn-ayurveda" style="margin-top: 25px; width: 100%; text-align: center;">Book Ayurvedic Expert</a>
            </div>
            
            <div class="card">
                <span class="category-icon">⚕️</span>
                <h3>Modern Allopathy</h3>
                <p>Precision medicine and immediate care. Access top specialists from across leading hospitals.</p>
                <a href="{{ url('/login') }}" class="btn btn-primary" style="margin-top: 25px; width: 100%; text-align: center; background: var(--allopathy);">Consult Specialist</a>
            </div>
            
            <div class="card">
                <span class="category-icon">🔬</span>
                <h3>Digital Lab Center</h3>
                <p>Smart diagnostic tracking. Order tests, track sample status, and get digital reports instantly.</p>
                <a href="{{ url('/login') }}" class="btn btn-primary" style="margin-top: 25px; width: 100%; text-align: center;">Book Lab Test</a>
            </div>
            
            <div class="card" style="border: 2px solid #fed7d7;">
                <span class="category-icon">🚑</span>
                <h3>Emergency 108</h3>
                <p>Critical care when it matters most. Integrated SOS system for rapid ambulance response.</p>
                <a href="tel:108" class="btn btn-primary" style="margin-top: 25px; width: 100%; text-align: center; background: #E53E3E;">Get Immediate Help</a>
            </div>
        </div>
    </div>
</section>

<section class="how-it-works">
    <div class="container">
        <div class="section-title" style="text-align: center; margin-bottom: 60px;">
            <h2 style="font-size: 38px;">How It Works</h2>
            <p style="color: var(--text-muted);">Simple steps to a healthier you</p>
        </div>
        
        <div class="stats-grid">
            <div class="step-card">
                <div class="step-number">1</div>
                <h4>Register</h4>
                <p>Create your unique health profile</p>
            </div>
            <div class="step-card">
                <div class="step-number">2</div>
                <h4>Select Service</h4>
                <p>Choose between Ayurveda or Allopathy</p>
            </div>
            <div class="step-card">
                <div class="step-number">3</div>
                <h4>Get Treated</h4>
                <p>Consult with experts virtually or in-person</p>
            </div>
            <div class="step-card">
                <div class="step-number">4</div>
                <h4>Stay Healthy</h4>
                <p>Track history and follow-up easily</p>
            </div>
        </div>
    </div>
</section>

<div class="cta-banner container">
    <h2 style="font-size: 42px; margin-bottom: 20px;">Health is a Journey, Not a Destination.</h2>
    <p style="font-size: 20px; opacity: 0.9; margin-bottom: 40px; max-width: 700px; margin: 0 auto 40px;">Whether you are a patient seeking care or a professional providing it, Bharat Ayur Setu gives you the tools you need.</p>
    <div style="display: flex; gap: 20px; justify-content: center;">
        <a href="{{ url('/login') }}" class="btn btn-primary" style="background: white; color: var(--primary) !important;">Patient Login</a>
        <a href="{{ url('/login') }}" class="btn btn-ayurveda" style="border: 2px solid white;">Professional Join</a>
    </div>
</div>
@endsection