@extends('layouts.guestfull')

@section('title', 'Packages')

@section('content')

<section
  class="relative bg-cover bg-center py-24 text-white"
  style="background-image:url('{{asset('images/banner-advertise-with-us-scaled.jpg')}}')"
>
  <div class="absolute inset-0 bg-black/60"></div>

  <div class="relative max-w-5xl mx-auto px-6 text-center">
    <h1 class="text-4xl md:text-5xl font-extrabold mb-6">
      Grow Your Business with High-Impact Ads
    </h1>

    <p class="text-lg md:text-xl text-gray-200 max-w-3xl mx-auto">
      Whether you sell properties, financial products, interior solutions, or building materials,
      our advertising solutions help you reach high-intent customers and convert interest into revenue.
    </p>

    <a
      href="#"
      class="inline-block mt-10 bg-orange-500 hover:bg-orange-600 text-black font-semibold px-8 py-4 rounded-lg transition"
    >
      Start Advertising Today
    </a>
  </div>
</section>

<section class="bg-slate-900 py-20">
  <div class="max-w-7xl mx-auto px-6">

    <!-- Section Heading -->
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-bold text-white">
        Ad Solutions for <span class="text-orange-400">Every Business & Budget</span>
      </h2>
      <p class="mt-4 text-gray-300 max-w-3xl mx-auto">
        Whether you’re promoting properties, financial products, interior services,
        or building materials—our ad platform gives you full control over spend,
        performance, and scale.
      </p>
    </div>

    <!-- Cards -->
    <div class="grid md:grid-cols-3 gap-10">

      <!-- Card 1 -->
      <div class="text-center">
        <img
          src="https://m.media-amazon.com/images/G/01/AdProductsWebsite/images/VisualRefresh/Iconography/darkBackgrounds/industries_financial-services_pink_negative_squid-ink_-_Copy._TTW_.png"
          alt="No upfront fees"
          class="h-28 mx-auto mb-6 rounded-lg"
        />
        <h3 class="text-xl font-semibold text-white mb-3">
          Budget-Friendly Advertising
        </h3>
        <p class="text-gray-300">
          Designed for businesses of all sizes, our ads work even with small budgets.
    Whether you’re a local realtor, builder, bank, interior designer, or material supplier,
    you can start promoting your services without heavy upfront investment.
        </p>
      </div>

      <!-- Card 2 -->
      <div class="text-center">
        <img
          src="https://m.media-amazon.com/images/G/01/AdProductsWebsite/images/VisualRefresh/Iconography/darkBackgrounds/marketing-terminology_business-growth_blue_negative_squid-ink_-_Copy._TTW_.png"
          alt="Start small"
          class="h-28 mx-auto mb-6 rounded-lg"
        />
        <h3 class="text-xl font-semibold text-white mb-3">
          Start Small. Scale Confidently.
        </h3>
        <p class="text-gray-300">
          Launch campaigns with a modest budget and increase spend as you see
          more enquiries, showroom visits, site traffic, or qualified leads.
        </p>
      </div>

      <!-- Card 3 -->
      <div class="text-center">
        <img
          src="https://m.media-amazon.com/images/G/01/AdProductsWebsite/images/VisualRefresh/Iconography/darkBackgrounds/marketing-outcomes_increase-sales--conversion_purple_negative_squid-ink_-_Copy._TTW_.png"
          alt="Budget control"
          class="h-28 mx-auto mb-6 rounded-lg"
        />
        <h3 class="text-xl font-semibold text-white mb-3">
          Full Budget Control
        </h3>
        <p class="text-gray-300">
          Set daily or monthly limits with complete transparency. You’ll never
          spend more than you plan—perfect for growing brands and regional players.
        </p>
      </div>

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

<section class="bg-gray-50 pt-12 pb-20">
  <div class="max-w-7xl mx-auto px-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-10 items-center">
      
      <!-- LEFT CONTENT (66%) -->
      <div class="md:col-span-2">
        <h2 class="text-3xl md:text-4xl font-semibold text-gray-900 mb-6">
          Start advertising your business with
          <span class="text-orange-500">
            Bricklet Ads solutions today
          </span>
        </h2>

        <a
          href="https://advertising.amazon.com/register?ref_=a20m_us_lp_sa_b_gs"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-semibold px-8 py-4 rounded-lg transition"
        >
          Start now
        </a>
      </div>

      <!-- RIGHT IMAGE (33%) -->
      <div class="md:col-span-1 flex justify-start">
        <img
          src="https://m.media-amazon.com/images/G/01/AdProductsWebsite/images/VisualRefresh/Illustration/Three-Color/Brand_Effective-results_3-color_Orange-Purple-Teal._TTW_.png"
          alt="Illustration of a person stacking up blocks representing a graph increasing to the right."
          class="w-full max-w-sm rounded-lg"
        />
      </div>

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

<section class="bg-gray-50 pt-12 pb-20">
  <div class="max-w-7xl mx-auto px-6">
  
    <!-- FORM SECTION -->
    <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
      <h3 class="text-2xl font-semibold text-gray-900 mb-6 text-center">
        Get Expert Help to Grow Your Business
      </h3>

      <form method="POST" action="#" class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Name -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Full Name
          </label>
          <input
            type="text"
            name="name"
            required
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:outline-none"
          />
        </div>

        <!-- Contact Number -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Contact Number
          </label>
          <input
            type="tel"
            name="contact"
            required
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:outline-none"
          />
        </div>

        <!-- Email -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Email Address
          </label>
          <input
            type="email"
            name="email"
            required
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:outline-none"
          />
        </div>

        <!-- Business Name -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Business Name
          </label>
          <input
            type="text"
            name="business_name"
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:outline-none"
          />
        </div>

        <!-- Business Type -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Business Type
          </label>
          <select
            name="business_type"
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:outline-none"
          >
            <option value="">Select Business Type</option>
            <option>Builder / Developer</option>
            <option>Real Estate Broker / Realtor</option>
            <option>Interior Designer</option>
            <option>Bank / Home Loan Provider</option>
            <option>Building Material Supplier</option>
            <option>Other</option>
          </select>
        </div>

        <!-- Address -->
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Address
          </label>
          <textarea
            name="address"
            rows="3"
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:outline-none"
          ></textarea>
        </div>

        <!-- Submit Button -->
        <div class="md:col-span-2 text-center pt-4">
          <button
            type="submit"
            class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-10 py-4 rounded-lg transition"
          >
            Request Consultation
          </button>
        </div>

      </form>
    </div>

  </div>
</section>

@endsection