---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import ScrollUpButton from '../components/ScrollUpButton.astro';
import BentoFeatures from '../components/BentoFeatures.astro';
import Team from '../components/Team.astro';
---

<Layout
  title="About - Tailcast"
  description="Tailcast is an open source dark-themed landing page template built with Astro and Tailwind CSS."
>
  <Navbar />

  <!-- Hero -->
  <section class="relative overflow-hidden pt-32 pb-16 md:pt-44">
    <div
      class="pointer-events-none absolute top-1/4 left-1/2 h-[37.5rem] w-[62.5rem] -translate-x-1/2 -translate-y-1/2 rounded-full"
      style="background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 65%)"
    >
    </div>
    <div class="content-container relative z-10">
      <div class="about-hero-fade">
        <div class="flex flex-col items-start gap-12 lg:flex-row lg:gap-20">
          <div class="lg:w-[55%]">
            <span class="block-subtitle mb-6 block">Our story</span>
            <h1
              class="text-primaryText mb-8 text-4xl leading-[1.1] font-bold tracking-tight md:text-5xl lg:text-6xl"
            >
              Built for clarity over complexity
            </h1>
            <p class="text-secondaryText text-lg leading-relaxed">
              Tailcast was born from experience with analytics tools that bury insights under layers
              of complexity. We set out to build something different - a platform that's powerful
              enough for engineers yet intuitive enough for the entire team.
            </p>
          </div>
          <div class="flex flex-col gap-14 lg:w-1/2 lg:pt-14 lg:pl-16 xl:pl-24">
            <div class="relative pl-8">
              <div
                class="from-primaryColor to-primaryColor/0 absolute top-0 left-0 h-full w-[3px] rounded-full bg-gradient-to-b"
              >
              </div>
              <div
                class="stat-pulse bg-primaryColor absolute top-0 -left-1 h-[11px] w-[11px] rounded-full"
              >
              </div>
              <div
                class="from-primaryText to-secondaryText bg-gradient-to-r bg-clip-text text-5xl leading-none font-bold text-transparent md:text-6xl"
              >
                10,000+
              </div>
              <div class="text-secondaryText mt-3 text-base">
                Teams ship faster with Tailcast every day
              </div>
            </div>
            <div class="relative pl-8">
              <div
                class="from-secondaryColor to-secondaryColor/0 absolute top-0 left-0 h-full w-[3px] rounded-full bg-gradient-to-b"
              >
              </div>
              <div
                class="stat-pulse bg-secondaryColor absolute top-0 -left-1 h-[11px] w-[11px] rounded-full"
                style="animation-delay: 1s;"
              >
              </div>
              <div
                class="from-primaryText to-secondaryText bg-gradient-to-r bg-clip-text text-5xl leading-none font-bold text-transparent md:text-6xl"
              >
                2 billion+
              </div>
              <div class="text-secondaryText mt-3 text-base">
                Events processed every month, sub-100ms latency
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <BentoFeatures />

  <!-- Timeline -->
  <section class="pt-8 pb-32">
    <div class="content-container">
      <div class="fade-in">
        <div class="mb-16 text-center">
          <span class="block-subtitle mb-6 block">Our journey</span>
          <h2 class="text-primaryText text-3xl font-bold tracking-tight lg:text-4xl">
            Milestones that shaped Tailcast
          </h2>
        </div>
        <div class="relative mx-auto max-w-4xl">
          <div
            class="bg-mainBorderDarker absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 lg:block"
          >
          </div>
          <div class="bg-mainBorderDarker absolute top-3 bottom-3 left-[0.6875rem] w-px lg:hidden">
          </div>

          <div class="space-y-12 lg:space-y-16">
            <!-- 1 - left -->
            <div class="relative pl-10 lg:flex lg:items-start lg:pl-0">
              <div class="hidden lg:flex lg:w-1/2 lg:justify-end lg:pr-12">
                <div class="max-w-xs text-right">
                  <div class="text-secondaryColor mb-1 text-sm font-bold">Q1 2022</div>
                  <h3 class="text-primaryText mb-1 text-lg font-bold">First prototype</h3>
                  <p class="text-secondaryText text-sm leading-relaxed">
                    Built a working event pipeline. Three teams asked for access the same day.
                  </p>
                </div>
              </div>
              <div
                class="border-secondaryColor bg-bgDark2 absolute top-1 left-0 z-10 h-[1.375rem] w-[1.375rem] rounded-full border-2 lg:left-1/2 lg:-translate-x-1/2"
              >
              </div>
              <div class="lg:hidden lg:w-1/2 lg:pl-12">
                <div class="text-secondaryColor mb-1 text-sm font-bold">Q1 2022</div>
                <h3 class="text-primaryText mb-1 text-lg font-bold">First prototype</h3>
                <p class="text-secondaryText text-sm leading-relaxed">
                  Built a working event pipeline. Three teams asked for access the same day.
                </p>
              </div>
            </div>

            <!-- 2 - right -->
            <div class="relative pl-10 lg:flex lg:items-start lg:pl-0">
              <div class="hidden lg:block lg:w-1/2"></div>
              <div
                class="border-secondaryColor bg-bgDark2 absolute top-1 left-0 z-10 h-[1.375rem] w-[1.375rem] rounded-full border-2 lg:left-1/2 lg:-translate-x-1/2"
              >
              </div>
              <div class="lg:w-1/2 lg:pl-12">
                <div class="text-secondaryColor mb-1 text-sm font-bold">Q3 2022</div>
                <h3 class="text-primaryText mb-1 text-lg font-bold">Public beta</h3>
                <p class="text-secondaryText text-sm leading-relaxed">
                  500 teams signed up in the first month without any marketing.
                </p>
              </div>
            </div>

            <!-- 3 - left -->
            <div class="relative pl-10 lg:flex lg:items-start lg:pl-0">
              <div class="hidden lg:flex lg:w-1/2 lg:justify-end lg:pr-12">
                <div class="max-w-xs text-right">
                  <div class="text-secondaryColor mb-1 text-sm font-bold">Q1 2023</div>
                  <h3 class="text-primaryText mb-1 text-lg font-bold">Series A</h3>
                  <p class="text-secondaryText text-sm leading-relaxed">
                    Raised $12M to scale infrastructure. Crossed 2,000 active teams.
                  </p>
                </div>
              </div>
              <div
                class="border-secondaryColor bg-bgDark2 absolute top-1 left-0 z-10 h-[1.375rem] w-[1.375rem] rounded-full border-2 lg:left-1/2 lg:-translate-x-1/2"
              >
              </div>
              <div class="lg:hidden lg:w-1/2 lg:pl-12">
                <div class="text-secondaryColor mb-1 text-sm font-bold">Q1 2023</div>
                <h3 class="text-primaryText mb-1 text-lg font-bold">Series A</h3>
                <p class="text-secondaryText text-sm leading-relaxed">
                  Raised $12M to scale infrastructure. Crossed 2,000 active teams.
                </p>
              </div>
            </div>

            <!-- 4 - right -->
            <div class="relative pl-10 lg:flex lg:items-start lg:pl-0">
              <div class="hidden lg:block lg:w-1/2"></div>
              <div
                class="border-secondaryColor bg-bgDark2 absolute top-1 left-0 z-10 h-[1.375rem] w-[1.375rem] rounded-full border-2 lg:left-1/2 lg:-translate-x-1/2"
              >
              </div>
              <div class="lg:w-1/2 lg:pl-12">
                <div class="text-secondaryColor mb-1 text-sm font-bold">Q4 2023</div>
                <h3 class="text-primaryText mb-1 text-lg font-bold">API-first launch</h3>
                <p class="text-secondaryText text-sm leading-relaxed">
                  REST API, webhooks, Slack and Zapier integrations. Usage doubled in 8 weeks.
                </p>
              </div>
            </div>

            <!-- 5 - left (today) -->
            <div class="relative pl-10 lg:flex lg:items-start lg:pl-0">
              <div class="hidden lg:flex lg:w-1/2 lg:justify-end lg:pr-12">
                <div class="max-w-xs text-right">
                  <div class="text-secondaryColor mb-1 text-sm font-bold">Today</div>
                  <h3 class="text-primaryText mb-1 text-lg font-bold">10,000+ teams</h3>
                  <p class="text-secondaryText text-sm leading-relaxed">
                    2B+ events per month. Building AI-powered insights and predictive analytics.
                  </p>
                </div>
              </div>
              <div
                class="border-secondaryColor bg-bgDark2 absolute top-1 left-0 z-10 h-[1.375rem] w-[1.375rem] rounded-full border-2 shadow-[0_0_8px_rgba(161,163,247,0.3)] lg:left-1/2 lg:-translate-x-1/2"
              >
              </div>
              <div class="lg:hidden lg:w-1/2 lg:pl-12">
                <div class="text-secondaryColor mb-1 text-sm font-bold">Today</div>
                <h3 class="text-primaryText mb-1 text-lg font-bold">10,000+ teams</h3>
                <p class="text-secondaryText text-sm leading-relaxed">
                  2B+ events per month. Building AI-powered insights and predictive analytics.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Security & Trust -->
  <section class="pb-24">
    <div class="content-container">
      <div class="fade-in">
        <div class="card rounded-3xl p-10 lg:p-14">
          <div class="flex flex-col items-center gap-12 lg:flex-row lg:gap-20">
            <div class="lg:w-1/2">
              <span class="block-subtitle mb-6 block">Security</span>
              <h2 class="text-primaryText mb-6 text-3xl font-bold tracking-tight">
                Enterprise-grade security, built in
              </h2>
              <p class="text-secondaryText mb-8 leading-relaxed">
                Your data is encrypted at rest and in transit. We're SOC 2 Type II certified and
                GDPR compliant. Role-based access, SSO, and audit logs come standard - not as
                enterprise add-ons.
              </p>
              <div class="flex flex-wrap gap-3">
                <span class="badge-neutral font-semibold">SOC 2 Type II</span>
                <span class="badge-neutral font-semibold">GDPR</span>
                <span class="badge-neutral font-semibold">SSO / SAML</span>
                <span class="badge-neutral font-semibold">Encryption</span>
                <span class="badge-neutral font-semibold">Audit Logs</span>
              </div>
            </div>
            <div class="flex justify-center lg:w-1/2">
              <div
                class="bg-primaryColor/5 border-primaryColor/10 flex h-40 w-40 items-center justify-center rounded-full border"
              >
                <div
                  class="bg-primaryColor/10 border-primaryColor/15 flex h-28 w-28 items-center justify-center rounded-full border"
                >
                  <svg
                    class="text-primaryColor h-12 w-12"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.5"
                    viewBox="0 0 24 24"
                  >
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path
                      d="M9 12l2 2 4-4"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <Team />

  <Footer />
  <ScrollUpButton />
</Layout>

<style>
  .about-hero-fade {
    opacity: 0;
    transform: translateY(12px);
    animation: aboutHeroIn 0.8s ease forwards;
  }

  @keyframes aboutHeroIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
