import { useState } from 'react';
import { Shield, Building2, Cog, Cpu, Mail, MapPin, Clock, Plane } from 'lucide-react';

export default function Portfolio() {
  const [activeTab, setActiveTab] = useState('expertise');

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
      {/* Hero Section */}
      <header className="bg-white shadow-sm">
        <div className="max-w-6xl mx-auto px-4 py-8 flex flex-col md:flex-row items-center gap-8">
          <img 
            src="https://sitebrew.ai/f/stefo-RN1d.jpeg" 
            alt="Professional headshot"
            className="w-48 h-48 rounded-full object-cover shadow-lg border-4 border-white"
          />
          <div className="flex-1">
            <h1 className="text-4xl font-bold text-gray-900 mb-2">Steffo Thorsen</h1>
            <h2 className="text-xl text-gray-600 mb-4">Mechanical Systems Architect & Government Contractor</h2>
            <div className="flex flex-wrap gap-3">
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Defense Infrastructure</span>
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Aerospace Engineering</span>
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Federal Projects</span>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-6xl mx-auto px-4 py-12">
        {/* Navigation */}
        <nav className="flex gap-4 mb-8 border-b">
          {['expertise', 'projects', 'compliance'].map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-4 py-2 font-medium transition-colors ${
                activeTab === tab
                  ? 'text-blue-600 border-b-2 border-blue-600'
                  : 'text-gray-600 hover:text-blue-600'
              }`}
            >
              {tab.charAt(0).toUpperCase() + tab.slice(1)}
            </button>
          ))}
        </nav>

        {/* Expertise Section */}
        {activeTab === 'expertise' && (
          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center gap-3 mb-4">
                <Shield className="w-6 h-6 text-blue-600" />
                <h3 className="text-xl font-semibold">Defense & Government Infrastructure</h3>
              </div>
              <p className="text-gray-600">Designing secure mechanical systems for military bases, intelligence hubs, and aerospace facilities.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center gap-3 mb-4">
                <Cog className="w-6 h-6 text-blue-600" />
                <h3 className="text-xl font-semibold">Precision-Controlled Environments</h3>
              </div>
              <p className="text-gray-600">Engineering HVAC, vibration isolation, and thermal management for critical research operations.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center gap-3 mb-4">
                <Cpu className="w-6 h-6 text-blue-600" />
                <h3 className="text-xl font-semibold">Cyber-Secure Mechanical Systems</h3>
              </div>
              <p className="text-gray-600">Developing SCADA-controlled operations within DoD-compliant security frameworks.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center gap-3 mb-4">
                <Building2 className="w-6 h-6 text-blue-600" />
                <h3 className="text-xl font-semibold">Advanced Fluid & Thermal Dynamics</h3>
              </div>
              <p className="text-gray-600">Optimizing energy efficiency, aerodynamics, and structural resilience for large-scale federal projects.</p>
            </div>
          </div>
        )}

        {/* Projects Section */}
        {activeTab === 'projects' && (
          <div className="space-y-8">
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center gap-3 mb-4">
                <Clock className="w-6 h-6 text-blue-600" />
                <h3 className="text-xl font-semibold">U.S. Naval Observatory – Master Clock Facility</h3>
              </div>
              <p className="text-gray-600 mb-4">Designed precision climate-controlled mechanical systems for the world's most accurate military timekeeping instruments.</p>
              <div className="text-sm text-gray-500">
                <strong>Client:</strong> Jacobs Engineering Group | <strong>Project Lead:</strong> General Services Administration (GSA)
              </div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center gap-3 mb-4">
                <Plane className="w-6 h-6 text-blue-600" />
                <h3 className="text-xl font-semibold">FAA Air Traffic Control System Overhaul</h3>
              </div>
              <p className="text-gray-600 mb-4">Engineered next-generation AI-driven air traffic control infrastructure, replacing legacy mechanical and control systems.</p>
              <div className="text-sm text-gray-500">
                In Collaboration with SpaceX & FAA
              </div>
            </div>
          </div>
        )}

        {/* Compliance Section */}
        {activeTab === 'compliance' && (
          <div className="bg-white p-6 rounded-lg shadow-sm">
            <h3 className="text-xl font-semibold mb-6">Regulatory Compliance & Protocols</h3>
            <div className="space-y-4">
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                <p className="text-gray-600"><strong>PBS-P100 Facilities Standards (GSA)</strong> – Ensuring efficiency and reliability of federal mechanical systems.</p>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                <p className="text-gray-600"><strong>Life Cycle Cost Analysis (LCCA)</strong> – Optimizing the total cost of ownership for sustainable and cost-effective designs.</p>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                <p className="text-gray-600"><strong>DoD & GSA Security Guidelines</strong> – Implementing cybersecurity, access control, and operational safety in classified environments.</p>
              </div>
            </div>
          </div>
        )}
      </main>

      {/* Contact Section */}
      <footer className="bg-white border-t mt-12">
        <div className="max-w-6xl mx-auto px-4 py-8">
          <h3 className="text-2xl font-semibold mb-6">Connect with Steffo</h3>
          <div className="flex flex-wrap gap-6">
            <div className="flex items-center gap-2">
              <Mail className="w-5 h-5 text-blue-600" />
              <a href="mailto:contact@steffothorsen.com" className="text-gray-600 hover:text-blue-600">contact@steffothorsen.com</a>
            </div>
            <div className="flex items-center gap-2">
              <MapPin className="w-5 h-5 text-blue-600" />
              <span className="text-gray-600">Washington, D.C. | New York | Global Defense Hubs</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}