@extends('layouts.site')
 
@section('content')

  <!-- Page Heading -->
  <section class="text-center py-16 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Contact Us</h1>
    <p class="text-lg text-gray-600 mb-10 max-w-xl mx-auto">
      If you have any questions, please feel free to reach out to us.
    </p>
  </section>

  <!-- Contact Cards Section -->
  <section class="py-16 px-4 max-w-6xl mx-auto grid md:grid-cols-3 gap-10">
    
    <!-- Email Card -->
    <div class="bg-white shadow-lg border rounded-lg p-6 text-center">
      <div class="flex justify-center mb-4">
        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" stroke-width="2"
             viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 4h16v16H4z" stroke="none"/>
          <path d="M4 4l8 8l8-8" />
        </svg>
      </div>
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Email</h2>
      <p class="text-blue-700 font-medium">contact@jurifi.com</p>
    </div>

    <!-- Address Card -->
    <div class="bg-white shadow-lg border rounded-lg p-6 text-center">
      <div class="flex justify-center mb-4">
        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" stroke-width="2"
             viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7z" />
          <circle cx="12" cy="9" r="2.5" />
        </svg>
      </div>
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Address</h2>
      <p class="text-gray-700 leading-relaxed">
        123 Main St,<br>San Francisco, CA 94100
      </p>
    </div>

    <!-- Phone Card -->
    <div class="bg-white shadow-lg border rounded-lg p-6 text-center">
      <div class="flex justify-center mb-4">
        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" stroke-width="2"
             viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 16.92v3a2 2 0 01-2.18 2A19.86 19.86 0 013 5.18 2 2 0 015 3h3a2 2 0 012 1.72c.12.81.4 1.6.8 2.33a2 2 0 01-.45 2.11L9 10c1.25 2.4 3.13 4.27 5.53 5.53l1.84-1.34a2 2 0 012.11-.45c.73.4 1.52.68 2.33.8a2 2 0 011.72 2z"/>
        </svg>
      </div>
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Phone</h2>
      <p class="text-blue-700 font-medium">1-800-832-8282</p>
    </div>


  </section>

  @endsection