@extends('layouts.app')

@section('content')
    @include('partials.navbar')
    @include('articles.partials.home-css')
    <div class="container py-1 mb-4" style="max-width:1100px">

        <div class="text-center mb-5">

            <h1 class="fw-bold">Contact Us</h1>
            <p class="text-muted">
                Send us a news tip, partnership request, or general inquiry.
            </p>
        </div>

        <div class="row g-2">

            <!-- LEFT SIDE (INFO) -->
            <div class="col-md-4">

                <div class="contact-panel text-white p-4 h-100">
                    <img src="{{ asset('images/preview-1.png') }}" alt="Article Image" style="width:200px;margin:1px auto">
                    <p class="small opacity-75 mb-4">
                        We cover startups, funding, innovation, and digital economy developments
                        shaping Africa's technology ecosystem.
                    </p>
                    <div class="contact-item mb-4">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <div class="contact-title">General Inquiries</div>
                            <div class="contact-text">info@africatechinsights.com</div>
                        </div>
                    </div>

                    <div class="contact-item mb-4">
                        <div class="contact-icon">
                            <i class="fas fa-newspaper"></i>
                        </div>
                        <div>
                            <div class="contact-title">Press & Media</div>
                            <div class="contact-text">press@africatechinsights.com</div>
                        </div>
                    </div>

                    <div class="contact-item mb-4">
                        <div class="contact-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <div>
                            <div class="contact-title">Partnerships</div>
                            <div class="contact-text">partnerships@africatechinsights.com</div>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div>
                            <div class="contact-title">Startup Tips</div>
                            <div class="contact-text">tips@africatechinsights.com</div>
                        </div>
                    </div>

                    <hr class="border-light my-4">

                    <p class="small opacity-75 mb-0">
                        Our editorial team usually responds within 24 hours.
                    </p>

                </div>

            </div>


            <!-- RIGHT SIDE (FORM) -->
            <div class="col-md-8 shadow-sm">

                <div class="contact-form-card p-5">

                    <h3 class="fw-bold mb-3">Send us a message</h3>

                    <p class="text-muted mb-4">
                        Have a story tip, startup announcement, partnership idea, or feedback?
                        Our editorial team would love to hear from you.
                    </p>

                    @if (session('message_sent'))
                        <div class="alert alert-success">
                            {{ session('message_sent') }}
                        </div>
                    @endif

                    <form action="{{ route('messages.store') }}" method="POST">
                        @csrf

                        <div class="row">

                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-semibold">Your Name</label>
                                <input type="text" name="name" class="form-control contact-input"
                                    placeholder="Enter your name" required>
                            </div>

                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-semibold">Email Address</label>
                                <input type="email" name="email" class="form-control contact-input"
                                    placeholder="Enter your email" required>
                            </div>

                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Your Message</label>
                            <textarea name="message" rows="6" class="form-control contact-input" placeholder="Write your message here..."
                                required></textarea>
                        </div>

                        <button class="btn btn-success contact-btn">
                            Send Message
                        </button>
                        <img src="{{ asset('images/preview-1.png') }}" alt="Article Image" style="width:200px;float:right">
                    </form>

                </div>

            </div>

        </div>

    </div>
    <br>
    <style>
        .contact-panel {
            background: linear-gradient(135deg, #0d6efd, #0dcaf0);
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .contact-icon {
            width: 45px;
            height: 45px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .contact-title {
            font-weight: 600;
        }

        .contact-text {
            font-size: 14px;
            opacity: 0.85;
        }

        .contact-form-card {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
        }

        .contact-input {
            border-radius: 8px;
            padding: 14px;
            border: 1px solid #e6e6e6;
            transition: all .25s ease;
        }

        .contact-input:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
        }

        .contact-btn {
            padding: 12px 28px;
            font-weight: 600;
            border-radius: 8px;
        }
    </style>
@endsection