---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import Layout from '@/layouts/Layout.astro'
import { getAllProjects } from '@/lib/data-utils'

const projects = await getAllProjects()
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="About" />
  <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />
  <link rel="stylesheet" href="../styles/about.css">
  <div class="max-w-4xl mx-auto">
    <section class="pt-24 pb-20 px-6">
    <div class="max-w-6xl mx-auto text-center hero-content">
      <h1 class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-7xl">
        foss<span class="text-primary">cet</span>
      </h1>
      <p class="text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto mb-12 leading-relaxed text-grey">
        Free & Open Source revolutionaries at CET - Building software freedom, one commit at a time.
      </p>
    </div>
  </section>

  <!-- Stats -->
  <section class="py-20 px-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-cyan-500/5"></div>
    <div class="max-w-6xl mx-auto relative">
      <div class="grid md:grid-cols-4 gap-8 text-center">
        <div class="fade-in" style="transition-delay: 100ms">
          <div class="stat-number text-emerald-400 font-mono" data-target="50">0</div>
          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Active Members</div>
        </div>
        <div class="fade-in" style="transition-delay: 200ms">
          <div class="stat-number text-cyan-400 font-mono" data-target="25">0</div>
          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Projects Live</div>
        </div>
        <div class="fade-in" style="transition-delay: 300ms">
          <div class="stat-number text-purple-400 font-mono" data-target="150">0</div>
          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Commits Pushed</div>
        </div>
        <div class="fade-in" style="transition-delay: 400ms">
          <div class="stat-number text-orange-400 font-mono" data-target="8">0</div>
          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Events Hosted</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Mission -->
  <section class="py-20 px-6">
    <div class="max-w-4xl mx-auto">
      <div class="text-center mb-20 fade-in">
        <h2 class="text-4xl md:text-5xl font-black bg-gradient-to-r from-slate-200 to-slate-400 bg-clip-text mb-6">Our Mission</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-emerald-400 to-cyan-400 mx-auto rounded-full"></div>
      </div>
      
      <div class="grid items-center">
        <div class="space-y-6 fade-in" style="transition-delay: 200ms">
          <h3 class="text-3xl font-bold text-white mb-6"><span class="text-primary">F</span>ree and <span class="text-primary">O</span>pen <span class="text-primary">S</span>ource <span class="text-primary">S</span>oftware</h3>
          <p class="text-lg text-slate-300 leading-relaxed">
            We're bringing FOSS to CET students—replacing proprietary tools with Linux, GitHub workflows, 
            and community-driven development. From kernel hacking to UI/UX contributions, we're building 
            the next generation of open source maintainers.
          </p>
          </div>
          <br>
          <div class="space-y-6 fade-in" style="transition-delay: 200ms">
          <h3 class="text-3xl font-bold text-white mb-6">Student Awareness and Software Responsibility</h3>
          <p class="text-lg text-slate-300 leading-relaxed">
            While addressing the FOSS movement, we also want to raise student awareness and improve anti-piracy and unresponsible software usage tendecies by providing free and open-source alternates.
          </p>
          </div>
        </div>
      </div>
  </section>


    <!-- Header -->
    <div class="text-center mb-16">
      <h1 class="text-5xl font-bold bg-clip-text text-transparent mb-4">
        <span class="text-primary">
        The FOSS Movement
        </span>
      </h1>
    </div>

    <!-- Timeline Container -->
    <div class="relative">
      <!-- Vertical Line -->
      <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-emerald-400 to-cyan-500"></div>
      
      <!-- Timeline Items -->
      <div class="space-y-12">
        
        <!-- 1983-1985 -->
        <div class="flex items-center pl-16 relative group">
          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
            <i class="fas fa-rocket"></i>
          </div>
          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
            <div class="flex items-center mb-2" id='container'>
              <span class="text-2xl font-mono"><span class="text-primary">1983–1985</span></span>
              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
              <span class="text-sm text-slate-400">Global Foundations</span>
            </div>
            <h3 class="text-2xl font-bold text-white mb-2">GNU Project & FSF</h3>
            <p class="text-slate-300">Richard Stallman launches GNU (1983) and Free Software Foundation (1985), creates GPL license. Emacs also released as first product under GNU License.</p>
          </div>
        </div>

        <!-- 1991-1993 -->
        <div class="flex items-center pl-16 relative group">
          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
            <i class="fab fa-linux"></i>
          </div>
          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
            <div class="flex items-center mb-2">
              <span class="text-2xl font-mono"><span class="text-primary">1991–1993</span></span>
              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
              <span class="text-sm text-slate-400">Kernel Boom</span>
            </div>
            <h3 class="text-2xl font-bold text-white mb-2">Linux Kernel Released</h3>
            <p class="text-slate-300">Linus Torvalds releases Linux kernel (1991); BSD variants gain traction post-lawsuits.</p>
          </div>
        </div>

        <!-- 1998 -->
        <div class="flex items-center pl-16 relative group">
          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
            <i class="fas fa-globe"></i>
          </div>
          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
            <div class="flex items-center mb-2">
              <span class="text-2xl font-mono"><span class="text-primary">1998</span></span>
              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
              <span class="text-sm text-slate-400">Term Coined</span>
            </div>
            <h3 class="text-2xl font-bold text-white mb-2">"Open Source" is Born</h3>
            <p class="text-slate-300">Term coined for broader appeal; Apache/Red Hat commercialize FOSS.</p>
          </div>
        </div>

        <!-- 2000-2001 India -->
        <div class="flex items-center pl-16 relative group">
          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
            <i class="fas fa-flag"></i>
          </div>
          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
            <div class="flex items-center mb-2">
              <span class="text-2xl font-mono text-orange-400"><span class="text-primary">2000-2001</span></span>
              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
              <span class="text-sm text-slate-400">India Awakens</span>
            </div>
            <h3 class="text-2xl font-bold text-white mb-2">Kerala Leads</h3>
            <p class="text-slate-300">Kerala's IT@School promotes FOSS education; FSF India starts in Trivandrum.</p>
          </div>
        </div>

        <!-- 2025-2026 -->
        <div class="flex items-center pl-16 relative group">
          <div class="absolute -left-12 w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
            <i class="fas fa-users"></i>
          </div>
          <div class="bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 backdrop-blur-sm p-8 rounded-2xl border-2 border-emerald-500/50 shadow-2xl w-full ml-4">
            <div class="flex items-center mb-3">
              <span class="text-2xl font-mono text-emerald-400">2025–2026</span>
              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
              <span class="text-sm text-slate-200 font-semibold">FossCET</span>
            </div>
            <h3 class="text-3xl font-black bg-gradient-to-r from-white to-slate-200 bg-clip-text text-transparent mb-3">
              <span class="new_font">foss<span class="text-primary">cet</span></span> is launched
            </h3>
            <p class="text-slate-300">The FOSS movement is brought back to our very own CET, stronger than ever.</p>
            <div class="flex space-x-4 text-sm">
            </div>
          </div>
        </div>

      </div>
    </div>

</Layout>