import { Link } from 'react-router-dom'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'

export function Landing() {
  return (
    <main className="min-h-screen flex flex-col bg-background">
      <header className="px-8 py-5 border-b border-border flex items-center justify-between sticky top-0 bg-background/90 backdrop-blur z-50">
        <div className="font-mono text-xs tracking-widest uppercase">
          APESS <span className="text-primary font-bold">2026</span>
          <span className="text-muted-foreground"> · Workshop</span>
        </div>
        <div className="flex items-center gap-3">
          <Button asChild size="sm">
            <Link to="/workshop">Start the workshop →</Link>
          </Button>
        </div>
      </header>

      <section className="relative overflow-hidden border-b border-border px-8 py-20">
        <div className="max-w-3xl mx-auto text-center space-y-6 relative z-10">
          <Badge variant="secondary" className="font-mono text-[10px] tracking-widest uppercase">
            FabLab Torino · July 27, 2026
          </Badge>
          <h1 className="text-5xl md:text-6xl font-bold tracking-tight leading-[1.05]">
            Design a domain node
            <br />
            <span className="text-primary">an APESS agent on the edge</span>
          </h1>
          <p className="text-base md:text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto">
            Your Uno Q already senses. Today it gets an agent — one you talk to, one that drives your devices, and
            one that keeps working when things break. Design its skills, policies, harness and loops around the
            failure states you find, and leave with a five-layer Agent Design Document.
          </p>
          <div className="flex flex-wrap gap-3 justify-center pt-4">
            <Button asChild size="lg">
              <Link to="/workshop">Start the workshop →</Link>
            </Button>
          </div>
        </div>
      </section>

      <section className="px-8 py-16 border-b border-border bg-secondary/30">
        <div className="max-w-4xl mx-auto">
          <p className="font-mono text-[10px] tracking-widest uppercase text-primary mb-2">Presenter</p>
          <Card className="mt-4">
            <CardContent className="grid grid-cols-[80px_1fr] gap-6 p-6 items-start">
              <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary to-teal flex items-center justify-center text-2xl font-bold text-primary-foreground">
                OS
              </div>
              <div className="space-y-3">
                <div>
                  <div className="text-xl font-bold tracking-tight">Omar Sobh</div>
                  <div className="font-mono text-[10px] uppercase tracking-widest text-primary">
                    Founder · RedClaw Systems
                  </div>
                </div>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Builds AI agents that live at the edge — from on-device LLM runtimes to multi-agent fleets.
                  Maintains ZeroClaw, EdgeHDF5, and RustyHDF5. Previously: hardware + ML at scale.
                </p>
                <div className="space-y-1 font-mono text-xs">
                  <a
                    href="https://redclaw.dev"
                    target="_blank"
                    rel="noreferrer"
                    className="text-primary hover:underline"
                  >
                    redclaw.dev
                  </a>
                  <div className="text-muted-foreground">
                    Email:{' '}
                    <a href="mailto:osobh@redclaw.dev" className="text-primary hover:underline">
                      osobh@redclaw.dev
                    </a>
                  </div>
                </div>
                <div className="flex gap-1.5 flex-wrap">
                  {['Rust', 'Edge AI', 'Agentic systems', 'HDF5'].map((c) => (
                    <Badge key={c} variant="outline" className="font-mono text-[9px] uppercase tracking-wider">
                      {c}
                    </Badge>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <footer className="px-8 py-6 border-t border-border font-mono text-[10px] text-muted-foreground flex justify-between items-center">
        <span>RedClaw Systems LLC · Los Gatos, CA</span>
        <span>apess.redclaw.dev</span>
      </footer>
    </main>
  )
}