@extends('layouts.public')

@php
    $lang = session('locale', 'en');

    $translations = [
        'en' => [
            'title' => 'About Us',
            'meta' => 'Learn more about UsedStore.ca, a Canadian marketplace for buying and selling products and professional services.',
            'eyebrow' => 'ABOUT USEDSTORE',
            'hero_title' => 'A simpler way to buy and sell in Canada.',
            'hero_text' => 'UsedStore.ca connects buyers, sellers and service providers through a modern and easy-to-use Canadian marketplace.',
            'mission_title' => 'Our mission',
            'mission_text' => 'Our mission is to help people give products a second life, discover useful local services and connect safely with people in their communities.',
            'what_title' => 'What you can do',
            'buy_title' => 'Discover products',
            'buy_text' => 'Browse clothing, shoes, bags, accessories and other useful items.',
            'sell_title' => 'Sell easily',
            'sell_text' => 'Create a professional listing with photos, details, price and location.',
            'service_title' => 'Find services',
            'service_text' => 'Discover local professionals and service providers across Canada.',
            'values_title' => 'Our values',
            'value_1' => 'Simple and accessible marketplace',
            'value_2' => 'Respect between users',
            'value_3' => 'Safer buying and selling',
            'value_4' => 'Support for local communities',
            'cta_title' => 'Ready to start?',
            'cta_text' => 'Explore listings or publish your first item today.',
            'shop' => 'Browse Marketplace',
            'sell' => 'Sell an Item',
        ],

        'fr' => [
            'title' => 'À propos',
            'meta' => 'Découvrez UsedStore.ca, une marketplace canadienne pour acheter et vendre des produits et des services professionnels.',
            'eyebrow' => 'À PROPOS DE USEDSTORE',
            'hero_title' => 'Une façon plus simple d’acheter et de vendre au Canada.',
            'hero_text' => 'UsedStore.ca met en relation les acheteurs, les vendeurs et les fournisseurs de services grâce à une marketplace canadienne moderne et facile à utiliser.',
            'mission_title' => 'Notre mission',
            'mission_text' => 'Notre mission est d’aider les gens à donner une seconde vie aux produits, à découvrir des services locaux utiles et à communiquer de façon sécuritaire.',
            'what_title' => 'Ce que vous pouvez faire',
            'buy_title' => 'Découvrir des produits',
            'buy_text' => 'Parcourez des vêtements, chaussures, sacs, accessoires et autres articles.',
            'sell_title' => 'Vendre facilement',
            'sell_text' => 'Créez une annonce professionnelle avec photos, détails, prix et emplacement.',
            'service_title' => 'Trouver des services',
            'service_text' => 'Découvrez des professionnels et fournisseurs de services au Canada.',
            'values_title' => 'Nos valeurs',
            'value_1' => 'Une marketplace simple et accessible',
            'value_2' => 'Le respect entre les utilisateurs',
            'value_3' => 'Des achats et ventes plus sécuritaires',
            'value_4' => 'Le soutien aux communautés locales',
            'cta_title' => 'Prêt à commencer?',
            'cta_text' => 'Découvrez les annonces ou publiez votre premier article.',
            'shop' => 'Voir la marketplace',
            'sell' => 'Vendre un article',
        ],
    ];

    $t = $translations[$lang] ?? $translations['en'];
@endphp

@section('title', $t['title'] . ' | UsedStore.ca')
@section('meta_description', $t['meta'])

@section('content')
<style>
    .info-page,
    .info-page * {
        box-sizing: border-box;
    }

    .info-page {
        background: #f8fafc;
        color: #0f172a;
    }

    .info-container {
        width: min(1120px, calc(100% - 32px));
        margin: 0 auto;
    }

    .info-hero {
        padding: 95px 0 75px;
        background:
            radial-gradient(circle at top right, rgba(79,70,229,.16), transparent 35%),
            linear-gradient(135deg, #eef2ff, #ffffff);
        text-align: center;
    }

    .info-eyebrow {
        display: inline-block;
        margin-bottom: 18px;
        color: #4f46e5;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 2px;
    }

    .info-hero h1 {
        max-width: 800px;
        margin: 0 auto;
        color: #0f172a;
        font-size: clamp(38px, 6vw, 68px);
        line-height: 1.08;
        letter-spacing: -2px;
    }

    .info-hero p {
        max-width: 720px;
        margin: 24px auto 0;
        color: #64748b;
        font-size: 18px;
        line-height: 1.8;
    }

    .info-section {
        padding: 80px 0;
    }

    .info-section-white {
        background: #ffffff;
    }

    .info-heading {
        margin: 0 0 18px;
        font-size: clamp(30px, 4vw, 44px);
        letter-spacing: -1px;
    }

    .info-paragraph {
        max-width: 850px;
        margin: 0;
        color: #64748b;
        font-size: 17px;
        line-height: 1.9;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .info-card {
        padding: 30px;
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 18px 50px rgba(15,23,42,.06);
    }

    .info-icon {
        display: flex;
        width: 52px;
        height: 52px;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
        border-radius: 16px;
        background: #eef2ff;
        color: #4f46e5;
        font-size: 24px;
    }

    .info-card h3 {
        margin: 0 0 12px;
        font-size: 21px;
    }

    .info-card p {
        margin: 0;
        color: #64748b;
        line-height: 1.8;
    }

    .values-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 30px;
    }

    .value-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 20px;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: white;
        font-weight: 700;
    }

    .value-check {
        color: #22c55e;
        font-size: 20px;
    }

    .info-cta {
        padding: 75px 0;
    }

    .info-cta-box {
        padding: 55px 30px;
        border-radius: 30px;
        background: linear-gradient(135deg, #4f46e5, #0f172a);
        color: white;
        text-align: center;
    }

    .info-cta-box h2 {
        margin: 0;
        font-size: clamp(31px, 5vw, 48px);
    }

    .info-cta-box p {
        margin: 18px auto 0;
        color: #c7d2fe;
        font-size: 17px;
    }

    .info-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 28px;
    }

    .info-button {
        display: inline-flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        padding: 0 24px;
        border-radius: 14px;
        font-weight: 800;
        text-decoration: none;
    }

    .info-button-primary {
        background: white;
        color: #0f172a;
    }

    .info-button-secondary {
        border: 1px solid rgba(255,255,255,.3);
        color: white;
    }

    @media (max-width: 760px) {
        .info-hero {
            padding: 70px 0 55px;
        }

        .info-section {
            padding: 58px 0;
        }

        .info-grid,
        .values-list {
            grid-template-columns: 1fr;
        }

        .info-actions {
            flex-direction: column;
        }

        .info-button {
            width: 100%;
        }
    }
</style>

<div class="info-page">
    <section class="info-hero">
        <div class="info-container">
            <span class="info-eyebrow">{{ $t['eyebrow'] }}</span>

            <h1>{{ $t['hero_title'] }}</h1>

            <p>{{ $t['hero_text'] }}</p>
        </div>
    </section>

    <section class="info-section info-section-white">
        <div class="info-container">
            <h2 class="info-heading">{{ $t['mission_title'] }}</h2>

            <p class="info-paragraph">
                {{ $t['mission_text'] }}
            </p>
        </div>
    </section>

    <section class="info-section">
        <div class="info-container">
            <h2 class="info-heading">{{ $t['what_title'] }}</h2>

            <div class="info-grid">
                <article class="info-card">
                    <div class="info-icon">⌕</div>
                    <h3>{{ $t['buy_title'] }}</h3>
                    <p>{{ $t['buy_text'] }}</p>
                </article>

                <article class="info-card">
                    <div class="info-icon">＋</div>
                    <h3>{{ $t['sell_title'] }}</h3>
                    <p>{{ $t['sell_text'] }}</p>
                </article>

                <article class="info-card">
                    <div class="info-icon">⚙</div>
                    <h3>{{ $t['service_title'] }}</h3>
                    <p>{{ $t['service_text'] }}</p>
                </article>
            </div>
        </div>
    </section>

    <section class="info-section info-section-white">
        <div class="info-container">
            <h2 class="info-heading">{{ $t['values_title'] }}</h2>

            <div class="values-list">
                @foreach([
                    $t['value_1'],
                    $t['value_2'],
                    $t['value_3'],
                    $t['value_4'],
                ] as $value)
                    <div class="value-item">
                        <span class="value-check">✓</span>
                        <span>{{ $value }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="info-cta">
        <div class="info-container">
            <div class="info-cta-box">
                <h2>{{ $t['cta_title'] }}</h2>
                <p>{{ $t['cta_text'] }}</p> 

                <div class="info-actions">
                    <a href="{{ url('/shop') }}"
                       class="info-button info-button-primary">
                        {{ $t['shop'] }}
                    </a>

                    <a href="{{ url('/sell') }}"
                       class="info-button info-button-secondary">
                        {{ $t['sell'] }}
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection