---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Over SiteLoft" description="De mens achter SiteLoft. Een solo-ondernemer met passie voor technologie, die jouw online aanwezigheid naar het volgende niveau tilt.">
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
      <div class="mx-auto max-w-3xl text-center">
        <p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Over ons</p>
        <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">De mens achter <span class="text-gradient">SiteLoft</span></h1>
        <p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Geen groot bureau met lagen management. SiteLoft is opgericht door een developer die gelooft dat technologie toegankelijk moet zijn voor elk bedrijf.</p>
      </div>
    </div>
  </section>

  <!-- STORY -->
  <section class="relative pb-24 sm:pb-32">
    <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
      <div class="rounded-2xl glass p-8 sm:p-12">
        <div class="prose max-w-none">
          <p class="text-slate-300 leading-relaxed text-lg mb-6">
            SiteLoft is ontstaan vanuit een simpele frustratie: waarom moet je als ondernemer drie verschillende partijen inhuren voor een website, hosting en marketing? Waarom kan dat niet gewoon bij één persoon die het allemaal begrijpt?
          </p>
          <p class="text-slate-400 leading-relaxed mb-6">
            Als developer beheer ik mijn eigen servers, bouw ik websites in diverse technologieën en help ik bedrijven groeien online. Ik combineer technische kennis met een scherp oog voor wat commercieel werkt. Het resultaat: een full-service bureau zonder de overhead van een groot kantoor.
          </p>
          <p class="text-slate-400 leading-relaxed">
            Wat mij drijft is de overtuiging dat een goede online aanwezigheid niet duur of ingewikkeld hoeft te zijn. Met de juiste technologie en een persoonlijke aanpak kan elk bedrijf professioneel online staan — en gevonden worden.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- VALUES -->
  <section class="relative py-24 sm:py-32 border-t border-slate-800/40">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <h2 class="text-2xl font-bold text-slate-50 mb-12 text-center">Waar we voor staan</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {[
          { title: 'Transparantie', desc: 'Geen verborgen kosten, geen kleine lettertjes. Je weet altijd precies waar je aan toe bent — qua prijs, planning en verwachtingen.', icon: 'M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
          { title: 'Kwaliteit', desc: 'Liever iets goed doen dan snel en half. Elke website die we opleveren voldoet aan onze hoge standaarden voor snelheid, veiligheid en design.', icon: 'M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z' },
          { title: 'Persoonlijk', desc: 'Je spreekt altijd met dezelfde persoon. Geen account managers, geen doorverbinden. Direct contact met de developer die je project kent.', icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z' },
        ].map(value => (
          <div class="rounded-2xl glass-light p-8 text-center">
            <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d={value.icon} /></svg>
            </div>
            <h3 class="text-lg font-semibold text-slate-100 mb-2">{value.title}</h3>
            <p class="text-sm text-slate-400 leading-relaxed">{value.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- TECH STACK -->
  <section class="relative py-24 sm:py-32 border-t border-slate-800/40">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <h2 class="text-2xl font-bold text-slate-50 mb-4 text-center">Onze tools</h2>
      <p class="text-slate-500 text-center mb-12 max-w-lg mx-auto">We gebruiken moderne, bewezen technologie om het beste resultaat te leveren.</p>
      <div class="flex flex-wrap items-center justify-center gap-4">
        {['Astro', 'Next.js', 'WordPress', 'WooCommerce', 'Docker', 'Cloudflare', 'Tailwind CSS', 'TypeScript', 'Node.js', 'Git'].map(tech => (
          <span class="rounded-full bg-slate-800/50 px-4 py-2 text-sm font-medium text-slate-400 ring-1 ring-slate-700/50">{tech}</span>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="relative py-24 sm:py-32 border-t border-slate-800/40">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-3xl font-bold text-slate-50 mb-4">Laten we kennismaken</h2>
      <p class="text-slate-400 mb-8 max-w-lg mx-auto">Benieuwd wat SiteLoft voor jou kan betekenen? Plan een vrijblijvend gesprek.</p>
      <a href="/contact" class="inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
        Neem contact op
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
      </a>
    </div>
  </section>
</Layout>