@extends('layouts.public')

@section('content')
<!-- =========================
SECTION 1: HERO / INTRO
========================= -->
<section class="py-16 bg-[#F4F4F4]">
  <div class="max-w-6xl  mx-auto px-6 lg:px-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      
      <!-- Text Content -->
      <div>
        <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
          About Us
        </h2>
        <p class="text-gray-600 leading-relaxed mb-6">
          At {{__system_settings('site_name')}}, our mission is to make it easier for professionals, brands, and businesses to connect with verified talent representation. We provide a reliable database of booking agents, managers, and publicists, eliminating the guesswork and saving you valuable time.
        </p>
        <p class="text-gray-600 leading-relaxed mb-6">
          Since launching, we’ve helped thousands of users successfully reach the right industry contacts. Our platform focuses on accuracy, transparency, and ease of use—ensuring you always have access to updated contact details and tools to manage your outreach.
        </p>
        <p class="text-gray-600 leading-relaxed">
          Whether you're planning events, partnerships, sponsorships, or collaborations, we empower you with trusted data to get results faster and more efficiently.
        </p>
      </div>

      <!-- Image / Illustration -->
      <div class="flex justify-center">
        <img 
          src="https://via.placeholder.com/500x350" 
          alt="About Us" 
          class="rounded-xl shadow-lg object-cover"
        >
      </div>
    </div>
  </div>
</section>

<section class="w-full bg-[#fffae8] py-20">
  <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10 items-center">
    
    <!-- Text Content -->
    <div class="space-y-6">
      <h1 class="text-4xl md:text-5xl font-bold leading-tight text-gray-900">
        Connecting You With the Right Talent & Industry Contacts
      </h1>
      <p class="text-lg text-gray-600">
        We provide verified contact information for booking agents, managers, and publicists 
        so businesses, brands, and professionals can confidently reach the right people.
      </p>
      <p class="text-gray-600">
        Our platform makes it easier than ever to discover accurate data, manage outreach, 
        and build meaningful industry relationships.
      </p>

      
    </div>

    <!-- Image -->
    <div class="relative">
      <img 
        src="https://images.unsplash.com/photo-1525182008055-f88b95ff7980?q=80&w=1200"
        alt="Networking"
        class="rounded-2xl shadow-lg w-full object-cover"
      />
      <!-- Decorative shape -->
      <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-blue-100 rounded-full -z-10"></div>
    </div>

  </div>
</section>
<!-- =========================
SECTION 2: OUR STORY
========================= -->
<section id="about" class="w-full  bg-[#F4F4F4] py-20">
  <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
    
    <!-- Image -->
    <div class="relative order-2 md:order-1">
      <img 
        src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?q=80&w=1200"
        alt="Our Story"
        class="rounded-2xl shadow-lg w-full object-cover"
      />
      <div class="absolute -top-6 -right-6 w-32 h-32 bg-blue-50 rounded-full -z-10"></div>
    </div>

    <!-- Text Content -->
    <div class="space-y-6 order-1 md:order-2">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
        Built to Make Industry Connections Easier
      </h2>
      <p class="text-gray-600 leading-relaxed">
        {{__system_settings('site_name')}} started with a simple mission: to bring transparency and accuracy
        to the entertainment business. For years, professionals struggled to find reliable
        contact details—so we decided to solve the problem.
      </p>
      <p class="text-gray-600 leading-relaxed">
        What began as a small directory has grown into a trusted platform used by agencies, 
        brands, event organizers, and creators worldwide. Today, we help thousands of users 
        reach the right decision-makers with confidence.
      </p>

      
    </div>

  </div>
</section>
<!-- =========================
SECTION 3: MISSION & CORE VALUES
========================= -->
<section id="mission" class="w-full bg-[#fffae8] py-20">
  <div class="max-w-6xl mx-auto px-6 text-center space-y-10">

    <!-- Mission Title -->
    <div class="max-w-3xl mx-auto space-y-4">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
        Our Mission
      </h2>
      <p class="text-gray-600 text-lg leading-relaxed">
        To empower professionals with accurate, up-to-date contact information
        so they can build meaningful connections, save time, and grow their business.
      </p>
    </div>

    <!-- Core Values -->
    <div class="grid md:grid-cols-3 gap-8 mt-10">
      
      <!-- Value 1 -->
      <div class="bg-white rounded-2xl shadow p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Accuracy First</h3>
        <p class="text-gray-600">
          We continuously verify data to ensure our contact information is reliable,
          current, and trustworthy.
        </p>
      </div>

      <!-- Value 2 -->
      <div class="bg-white rounded-2xl shadow p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">User Empowerment</h3>
        <p class="text-gray-600">
          We design tools and features that make outreach easier, faster,
          and more effective for every user.
        </p>
      </div>

      <!-- Value 3 -->
      <div class="bg-white rounded-2xl shadow p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Transparency & Trust</h3>
        <p class="text-gray-600">
          Our platform is built on honesty and clarity—no hidden rules,
          no shady practices, just value.
        </p>
      </div>

    </div>
  </div>
</section>
<!-- =========================
SECTION 4: WHY CHOOSE US
========================= -->
<section class="w-full bg-[#F4F4F4] py-20">
  <div class="max-w-6xl mx-auto px-6 text-center space-y-10">

    <!-- Section Title -->
    <div class="space-y-4 max-w-3xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
        Why Professionals Choose Us
      </h2>
      <p class="text-gray-600 text-lg">
        We’re more than just a database — we’re your partner in making
        high-quality industry connections with confidence.
      </p>
    </div>

    <!-- Feature Cards -->
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 mt-12">

      <!-- Card 1 -->
      <div class="bg-gray-50 hover:bg-white border border-gray-100 shadow-sm hover:shadow-lg transition rounded-2xl p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Verified Contacts</h3>
        <p class="text-gray-600">
          Every contact is reviewed and updated regularly to ensure maximum accuracy.
        </p>
      </div>

      <!-- Card 2 -->
      <div class="bg-gray-50 hover:bg-white border border-gray-100 shadow-sm hover:shadow-lg transition rounded-2xl p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Time-Saving Tools</h3>
        <p class="text-gray-600">
          Quickly find managers, agents, and publicists with powerful search and filters.
        </p>
      </div>

      <!-- Card 3 -->
      <div class="bg-gray-50 hover:bg-white border border-gray-100 shadow-sm hover:shadow-lg transition rounded-2xl p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Business-Focused</h3>
        <p class="text-gray-600">
          Our platform is built for brands, agencies, professionals—not casual users.
        </p>
      </div>

      <!-- Card 4 -->
      <div class="bg-gray-50 hover:bg-white border border-gray-100 shadow-sm hover:shadow-lg transition rounded-2xl p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Global Reach</h3>
        <p class="text-gray-600">
          Connect with talent and representatives from all over the world.
        </p>
      </div>

      <!-- Card 5 -->
      <div class="bg-gray-50 hover:bg-white border border-gray-100 shadow-sm hover:shadow-lg transition rounded-2xl p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Flexible Plans</h3>
        <p class="text-gray-600">
          Choose a subscription level that fits your needs with easy upgrades.
        </p>
      </div>

      <!-- Card 6 -->
      <div class="bg-gray-50 hover:bg-white border border-gray-100 shadow-sm hover:shadow-lg transition rounded-2xl p-8 text-left">
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Dedicated Support</h3>
        <p class="text-gray-600">
          Our team is here to help you succeed every step of the way.
        </p>
      </div>

    </div>
    
  </div>
</section>

<!-- FINAL CTA / JOIN US -->
<section class="py-20 bg-black bg-cover bg-center  text-white text-center relative overflow-hidden">
    <!-- Accent Gradient Overlay -->
    <div class="absolute inset-0 bg-gradient-to-r from-primary/40 to-transparent opacity-50" style="background-image: url('{{secure_url('homes')}}/map.png'); opacity:.95;"></div>

    <div class="relative max-w-4xl mx-auto px-6">
        <h2 class="text-4xl font-bold mb-4">Join the Leading Talent Contact Platform</h2>
        <p class="text-gray-300 text-lg mb-8">
            Get access to verified contacts, booking data, and the tools you need to grow your network and secure opportunities.
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{route('auth.signup')}}" 
               class="mt-4 px-8 py-3 bg-[#00B3B3] hover:bg-[#003366] rounded-full text-white font-semibold transition">
                Start Your Membership
            </a>
           
        </div>
    </div>
</section>


@endsection