@extends('layouts.app')

@section('title', __('messages.welcome'))

@section('content')
<div class="container">
    <div class="row min-vh-75 align-items-center py-5">
        <div class="col-lg-6">
            <h1 class="display-3 fw-bold mb-4" style="font-family: 'Cormorant Garamond', serif;">
                {{ __('messages.welcome') }}
            </h1>
            <p class="lead text-muted mb-5 shadow-sm p-3 bg-white rounded-3 border-start border-teal border-4">
                {{ __('messages.search') }}
            </p>
            <div class="d-flex gap-3">
                <a href="{{ route('register') }}" class="btn btn-teal btn-lg px-5 rounded-pill shadow">
                    {{ __('messages.register') }}
                </a>
                <a href="{{ route('login') }}" class="btn btn-outline-pink btn-lg px-5 rounded-pill">
                    {{ __('messages.login') }}
                </a>
            </div>
        </div>
        <div class="col-lg-6 d-none d-lg-block">
            <div class="position-relative">
                <div class="bg-teal opacity-10 position-absolute rounded-circle" style="width: 500px; height: 500px; top: -50px; right: -50px;"></div>
                <img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&q=80&w=800" alt="Wedding" class="img-fluid rounded-4 shadow-lg position-relative">
            </div>
        </div>
    </div>

    <!-- Feature Section -->
    <div class="row py-5 mt-5">
        <div class="col-md-4 mb-4">
            <div class="card border-0 shadow-sm h-100 p-4 rounded-4">
                <div class="text-teal mb-3">
                    <i class="bi bi-shield-check fs-1"></i>
                </div>
                <h3 class="h5 fw-bold">Verified Profiles</h3>
                <p class="text-muted small mb-0">Every profile is manually verified by our team to ensure a safe experience.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card border-0 shadow-sm h-100 p-4 rounded-4">
                <div class="text-teal mb-3">
                    <i class="bi bi-heart-fill fs-1"></i>
                </div>
                <h3 class="h5 fw-bold">Smart Match</h3>
                <p class="text-muted small mb-0">Our algorithm suggests partners based on your preferences and values.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card border-0 shadow-sm h-100 p-4 rounded-4">
                <div class="text-teal mb-3">
                    <i class="bi bi-translate fs-1"></i>
                </div>
                <h3 class="h5 fw-bold">Multi-language</h3>
                <p class="text-muted small mb-0">Access the platform in your preferred language: English, Tamil, or Sinhala.</p>
            </div>
        </div>
    </div>
</div>

<style>
    .min-vh-75 { min-height: 75vh; }
    .text-teal { color: #ff3366; }
    .btn-teal { background-color: #ff3366; color: white; border: none; }
    .btn-teal:hover { background-color: #e62e5c; color: white; }
    .btn-outline-pink { color: #ff3366; border-color: #ff3366; }
    .btn-outline-pink:hover { background-color: #ff3366; color: white; }
    .border-teal { border-color: #ff3366 !important; }
</style>
@endsection