---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import type { Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';

const lang = (Astro.currentLocale as Lang) || defaultLang;
const isZh = lang === 'zh';

const focuses = [
  {
    title: 'Cloud Bookmark Tool',
    status: 'Live',
    desc: 'A self-hosted bookmark manager I built for myself — then realized others might want it too. Handles AI tagging, content extraction, and search.',
  },
  {
    title: 'ELYND English Learning Tool',
    status: 'Coming Soon',
    desc: 'Reading English articles with synced audio, instant word lookup, and AI chat to ask questions about what I am reading.',
  },
];

const problems = [
  {
    title: 'The "Understanding Gap" in Language Learning',
    desc: 'Vocabulary memorization lacks context, original texts are hard to understand, and there is no instant feedback when stuck.',
  },
  {
    title: 'Productizing AI Capabilities',
    desc: 'Making AI useful in real products, not just demos: tagging, text processing, and conversation that actually help.',
  },
  {
    title: 'UX Design for AI-Powered Tools',
    desc: 'Adding AI without making things complicated — keeping tools simple while powerful.',
  },
];

const outputs = [
  'Cloud Bookmark Tool v1.0 launched',
  'ELYND coming soon',
];

const availability = {
  jobs: 'Remote / Full-stack / AI',
  projects: 'Freelance / Subcontracting / Independent development',
  preferences: 'Tool products / AI integration / Web applications',
};

const today = new Date().toISOString().split('T')[0];
---

<Layout title="Now">
  <GlassHeader lang={lang} client:load transition:persist="header" />

  <main id="main-content" class="min-h-screen pt-24 pb-20">
    <Container>
      <section class="page-content-main">
        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Now</h1>
        <p class="mt-4 text-lg text-muted-foreground">What I am working on and what I have shipped.</p>
      </section>

      <!-- Current Focus -->
      <section class="page-content-main mt-10">
        <h2 class="text-xl font-bold">Current Focus</h2>
        <div class="mt-4 space-y-4">
          {focuses.map((item) => (
            <article class="page-surface p-5">
              <div class="flex items-center gap-3">
                <h3 class="text-base font-bold">{item.title}</h3>
                <span class="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">{item.status}</span>
              </div>
              <p class="mt-2 text-sm text-muted-foreground">{item.desc}</p>
            </article>
          ))}
        </div>
      </section>

      <!-- Problems I'm Solving -->
      <section class="page-content-main mt-8">
        <h2 class="text-xl font-bold">Problems I'm Solving</h2>
        <div class="mt-4 space-y-3">
          {problems.map((item) => (
            <article class="rounded-lg border border-border/70 p-4">
              <h3 class="text-sm font-semibold">{item.title}</h3>
              <p class="mt-1.5 text-sm text-muted-foreground">{item.desc}</p>
            </article>
          ))}
        </div>
      </section>

      <!-- Recent Outputs -->
      <section class="page-content-main mt-8">
        <h2 class="text-xl font-bold">Recent Outputs</h2>
        <ul class="mt-4 space-y-2">
          {outputs.map((item) => (
            <li class="flex items-center gap-2 text-sm">
              <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
              {item}
            </li>
          ))}
        </ul>
      </section>

      <!-- Availability -->
      <section class="page-content-main mt-8 page-surface p-5">
        <h2 class="text-xl font-bold">Availability</h2>
        <div class="mt-4 grid gap-3 text-sm md:grid-cols-3">
          <div>
            <span class="font-medium">Open to: </span>
            <span class="text-muted-foreground">{availability.jobs}</span>
          </div>
          <div>
            <span class="font-medium">Projects: </span>
            <span class="text-muted-foreground">{availability.projects}</span>
          </div>
          <div>
            <span class="font-medium">Preferred: </span>
            <span class="text-muted-foreground">{availability.preferences}</span>
          </div>
        </div>
      </section>

      <section class="page-content-main mt-8 page-surface p-4">
        <p class="text-sm text-muted-foreground">
          Last updated: {today}
        </p>
      </section>
    </Container>
  </main>

  <Footer lang={lang} client:load />
</Layout>
