@@ -147,56 +147,60 @@
          <div>
            <label class="block text-sm font-medium">Short description</label>
            <textarea name="description" rows="3" class="mt-1 w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-brand-500" placeholder="Spec, colour, inclusions, event types…"></textarea>
          </div>

          <!-- Drag & drop uploader -->
          <div>
            <label class="block text-sm font-medium mb-2">Photos</label>
            <div id="dropzone" class="group relative border-2 border-dashed border-slate-300 rounded-2xl p-6 text-center bg-slate-50 hover:bg-slate-100 transition">
              <input id="fileInput" type="file" accept="image/*" multiple>
              <div class="pointer-events-none">
                <div class="text-3xl">📸</div>
                <p class="mt-2 text-sm">Drag & drop images here, or <span class="font-semibold underline">browse</span></p>
                <p class="text-xs text-slate-500">PNG, JPG up to ~10MB each</p>
              </div>
            </div>
            <div id="preview" class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"></div>
          </div>

        </div>

        <aside class="lg:col-span-1">
          <div class="p-5 rounded-2xl bg-white border border-slate-200 shadow-sm sticky top-24">
            <div class="text-sm text-slate-600">Preview card</div>
            <div id="cardPreview" class="mt-3 p-3 rounded-xl border border-slate-200 bg-slate-50 text-sm">
              <div class="aspect-[4/3] rounded-lg bg-white grid place-items-center text-slate-400">No image</div>
              <div class="aspect-[4/3] rounded-lg bg-white overflow-hidden relative">
                <img id="cpImage" class="absolute inset-0 w-full h-full object-cover hidden" alt="Listing preview image"/>
                <div id="cpImagePlaceholder" class="absolute inset-0 grid place-items-center text-slate-400">No image</div>
              </div>
              <div class="mt-3 font-semibold" id="cpTitle">Make & Model</div>
              <div class="text-slate-600" id="cpMeta">Year • Location</div>
              <div class="mt-1 font-bold" id="cpPrice">£0/day</div>
            </div>
            <button type="submit" class="mt-4 w-full px-4 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 text-white font-semibold">Post listing</button>
            <p id="formStatus" class="mt-2 text-sm font-medium text-brand-700 hidden">Listing saved to your browser ✔️</p>
            <p class="mt-2 text-xs text-slate-500">Drafts are saved locally to your browser until you publish.</p>
          </div>
        </aside>
      </form>
    </div>
  </section>

  <!-- Marketplace -->
  <section id="market" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="flex items-end justify-between flex-wrap gap-4">
      <div>
        <h3 class="text-2xl font-bold">Browse cars</h3>
        <p class="text-sm text-slate-600">Demo listings are stored in your browser via localStorage. Connect a database for production.</p>
      </div>
      <div class="flex items-center gap-2">
        <input id="search" class="px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-brand-500" placeholder="Search make, model, location…"/>
        <button id="clearListings" class="px-3 py-2 rounded-xl border border-slate-300 hover:bg-slate-100 text-sm">Clear demo data</button>
      </div>
    </div>

    <div id="grid" class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"></div>
  </section>

  <!-- Contact -->
  <section id="contact" class="bg-white border-t border-slate-200">
@@ -218,26 +222,301 @@

  <footer class="border-t border-slate-200 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-sm text-slate-600">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div>© <span id="year"></span> SupercarBookings.com. All rights reserved.</div>
        <div class="flex items-center gap-4">
          <a href="#" class="hover:text-brand-700">Terms</a>
          <a href="#" class="hover:text-brand-700">Privacy</a>
          <a href="#" class="hover:text-brand-700">Safety</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- Listing card template -->
  <template id="cardTemplate">
    <article class="group rounded-2xl overflow-hidden bg-white border border-slate-200 shadow-sm hover:shadow-md transition">
      <div class="aspect-[4/3] bg-slate-100 overflow-hidden">
        <img class="w-full h-full object-cover" alt="Listing image">
      </div>
      <div class="p-4">
        <div class="flex items-center justify-between gap-3">
          <h4 class="font-semibold text-ink truncate"></h4>
          <div class="font-bold shrink-0"></div>
        </div>
        <div class="text-sm
        <div class="text-sm text-slate-500"></div>
        <p class="mt-3 text-sm text-slate-600"></p>
      </div>
    </article>
  </template>

  <script>
    (function () {
      const STORAGE_KEY = 'supercarbookings:listings';

      const form = document.getElementById('listingForm');
      const formStatus = document.getElementById('formStatus');
      const dropzone = document.getElementById('dropzone');
      const fileInput = document.getElementById('fileInput');
      const previewGrid = document.getElementById('preview');
      const cardPreview = document.getElementById('cardPreview');
      const cpImage = document.getElementById('cpImage');
      const cpImagePlaceholder = document.getElementById('cpImagePlaceholder');
      const cpTitle = document.getElementById('cpTitle');
      const cpMeta = document.getElementById('cpMeta');
      const cpPrice = document.getElementById('cpPrice');
      const grid = document.getElementById('grid');
      const searchInput = document.getElementById('search');
      const clearListingsBtn = document.getElementById('clearListings');
      const cardTemplate = document.getElementById('cardTemplate');
      const footerYear = document.getElementById('year');

      const state = {
        images: [],
        listings: []
      };

      footerYear.textContent = new Date().getFullYear();

      const hasFileAPI = 'FileReader' in window;

      function loadListings() {
        try {
          const stored = localStorage.getItem(STORAGE_KEY);
          state.listings = stored ? JSON.parse(stored) : [];
        } catch (error) {
          console.warn('Unable to parse stored listings', error);
          state.listings = [];
        }
        renderListings();
      }

      function persistListings() {
        try {
          localStorage.setItem(STORAGE_KEY, JSON.stringify(state.listings));
        } catch (error) {
          console.warn('Unable to save listings', error);
        }
      }

      function renderListings() {
        const query = (searchInput.value || '').toLowerCase().trim();
        grid.innerHTML = '';

        const filtered = query
          ? state.listings.filter((listing) => {
              const haystack = [
                listing.make,
                listing.model,
                listing.location,
                listing.description
              ]
                .join(' ')
                .toLowerCase();
              return haystack.includes(query);
            })
          : state.listings;

        if (!filtered.length) {
          const empty = document.createElement('div');
          empty.className = 'col-span-full rounded-2xl border border-dashed border-slate-300 bg-white p-10 text-center text-slate-500';
          empty.textContent = query
            ? 'No listings match your search yet. Try a different term or add a listing above.'
            : 'No listings yet — add one using the form above!';
          grid.appendChild(empty);
          return;
        }

        filtered
          .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
          .forEach((listing) => {
            const card = cardTemplate.content.firstElementChild.cloneNode(true);
            const [imgEl] = card.getElementsByTagName('img');
            const titleEl = card.querySelector('h4');
            const priceEl = card.querySelector('.font-bold');
            const metaEl = card.querySelector('.text-sm');
            const descEl = card.querySelector('p');

            if (listing.images && listing.images.length) {
              imgEl.src = listing.images[0].src;
              imgEl.alt = `${listing.make} ${listing.model}`;
            } else {
              imgEl.remove();
              const placeholder = document.createElement('div');
              placeholder.className = 'w-full h-full grid place-items-center text-slate-400 bg-slate-100';
              placeholder.textContent = 'No photo yet';
              card.querySelector('.aspect-[4/3]').appendChild(placeholder);
            }

            titleEl.textContent = `${listing.make} ${listing.model}`.trim();
            priceEl.textContent = `£${Number(listing.rate || 0).toLocaleString()}/day`;
            metaEl.textContent = `${listing.year} • ${listing.location}`;
            descEl.textContent = listing.description || 'Add a description to help clients understand what makes this car special.';

            grid.appendChild(card);
          });
      }

      function resetImages() {
        state.images = [];
        previewGrid.innerHTML = '';
        cpImage.classList.add('hidden');
        cpImage.src = '';
        cpImagePlaceholder.classList.remove('hidden');
      }

      function removeImageAt(index) {
        state.images.splice(index, 1);
        renderImagePreview();
      }

      function renderImagePreview() {
        previewGrid.innerHTML = '';
        if (!state.images.length) {
          cpImage.classList.add('hidden');
          cpImage.src = '';
          cpImagePlaceholder.classList.remove('hidden');
          return;
        }

        cpImage.src = state.images[0].src;
        cpImage.classList.remove('hidden');
        cpImagePlaceholder.classList.add('hidden');

        state.images.forEach((image, index) => {
          const wrapper = document.createElement('div');
          wrapper.className = 'relative group rounded-xl overflow-hidden border border-slate-200 bg-white shadow-sm';

          const img = document.createElement('img');
          img.src = image.src;
          img.alt = image.name;
          img.className = 'w-full h-full object-cover';

          const removeBtn = document.createElement('button');
          removeBtn.type = 'button';
          removeBtn.className = 'absolute top-2 right-2 rounded-full bg-white/90 px-2 py-1 text-xs font-medium text-slate-600 shadow hover:bg-brand-600 hover:text-white';
          removeBtn.textContent = 'Remove';
          removeBtn.addEventListener('click', () => removeImageAt(index));

          wrapper.appendChild(img);
          wrapper.appendChild(removeBtn);
          previewGrid.appendChild(wrapper);
        });
      }

      function handleFiles(files) {
        if (!files || !files.length) return;

        Array.from(files).forEach((file) => {
          if (!file.type.startsWith('image/')) {
            return;
          }

          if (!hasFileAPI) {
            state.images.push({ name: file.name, src: '' });
            renderImagePreview();
            return;
          }

          const reader = new FileReader();
          reader.onload = (event) => {
            state.images.push({ name: file.name, src: event.target.result });
            renderImagePreview();
          };
          reader.readAsDataURL(file);
        });
      }

      function updatePreviewCard() {
        const make = form.make.value.trim();
        const model = form.model.value.trim();
        const year = form.year.value;
        const location = form.location.value.trim();
        const rate = form.rate.value;

        const title = [make || 'Make', model || 'Model'].join(' ').replace(/\s+/g, ' ').trim();
        cpTitle.textContent = title;
        cpMeta.textContent = `${year || 'Year'} • ${location || 'Location'}`;

        const numericRate = Number(rate);
        cpPrice.textContent = Number.isFinite(numericRate) && numericRate > 0
          ? `£${numericRate.toLocaleString()}/day`
          : '£0/day';
      }

      function showStatus(message, type = 'success') {
        if (!formStatus) return;
        formStatus.textContent = message;
        formStatus.classList.remove('hidden');
        formStatus.classList.toggle('text-brand-700', type === 'success');
        formStatus.classList.toggle('text-red-600', type === 'error');
        setTimeout(() => formStatus.classList.add('hidden'), 4000);
      }

      form.addEventListener('input', updatePreviewCard);
      form.addEventListener('change', updatePreviewCard);

      form.addEventListener('submit', (event) => {
        event.preventDefault();

        const formData = new FormData(form);
        const listing = Object.fromEntries(formData.entries());

        listing.id = typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `listing-${Date.now()}`;
        listing.createdAt = new Date().toISOString();
        listing.images = [...state.images];
        listing.rate = Number(listing.rate || 0);

        state.listings.push(listing);
        persistListings();
        renderListings();
        showStatus('Listing saved to your browser ✔️', 'success');

        form.reset();
        resetImages();
        updatePreviewCard();
      });

      dropzone.addEventListener('click', () => fileInput.click());

      dropzone.addEventListener('dragover', (event) => {
        event.preventDefault();
        dropzone.classList.add('drop-glow');
      });

      dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('drop-glow');
      });

      dropzone.addEventListener('drop', (event) => {
        event.preventDefault();
        dropzone.classList.remove('drop-glow');
        handleFiles(event.dataTransfer.files);
      });

      fileInput.addEventListener('change', (event) => {
        handleFiles(event.target.files);
        fileInput.value = '';
      });

      searchInput.addEventListener('input', renderListings);

      clearListingsBtn.addEventListener('click', () => {
        if (!state.listings.length) {
          showStatus('No demo listings to clear yet.', 'error');
          return;
        }
        if (confirm('Remove all locally stored listings?')) {
          state.listings = [];
          persistListings();
          renderListings();
          showStatus('All demo listings cleared.', 'success');
        }
      });

      updatePreviewCard();
      loadListings();
    })();
  </script>
</body>
</html>