---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
---

<BaseLayout
  title="Ornitonautas - FP Informática | Vocational Training"
  description="Vocational Training in Computer Science with real projects and direct connection to the job market. DAM, DAW, SMR, ASIR cycles."
>
  <Header lang="en" />

  <main id="main-content">

    <!-- Hero -->
    <section class="grid grid-cols-[1.05fr_0.95fr] gap-10 items-center px-10 py-[72px] bg-[radial-gradient(120%_120%_at_85%_10%,#f4f7fc_0%,#fff_60%)]">
      <div>
        <span class="inline-flex items-center gap-2 bg-[#eef3fb] text-navy-soft font-bold text-[12.5px] py-[7px] px-[13px] rounded-full mb-[22px]">
          🚀 Official FP Training · Spain
        </span>
        <h1 class="font-heading font-bold text-[56px] leading-[1.03] tracking-tight mb-5">
          Learn computing.<br />Launch your <span class="text-orange">future</span>.
        </h1>
        <p class="text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
          Books and materials for FP cycles in Spain, with real practice and a pace that adapts to you.
        </p>
        <div class="flex items-center gap-4">
          <a href="/en/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base py-[15px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
            Explore FP in Spain →
          </a>
          <span class="text-[15px] font-semibold text-text">Higher & Medium Level</span>
        </div>
      </div>
      <div class="relative flex justify-center items-center min-h-[340px]">
        <div class="absolute w-[340px] h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
        <span class="absolute top-[30px] right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
        <span class="absolute bottom-[50px] left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span>
        <img src="/ornito_logo.png" alt="" class="w-[300px] h-[300px] object-contain relative animate-floaty" />
      </div>
    </section>

    <!-- Official FP in Spain -->
    <section class="px-10 py-16 border-t border-line">
      <div class="flex items-end justify-between mb-7">
        <div>
          <h2 class="font-heading font-bold text-[30px] tracking-tight mb-2">Official FP in Spain</h2>
          <p class="text-base text-text m-0">Choose your cycle and study with our books and exercises.</p>
        </div>
        <a href="/en/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">View all cycles →</a>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
        <a href="/en/campus/daw/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg">&lt;/&gt;</div>
          <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
          <h3 class="font-heading text-[19px] mb-2">Web Application Development</h3>
          <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Complete, secure and scalable web applications.</p>
          <div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
        </a>
        <a href="/en/campus/asir/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg">◉</div>
          <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
          <h3 class="font-heading text-[19px] mb-2">Networked Computer Systems Admin</h3>
          <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Servers, networks and real-world systems.</p>
          <div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
        </a>
        <a href="/en/campus/dam/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg">▤</div>
          <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
          <h3 class="font-heading text-[19px] mb-2">Multiplatform Application Development</h3>
          <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Desktop and mobile multiplatform apps.</p>
          <div class="text-[13px] font-semibold text-text-muted">DAM · 2000h</div>
        </a>
      </div>
    </section>

    <!-- Learning paths -->
    <section class="px-16 py-16 bg-mist border-t border-line">
      <h2 class="font-heading font-bold text-[30px] tracking-tight m-0 mb-2 text-center">Learning Paths</h2>
      <p class="m-0 mx-auto mb-9 text-base text-text text-center max-w-[520px]">A step-by-step journey, from the first concept to the final project.</p>
      <div class="flex items-center justify-center">
        <div class="text-center w-[200px]">
          <div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">1</div>
          <div class="font-bold text-[15px]">Foundations</div>
          <div class="text-[13px] text-text-muted">Logic & programming</div>
        </div>
        <div class="flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div>
        <div class="text-center w-[200px]">
          <div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">2</div>
          <div class="font-bold text-[15px]">Specialization</div>
          <div class="text-[13px] text-text-muted">Web, systems or data</div>
        </div>
        <div class="flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div>
        <div class="text-center w-[200px]">
          <div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">3</div>
          <div class="font-bold text-[15px]">Real Project</div>
          <div class="text-[13px] text-text-muted">Portfolio for employment</div>
        </div>
      </div>
      <div class="text-center mt-9">
        <a href="/en/aprendizaje/" class="inline-block border-[1.5px] border-navy text-navy font-bold text-[15px] py-[13px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
          View full paths →
        </a>
      </div>
    </section>

    <!-- Job market -->
    <section class="px-10 py-16 border-t border-line">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
        <div class="text-center px-3">
          <div class="text-[34px] mb-3">🎯</div>
          <h3 class="font-heading text-[18px] mb-2">Skills employers want</h3>
          <p class="m-0 text-[14.5px] text-text leading-relaxed">Learn what companies are looking for today.</p>
        </div>
        <div class="text-center px-3">
          <div class="text-[34px] mb-3">💼</div>
          <h3 class="font-heading text-[18px] mb-2">Professional Portfolio</h3>
          <p class="m-0 text-[14.5px] text-text leading-relaxed">Build projects you can show off.</p>
        </div>
        <div class="text-center px-3">
          <div class="text-[34px] mb-3">🤝</div>
          <h3 class="font-heading text-[18px] mb-2">Ready for employment</h3>
          <p class="m-0 text-[14.5px] text-text leading-relaxed">From classroom to your first tech job.</p>
        </div>
      </div>
    </section>

  </main>

  <Footer />
</BaseLayout>
