{% extends "base.html" %}
{% block title %}{{ brand }} — {{ tagline }}{% endblock %}
{% block content %}
<section class="relative overflow-hidden">
  <div class="absolute inset-0 bg-grid mask-fade pointer-events-none"></div>
  <div class="max-w-7xl mx-auto px-6 py-20 sm:py-28">
    <div class="max-w-3xl">
      <h1 class="text-4xl sm:text-6xl font-extrabold leading-tight">
        {{ tagline.split('.')[0] }}.<br><span class="text-bh-accent">{{ tagline.split('.')[1].strip() }}</span>
      </h1>
      <p class="mt-5 text-lg text-white/80 max-w-2xl">
        BrookHaven is here to be your all-in-one solution to modern data-management. 

	<br>
	<br>
	
	Whether you are looking to connect with your customers using a technical interface, or require solutions for the team that helps you keep those customers, we offer both customer-facing technology, as well as backend, administrative technology for the working man. 
      </p>
      <div class="mt-8 flex flex-wrap gap-3">
	       <a href="{{ url_for('contact') }}" class="inline-flex items-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-6 py-3 font-semibold shadow-glow">Let’s build</a>
        <a href="{{ url_for('work') }}" class="inline-flex items-center rounded-lg border border-bh.ring hover:border-bh-accent/60 px-6 py-3">See our work</a>
      </div>
    </div>
  </div>
  <div class="pointer-events-none absolute -top-24 -right-24 h-72 w-72 rounded-full blur-3xl opacity-20" style="background: radial-gradient(closest-side, #22d3ee, transparent)"></div>
</section>

<section id="services" class="max-w-7xl mx-auto px-6 py-12 sm:py-20">
  <div class="grid md:grid-cols-3 gap-6">
    <div class="rounded-2xl bg-bh.card/70 border border-bh.ring p-6"><h3 class="text-xl font-semibold">Rapid Prototypes</h3><p class="mt-2 text-white/70">Clickable by Friday. Usable by Sunday.</p></div>
    <div class="rounded-2xl bg-bh.card/70 border border-bh.ring p-6"><h3 class="text-xl font-semibold">Enterprise Rails</h3><p class="mt-2 text-white/70">Nginx, Gunicorn, Flask/FastAPI, SQL with guardrails.</p></div>
    <div class="rounded-2xl bg-bh.card/70 border border-bh.ring p-6"><h3 class="text-xl font-semibold">Event Tech</h3><p class="mt-2 text-white/70">Offline-friendly kiosks, QR onboarding, live games.</p></div>
  </div>
</section>
{% endblock %}