import React from 'react';
import { ArrowRight } from 'lucide-react';

export default function LinearHomepage() {
  return (
    <div className="min-h-screen bg-[#121212] text-white font-sans">
      {/* Navigation Bar */}
      <nav className="px-6 py-5 flex items-center justify-between max-w-7xl mx-auto">
        <div className="flex items-center">
          <div className="flex items-center mr-12">
            <div className="h-8 w-8 rounded-full bg-white mr-2"></div>
            <span className="text-xl font-medium">Linear</span>
          </div>
          
          <div className="hidden md:flex space-x-8">
            <a href="#" className="text-gray-400 hover:text-white transition">Product</a>
            <a href="#" className="text-gray-400 hover:text-white transition">Resources</a>
            <a href="#" className="text-gray-400 hover:text-white transition">Pricing</a>
            <a href="#" className="text-gray-400 hover:text-white transition">Customers</a>
            <a href="#" className="text-gray-400 hover:text-white transition">Blog</a>
            <a href="#" className="text-gray-400 hover:text-white transition">Contact</a>
          </div>
        </div>
        
        <div className="flex items-center space-x-4">
          <a href="#" className="text-gray-400 hover:text-white transition">Log in</a>
          <a href="#" className="bg-white text-black px-4 py-2 rounded-md hover:bg-gray-200 transition">
            Sign up
          </a>
        </div>
      </nav>
      
      {/* Hero Section */}
      <div className="max-w-4xl mx-auto px-6 pt-24 pb-16 text-center">
        <h1 className="text-5xl md:text-6xl font-bold leading-tight mb-8">
          Linear is a purpose-built tool for planning and building products
        </h1>
        
        <p className="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto">
          Meet the system for modern software development.
          <br />
          Streamline issues, projects, and product roadmaps.
        </p>
        
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <a 
            href="#" 
            className="bg-white text-black px-6 py-3 rounded-md font-medium hover:bg-gray-200 transition w-full sm:w-auto"
          >
            Start building
          </a>
          
          <a 
            href="#" 
            className="flex items-center justify-center gap-2 text-white px-6 py-3 rounded-md font-medium hover:bg-[#1a1a1a] transition w-full sm:w-auto"
          >
            Introducing Sub-teams
            <ArrowRight size={16} />
          </a>
        </div>
      </div>
      
      {/* Background Image Hint */}
      <div className="max-w-7xl mx-auto px-6 relative">
        <div className="h-64 w-full bg-[#181818] rounded-t-lg opacity-30 mt-8">
          {/* This would be where the UI screenshot would appear */}
        </div>
      </div>
    </div>
  );
}