import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

export default function Home() {
  return (
    <div className="bg-black text-white min-h-screen font-sans selection:bg-blue-500 selection:text-white">
      <Head>
        <title>{getPageTitle('Framer-like Page Builder')}</title>
      </Head>

      {/* Navigation */}
      <nav className="flex items-center justify-between px-6 py-6 md:px-12 border-b border-white/10 sticky top-0 bg-black/50 backdrop-blur-xl z-50">
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-gradient-to-tr from-blue-600 to-purple-600 rounded-lg flex items-center justify-center font-bold text-xl shadow-lg shadow-blue-500/20">
            F
          </div>
          <span className="text-xl font-bold tracking-tight">FramerClone</span>
        </div>
        <div className="hidden md:flex items-center space-x-8 text-sm font-medium text-gray-400">
          <a href="#features" className="hover:text-white transition-colors">Features</a>
          <a href="#showcase" className="hover:text-white transition-colors">Showcase</a>
          <a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
        </div>
        <div className="flex items-center space-x-4">
          <Link href="/login" className="text-sm font-medium text-gray-400 hover:text-white transition-colors">
            Login
          </Link>
          <BaseButton
            href="/register"
            label="Get Started"
            color="info"
            className="rounded-full px-6 py-2 text-sm font-bold bg-blue-600 hover:bg-blue-500 border-none"
          />
        </div>
      </nav>

      {/* Hero Section */}
      <SectionFullScreen>
        <div className="max-w-6xl mx-auto px-6 pt-20 pb-32 text-center relative overflow-hidden">
          {/* Background Glow */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-600/10 rounded-full blur-[120px] -z-10 animate-pulse"></div>
          
          <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8 leading-[0.9] animate-fade-in-up">
            DESIGN & PUBLISH <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
              IN SECONDS
            </span>
          </h1>
          
          <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto mb-12 font-medium leading-relaxed">
            The professional page builder for designers. Drag, drop, and ship pixel-perfect websites without writing code.
          </p>

          <div className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-6">
            <BaseButton
              href="/register"
              label="Start Building Free"
              color="info"
              className="w-full md:w-auto rounded-full px-10 py-4 text-lg font-bold bg-blue-600 hover:bg-blue-500 border-none shadow-2xl shadow-blue-500/40"
            />
            <Link href="/login" className="text-gray-400 hover:text-white font-medium flex items-center group transition-colors">
              Watch Demo
              <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
              </svg>
            </Link>
          </div>

          {/* Canvas Preview Mockup */}
          <div className="mt-24 relative group">
            <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
            <div className="relative bg-zinc-900 border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
              <div className="flex items-center px-4 py-2 border-b border-white/5 bg-zinc-950/50">
                <div className="flex space-x-1.5">
                  <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
                  <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                  <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
                </div>
                <div className="mx-auto text-[10px] text-gray-500 font-mono tracking-widest uppercase">page-editor.framerclone.io</div>
              </div>
              <div className="h-[400px] md:h-[600px] bg-black flex relative overflow-hidden">
                {/* Editor UI Mockup */}
                <div className="w-64 border-r border-white/5 bg-zinc-950 hidden md:block p-4">
                  <div className="space-y-4">
                    <div className="h-4 w-2/3 bg-white/5 rounded"></div>
                    <div className="space-y-2">
                      <div className="h-8 bg-blue-600/10 border border-blue-500/20 rounded-md flex items-center px-3">
                        <div className="w-3 h-3 bg-blue-500 rounded-sm mr-2"></div>
                        <div className="h-3 w-1/2 bg-blue-500/50 rounded"></div>
                      </div>
                      <div className="h-8 bg-white/5 rounded-md"></div>
                      <div className="h-8 bg-white/5 rounded-md"></div>
                    </div>
                  </div>
                </div>
                <div className="flex-grow bg-zinc-900/50 relative overflow-hidden cursor-crosshair">
                   <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-black border border-white/10 rounded-xl shadow-2xl flex flex-col items-center justify-center space-y-4">
                      <div className="w-16 h-16 bg-gradient-to-tr from-blue-500 to-purple-500 rounded-full animate-bounce"></div>
                      <div className="h-4 w-48 bg-white/10 rounded-full"></div>
                      <div className="h-4 w-32 bg-white/5 rounded-full"></div>
                   </div>
                </div>
                <div className="w-72 border-l border-white/5 bg-zinc-950 hidden md:block p-4">
                   <div className="space-y-6">
                      <div className="h-4 w-1/3 bg-white/10 rounded"></div>
                      <div className="grid grid-cols-2 gap-3">
                         <div className="h-10 bg-white/5 rounded"></div>
                         <div className="h-10 bg-white/5 rounded"></div>
                      </div>
                      <div className="h-40 bg-white/5 rounded"></div>
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </SectionFullScreen>

      {/* Footer */}
      <footer className="border-t border-white/10 py-12 px-6">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
          <div className="flex items-center space-x-2 opacity-50">
             <div className="w-6 h-6 bg-white rounded flex items-center justify-center font-bold text-black text-xs">F</div>
             <span className="font-bold tracking-tight">FramerClone</span>
          </div>
          <div className="flex space-x-8 text-sm text-gray-500">
             <Link href="/terms-of-use" className="hover:text-white transition-colors">Terms</Link>
             <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
             <span className="">© 2026 FramerClone</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

Home.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};