'use client';

import { motion } from 'framer-motion';
import { Calculator, Gauge, Database, Shield, ArrowRight } from 'lucide-react';
import Link from 'next/link';

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-secondary/30">
      <header className="sticky top-0 z-50 backdrop-blur-md bg-background/80 border-b border-border">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Gauge className="w-8 h-8 text-primary" />
            <span className="font-bold text-xl">CNC Calculator</span>
          </div>
          <div className="flex gap-3">
            <Link href="/login" className="px-4 py-2 rounded-lg hover:bg-secondary transition-colors">
              Login
            </Link>
            <Link href="/signup" className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
              Get Started
            </Link>
          </div>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 py-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            Professional <span className="text-primary">Speeds & Feeds</span> Calculator
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
            Calculate optimal cutting parameters for your CNC machine. Pre-loaded with materials, tools, and machine profiles including Onefinity, Buildbotics, and Redline controllers.
          </p>
          <Link 
            href="/signup" 
            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-lg font-medium"
          >
            Start Calculating <ArrowRight className="w-5 h-5" />
          </Link>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { icon: Calculator, title: 'Speeds & Feeds', desc: 'Calculate RPM, feed rate, chip load, and MRR instantly' },
            { icon: Database, title: 'Material Database', desc: 'Pre-loaded metals, plastics, and wood species' },
            { icon: Gauge, title: 'Machine Profiles', desc: 'Onefinity, Buildbotics, Masso, Redline presets' },
            { icon: Shield, title: 'Limit Warnings', desc: 'Visual indicators when approaching machine limits' },
          ].map((feature, i) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="p-6 bg-card rounded-xl shadow-lg hover:shadow-xl transition-shadow"
            >
              <feature.icon className="w-10 h-10 text-primary mb-4" />
              <h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
              <p className="text-muted-foreground text-sm">{feature.desc}</p>
            </motion.div>
          ))}
        </div>
      </main>
    </div>
  );
}