import React, { useEffect, useRef, useState } from "react";
import {
  Menu, X, Fish, Truck, Star, Check, ChevronDown
} from "lucide-react";

export default function SushiStoreLanding() {

  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [faq, setFaq] = useState(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="bg-[#08080f] text-white min-h-screen">

      <style>{`
        .fadeIn {
          animation: fadeInUp 1s ease forwards;
        }
        @keyframes fadeInUp {
          from { opacity:0; transform:translateY(30px); }
          to { opacity:1; transform:translateY(0); }
        }
        .blob {
          animation: float 10s ease-in-out infinite;
        }
        @keyframes float {
          0%,100%{transform:translateY(0)}
          50%{transform:translateY(-20px)}
        }
      `}</style>

      {/* NAVBAR */}
      <div className={`fixed w-full z-50 ${scrolled ? "backdrop-blur bg-black/60" : ""}`}>
        <div className="flex justify-between items-center p-4 max-w-6xl mx-auto">

          <div className="flex items-center gap-2">
            <Fish />
            <span className="font-bold">Sushi Store</span>
          </div>

          <div className="hidden md:flex gap-6">
            <a href="#features">Преимущества</a>
            <a href="#pricing">Цены</a>
            <a href="#faq">FAQ</a>
          </div>

          <button className="md:hidden" onClick={() => setMenuOpen(true)}>
            <Menu />
          </button>
        </div>
      </div>

      {/* MOBILE MENU */}
      {menuOpen && (
        <div className="fixed inset-0 bg-black z-50 p-6">
          <button onClick={() => setMenuOpen(false)}><X /></button>
          <div className="mt-10 flex flex-col gap-4">
            <a href="#features">Преимущества</a>
            <a href="#pricing">Цены</a>
            <a href="#faq">FAQ</a>
          </div>
        </div>
      )}

      {/* HERO */}
      <section className="pt-32 text-center px-4">

        <div className="blob absolute w-64 h-64 bg-emerald-500/20 rounded-full blur-3xl"></div>

        <h1 className="fadeIn text-5xl md:text-7xl font-black bg-gradient-to-r from-emerald-400 to-cyan-400 text-transparent bg-clip-text">
          Sushi Store
        </h1>

        <p className="fadeIn mt-6 text-gray-400 max-w-xl mx-auto">
          Онлайн доставка суши нового уровня. Быстро. Красиво. Вкусно.
        </p>

        <div className="fadeIn mt-6 flex justify-center gap-4">
          <button className="px-6 py-3 rounded-xl bg-gradient-to-r from-emerald-400 to-cyan-400 text-black font-bold">
            Заказать
          </button>
          <button className="px-6 py-3 rounded-xl border">
            Подробнее
          </button>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" className="mt-32 max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-6">

        {[
          {icon: Fish, title:"Свежие продукты"},
          {icon: Truck, title:"Быстрая доставка"},
          {icon: Star, title:"Топ рейтинг"}
        ].map((f, i)=>(
          <div key={i} className="p-6 bg-white/5 rounded-2xl hover:scale-105 transition">
            <f.icon className="mb-4"/>
            <h3 className="text-xl font-bold">{f.title}</h3>
          </div>
        ))}

      </section>

      {/* STATS */}
      <section className="mt-32 text-center">
        <h2 className="text-4xl font-bold">Наши цифры</h2>
        <div className="flex justify-center gap-10 mt-10">
          <div>
            <div className="text-3xl">10K+</div>
            <div>Заказов</div>
          </div>
          <div>
            <div className="text-3xl">4.9</div>
            <div>Рейтинг</div>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="mt-32 max-w-6xl mx-auto grid md:grid-cols-3 gap-6 px-4">

        {["Базовый","Про","VIP"].map((p,i)=>(
          <div key={i} className="p-6 bg-white/5 rounded-2xl hover:scale-105 transition">
            <h3 className="text-xl font-bold">{p}</h3>
            <div className="text-3xl mt-4">$29</div>
            <ul className="mt-4 space-y-2">
              <li className="flex gap-2"><Check/>Функция</li>
              <li className="flex gap-2"><Check/>Функция</li>
            </ul>
          </div>
        ))}

      </section>

      {/* FAQ */}
      <section id="faq" className="mt-32 max-w-4xl mx-auto px-4">

        {["Как заказать?","Сколько доставка?","Есть акции?"].map((q,i)=>(
          <div key={i} className="border-b py-4">
            <button onClick={()=>setFaq(faq===i?null:i)} className="flex justify-between w-full">
              {q}
              <ChevronDown className={faq===i?"rotate-180":""}/>
            </button>
            {faq===i && <p className="mt-2 text-gray-400">Ответ...</p>}
          </div>
        ))}

      </section>

      {/* CTA */}
      <section className="mt-32 text-center px-4">
        <h2 className="text-4xl font-bold">
          Готов заказать?
        </h2>
        <button className="mt-6 px-8 py-4 bg-gradient-to-r from-emerald-400 to-cyan-400 text-black rounded-xl font-bold">
          Заказать сейчас
        </button>
      </section>

      {/* FOOTER */}
      <footer className="mt-32 text-center text-gray-500 pb-10">
        © 2026 Sushi Store
      </footer>

    </div>
  );
}