import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { Users, FileText, Handshake, Shield } from 'lucide-react'
import { logos } from '../data/brandAssets'
import { stats } from '../data/landingData'

const statIcons = {
  Users,
  FileText,
  Handshake,
  Shield,
}

function DashboardPreview() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.7, delay: 0.3 }}
      className="relative"
    >
      <div className="overflow-hidden rounded-2xl border border-silos-cream-dark bg-white shadow-2xl">
        <div className="flex">
          {/* Sidebar */}
          <div className="w-44 shrink-0 bg-silos-brown p-4">
            <img src={logos.white} alt="Silos" className="mb-6 h-6 w-auto" />
            <nav className="space-y-1">
              {['Home', 'Spaces', 'Pages', 'Boards', 'Whiteboards'].map((item, i) => (
                <div
                  key={item}
                  className={`rounded-lg px-3 py-2 text-xs ${
                    i === 0
                      ? 'bg-white/15 font-medium text-white'
                      : 'text-white/60'
                  }`}
                >
                  {item}
                </div>
              ))}
            </nav>
          </div>

          {/* Main content */}
          <div className="flex-1 p-5">
            <p className="text-sm font-semibold text-silos-text">Welcome back, Alex</p>
            <p className="mt-0.5 text-xs text-silos-muted">Here's what's happening in your workspace</p>

            <div className="mt-4 grid grid-cols-2 gap-3">
              <div className="rounded-lg border border-silos-cream-dark p-3">
                <p className="text-xs font-medium text-silos-text">Recent Pages</p>
                <div className="mt-2 space-y-1.5">
                  {['Q4 Planning', 'API Docs', 'Team Handbook'].map((page) => (
                    <div key={page} className="flex items-center gap-2">
                      <div className="h-1.5 w-1.5 rounded-full bg-silos-tan" />
                      <span className="text-[10px] text-silos-muted">{page}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-lg border border-silos-cream-dark p-3">
                <p className="text-xs font-medium text-silos-text">Team Activity</p>
                <div className="mt-2 space-y-1.5">
                  {['Sarah edited Roadmap', 'Mike added comment'].map((act) => (
                    <div key={act} className="text-[10px] text-silos-muted">{act}</div>
                  ))}
                </div>
              </div>

              <div className="rounded-lg border border-silos-cream-dark p-3">
                <p className="text-xs font-medium text-silos-text">My Tasks</p>
                <div className="mt-2 flex gap-2">
                  {['To Do', 'In Progress', 'Done'].map((col, i) => (
                    <div key={col} className="flex-1">
                      <p className="text-[9px] font-medium text-silos-muted">{col}</p>
                      <div className={`mt-1 h-8 rounded ${i === 1 ? 'bg-silos-tan/20' : 'bg-silos-cream'}`} />
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-lg border border-silos-cream-dark p-3">
                <p className="text-xs font-medium text-silos-text">Pinned Spaces</p>
                <div className="mt-2 flex gap-1.5">
                  {['Engineering', 'Design', 'Product'].map((space) => (
                    <span
                      key={space}
                      className="rounded-full bg-silos-cream px-2 py-0.5 text-[9px] text-silos-muted"
                    >
                      {space}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="absolute -bottom-4 -right-4 -z-10 h-full w-full rounded-2xl bg-silos-tan/20" />
    </motion.div>
  )
}

export default function Hero() {
  return (
    <section className="relative overflow-hidden bg-silos-cream px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
      <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
        <motion.div
          initial={{ opacity: 0, x: -30 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="font-display text-4xl font-bold leading-tight text-silos-text sm:text-5xl lg:text-[3.25rem]">
            Your knowledge.
            <br />
            Your team.
            <br />
            One place.
          </h1>
          <p className="mt-6 max-w-lg text-lg leading-relaxed text-silos-muted">
            Silos is the connected workspace where teams create, organize and share
            knowledge effortlessly.
          </p>

          <div className="mt-8 flex flex-wrap gap-4">
            <Link
              to="/login"
              className="rounded-full bg-silos-brown px-8 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:bg-silos-brown-dark hover:shadow-xl"
            >
              Get Started
            </Link>
            <a
              href="#features"
              className="rounded-full border-2 border-silos-brown px-8 py-3 text-sm font-semibold text-silos-brown transition-all hover:bg-silos-brown hover:text-white"
            >
              Learn More
            </a>
          </div>

          <div className="mt-12 grid grid-cols-2 gap-6 sm:grid-cols-4">
            {stats.map((stat, i) => {
              const Icon = statIcons[stat.icon as keyof typeof statIcons]
              return (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}
                  className="flex flex-col items-center text-center sm:items-start sm:text-left"
                >
                  <Icon className="mb-2 h-5 w-5 text-silos-tan" />
                  <span className="text-sm font-semibold text-silos-text">{stat.label}</span>
                </motion.div>
              )
            })}
          </div>
        </motion.div>

        <DashboardPreview />
      </div>
    </section>
  )
}