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

<BaseLayout
  title="Ornitonautas - FP Informática | Aprende. Practica. Despega."
  description="Formación Profesional en Informática con proyectos reales y conexión directa con el mercado laboral. Ciclos DAM, DAW, SMR, ASIR."
>
  <Header lang="es" />

  <main id="main-content">

    <!-- Hero -->
    <section class="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-10 items-center px-4 sm:px-6 lg:px-10 py-12 lg: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]">
          🚀 Formación oficial de FP · España
        </span>
        <h1 class="font-heading font-bold text-[clamp(2rem,6vw,56px)] leading-[1.03] tracking-tight mb-5">
          Aprende informática.<br />Despega tu <span class="text-orange">futuro</span>.
        </h1>
        <p class="text-base lg:text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
          Libros y materiales para los ciclos de FP en España, con práctica real y un ritmo que se adapta a ti.
        </p>
        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
          <a href="/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base min-h-[44px] py-[13px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
            Ver FP de España →
          </a>
          <span class="text-[15px] font-semibold text-text">Grado Medio y Superior</span>
        </div>
      </div>
      <div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]">
        <div class="absolute w-[200px] h-[200px] lg:w-[340px] lg:h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
        <span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle" aria-hidden="true">✦</span>
        <span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay" aria-hidden="true">✦</span>
        <img src="/ornito_logo.png" alt="Ornitonautas — mascot" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
      </div>
    </section>

    <!-- FP oficial en España -->
    <section aria-labelledby="fp-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
      <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7">
        <div>
          <h2 id="fp-title" class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight mb-2">FP oficial en España</h2>
          <p class="text-base text-text m-0">Elige tu ciclo y estudia con nuestros libros y prácticas.</p>
        </div>
        <a href="/campus/" class="inline-flex items-center min-h-[44px] font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">Ver todos los ciclos →</a>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
        <a href="/campus/daw/" class="group block border border-line rounded-2xl p-5 lg: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" aria-hidden="true">&lt;/&gt;</div>
          <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
          <h3 class="font-heading text-[19px] mb-2">Desarrollo de Aplicaciones Web</h3>
          <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Aplicaciones web completas, seguras y escalables.</p>
          <div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
        </a>
        <a href="/campus/asir/" class="group block border border-line rounded-2xl p-5 lg: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" aria-hidden="true">◉</div>
          <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
          <h3 class="font-heading text-[19px] mb-2">Administración de Sistemas en Red</h3>
          <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Servidores, redes y sistemas en entornos reales.</p>
          <div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
        </a>
        <a href="/campus/dam/" class="group block border border-line rounded-2xl p-5 lg: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" aria-hidden="true">▤</div>
          <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
          <h3 class="font-heading text-[19px] mb-2">Desarrollo de Aplicaciones Multiplataforma</h3>
          <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Apps de escritorio y móvil multiplataforma.</p>
          <div class="text-[13px] font-semibold text-text-muted">DAM · 2000h</div>
        </a>
      </div>
    </section>

    <!-- Rutas de aprendizaje -->
    <section aria-labelledby="rutas-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 bg-mist border-t border-line">
      <h2 id="rutas-title" class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight m-0 mb-2 text-center">Rutas de aprendizaje</h2>
      <p class="m-0 mx-auto mb-9 text-base text-text text-center max-w-[520px]">Un camino paso a paso, del primer concepto al proyecto final.</p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-0">
        <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" aria-hidden="true">1</div>
          <div class="font-bold text-[15px]">Fundamentos</div>
          <div class="text-[13px] text-text-muted">Lógica y programación</div>
        </div>
        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]" aria-hidden="true"></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" aria-hidden="true">2</div>
          <div class="font-bold text-[15px]">Especialización</div>
          <div class="text-[13px] text-text-muted">Web, sistemas o datos</div>
        </div>
        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]" aria-hidden="true"></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" aria-hidden="true">3</div>
          <div class="font-bold text-[15px]">Proyecto real</div>
          <div class="text-[13px] text-text-muted">Portfolio para empleo</div>
        </div>
      </div>
      <div class="text-center mt-9">
        <a href="/aprendizaje/" class="inline-flex items-center min-h-[44px] border-[1.5px] border-navy text-navy font-bold text-[15px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
          Ver rutas completas →
        </a>
      </div>
    </section>

    <!-- Mercado laboral -->
    <section aria-labelledby="mercado-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
      <h2 id="mercado-title" class="sr-only">Preparado para el mercado laboral</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
        <div class="text-center px-3">
          <div class="text-[34px] mb-3" aria-hidden="true">🎯</div>
          <h3 class="font-heading text-[18px] mb-2">Habilidades que piden</h3>
          <p class="m-0 text-[14.5px] text-text leading-relaxed">Aprende lo que las empresas buscan hoy.</p>
        </div>
        <div class="text-center px-3">
          <div class="text-[34px] mb-3" aria-hidden="true">💼</div>
          <h3 class="font-heading text-[18px] mb-2">Portfolio profesional</h3>
          <p class="m-0 text-[14.5px] text-text leading-relaxed">Construye proyectos que se enseñan.</p>
        </div>
        <div class="text-center px-3">
          <div class="text-[34px] mb-3" aria-hidden="true">🤝</div>
          <h3 class="font-heading text-[18px] mb-2">Preparado para empleo</h3>
          <p class="m-0 text-[14.5px] text-text leading-relaxed">Del aula al primer trabajo tech.</p>
        </div>
      </div>
    </section>

  </main>

  <Footer />
</BaseLayout>
