@extends('frontend.layouts.main')

@section('page_title','Contact Us')

@section('content')

@php
  $contactEmail = config('settings.contact_email') ?: (config('settings.app_email') ?: 'support@company.com');
  $contactPhone = config('settings.support_phone') ?: '';
@endphp

{{-- ===== PAGE HERO ===== --}}
<section class="page-hero">
  <div class="page-hero-bg"></div>
  <div class="hero-grid"></div>
  <div class="container page-hero-content">
    <div class="row justify-content-center text-center">
      <div class="col-lg-8" data-aos="fade-up">
        <div class="breadcrumb-nav">
          <a href="{{ route('frontend.home') }}">Home</a>
          <span>/</span>
          <span style="color:#e2e8f0">Contact Us</span>
        </div>
        <div class="page-badge">
          <i class="bi bi-headset"></i>
          Get In Touch
        </div>
        <h1 class="section-title" style="font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:1.2rem">
          We're Here to Help
        </h1>
        <p class="section-sub mx-auto" style="font-size:1.05rem;max-width:600px">
          Whether you're a first-time investor or a seasoned professional, our team is ready to answer your questions.
        </p>
      </div>
    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- ===== CONTACT CARDS ===== --}}
<section class="section-alt section-sm">
  <div class="container">
    <div class="row g-4">

      <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="0">
        <div style="
          background:var(--dark-3);
          border:1px solid var(--border);
          border-radius:14px;
          padding:1.5rem;
          text-align:center;
          height:100%;
        ">
          <div class="icon-box bg-blue mx-auto mb-3">
            <i class="bi bi-envelope-fill ic-blue"></i>
          </div>
          <h6 style="color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.4rem">Email Us</h6>
          <a href="mailto:{{ $contactEmail }}" style="color:#93c5fd;font-size:.85rem;font-weight:600;margin-bottom:.3rem;display:block;text-decoration:none;word-break:break-word">{{ $contactEmail }}</a>
          <p style="color:var(--text-muted);font-size:.78rem;margin:0">Response within 2 hours</p>
        </div>
      </div>

      <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="80">
        <div style="
          background:var(--dark-3);
          border:1px solid var(--border);
          border-radius:14px;
          padding:1.5rem;
          text-align:center;
          height:100%;
        ">
          <div class="icon-box bg-gold mx-auto mb-3">
            <i class="bi bi-telephone-fill ic-gold"></i>
          </div>
          <h6 style="color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.4rem">Call Us</h6>
          @if($contactPhone)
            <a href="tel:{{ preg_replace('/[^0-9+]/', '', $contactPhone) }}" style="color:var(--gold);font-size:.85rem;font-weight:600;margin-bottom:.3rem;display:block;text-decoration:none">{{ $contactPhone }}</a>
          @else
            <p style="color:var(--gold);font-size:.85rem;font-weight:600;margin-bottom:.3rem">&mdash;</p>
          @endif
          <p style="color:var(--text-muted);font-size:.78rem;margin:0">Mon&ndash;Fri 9am&ndash;6pm EST</p>
        </div>
      </div>

      <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="160">
        <div style="
          background:var(--dark-3);
          border:1px solid var(--border);
          border-radius:14px;
          padding:1.5rem;
          text-align:center;
          height:100%;
        ">
          <div class="icon-box bg-green mx-auto mb-3">
            <i class="bi bi-chat-dots-fill ic-green"></i>
          </div>
          <h6 style="color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.4rem">Live Chat</h6>
          <p style="color:#34d399;font-size:.85rem;font-weight:600;margin-bottom:.3rem">Chat with us</p>
          <p style="color:var(--text-muted);font-size:.78rem;margin:0">Available 24/7</p>
        </div>
      </div>

      <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="240">
        <div style="
          background:var(--dark-3);
          border:1px solid var(--border);
          border-radius:14px;
          padding:1.5rem;
          text-align:center;
          height:100%;
        ">
          <div class="icon-box bg-violet mx-auto mb-3">
            <i class="bi bi-geo-alt-fill ic-violet"></i>
          </div>
          <h6 style="color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.4rem">Our Office</h6>
          <p style="color:#a78bfa;font-size:.85rem;font-weight:600;margin-bottom:.3rem">London, UK</p>
          <p style="color:var(--text-muted);font-size:.78rem;margin:0">By appointment only</p>
        </div>
      </div>

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

<div class="divider-glow"></div>

{{-- ===== CONTACT FORM ===== --}}
<section class="section section-dark">
  <div class="container">
    <div class="row g-5 align-items-start">

      {{-- Form Column --}}
      <div class="col-lg-7" data-aos="fade-up">
        <span class="section-label">Message Us</span>
        <h2 class="section-title">Send Us a Message</h2>
        <p class="section-sub" style="margin-bottom:2rem">
          Fill in the form below and a member of our team will be in touch shortly.
        </p>

        <form class="form-dark" action="#" method="POST">
          @csrf

          <div class="row g-3 mb-3">
            <div class="col-sm-6">
              <label class="form-label">First Name</label>
              <input type="text" class="form-control" placeholder="John" required>
            </div>
            <div class="col-sm-6">
              <label class="form-label">Last Name</label>
              <input type="text" class="form-control" placeholder="Smith" required>
            </div>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-sm-6">
              <label class="form-label">Email Address</label>
              <input type="email" class="form-control" placeholder="john@example.com" required>
            </div>
            <div class="col-sm-6">
              <label class="form-label">Phone Number</label>
              <input type="tel" class="form-control" placeholder="+1 000 000 0000">
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">Subject</label>
            <select class="form-select" required>
              <option value="" disabled selected>Select a subject</option>
              <option>General Inquiry</option>
              <option>Investment Plans</option>
              <option>Wealth Management</option>
              <option>Business Finance</option>
              <option>Technical Support</option>
              <option>Partnership</option>
            </select>
          </div>

          <div class="mb-4">
            <label class="form-label">Message</label>
            <textarea class="form-control" rows="5" placeholder="Tell us how we can help you..." required></textarea>
          </div>

          <button type="submit" style="
            display:block;
            width:100%;
            background:var(--primary);
            color:#fff;
            border:none;
            border-radius:10px;
            padding:.8rem;
            font-size:.95rem;
            font-weight:600;
            cursor:pointer;
            transition:background .2s;
          "
          onmouseover="this.style.background='#1141a8'"
          onmouseout="this.style.background='var(--primary)'">
            <i class="bi bi-send-fill me-2"></i> Send Message
          </button>

        </form>
      </div>

      {{-- Info Column --}}
      <div class="col-lg-5 d-none d-lg-block" data-aos="fade-up" data-aos-delay="120">
        <div style="
          background:var(--dark-3);
          border:1px solid var(--border);
          border-radius:16px;
          padding:2rem;
          position:sticky;
          top:100px;
        ">

          <h5 style="color:#fff;font-weight:700;margin-bottom:1.4rem;display:flex;align-items:center;gap:.6rem">
            <i class="bi bi-clock-fill" style="color:var(--gold)"></i> Office Hours
          </h5>

          <div class="d-flex flex-column gap-3 mb-4">
            <div class="d-flex justify-content-between align-items-center">
              <span style="color:var(--text-muted);font-size:.9rem">Monday &ndash; Friday</span>
              <span style="color:#e2e8f0;font-size:.9rem;font-weight:600">9:00am &ndash; 6:00pm EST</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span style="color:var(--text-muted);font-size:.9rem">Saturday</span>
              <span style="color:#e2e8f0;font-size:.9rem;font-weight:600">10:00am &ndash; 2:00pm EST</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span style="color:var(--text-muted);font-size:.9rem">Sunday</span>
              <span style="color:#fb7185;font-size:.9rem;font-weight:600">Closed</span>
            </div>
          </div>

          <div style="height:1px;background:var(--border);margin-bottom:1.4rem"></div>

          <h6 style="color:#fff;font-size:.85rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.07em">
            Response Times
          </h6>

          <div class="d-flex flex-column gap-2 mb-4">
            <div class="d-flex justify-content-between align-items-center">
              <span style="color:var(--text-muted);font-size:.875rem;display:flex;align-items:center;gap:.5rem">
                <i class="bi bi-envelope" style="color:#93c5fd"></i> Email
              </span>
              <span style="color:#34d399;font-size:.85rem;font-weight:600">&lt; 2 hours</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span style="color:var(--text-muted);font-size:.875rem;display:flex;align-items:center;gap:.5rem">
                <i class="bi bi-telephone" style="color:var(--gold)"></i> Phone
              </span>
              <span style="color:#34d399;font-size:.85rem;font-weight:600">Immediate</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span style="color:var(--text-muted);font-size:.875rem;display:flex;align-items:center;gap:.5rem">
                <i class="bi bi-chat-dots" style="color:#34d399"></i> Live Chat
              </span>
              <span style="color:#34d399;font-size:.85rem;font-weight:600">Instant</span>
            </div>
          </div>

          <div style="
            background:rgba(212,168,67,.08);
            border:1px solid rgba(212,168,67,.2);
            border-radius:12px;
            padding:1rem 1.1rem;
          ">
            <p style="color:var(--gold);font-size:.82rem;font-weight:700;margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem">
              <i class="bi bi-shield-check-fill"></i> Emergency Support
            </p>
            <p style="color:var(--text-muted);font-size:.82rem;margin:0;line-height:1.6">
              Premium and Elite clients have access to dedicated 24/7 support. Contact your account manager directly.
            </p>
          </div>

        </div>
      </div>

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

<div class="divider-glow"></div>

{{-- ===== FAQ TEASER ===== --}}
<section class="section section-alt">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">

        <div class="text-center mb-5" data-aos="fade-up">
          <span class="section-label gold">FAQ</span>
          <h2 class="section-title">Common Questions</h2>
          <p class="section-sub mx-auto">Quick answers to the questions we hear most often.</p>
        </div>

        <div data-aos="fade-up" data-aos-delay="60">

          <div class="accord-item">
            <button class="accord-btn">
              How long does account setup take?
              <i class="bi bi-plus icon"></i>
            </button>
            <div class="accord-body">
              Account setup takes under 10 minutes. Our instant KYC process verifies your identity in real-time, and your account is activated the same day.
            </div>
          </div>

          <div class="accord-item">
            <button class="accord-btn">
              What documents do I need?
              <i class="bi bi-plus icon"></i>
            </button>
            <div class="accord-body">
              You will need a valid government-issued photo ID (passport or driving licence) and a proof of address dated within the last 3 months (utility bill or bank statement).
            </div>
          </div>

          <div class="accord-item">
            <button class="accord-btn">
              Is my data secure?
              <i class="bi bi-plus icon"></i>
            </button>
            <div class="accord-body">
              Yes. We use 256-bit encryption to protect all data in transit and at rest. Our platform is FCA regulated and subject to strict data protection standards.
            </div>
          </div>

          <div class="accord-item">
            <button class="accord-btn">
              Can I speak to an advisor before investing?
              <i class="bi bi-plus icon"></i>
            </button>
            <div class="accord-body">
              Absolutely. We offer a free, no-obligation consultation with one of our qualified advisors. Simply schedule a call via the form above or click the button below.
            </div>
          </div>

        </div>

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

<div class="divider-glow"></div>

{{-- ===== CTA BANNER ===== --}}
<section class="section section-dark">
  <div class="container">
    <div class="cta-banner text-center" data-aos="fade-up">
      <h2 class="section-title mb-3">Don't Wait to Start Growing</h2>
      <p style="color:rgba(255,255,255,.75);font-size:1rem;max-width:500px;margin:0 auto 2rem;line-height:1.75">
        Open your account in minutes and join 48,000+ investors already building their future.
      </p>
      <div class="d-flex flex-wrap gap-3 justify-content-center">
        <a href="{{ route('register') }}" class="btn-cta-white">
          <i class="bi bi-person-plus-fill"></i> Create Account
        </a>
        <a href="{{ route('frontend.home') }}" class="btn-cta-ghost">
          <i class="bi bi-house-fill"></i> Back to Home
        </a>
      </div>
    </div>
  </div>
</section>

@endsection