import { useState } from "react";
import { 
  Menu, X, ChevronRight, Shirt, Package, Printer, 
  Palette, Phone, Mail, MapPin, CheckCircle, Star,
  Clock, Shield, Send
} from "lucide-react";

export default function Printalex() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [formSent, setFormSent] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormSent(true);
    setTimeout(() => setFormSent(false), 3000);
  };

  return (
    <div className="min-h-screen bg-black text-white font-sans">
      {/* Navbar */}
      <nav className="fixed top-0 w-full z-50 bg-black/90 backdrop-blur-md border-b border-zinc-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <a href="#hero" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center font-black text-sm">P</div>
              <span className="text-xl font-bold tracking-tight">PRINT<span className="text-orange-500">ALEX</span></span>
            </a>
            <div className="hidden md:flex items-center gap-8 text-sm font-medium text-zinc-400">
              <a href="#services" className="hover:text-white transition-colors">Услуги</a>
              <a href="#catalog" className="hover:text-white transition-colors">Каталог</a>
              <a href="#process" className="hover:text-white transition-colors">Как работаем</a>
              <a href="#reviews" className="hover:text-white transition-colors">Отзывы</a>
              <a href="#contacts" className="hover:text-white transition-colors">Контакты</a>
            </div>
            <button 
              className="hidden md:block bg-orange-500 hover:bg-orange-400 text-black font-semibold px-5 py-2 rounded-lg text-sm transition-colors"
              onClick={() => document.getElementById('contacts')?.scrollIntoView({ behavior: 'smooth' })}
            >
              Заказать
            </button>
            <button className="md:hidden text-white" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
        {mobileMenuOpen && (
          <div className="md:hidden bg-black border-b border-zinc-800 px-4 pb-4 space-y-3">
            <a href="#services" className="block py-2 text-zinc-400 hover:text-white" onClick={() => setMobileMenuOpen(false)}>Услуги</a>
            <a href="#catalog" className="block py-2 text-zinc-400 hover:text-white" onClick={() => setMobileMenuOpen(false)}>Каталог</a>
            <a href="#process" className="block py-2 text-zinc-400 hover:text-white" onClick={() => setMobileMenuOpen(false)}>Как работаем</a>
            <a href="#reviews" className="block py-2 text-zinc-400 hover:text-white" onClick={() => setMobileMenuOpen(false)}>Отзывы</a>
            <a href="#contacts" className="block py-2 text-zinc-400 hover:text-white" onClick={() => setMobileMenuOpen(false)}>Контакты</a>
          </div>
        )}
      </nav>

      {/* Hero */}
      <section id="hero" className="relative pt-32 pb-20 md:pt-40 md:pb-32 px-4 overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(249,115,22,0.15),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(239,68,68,0.1),transparent_50%)]" />
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <div className="inline-flex items-center gap-2 bg-zinc-900 border border-zinc-800 rounded-full px-4 py-1.5 text-sm text-zinc-400 mb-6">
            <Star size={14} className="text-orange-500 fill-orange-500" />
            Премиум-шелкография с 2015 года
          </div>
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-black leading-tight mb-6">
            Шелкография
            <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-500">
              на любых поверхностях
            </span>
          </h1>
          <p className="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
            PRINTALEX — профессиональная трафаретная печать на текстиле, пластике, стекле, металле и бумаге. 
            Тираж от 10 штук. Сроки от 1 дня. Безупречное качество.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button 
              className="bg-orange-500 hover:bg-orange-400 text-black font-bold px-8 py-3.5 rounded-xl text-lg transition-colors flex items-center justify-center gap-2"
              onClick={() => document.getElementById('contacts')?.scrollIntoView({ behavior: 'smooth' })}
            >
              Рассчитать заказ <ChevronRight size={20} />
            </button>
            <button 
              className="border border-zinc-700 hover:border-zinc-500 text-white font-semibold px-8 py-3.5 rounded-xl text-lg transition-colors"
              onClick={() => document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth' })}
            >
              Смотреть портфолио
            </button>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="max-w-5xl mx-auto px-4 pb-20">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { value: "10+ лет", label: "опыта" },
            { value: "50 000+", label: "выполненных заказов" },
            { value: "3 дня", label: "средний срок" },
            { value: "100%", label: "контроль качества" },
          ].map((stat, i) => (
            <div key={i} className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 text-center">
              <div className="text-2xl md:text-3xl font-black text-orange-500 mb-1">{stat.value}</div>
              <div className="t