import React from 'react';
import { ArrowRight, Mail, MessageSquare, Calendar, Layout } from 'lucide-react';

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Navigation */}
        <nav className="py-6">
          <div className="flex items-center justify-between">
            <div className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">
              WorkflowAI
            </div>
            <div className="flex gap-6">
              <button className="text-gray-600 hover:text-gray-900 transition-colors">Features</button>
              <button className="text-gray-600 hover:text-gray-900 transition-colors">Pricing</button>
              <button className="text-gray-600 hover:text-gray-900 transition-colors">About</button>
            </div>
          </div>
        </nav>

        {/* Hero Section */}
        <div className="flex items-center justify-between py-20">
          <div className="max-w-xl">
            <h1 className="text-5xl font-bold leading-tight mb-6 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">
              Your AI-Powered Productivity Partner
            </h1>
            <p className="text-xl text-gray-600 mb-8">
              Transform your workflow with our intelligent assistant that seamlessly integrates your digital workspace. Experience the future of work with unified access to emails, Slack, Jira, and meetings—all in one intuitive dashboard.
            </p>
            <button className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-4 rounded-lg font-semibold flex items-center gap-2 hover:opacity-90 transition-opacity shadow-lg">
              Get Started
              <ArrowRight className="w-5 h-5" />
            </button>
          </div>

          {/* Illustration */}
          <div className="relative w-[500px] h-[500px]">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-200 to-pink-200 rounded-full blur-3xl opacity-20"></div>
            <img 
              src="https://placehold.co/500x500/purple/white?text=AI+Assistant" 
              alt="AI Assistant Illustration"
              className="relative z-10"
            />
          </div>
        </div>

        {/* Features Section */}
        <div className="grid grid-cols-2 gap-8 py-20">
          <div className="p-8 rounded-2xl bg-white/50 backdrop-blur-sm shadow-sm hover:shadow-md transition-shadow">
            <Mail className="w-12 h-12 text-purple-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">Email Integration</h3>
            <p className="text-gray-600">Smart email management with AI-powered sorting, prioritization, and response suggestions.</p>
          </div>
          <div className="p-8 rounded-2xl bg-white/50 backdrop-blur-sm shadow-sm hover:shadow-md transition-shadow">
            <MessageSquare className="w-12 h-12 text-purple-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">Slack Connection</h3>
            <p className="text-gray-600">Never miss important messages with intelligent Slack monitoring and notification management.</p>
          </div>
          <div className="p-8 rounded-2xl bg-white/50 backdrop-blur-sm shadow-sm hover:shadow-md transition-shadow">
            <Layout className="w-12 h-12 text-purple-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">Jira Integration</h3>
            <p className="text-gray-600">Track and manage projects effortlessly with automated task updates and progress tracking.</p>
          </div>
          <div className="p-8 rounded-2xl bg-white/50 backdrop-blur-sm shadow-sm hover:shadow-md transition-shadow">
            <Calendar className="w-12 h-12 text-purple-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">Meeting Assistant</h3>
            <p className="text-gray-600">Smart scheduling, automated note-taking, and action item extraction from your meetings.</p>
          </div>
        </div>
      </div>
    </div>
  );
}