---
import { aboutPageLayout } from './aboutData';
import HeroBlock from './HeroBlock.astro';
import StoryBlock from './StoryBlock.astro';
import ValuesBlock from './ValuesBlock.astro';
import FleetBlock from './FleetBlock.astro';
import SectionWrapper from './SectionWrapper.astro';
---

<div>
  <HeroBlock
    title={aboutPageLayout[0].title}
    subtitle={aboutPageLayout[0].subtitle}
  />

  <SectionWrapper className="bg-gray-50 py-8 -mx-4">
    <StoryBlock
      title={aboutPageLayout[1].title}
      content={aboutPageLayout[1].content}
      image={aboutPageLayout[1].image}
    />
  </SectionWrapper>

  <SectionWrapper className="bg-white py-8">
    <ValuesBlock
      title={aboutPageLayout[2].title}
      values={aboutPageLayout[2].values}
    />
  </SectionWrapper>

  <SectionWrapper className="bg-gray-50 py-8">
    <FleetBlock
      title={aboutPageLayout[3].title}
      vehicles={aboutPageLayout[3].vehicles}
    />
  </SectionWrapper>

  <div class="container mx-auto px-4 max-w-7xl pb-12">
    <section class="relative bg-gradient-to-r from-blue-600 to-indigo-700 rounded-3xl overflow-hidden text-white text-center py-12 px-8 mt-12 opacity-0 animate-fadeInUp delay-700">
      <div class="absolute inset-0 opacity-10">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <defs>
            <pattern
              id="grid"
              width="40"
              height="40"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 40 0 L 0 0 0 40"
                fill="none"
                stroke="white"
                stroke-width="1"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>
      </div>

      <div class="relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 opacity-0 animate-fadeInUp delay-400">
          {aboutPageLayout[4].title}
        </h2>
        {aboutPageLayout[4].subtitle && (
          <p class="text-lg mb-8 max-w-2xl mx-auto opacity-95 animate-fadeInUp delay-500">
            {aboutPageLayout[4].subtitle}
          </p>
        )}
        {aboutPageLayout[4].button && (
          <a
            href={aboutPageLayout[4].button.link}
            class="cta-button inline-block bg-white text-blue-700 font-semibold px-8 py-4 rounded-xl shadow-lg transition-all duration-300"
          >
            {aboutPageLayout[4].button.text}
          </a>
        )}
      </div>
    </section>
  </div>
</div>

<style>
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes buttonHover {
    to {
      transform: scale(1.05);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    }
  }

  @keyframes buttonTap {
    to {
      transform: scale(0.95);
    }
  }

  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  .delay-700 {
    animation-delay: 0.7s;
  }

  .delay-400 {
    animation-delay: 0.4s;
  }

  .delay-500 {
    animation-delay: 0.5s;
  }

  .cta-button {
    transform: scale(1);
    transition: all 0.3s ease;
  }

  .cta-button:hover {
    animation: buttonHover 0.3s ease forwards;
  }

  .cta-button:active {
    animation: buttonTap 0.1s ease forwards;
  }
</style>