export default function SmokinTechLandingPage() {
  return (
    <div className="min-h-screen bg-black text-white overflow-hidden relative">
      {/* Background Image */}
      <div
        className="absolute inset-0 bg-cover bg-center scale-105"
        style={{
          backgroundImage:
            "url('https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?q=80&w=2070&auto=format&fit=crop')",
        }}
      />

      {/* Overlay */}
      <div className="absolute inset-0 bg-black/65 backdrop-blur-[1px]" />

      {/* Decorative Gradient */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black" />

      {/* Navigation */}
      <header className="relative z-20 flex items-center justify-between px-8 py-6 border-b border-red-900/30">
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 rounded-full border-4 border-red-600 flex items-center justify-center bg-black/60 shadow-2xl shadow-red-900/40">
            <span className="text-3xl font-bold">技</span>
          </div>

          <div>
            <h1 className="text-2xl tracking-[0.35em] font-semibold uppercase">
              Smokin Tech
            </h1>
            <p className="text-sm text-gray-300 tracking-[0.4em] mt-1">
              喫煙技術
            </p>
          </div>
        </div>

        <nav className="hidden md:flex gap-10 text-sm uppercase tracking-[0.25em] text-gray-300">
          <a href="#" className="hover:text-red-500 transition-colors">
            Home
          </a>
          <a href="#" className="hover:text-red-500 transition-colors">
            Projects
          </a>
          <a href="#" className="hover:text-red-500 transition-colors">
            Services
          </a>
          <a href="#" className="hover:text-red-500 transition-colors">
            Contact
          </a>
        </nav>
      </header>

      {/* Hero */}
      <section className="relative z-10 flex items-center justify-center min-h-[85vh] px-6">
        <div className="max-w-5xl text-center">
          {/* Main Emblem */}
          <div className="mx-auto mb-10 w-52 h-52 rounded-full border-[10px] border-red-600 flex items-center justify-center bg-black/55 shadow-[0_0_80px_rgba(220,38,38,0.4)] backdrop-blur-md relative">
            <span className="text-[7rem] leading-none font-bold">技</span>

            <div className="absolute top-10 right-10 w-5 h-12 bg-gradient-to-t from-gray-500 to-white rounded-full blur-[1px] opacity-80" />

            <div className="absolute right-6 top-1/2 -translate-y-1/2 bg-red-700 px-2 py-3 text-sm tracking-widest writing-mode-vertical text-black font-bold">
              喫煙技術
            </div>
          </div>

          <h2 className="text-5xl md:text-7xl font-bold tracking-[0.35em] uppercase mb-6 drop-shadow-2xl">
            Smokin Tech
          </h2>

          <div className="flex items-center justify-center gap-4 mb-8">
            <div className="w-20 h-[2px] bg-red-700" />
            <div className="w-3 h-3 rounded-full bg-red-600" />
            <div className="w-20 h-[2px] bg-red-700" />
          </div>

          <p className="text-xl md:text-2xl text-gray-200 tracking-[0.3em] mb-6 uppercase">
            喫煙技術
          </p>

          <p className="max-w-2xl mx-auto text-gray-300 text-lg leading-8 mb-12">
            Modern infrastructure, self-hosted platforms, automation, dashboards,
            and high-performance systems crafted with precision and a bold
            Japanese-inspired aesthetic.
          </p>

          <div className="flex flex-col sm:flex-row gap-5 justify-center">
            <button className="px-10 py-4 bg-red-700 hover:bg-red-600 transition-all duration-300 rounded-2xl uppercase tracking-[0.25em] font-semibold shadow-xl shadow-red-900/30">
              Explore Projects
            </button>

            <button className="px-10 py-4 border border-white/20 bg-black/30 hover:bg-white/10 transition-all duration-300 rounded-2xl uppercase tracking-[0.25em] font-semibold backdrop-blur-sm">
              Contact
            </button>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="relative z-10 px-6 pb-24">
        <div className="max-w-7xl mx-auto grid md:grid-cols-3 gap-8">
          {[
            {
              title: 'Self Hosted',
              text: 'Reliable infrastructure, containers, monitoring, and automation built for performance.',
            },
            {
              title: 'Development',
              text: 'Custom dashboards, APIs, tools, and modern web applications engineered cleanly.',
            },
            {
              title: 'Design & Culture',
              text: 'A fusion of modern technology and Japanese-inspired visual identity.',
            },
          ].map((item) => (
            <div
              key={item.title}
              className="bg-black/45 border border-white/10 rounded-3xl p-8 backdrop-blur-md hover:border-red-700/50 transition-all duration-300 hover:-translate-y-1"
            >
              <div className="w-14 h-14 rounded-full border-2 border-red-600 flex items-center justify-center text-2xl mb-6 bg-black/50">
                技
              </div>

              <h3 className="text-2xl uppercase tracking-[0.2em] mb-4 font-semibold">
                {item.title}
              </h3>

              <p className="text-gray-300 leading-7">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="relative z-10 border-t border-white/10 py-8 text-center text-gray-400 tracking-[0.25em] uppercase text-sm bg-black/40 backdrop-blur-sm">
        Tech With Purpose. Culture With Soul.
      </footer>
    </div>
  );
}