import { useState } from 'react';
import { Mail, ArrowUpRight, ChevronRight, Link, BarChart, Users, Building, CheckCircle } from 'lucide-react';

export default function Portfolio() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="fixed w-full bg-white/80 backdrop-blur-sm z-50 border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <span className="text-xl font-semibold">LinkMaster</span>
            <div className="hidden md:flex space-x-8">
              <a href="#services" className="text-gray-600 hover:text-black">Services</a>
              <a href="#results" className="text-gray-600 hover:text-black">Results</a>
              <a href="#process" className="text-gray-600 hover:text-black">Process</a>
              <a href="#contact" className="text-gray-600 hover:text-black">Contact</a>
            </div>
            <button className="hidden md:block px-4 py-2 bg-black text-white rounded-full hover:bg-gray-800">
              Get in Touch
            </button>
            <button 
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-40 bg-white md:hidden pt-16">
          <div className="p-4 space-y-4">
            <a href="#services" className="block text-gray-600 hover:text-black">Services</a>
            <a href="#results" className="block text-gray-600 hover:text-black">Results</a>
            <a href="#process" className="block text-gray-600 hover:text-black">Process</a>
            <a href="#contact" className="block text-gray-600 hover:text-black">Contact</a>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section className="pt-32 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div className="max-w-3xl">
          <h1 className="text-5xl font-bold mb-6">Building Strong Digital Connections Through Strategic Link Building</h1>
          <p className="text-xl text-gray-600 mb-8">Expert link building strategies that boost your website's authority, improve rankings, and drive organic traffic.</p>
          <div className="flex gap-4">
            <button className="px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 flex items-center gap-2">
              View My Work <ArrowUpRight size={18} />
            </button>
            <button className="px-6 py-3 border border-gray-300 rounded-full hover:border-gray-400 flex items-center gap-2">
              Contact Me <Mail size={18} />
            </button>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-8 bg-white rounded-2xl">
              <div className="text-4xl font-bold mb-2">500+</div>
              <div className="text-gray-600">Successful Link Placements</div>
            </div>
            <div className="p-8 bg-white rounded-2xl">
              <div className="text-4xl font-bold mb-2">95%</div>
              <div className="text-gray-600">Client Retention Rate</div>
            </div>
            <div className="p-8 bg-white rounded-2xl">
              <div className="text-4xl font-bold mb-2">50+</div>
              <div className="text-gray-600">Happy Clients</div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <h2 className="text-3xl font-bold mb-12">Services</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="p-8 border rounded-2xl hover:border-black transition-colors">
            <Link className="w-10 h-10 mb-4" />
            <h3 className="text-xl font-semibold mb-4">Guest Post Outreach</h3>
            <p className="text-gray-600">Strategic placement of high-quality content on relevant industry websites.</p>
          </div>
          <div className="p-8 border rounded-2xl hover:border-black transition-colors">
            <BarChart className="w-10 h-10 mb-4" />
            <h3 className="text-xl font-semibold mb-4">Competitor Analysis</h3>
            <p className="text-gray-600">In-depth analysis of competitor backlink profiles to identify opportunities.</p>
          </div>
          <div className="p-8 border rounded-2xl hover:border-black transition-colors">
            <Building className="w-10 h-10 mb-4" />
            <h3 className="text-xl font-semibold mb-4">Authority Building</h3>
            <p className="text-gray-600">Comprehensive strategies to increase your website's domain authority.</p>
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section id="process" className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-12">My Process</h2>
          <div className="space-y-8">
            <div className="flex items-start gap-4">
              <div className="bg-black text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">1</div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Analysis & Strategy</h3>
                <p className="text-gray-600">Comprehensive analysis of your current link profile and development of a customized strategy.</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-black text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">2</div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Prospect Research</h3>
                <p className="text-gray-600">Identification of high-quality, relevant websites for potential partnerships.</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-black text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">3</div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Outreach & Relationship Building</h3>
                <p className="text-gray-600">Professional communication and negotiation with website owners.</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-black text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">4</div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Link Placement & Monitoring</h3>
                <p className="text-gray-600">Secure placement of links and continuous monitoring of their performance.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div className="max-w-xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Improve Your Link Profile?</h2>
          <p className="text-gray-600 mb-8">Let's discuss how I can help boost your website's authority and rankings.</p>
          <form className="space-y-4">
            <input
              type="text"
              placeholder="Your Name"
              className="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-black"
            />
            <input
              type="email"
              placeholder="Your Email"
              className="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-black"
            />
            <textarea
              placeholder="Your Message"
              rows={4}
              className="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-black"
            />
            <button className="w-full px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800">
              Send Message
            </button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 border-t">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-600">
          © 2024 LinkMaster. All rights reserved.
        </div>
      </footer>
    </div>
  );
}