---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import TimelineCard from '@/components/TimelineCard.astro'
import Layout from '@/layouts/Layout.astro'
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="About" />
  <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />
  <div class="mx-auto max-w-4xl">
    <section class="px-6 pt-24">
      <div class="hero-content mx-auto max-w-6xl text-center">
        <h1
          class="h-full py-4 font-mono text-4xl leading-none font-medium italic md:text-6xl"
        >
          foss<span class="text-primary">cet</span>
        </h1>
        <p
          class="text-muted-foreground mx-auto mt-6 mb-12 max-w-3xl text-xl leading-relaxed"
        >
          Building software freedom, one commit at a time.
        </p>
      </div>
    </section>

    <!-- Stats -->
    <!-- <section class="relative overflow-hidden px-6 py-20">
      <div
        class="absolute inset-0 rounded-2xl border border-emerald-100/50 bg-emerald-500/5"
      >
      </div>
      <div class="relative mx-auto max-w-6xl">
        <div class="grid gap-8 text-center md:grid-cols-4">
          <div
            class="fade-in"
            style="transition-delay: 100ms"
            style="transition: all 0.1s ease; transform: scale(1);"
            onmouseover="this.style.transform='scale(1.09)'"
            onmouseout="this.style.transform='scale(1)'"
            onclick="window.location.href = '/members'"
          >
            <div
              class="stat-number font-mono text-emerald-400"
              data-target="50"
            >
              0
            </div>
            <div
              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
            >
              Active Members
            </div>
          </div>
          <div
            class="fade-in"
            style="transition-delay: 100ms"
            style="transition: all 0.1s ease; transform: scale(1);"
            onmouseover="this.style.transform='scale(1.09)'"
            onmouseout="this.style.transform='scale(1)'"
            onclick="window.location.href = '/blog'"
          >
            <div
              class="stat-number font-mono text-emerald-400"
              data-target="25"
            >
              0
            </div>
            <div
              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
            >
              Projects Live
            </div>
          </div>
          <div
            class="fade-in"
            style="transition-delay: 100ms"
            style="transition: all 0.1s ease; transform: scale(1);"
            onmouseover="this.style.transform='scale(1.09)'"
            onmouseout="this.style.transform='scale(1)'"
            onclick="window.location.href = '/blog'"
          >
            <div
              class="stat-number font-mono text-emerald-400"
              data-target="150"
            >
              0
            </div>
            <div
              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
            >
              Commits Pushed
            </div>
          </div>
          <div
            class="fade-in"
            style="transition-delay: 100ms"
            style="transition: all 0.1s ease; transform: scale(1);"
            onmouseover="this.style.transform='scale(1.09)'"
            onmouseout="this.style.transform='scale(1)'"
            onclick="window.location.href = '/events'"
          >
            <div class="stat-number font-mono text-emerald-400" data-target="8">
              1
            </div>
            <div
              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
            >
              Events Hosted
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- Mission -->
    <section class="pt-10 pb-15">
      <div class="mx-auto max-w-4xl">
        <h2 class="mb-10 text-2xl md:text-3xl">Our Mission</h2>

        <div class="grid items-center">
          <div class="fade-in space-y-6" style="transition-delay: 200ms">
            <h3 class="mb-3 text-xl leading-loose font-bold">
              <span class="bg-primary text-primary-foreground px-2">Free</span
              >&nbsp;and <br class="md:hidden" />
              <span class="bg-primary text-primary-foreground px-2"
                >Open Source</span
              >
              Software
            </h3>
            <p class="text-muted-foreground leading-relaxed">
              We're bringing FOSS to CET students. We aim to replace proprietary
              tools with open-source alternatives and community-driven
              development. From kernel hacking to UI/UX contributions, we're
              building the next generation of FOSS maintainers.
            </p>
          </div>
          <br />
          <div class="fade-in space-y-6" style="transition-delay: 200ms">
            <h3 class="mt-12 mb-2 text-2xl font-bold">
              Freedom, Awareness, and Responsibility
            </h3>
            <p class="text-muted-foreground leading-relaxed">
              Our initiative promotes the FOSS movement as a gateway to digital
              sovereignty. We encourage students to transition toward
              open-source tools, fostering a culture of responsible software
              usage that prioritizes user privacy over corporate slop and data
              harvesting
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="pt-10 pb-15">
      <div class="mx-auto max-w-4xl">
        <h2 class="mb-10 text-2xl md:text-3xl">The Four Freedoms</h2>
        <ol start="0" class="list-decimal pl-10 leading-loose text-pretty">
          <li class="py-3">
            The freedom to run the program as you wish, for any purpose.
          </li>
          <li class="py-3">
            The freedom to study how the program works, and change it so it does
            your computing as you wish.
          </li>
          <li class="py-3">
            The freedom to redistribute copies so you can help others.
          </li>
          <li class="py-3">
            The freedom to distribute copies of your modified versions to
            others.
          </li>
        </ol>
      </div>
    </section>

    <section class="pt-10 pb-15">
      <h2 class="mb-16 text-2xl md:text-3xl">The&nbsp;FOSS&nbsp;Movement</h2>
      <div class="relative mb-20">
        <!-- Vertical Line -->
        <div class="from-primary bg-border absolute top-0 bottom-0 left-4 w-px">
        </div>

        <!-- Timeline Items -->
        <div class="space-y-12">
          <TimelineCard
            year="1983"
            title="The GNU Project and FSF"
            text="Richard Stallman launches GNU (1983) and the Free Software Foundation (1985), creates GPL license. Emacs also released as first product under GNU License."
            fancy={false}
          />
          <TimelineCard
            year="1991"
            title="Linux Kernel Released"
            text="Linus Torvalds releases Linux kernel (1991); BSD variants gain traction post-lawsuits. "
            fancy={false}
          />
          <TimelineCard
            year="2001"
            title="Kerala Leads"
            text="Kerala's IT@School (now KITE) promotes FOSS education; FSF India starts in Trivandrum. "
            fancy={false}
          />
          <TimelineCard
            year="2026"
            title="FOSSCET is launched"
            text="The FOSS movement is brought back to our very own CET, stronger than ever."
            fancy={true}
          />
        </div>
      </div>
    </section>
  </div>
</Layout>