@extends('layouts.master')

@section('title', 'About Us - ' . \App\Models\Setting::getValue('site_name', 'The Mini Port'))
@section('meta_description', 'Learn about ' . \App\Models\Setting::getValue('site_name', 'The Mini Port') . ' - Your trusted B2B marketplace connecting manufacturers, suppliers and buyers worldwide.')

@section('content')
<!-- Hero Section -->
<section class="tw-bg-gradient-to-br tw-from-orange-500 tw-to-orange-600 tw-py-20 tw-text-white">
    <div class="container">
        <div class="row tw-items-center">
            <div class="col-lg-8 tw-mx-auto tw-text-center">
                <h1 class="tw-text-4xl md:tw-text-5xl tw-font-bold tw-mb-4">About {{ \App\Models\Setting::getValue('site_name', 'The Mini Port') }}</h1>
                <p class="tw-text-xl tw-opacity-90 tw-mb-0">Connecting Businesses Worldwide Through Smart B2B Solutions</p>
            </div>
        </div>
    </div>
</section>

<!-- Who We Are -->
<section class="tw-py-16 tw-bg-white">
    <div class="container">
        <div class="row tw-items-center g-5">
            <div class="col-lg-6">
                <span class="tw-text-orange-500 tw-font-bold tw-uppercase tw-tracking-wider tw-text-sm">Who We Are</span>
                <h2 class="tw-text-3xl tw-font-bold tw-text-gray-800 tw-mt-2 tw-mb-4">India's Growing B2B Marketplace</h2>
                <p class="tw-text-gray-600 tw-leading-relaxed tw-mb-4">
                    {{ \App\Models\Setting::getValue('site_name', 'The Mini Port') }} is a leading B2B e-commerce platform designed to bridge the gap between manufacturers, suppliers, and buyers across India and beyond.
                </p>
                <p class="tw-text-gray-600 tw-leading-relaxed tw-mb-4">
                    We provide a trusted space where businesses can discover quality products, connect with verified suppliers, and grow their trade relationships with confidence.
                </p>
                <p class="tw-text-gray-600 tw-leading-relaxed">
                    Our mission is to empower small and medium enterprises by giving them the digital tools and visibility they need to compete in today's global marketplace.
                </p>
            </div>
            <div class="col-lg-6">
                <div class="tw-bg-gradient-to-br tw-from-orange-100 tw-to-orange-50 tw-rounded-3xl tw-p-8">
                    <div class="row g-4">
                        <div class="col-6">
                            <div class="tw-bg-white tw-rounded-2xl tw-p-5 tw-shadow-sm tw-text-center">
                                <div class="tw-w-14 tw-h-14 tw-rounded-full tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mx-auto tw-mb-3">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                                <div class="tw-text-gray-800 tw-font-bold">KYC Verified</div>
                                <div class="tw-text-gray-500 tw-text-sm">Trusted Suppliers</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="tw-bg-white tw-rounded-2xl tw-p-5 tw-shadow-sm tw-text-center">
                                <div class="tw-w-14 tw-h-14 tw-rounded-full tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-text-green-500 tw-text-2xl tw-mx-auto tw-mb-3">
                                    <i class="bi bi-box-seam-fill"></i>
                                </div>
                                <div class="tw-text-gray-800 tw-font-bold">Low MOQ</div>
                                <div class="tw-text-gray-500 tw-text-sm">10-150 Units</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="tw-bg-white tw-rounded-2xl tw-p-5 tw-shadow-sm tw-text-center">
                                <div class="tw-w-14 tw-h-14 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500 tw-text-2xl tw-mx-auto tw-mb-3">
                                    <i class="bi bi-currency-rupee"></i>
                                </div>
                                <div class="tw-text-gray-800 tw-font-bold">No Commission</div>
                                <div class="tw-text-gray-500 tw-text-sm">Direct Connect</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="tw-bg-white tw-rounded-2xl tw-p-5 tw-shadow-sm tw-text-center">
                                <div class="tw-w-14 tw-h-14 tw-rounded-full tw-bg-purple-100 tw-flex tw-items-center tw-justify-center tw-text-purple-500 tw-text-2xl tw-mx-auto tw-mb-3">
                                    <i class="bi bi-headset"></i>
                                </div>
                                <div class="tw-text-gray-800 tw-font-bold">Dedicated</div>
                                <div class="tw-text-gray-500 tw-text-sm">Support Team</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="tw-py-16 tw-bg-gray-50">
    <div class="container">
        <div class="tw-text-center tw-mb-12">
            <span class="tw-text-orange-500 tw-font-bold tw-uppercase tw-tracking-wider tw-text-sm">Why Choose Us</span>
            <h2 class="tw-text-3xl tw-font-bold tw-text-gray-800 tw-mt-2">Features That Set Us Apart</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="tw-bg-white tw-rounded-2xl tw-p-6 tw-h-full tw-shadow-sm tw-border tw-border-gray-100 hover:tw-shadow-lg tw-transition-all">
                    <div class="tw-w-14 tw-h-14 tw-rounded-xl tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mb-4">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-3">Verified Suppliers</h5>
                    <p class="tw-text-gray-600 tw-text-sm tw-mb-0">All our suppliers go through a strict KYC verification process ensuring you deal only with genuine businesses.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="tw-bg-white tw-rounded-2xl tw-p-6 tw-h-full tw-shadow-sm tw-border tw-border-gray-100 hover:tw-shadow-lg tw-transition-all">
                    <div class="tw-w-14 tw-h-14 tw-rounded-xl tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mb-4">
                        <i class="bi bi-box-seam-fill"></i>
                    </div>
                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-3">Quality Products</h5>
                    <p class="tw-text-gray-600 tw-text-sm tw-mb-0">From electronics to textiles, find quality products across multiple categories with detailed specifications.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="tw-bg-white tw-rounded-2xl tw-p-6 tw-h-full tw-shadow-sm tw-border tw-border-gray-100 hover:tw-shadow-lg tw-transition-all">
                    <div class="tw-w-14 tw-h-14 tw-rounded-xl tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mb-4">
                        <i class="bi bi-chat-dots-fill"></i>
                    </div>
                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-3">Direct Communication</h5>
                    <p class="tw-text-gray-600 tw-text-sm tw-mb-0">Connect directly with suppliers through our inquiry system - no middlemen, faster deals.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="tw-bg-white tw-rounded-2xl tw-p-6 tw-h-full tw-shadow-sm tw-border tw-border-gray-100 hover:tw-shadow-lg tw-transition-all">
                    <div class="tw-w-14 tw-h-14 tw-rounded-xl tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mb-4">
                        <i class="bi bi-graph-up-arrow"></i>
                    </div>
                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-3">Grow Your Business</h5>
                    <p class="tw-text-gray-600 tw-text-sm tw-mb-0">Sellers get a complete dashboard to manage products, track inquiries, and boost visibility.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="tw-bg-white tw-rounded-2xl tw-p-6 tw-h-full tw-shadow-sm tw-border tw-border-gray-100 hover:tw-shadow-lg tw-transition-all">
                    <div class="tw-w-14 tw-h-14 tw-rounded-xl tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mb-4">
                        <i class="bi bi-file-earmark-text-fill"></i>
                    </div>
                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-3">RFQ System</h5>
                    <p class="tw-text-gray-600 tw-text-sm tw-mb-0">Post your requirements and let suppliers come to you with competitive quotes.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="tw-bg-white tw-rounded-2xl tw-p-6 tw-h-full tw-shadow-sm tw-border tw-border-gray-100 hover:tw-shadow-lg tw-transition-all">
                    <div class="tw-w-14 tw-h-14 tw-rounded-xl tw-bg-orange-100 tw-flex tw-items-center tw-justify-center tw-text-orange-500 tw-text-2xl tw-mb-4">
                        <i class="bi bi-headset"></i>
                    </div>
                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-3">Dedicated Support</h5>
                    <p class="tw-text-gray-600 tw-text-sm tw-mb-0">Our support team is always ready to help you with any questions or issues.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="tw-py-16 tw-bg-gradient-to-r tw-from-gray-800 tw-to-gray-900 tw-text-white">
    <div class="container">
        <div class="row tw-items-center">
            <div class="col-lg-8">
                <h3 class="tw-text-2xl tw-font-bold tw-mb-2">Ready to Start Your B2B Journey?</h3>
                <p class="tw-opacity-80 tw-mb-0">Join thousands of businesses already growing with {{ \App\Models\Setting::getValue('site_name', 'The Mini Port') }}.</p>
            </div>
            <div class="col-lg-4 tw-text-lg-end tw-mt-4 tw-mt-lg-0">
                <a href="{{ route('register.seller') }}" class="btn tw-bg-orange-500 tw-border-orange-500 tw-text-white tw-font-bold tw-px-6 tw-py-3 tw-rounded-lg hover:tw-bg-orange-600 tw-me-2">Start Selling</a>
                <a href="{{ route('register.buyer') }}" class="btn tw-bg-white tw-text-gray-800 tw-font-bold tw-px-6 tw-py-3 tw-rounded-lg hover:tw-bg-gray-100">Register as Buyer</a>
            </div>
        </div>
    </div>
</section>
@endsection
