@extends('layouts.static-page')

@section('meta_title', 'About Us')
@section('meta_description', 'Learn how BlackSplit helps users share subscription costs more affordably.')

@push('style')
<style>
    html,
    body {
        background: #fbfbfb;
    }

    .about-page {
        min-height: 100svh;
        padding: 2.5rem 1rem 3.5rem;
        background: #fbfbfb;
    }

    .about-shell {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
    }

    .about-title {
        margin: 0 0 1.5rem;
        text-align: center;
        font-size: clamp(2rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: #111111;
        font-weight: 800;
    }

    .about-intro-card,
    .about-section-card,
    .contact-card {
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    }

    .about-intro-card,
    .about-section-card {
        padding: 1.45rem 1.55rem;
    }

    .about-intro,
    .about-section-card p,
    .contact-card p {
        margin: 0;
        color: #1b1b1b;
        font-size: 0.99rem;
        line-height: 1.7;
    }

    .about-block {
        margin-top: 1.9rem;
    }

    .about-block-title {
        margin: 0 0 1rem;
        font-size: 1.15rem;
        font-weight: 800;
        color: #111111;
        line-height: 1.4;
    }

    .about-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .about-option-card {
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        padding: 1.35rem 1.4rem;
    }

    .about-option-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2rem;
        height: 2rem;
        margin-bottom: 0.8rem;
        border-radius: 999px;
        background: #ffedd5;
        color: #ea7a00;
        font-size: 0.95rem;
        font-weight: 800;
    }

    .about-option-card h3 {
        margin: 0 0 0.55rem;
        color: #111111;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .about-option-card p {
        margin: 0;
        color: #1b1b1b;
        font-size: 0.97rem;
        line-height: 1.68;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .contact-card {
        padding: 1.35rem 1.4rem;
    }

    .contact-card h3 {
        margin: 0 0 0.65rem;
        color: #111111;
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .about-page a {
        color: #ff8c1a;
        font-weight: 700;
        text-decoration: none;
    }

    .about-page a:hover {
        text-decoration: underline;
    }

    @media (max-width: 767.98px) {
        .about-options,
        .contact-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575.98px) {
        .about-page {
            padding: 1.1rem 0.75rem 2.2rem;
        }

        .about-title {
            margin-bottom: 1.2rem;
        }

        .about-intro-card,
        .about-section-card,
        .about-option-card,
        .contact-card {
            padding: 1.1rem 1rem;
            border-radius: 16px;
        }
    }
</style>
@endpush

@section('content')
<div class="about-page">
    <div class="about-shell">
        <h1 class="about-title">About us</h1>

        <section class="about-intro-card">
            <p class="about-intro">
                <strong>What is BlackSplit?</strong><br>
                BlackSplit is an innovative platform that helps users share the cost of multi-account digital
                subscriptions, making subscriptions more affordable. As digital subscription services become an
                increasingly significant part of our expenses, managing multiple subscriptions is like owning a car:
                there are often empty seats. When those seats are utilized, it can save money and improve efficiency.
                BlackSplit brings the concept of carpooling to the world of digital subscriptions, allowing users to
                share costs across multiple services and enjoy more affordable access to high-quality services.
            </p>
        </section>

        <section class="about-block">
            <h2 class="about-block-title">How BlackSplit Works</h2>
            <section class="about-section-card">
                <p>
                    BlackSplit offers two ways to participate, depending on whether you want to share your own
                    subscription or join a group that already has available slots.
                </p>

                <div class="about-options">
                    <article class="about-option-card">
                        <span class="about-option-label">1</span>
                        <h3>As an Admin</h3>
                        <p>
                            If you have a multi-account subscription, you can offer unused slots to others and reduce
                            your own subscription costs.
                        </p>
                    </article>

                    <article class="about-option-card">
                        <span class="about-option-label">2</span>
                        <h3>As a Joiner</h3>
                        <p>
                            If you need access to a service, you can join a group with available slots and share the
                            costs with others.
                        </p>
                    </article>
                </div>
            </section>
        </section>

        <section class="about-block">
            <h2 class="about-block-title">Why People Use BlackSplit</h2>
            <section class="about-section-card">
                <p>
                    BlackSplit provides a convenient way for users to share subscription costs responsibly, ensuring
                    everyone can enjoy great services at a lower price.
                </p>
            </section>
        </section>

        <section class="about-block">
            <h2 class="about-block-title">Contact Us</h2>
            <div class="contact-grid">
                <article class="contact-card">
                    <h3>1. Live Chat</h3>
                    <p>
                        Use the chat to communicate with a member of the team and ask them all your questions.
                        It's quick and easy. Customer service is available 24 hours a day.
                    </p>
                </article>

                <article class="contact-card">
                    <h3>2. Email</h3>
                    <p>support@blacksplit.com</p>
                </article>

                <article class="contact-card">
                    <h3>3. Complaints</h3>
                    <p>complaints@blacksplit.com</p>
                </article>

                <article class="contact-card">
                    <h3>Address</h3>
                    <p>
                        5 Brayford Square, London, E1 0SG, United Kingdom. This is our operating and business
                        correspondence address.
                    </p>
                </article>
            </div>
        </section>
    </div>
</div>
@endsection