import React, { useEffect, useRef, useState } from "react";
import { 
  ArrowRight, 
  CheckCircle2, 
  Globe, 
  Search, 
  Cpu, 
  ShieldCheck, 
  FileText,
  Mail,
  Zap,
  Send
} from "lucide-react";

function SectionLabel({ children }) {
  return (
    <div className="flex items-center gap-2 mb-4">
      <div className="h-px w-8 bg-orange-400" />
      <span className="text-sm font-bold uppercase tracking-[0.2em] text-orange-500">
        {children}
      </span>
    </div>
  );
}

export default function App() {
  const [activeTab, setActiveTab] = useState('human');
  const [formStatus, setFormStatus] = useState('idle');

  const handleFormSubmit = (e) => {
    e.preventDefault();
    setFormStatus('submitting');
    // Simulate an API call / form submission
    setTimeout(() => setFormStatus('success'), 1500);
  };

  const services = [
    {
      title: "GEO Audit & Compliance",
      icon: <Search className="w-5 h-5" />,
      description: "A comprehensive review of your digital presence through the lens of machine agents and search engines.",
      bullets: [
        "Semantic HTML & Schema gap analysis",
        "AODA/WCAG Accessibility compliance",
        "Entity relationship & authority mapping"
      ],
    },
    {
      title: "Technical Implementation",
      icon: <Cpu className="w-5 h-5" />,
      description: "Hands-on restructuring of site architecture to transform presentation into high-liquidity data.",
      bullets: [
        "Structured data & JSON-LD deployment",
        "Complex site migrations (Armour Valve Case)",
        "Navigation & hierarchy optimization"
      ],
    },
    {
      title: "AI-Ready Strategy",
      icon: <Zap className="w-5 h-5" />,
      description: "Building a roadmap for long-term citation authority in generative search environments.",
      bullets: [
        "Truth-anchored brand messaging",
        "Machine-readable content frameworks",
        "Answer-engine optimization (AEO)"
      ],
    },
  ];

  const highlights = [
    {
      title: "Master of Digital Media",
      org: "TMU",
      desc: "Specialized in communication technology and digital storytelling at the graduate level.",
      icon: <Globe className="w-6 h-6 text-blue-500" />
    },
    {
      title: "Enterprise Implementation",
      org: "Armour Valve",
      desc: "Leading the transition of complex industrial data into structured, AI-ready web architecture.",
      icon: <ShieldCheck className="w-6 h-6 text-orange-500" />
    },
    {
      title: "AODA Expert",
      org: "Ontario",
      desc: "Ensuring all technical strategy meets legal accessibility requirements for the Greater Toronto Area.",
      icon: <CheckCircle2 className="w-6 h-6 text-green-500" />
    }
  ];

  return (
    <div className="min-h-screen bg-[#fcfbfe] text-slate-900 font-sans selection:bg-orange-100 selection:text-orange-900">
      
      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 bg-white/70 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center text-white font-bold text-lg">A</div>
            <span className="font-bold tracking-tight text-xl">Ali Noorani</span>
          </div>
          <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
            <a href="#services" className="hover:text-slate-900 transition">Services</a>
            <a href="#expertise" className="hover:text-slate-900 transition">Expertise</a>
            <a href="#contact" className="bg-slate-900 text-white px-5 py-2 rounded-xl hover:bg-slate-800 transition shadow-lg shadow-slate-200">Book Discovery</a>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-100/40 rounded-full blur-[120px]" />
          <div className="absolute bottom-[10%] right-[-5%] w-[30%] h-[30%] bg-orange-100/40 rounded-full blur-[100px]" />
        </div>

        <div className="max-w-7xl mx-auto px-6 relative">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-xs font-bold mb-6 tracking-wide">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                </span>
                TORONTO-BASED GEO STRATEGY
              </div>
              
              <h1 className="text-5xl lg:text-7xl font-semibold tracking-tight text-slate-900 leading-[1.1]">
                From search engines <br />
                <span className="text-slate-400 italic">to answer engines.</span>
              </h1>
              
              <p className="mt-8 text-xl text-slate-600 leading-relaxed">
                I help technical brands in the GTA transition to <strong>Generative Engine Optimization (GEO)</strong>—ensuring expertise is readable by AI, trusted by humans, and findable by everyone.
              </p>

              <div className="mt-10 flex flex-wrap gap-4">
                <a href="#contact" className="group flex items-center gap-2 bg-slate-900 text-white px-8 py-4 rounded-2xl font-bold shadow-xl hover:bg-slate-800 transition hover:translate-y-[-2px]">
                  Start Your Audit
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition" />
                </a>
                <button className="flex items-center gap-2 bg-white border border-slate-200 text-slate-800 px-8 py-4 rounded-2xl font-bold hover:bg-slate-50 transition">
                  GEO Readiness Quiz
                </button>
              </div>

              <div className="mt-12 flex items-center gap-6 grayscale opacity-60">
                <span className="text-xs font-bold uppercase tracking-widest text-slate-400">Trusted By Brands Like</span>
                <span className="font-serif text-lg font-bold">Armour Valve</span>
                <span className="font-serif text-lg font-bold">NHK Japan</span>
              </div>
            </div>

            <div className="relative flex items-center justify-center min-h-[400px]">
              <div className="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-orange-400/10 blur-[80px] rounded-full" />
              <div className="relative bg-white/80 backdrop-blur-xl p-8 md:p-10 rounded-[40px] border border-slate-200 shadow-2xl max-w-md w-full">
                <div className="flex items-center gap-2 mb-8">
                  <div className="w-3 h-3 rounded-full bg-slate-200"></div>
                  <div className="w-3 h-3 rounded-full bg-slate-200"></div>
                  <div className="w-3 h-3 rounded-full bg-slate-200"></div>
                </div>
                <p className="text-xs font-bold text-orange-500 uppercase tracking-widest mb-4">Technical Insight</p>
                <p className="text-xl text-slate-700 leading-relaxed font-medium">
                  "Traditional SEO focused on keywords. GEO focuses on <strong className="text-slate-900">entities and relationships</strong>. Your site must now act as a structured source of truth."
                </p>
                <div className="mt-8 pt-6 border-t border-slate-100 flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-900 text-sm">AN</div>
                  <div>
                    <p className="font-bold text-sm text-slate-900">Ali Noorani</p>
                    <p className="text-xs text-slate-500">GEO Strategist</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Dual Perspective Section */}
      <section className="py-24 bg-white border-y border-slate-200">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <SectionLabel>Two Audiences, One Strategy</SectionLabel>
            <h2 className="text-4xl font-semibold tracking-tight">The visual web is meeting the semantic web.</h2>
          </div>

          <div className="flex justify-center mb-10">
            <div className="inline-flex p-1 bg-slate-100 rounded-2xl">
              <button 
                onClick={() => setActiveTab('human')}
                className={`px-6 py-2 rounded-xl text-sm font-bold transition ${activeTab === 'human' ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Human Experience
              </button>
              <button 
                onClick={() => setActiveTab('machine')}
                className={`px-6 py-2 rounded-xl text-sm font-bold transition ${activeTab === 'machine' ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Machine Agent View
              </button>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-12 items-center min-h-[400px]">
            <div className={`transition-all duration-500 ${activeTab === 'human' ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-10 hidden'}`}>
              <div className="rounded-[40px] overflow-hidden shadow-2xl border border-slate-100 bg-slate-50 p-2">
                <div className="bg-white rounded-[32px] p-10">
                  <h3 className="text-3xl font-bold mb-6">Empathy & Trust</h3>
                  <p className="text-slate-600 leading-relaxed mb-8 text-lg">
                    Humans judge brands in milliseconds based on visual hierarchy, accessibility, and the confidence of presentation.
                  </p>
                  <ul className="space-y-4">
                    {['Mobile-first responsive design', 'AODA compliance for inclusion', 'High-conversion UX flows'].map(item => (
                      <li key={item} className="flex items-center gap-3 text-slate-700 font-medium">
                        <CheckCircle2 className="w-5 h-5 text-blue-500" /> {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>

            <div className={`transition-all duration-500 ${activeTab === 'machine' ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-10 hidden'}`}>
              <div className="rounded-[40px] overflow-hidden shadow-2xl border border-slate-800 bg-slate-900 p-2">
                <div className="bg-slate-800 rounded-[32px] p-10 text-white">
                  <h3 className="text-3xl font-bold mb-6">Semantics & Entities</h3>
                  <p className="text-slate-300 leading-relaxed mb-8 text-lg">
                    AI agents (LLMs) and search engines look for structured data patterns, semantic relationships, and technical metadata.
                  </p>
                  <ul className="space-y-4">
                    {['JSON-LD & Schema.org markup', 'Semantic content hierarchy', 'Knowledge Graph integration'].map(item => (
                      <li key={item} className="flex items-center gap-3 text-slate-200 font-medium">
                        <CheckCircle2 className="w-5 h-5 text-orange-400" /> {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>

            <div className="lg:pl-10">
              <h4 className="text-2xl font-semibold mb-4 italic text-slate-400">The Synergy</h4>
              <p className="text-lg text-slate-600 leading-relaxed">
                My process doesn't choose between humans and machines. We build <strong>Data Liquidity</strong>: a state where content is so clear that it survives AI summarization while remaining persuasive to customers.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-24 bg-[#fcfbfe]">
        <div className="max-w-7xl mx-auto px-6">
          <SectionLabel>Our Services</SectionLabel>
          <div className="grid lg:grid-cols-3 gap-8 mt-12">
            {services.map((service, i) => (
              <div key={i} className="bg-white p-8 rounded-[32px] border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition duration-300 group">
                <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-orange-50 group-hover:text-orange-500 transition">
                  {service.icon}
                </div>
                <h3 className="text-xl font-bold mb-4">{service.title}</h3>
                <p className="text-sm text-slate-500 leading-relaxed mb-8">{service.description}</p>
                <ul className="space-y-3">
                  {service.bullets.map((bullet, j) => (
                    <li key={j} className="text-sm font-medium text-slate-700 flex items-start gap-2">
                      <span className="mt-1 w-1.5 h-1.5 rounded-full bg-orange-400 shrink-0" />
                      {bullet}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Expertise & Grant Proof Section */}
      <section id="expertise" className="py-24 bg-slate-900 text-white overflow-hidden relative">
        <div className="absolute top-0 right-0 w-1/2 h-full bg-blue-600/10 skew-x-12 translate-x-20 pointer-events-none" />
        
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-[1fr_1.1fr] gap-20 items-center">
            <div>
              <SectionLabel>The Journalist's Edge</SectionLabel>
              <h2 className="text-4xl font-bold mt-4 leading-tight">Grounded in technical <br />storytelling and data.</h2>
              <p className="mt-6 text-slate-300 text-lg leading-relaxed">
                As a Master of Digital Media graduate from <strong>Toronto Metropolitan University</strong>, I bring a unique blend of editorial precision and technical architecture to the GTA business landscape.
              </p>

              <div className="mt-12 space-y-10">
                {highlights.map((h, i) => (
                  <div key={i} className="flex gap-6 group">
                    <div className="w-14 h-14 bg-white/5 rounded-2xl flex items-center justify-center shrink-0 border border-white/10 group-hover:border-orange-500/50 transition">
                      {h.icon}
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <h4 className="font-bold text-lg">{h.title}</h4>
                        <span className="text-[10px] font-bold uppercase tracking-widest text-white/40 border border-white/10 px-2 py-0.5 rounded-md">{h.org}</span>
                      </div>
                      <p className="mt-2 text-slate-400 text-sm leading-relaxed">{h.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="bg-gradient-to-br from-white/10 to-transparent p-12 rounded-[48px] border border-white/10 backdrop-blur-xl">
                <blockquote className="text-3xl font-medium italic leading-snug">
                  "In the age of AI agents, your website is no longer just a digital brochure—it is your business's <strong>primary infrastructure</strong> for truth and authority."
                </blockquote>
                <div className="mt-10 flex items-center gap-4">
                  <div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center font-bold text-slate-900">AN</div>
                  <div>
                    <p className="font-bold text-white">Ali Noorani</p>
                    <p className="text-xs uppercase tracking-widest text-slate-400 mt-0.5">Creative Design Lead & GEO Strategist</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Form Section */}
      <section id="contact" className="py-24 lg:py-32 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-start">
            <div>
              <div className="inline-block p-4 rounded-2xl bg-slate-50 border border-slate-100 mb-8">
                <Mail className="w-8 h-8 text-slate-900" />
              </div>
              <h2 className="text-4xl md:text-6xl font-bold tracking-tight mb-6">Let's build your authority.</h2>
              <p className="text-xl text-slate-500 leading-relaxed mb-12">
                Whether you need a strategic GEO audit or a complete technical re-architecture, it starts with a conversation. Let's secure your visibility in the Toronto market.
              </p>
              
              <div className="space-y-6">
                <div className="flex items-center gap-4 p-6 rounded-3xl bg-slate-50 border border-slate-100 transition hover:shadow-md">
                  <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <Mail className="w-5 h-5 text-blue-500" />
                  </div>
                  <div>
                    <p className="text-sm font-bold text-slate-900">Email Directly</p>
                    <a href="mailto:hello@alinoorani.com" className="text-slate-500 hover:text-blue-500 transition">hello@alinoorani.com</a>
                  </div>
                </div>
                
                <div className="flex items-center gap-4 p-6 rounded-3xl bg-slate-50 border border-slate-100 transition hover:shadow-md">
                  <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <FileText className="w-5 h-5 text-orange-500" />
                  </div>
                  <div>
                    <p className="text-sm font-bold text-slate-900">Capability Statement</p>
                    <a href="#" className="text-slate-500 hover:text-orange-500 transition">Download PDF Portfolio</a>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-[#fcfbfe] p-8 md:p-12 rounded-[40px] border border-slate-200 shadow-xl shadow-slate-200/50 relative overflow-hidden">
              {formStatus === 'success' ? (
                <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-8 bg-white/95 backdrop-blur-sm z-10">
                  <div className="w-20 h-20 bg-green-100 text-green-500 rounded-full flex items-center justify-center mb-6">
                    <CheckCircle2 className="w-10 h-10" />
                  </div>
                  <h3 className="text-2xl font-bold text-slate-900 mb-2">Message Received</h3>
                  <p className="text-slate-500">Thanks for reaching out! I'll review your project details and get back to you within 24 hours.</p>
                  <button 
                    onClick={() => setFormStatus('idle')}
                    className="mt-8 text-sm font-bold text-blue-500 hover:text-blue-600 transition"
                  >
                    Send another message
                  </button>
                </div>
              ) : null}

              <form onSubmit={handleFormSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <label className="text-sm font-bold text-slate-900">First Name</label>
                    <input required type="text" className="w-full px-5 py-4 rounded-2xl bg-white border border-slate-200 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition" placeholder="Jane" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-bold text-slate-900">Last Name</label>
                    <input required type="text" className="w-full px-5 py-4 rounded-2xl bg-white border border-slate-200 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition" placeholder="Doe" />
                  </div>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-bold text-slate-900">Email Address</label>
                  <input required type="email" className="w-full px-5 py-4 rounded-2xl bg-white border border-slate-200 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition" placeholder="jane@company.com" />
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-bold text-slate-900">Service Required</label>
                  <select required className="w-full px-5 py-4 rounded-2xl bg-white border border-slate-200 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition appearance-none cursor-pointer">
                    <option value="">Select a service...</option>
                    <option value="audit">GEO Audit & Compliance</option>
                    <option value="implementation">Technical Implementation</option>
                    <option value="strategy">AI-Ready Strategy</option>
                    <option value="other">General Inquiry</option>
                  </select>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-bold text-slate-900">Project Details</label>
                  <textarea required rows="4" className="w-full px-5 py-4 rounded-2xl bg-white border border-slate-200 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition resize-none" placeholder="Tell me about your current website challenges and goals..."></textarea>
                </div>

                <button 
                  type="submit" 
                  disabled={formStatus === 'submitting'}
                  className="w-full flex items-center justify-center gap-2 bg-slate-900 text-white px-8 py-5 rounded-2xl font-bold shadow-xl hover:bg-slate-800 transition hover:-translate-y-0.5 disabled:opacity-70 disabled:hover:translate-y-0 disabled:cursor-not-allowed"
                >
                  {formStatus === 'submitting' ? 'Sending...' : (
                    <>
                      Send Message
                      <Send className="w-5 h-5" />
                    </>
                  )}
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 border-t border-slate-100 bg-white">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:row items-center justify-between gap-6">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-slate-900 rounded-md flex items-center justify-center text-white font-bold text-xs">A</div>
            <span className="font-bold tracking-tight text-slate-900">Noorani Strategy & Design</span>
          </div>
          <div className="flex items-center gap-8 text-xs font-bold text-slate-400 uppercase tracking-widest">
            <span>© 2024 Ali Noorani</span>
            <span>Toronto, Canada</span>
          </div>
        </div>
      </footer>
    </div>
  );
}