---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/layout/Header.astro';
import Footer from '../components/layout/Footer.astro';
import Card from '../components/ui/Card.astro';
import Tag from '../components/ui/Tag.astro';
import { getCollection } from 'astro:content';
import { formatDate } from '../utils/dateFormat';

// Fetch featured projects and recent blog posts
const projects = (await getCollection('projects'))
  .filter(p => !p.data.draft && p.data.featured)
  .slice(0, 3);

const blogPosts = (await getCollection('blog'))
  .filter(p => !p.data.draft)
  .sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime())
  .slice(0, 3);
---

<BaseLayout 
  title="Home"
  description="David Aragón's portfolio - Builder creating products and sharing the journey"
>
  <Header />
  
  <main class="flex-1">
    <!-- Hero Section -->
    <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
      <div class="flex flex-col md:flex-row items-center gap-12">
        <div class="flex-shrink-0">
          <img 
            src="/david-aragon.jpg" 
            alt="David Aragón"
            class="w-48 h-48 md:w-64 md:h-64 rounded-full object-cover border-4 border-primary/20"
          />
        </div>
        <div class="flex-1 text-center md:text-left">
          <h1 class="text-4xl md:text-5xl font-bold mb-6">
            Hi, I'm <span class="text-primary">David Aragón</span>
          </h1>
          <p class="text-xl text-text-secondary mb-6 leading-relaxed">
            Builder creating products that solve real problems. 
            From goldsmith to photographer to developer. Now building in public.
          </p>
          <p class="text-lg text-text-secondary mb-8">
            Currently working on <strong class="text-primary">WarrantyHub</strong> - 
            digital warranty management for home users.
          </p>
          <div class="flex flex-wrap justify-center md:justify-start gap-4">
            <a 
              href="/blog"
              class="bg-primary hover:bg-primary/80 text-background px-8 py-3 rounded-lg 
                     font-semibold transition-colors"
            >
              Read Blog
            </a>
            <a 
              href="/about"
              class="bg-surface hover:bg-surface/80 text-text-primary px-8 py-3 rounded-lg 
                     font-semibold border border-text-tertiary/20 transition-colors"
            >
              About Me
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Latest Blog Posts -->
    <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div class="flex items-center justify-between mb-8">
        <h2 class="text-3xl font-bold">Latest Posts</h2>
        <a 
          href="/blog"
          class="text-primary hover:text-secondary transition-colors font-medium"
        >
          View all →
        </a>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {blogPosts.length > 0 ? (
          blogPosts.map((post) => (
            <Card href={`/blog/${post.slug}`}>
              <div class="mb-4">
                <time class="text-sm text-text-tertiary">
                  {formatDate(post.data.publishDate)}
                </time>
              </div>
              <h3 class="text-xl font-semibold mb-3 text-text-primary group-hover:text-primary transition-colors">
                {post.data.title}
              </h3>
              <p class="text-text-secondary mb-4 line-clamp-3">
                {post.data.description}
              </p>
              <div class="flex flex-wrap gap-2 mb-4">
                {post.data.tags?.slice(0, 3).map((tag: string) => (
                  <Tag>{tag}</Tag>
                ))}
              </div>
              <div class="text-sm">
                <span class="text-primary font-medium">Read more →</span>
              </div>
            </Card>
          ))
        ) : (
          <div class="col-span-full text-center py-12">
            <p class="text-text-secondary">
              Posts coming soon. Subscribe to receive updates.
            </p>
          </div>
        )}
      </div>
    </section>

    <!-- Featured Projects (if any) -->
    {projects.length > 0 && (
      <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="flex items-center justify-between mb-8">
          <h2 class="text-3xl font-bold">Projects</h2>
          <a 
            href="/projects"
            class="text-primary hover:text-secondary transition-colors font-medium"
          >
            View all →
          </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map((project) => (
            <Card href={`/projects/${project.slug}`}>
              <div class="mb-4">
                <span class="text-sm text-text-tertiary capitalize">
                  {project.data.status}
                </span>
              </div>
              <h3 class="text-xl font-semibold mb-3 text-text-primary group-hover:text-primary transition-colors">
                {project.data.title}
              </h3>
              <p class="text-text-secondary mb-4">
                {project.data.description}
              </p>
              <div class="flex flex-wrap gap-2">
                {project.data.tags?.slice(0, 4).map((tag: string) => (
                  <Tag>{tag}</Tag>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </section>
    )}

    <!-- Newsletter CTA -->
    <section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div class="bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/20 
                  rounded-2xl p-8 md:p-12 text-center">
        <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
        <p class="text-text-secondary text-lg mb-8 max-w-2xl mx-auto">
          Get occasional updates about launches, learnings, and technical decisions. 
          No spam, no BS - just real builder content.
        </p>
        <form 
          class="max-w-md mx-auto flex flex-col sm:flex-row gap-4"
          method="POST"
          action="/api/subscribe"
        >
          <input
            type="email"
            name="email"
            placeholder="your@email.com"
            required
            class="flex-1 px-6 py-3 rounded-lg bg-surface border border-text-tertiary/20 
                   text-text-primary placeholder-text-tertiary focus:outline-none 
                   focus:border-primary transition-colors"
          />
          <button
            type="submit"
            class="bg-primary hover:bg-primary/80 text-background px-8 py-3 rounded-lg 
                   font-semibold transition-colors whitespace-nowrap"
          >
            Subscribe
          </button>
        </form>
      </div>
    </section>
  </main>
  
  <Footer />
</BaseLayout>