import React, { useState, useEffect } from 'react';
import { 
  Menu, X, Globe, ChevronRight, Film, MapPin, 
  Briefcase, FileText, Phone, Award, Users, 
  Clock, Camera, Music, Monitor, LayoutGrid, 
  Search, ArrowRight, Download, Info
} from 'lucide-react';

// --- UI Components ---

const Button = ({ children, variant = 'primary', className = '', ...props }) => {
  const variants = {
    primary: 'bg-slate-900 text-white hover:bg-slate-800',
    secondary: 'bg-amber-600 text-white hover:bg-amber-700',
    outline: 'border-2 border-slate-900 text-slate-900 hover:bg-slate-50',
    gold: 'bg-amber-100 text-amber-900 hover:bg-amber-200 border border-amber-200'
  };
  return (
    <button 
      className={`px-6 py-2.5 rounded-md font-medium transition-all duration-200 flex items-center justify-center gap-2 ${variants[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

const Card = ({ title, description, image, icon: Icon, children, className = "" }) => (
  <div className={`bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-md transition-shadow ${className}`}>
    {image && <img src={image} alt={title} className="w-full h-48 object-cover" />}
    <div className="p-6">
      {Icon && <Icon className="w-8 h-8 text-amber-600 mb-4" />}
      <h3 className="text-xl font-bold text-slate-900 mb-2">{title}</h3>
      <p className="text-slate-600 text-sm leading-relaxed mb-4">{description}</p>
      {children}
    </div>
  </div>
);

const SectionHeading = ({ title, subtitle, light = false }) => (
  <div className="mb-10">
    <h2 className={`text-3xl font-bold ${light ? 'text-white' : 'text-slate-900'} mb-2`}>{title}</h2>
    <div className={`w-20 h-1.5 ${light ? 'bg-amber-400' : 'bg-amber-600'} rounded-full mb-4`}></div>
    {subtitle && <p className={`${light ? 'text-slate-300' : 'text-slate-600'} max-w-2xl`}>{subtitle}</p>}
  </div>
);

// --- Main Application ---

export default function App() {
  const [currentView, setCurrentView] = useState('home'); // home, about, services, careers, tenders, contact
  const [site, setSite] = useState('ksfdc'); // ksfdc, chitranjali
  const [lang, setLang] = useState('EN');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Auto-scroll to top on view change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [currentView, site]);

  const navLinks = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About Us' },
    { id: 'services', label: 'Services' },
    { id: 'careers', label: 'Careers' },
    { id: 'tenders', label: 'Tenders' },
    { id: 'contact', label: 'Contact' },
  ];

  // --- Sub-Views (Main KSFDC) ---

  const HomeView = () => (
    <div className="animate-in fade-in duration-500">
      {/* Hero Section */}
      <section className="relative h-[600px] flex items-center text-white overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&q=80&w=2000" 
            alt="Kerala Cinema Hero"
            className="w-full h-full object-cover brightness-[0.4]"
          />
        </div>
        <div className="container mx-auto px-6 relative z-10">
          <div className="max-w-3xl">
            <span className="inline-block px-3 py-1 bg-amber-600 rounded text-xs font-bold uppercase tracking-wider mb-4">
              Kerala State Film Development Corporation
            </span>
            <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
              Preserving Legacy, <br />
              <span className="text-amber-400 font-serif italic">Shaping the Future</span> of Cinema.
            </h1>
            <p className="text-xl text-slate-200 mb-8 max-w-xl">
              From historic archives to world-class production facilities, we empower the storytellers of Kerala.
            </p>
            <div className="flex flex-wrap gap-4">
              <Button onClick={() => setCurrentView('services')} variant="secondary">Explore Our Services</Button>
              <Button onClick={() => {setSite('chitranjali'); setCurrentView('home');}} className="bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20">
                Chitranjali Studios
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* About Brief */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <SectionHeading 
              title="A Legacy in Every Frame"
              subtitle="Established in 1975, KSFDC is a pioneer in the public sector, dedicated to the growth of the Malayalam film industry and the preservation of our cultural identity."
            />
            <div className="grid grid-cols-2 gap-6 mt-8">
              <div className="p-4 border-l-4 border-amber-600 bg-slate-50">
                <p className="text-3xl font-bold text-slate-900">45+</p>
                <p className="text-slate-600 text-sm">Years of Excellence</p>
              </div>
              <div className="p-4 border-l-4 border-amber-600 bg-slate-50">
                <p className="text-3xl font-bold text-slate-900">15+</p>
                <p className="text-slate-600 text-sm">State-run Theatres</p>
              </div>
            </div>
            <Button variant="outline" className="mt-8" onClick={() => setCurrentView('about')}>Learn More About Us</Button>
          </div>
          <div className="relative">
            <img 
              src="https://images.unsplash.com/photo-1598897349489-44769b337ae2?auto=format&fit=crop&q=80&w=800" 
              alt="Film Reels" 
              className="rounded-2xl shadow-2xl relative z-10"
            />
            <div className="absolute -bottom-6 -right-6 w-64 h-64 bg-amber-600/10 rounded-full z-0"></div>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-20 bg-slate-50">
        <div className="container mx-auto px-6 text-center mb-12">
          <h2 className="text-3xl font-bold text-slate-900 mb-4">Our Core Initiatives</h2>
          <p className="text-slate-600 max-w-2xl mx-auto">Comprehensive support for the film ecosystem of Kerala.</p>
        </div>
        <div className="container mx-auto px-6 grid md:grid-cols-3 gap-8">
          <Card 
            icon={Film} 
            title="Film Production" 
            description="Funding schemes and technical support for independent and established filmmakers."
          >
            <Button variant="outline" className="w-full text-sm">View Schemes</Button>
          </Card>
          <Card 
            icon={Monitor} 
            title="Cinema Exhibition" 
            description="World-class cinematic experiences through our network of state-owned Kairali, Sree, and Nila theatres."
          >
            <Button variant="outline" className="w-full text-sm">Locate Theatres</Button>
          </Card>
          <Card 
            icon={Camera} 
            title="Studio Facilities" 
            description="From sprawling shooting floors to cutting-edge DI suites at Chitranjali Studios."
          >
            <Button variant="outline" className="w-full text-sm" onClick={() => setSite('chitranjali')}>Visit Studio</Button>
          </Card>
        </div>
      </section>

      {/* Announcements / Tenders */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-6 flex flex-col md:flex-row gap-12">
          <div className="flex-1">
            <SectionHeading title="Latest Announcements" />
            <div className="space-y-4">
              {[
                "Application invited for Women Filmmaker Scheme 2024",
                "Results announced: Short Film Contest 2023",
                "New Modernization project at Chitranjali Studio Phase II",
                "Employment Notification: Sound Engineers (Contract)"
              ].map((note, idx) => (
                <div key={idx} className="flex items-center gap-4 p-4 border rounded-lg hover:border-amber-400 transition-colors group cursor-pointer">
                  <div className="p-2 bg-slate-100 rounded group-hover:bg-amber-50">
                    <FileText className="w-5 h-5 text-slate-500 group-hover:text-amber-600" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-slate-900">{note}</p>
                    <p className="text-xs text-slate-500">Oct 24, 2023</p>
                  </div>
                  <ChevronRight className="w-5 h-5 text-slate-300" />
                </div>
              ))}
            </div>
            <Button variant="outline" className="mt-6 w-full md:w-auto" onClick={() => setCurrentView('tenders')}>View All Notifications</Button>
          </div>
          <div className="w-full md:w-1/3 bg-slate-900 rounded-2xl p-8 text-white">
            <h3 className="text-2xl font-bold mb-6">Quick Links</h3>
            <ul className="space-y-4">
              <li className="flex items-center gap-2 hover:text-amber-400 cursor-pointer transition-colors">
                <ChevronRight className="w-4 h-4" /> Citizen Charter
              </li>
              <li className="flex items-center gap-2 hover:text-amber-400 cursor-pointer transition-colors">
                <ChevronRight className="w-4 h-4" /> Tender Archive
              </li>
              <li className="flex items-center gap-2 hover:text-amber-400 cursor-pointer transition-colors">
                <ChevronRight className="w-4 h-4" /> RTI Information
              </li>
              <li className="flex items-center gap-2 hover:text-amber-400 cursor-pointer transition-colors">
                <ChevronRight className="w-4 h-4" /> Previous Production List
              </li>
            </ul>
            <div className="mt-12 p-6 bg-white/5 border border-white/10 rounded-xl">
              <h4 className="font-bold text-amber-400 mb-2">Need Support?</h4>
              <p className="text-sm text-slate-400 mb-4">Contact our assistance desk for help with applications and schemes.</p>
              <Button className="w-full bg-amber-600 hover:bg-amber-700 border-none" onClick={() => setCurrentView('contact')}>Get in Touch</Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );

  const AboutView = () => (
    <div className="animate-in slide-in-from-bottom-4 duration-500">
      <div className="bg-slate-900 py-20">
        <div className="container mx-auto px-6 text-center">
          <h1 className="text-4xl font-bold text-white mb-4">About KSFDC</h1>
          <p className="text-slate-400 max-w-xl mx-auto">Learn about the pioneers of public sector cinema in India.</p>
        </div>
      </div>
      
      <div className="container mx-auto px-6 py-20">
        <div className="grid md:grid-cols-3 gap-12">
          <div className="md:col-span-2">
            <SectionHeading title="History & Tradition" />
            <div className="space-y-8 relative before:content-[''] before:absolute before:left-0 before:top-4 before:bottom-4 before:w-0.5 before:bg-slate-200">
              {[
                { year: "1975", title: "Inception", text: "Founded by the Government of Kerala to promote the art of cinema." },
                { year: "1980", title: "Chitranjali Launch", text: "Studio complex commissioned by Smt. Indira Gandhi." },
                { year: "1995", title: "Theatre Expansion", text: "Network of theatres established across the state." },
                { year: "2018", title: "Modernization", text: "Implemented high-end digital DI and post-production facilities." }
              ].map((item, idx) => (
                <div key={idx} className="pl-8 relative">
                  <div className="absolute left-[-5px] top-1.5 w-3 h-3 bg-amber-600 rounded-full border-2 border-white"></div>
                  <span className="text-sm font-bold text-amber-600 uppercase tracking-widest">{item.year}</span>
                  <h4 className="text-xl font-bold text-slate-900 mt-1">{item.title}</h4>
                  <p className="text-slate-600 mt-2">{item.text}</p>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="bg-slate-50 p-8 rounded-2xl border sticky top-24">
              <h3 className="text-xl font-bold mb-6">Key Contacts</h3>
              <div className="space-y-4">
                {[
                  { role: "Chairman", name: "Shaji N. Karun", email: "chairman@ksfdc.in" },
                  { role: "Managing Director", name: "K.V. Manoj Kumar", email: "md@ksfdc.in" },
                  { role: "General Manager", name: "G. Sreekumar", email: "gm@ksfdc.in" }
                ].map((p, idx) => (
                  <div key={idx} className="border-b pb-4 last:border-0 last:pb-0">
                    <p className="text-xs font-bold text-amber-600 uppercase">{p.role}</p>
                    <p className="font-bold text-slate-900">{p.name}</p>
                    <p className="text-sm text-slate-500">{p.email}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const ServicesView = () => (
    <div className="py-20 animate-in fade-in duration-500">
      <div className="container mx-auto px-6">
        <SectionHeading 
          title="Our Services" 
          subtitle="Empowering filmmakers from script to screen with world-class facilities and support schemes."
        />

        <div className="grid md:grid-cols-2 gap-8 mb-16">
          <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 flex flex-col md:flex-row gap-8 items-start">
            <div className="w-16 h-16 bg-amber-100 rounded-xl flex items-center justify-center shrink-0">
              <Film className="w-8 h-8 text-amber-600" />
            </div>
            <div>
              <h3 className="text-2xl font-bold mb-4">Film Support Schemes</h3>
              <ul className="space-y-4 text-slate-600">
                <li className="flex items-start gap-2">
                  <div className="mt-1.5 w-1.5 h-1.5 bg-amber-600 rounded-full shrink-0"></div>
                  <span>Production of Feature Films for SC/ST filmmakers with 100% funding.</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1.5 w-1.5 h-1.5 bg-amber-600 rounded-full shrink-0"></div>
                  <span>Women Empowerment Cinema: Direct funding for projects led by women.</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1.5 w-1.5 h-1.5 bg-amber-600 rounded-full shrink-0"></div>
                  <span>Subsidy schemes for films shot completely in Kerala.</span>
                </li>
              </ul>
              <Button variant="secondary" className="mt-6">Apply Online</Button>
            </div>
          </div>

          <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 flex flex-col md:flex-row gap-8 items-start">
            <div className="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center shrink-0">
              <Monitor className="w-8 h-8 text-blue-600" />
            </div>
            <div>
              <h3 className="text-2xl font-bold mb-4">Cinema Exhibition</h3>
              <p className="text-slate-600 mb-4">We operate state-of-the-art cinemas across Kerala, ensuring quality viewing at affordable prices for the general public.</p>
              <div className="grid grid-cols-2 gap-2 text-sm text-slate-600 mb-6">
                <span className="p-2 bg-slate-50 rounded">Kairali - Trivandrum</span>
                <span className="p-2 bg-slate-50 rounded">Sree - Ernakulam</span>
                <span className="p-2 bg-slate-50 rounded">Nila - Thrissur</span>
                <span className="p-2 bg-slate-50 rounded">Chithranjali - Kottayam</span>
              </div>
              <Button variant="outline">Book Tickets</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const CareersView = () => (
    <div className="py-20 animate-in fade-in duration-500">
      <div className="container mx-auto px-6">
        <SectionHeading 
          title="Join the Legacy" 
          subtitle="Work at the heart of Kerala's cultural administration and film development."
        />
        <div className="bg-white border rounded-xl overflow-hidden">
          <table className="w-full text-left">
            <thead>
              <tr className="bg-slate-50 border-b">
                <th className="px-6 py-4 font-bold text-slate-700">Ref ID</th>
                <th className="px-6 py-4 font-bold text-slate-700">Position</th>
                <th className="px-6 py-4 font-bold text-slate-700">Location</th>
                <th className="px-6 py-4 font-bold text-slate-700">Type</th>
                <th className="px-6 py-4 font-bold text-slate-700">Action</th>
              </tr>
            </thead>
            <tbody>
              {[
                { id: "JOB-2024-01", title: "Assistant Sound Engineer", loc: "Trivandrum", type: "Full Time" },
                { id: "JOB-2024-03", title: "Marketing Executive", loc: "Kochi", type: "Contract" },
                { id: "JOB-2024-07", title: "Accountant (Internal)", loc: "Trivandrum", type: "Deputation" },
                { id: "JOB-2024-09", title: "Post Production Supervisor", loc: "Trivandrum", type: "Full Time" }
              ].map((job, idx) => (
                <tr key={idx} className="border-b last:border-0 hover:bg-slate-50 transition-colors">
                  <td className="px-6 py-6 text-slate-500 font-mono text-xs">{job.id}</td>
                  <td className="px-6 py-6 font-bold text-slate-900">{job.title}</td>
                  <td className="px-6 py-6 text-slate-600">{job.loc}</td>
                  <td className="px-6 py-6 text-slate-600">{job.type}</td>
                  <td className="px-6 py-6">
                    <Button variant="outline" className="text-xs px-3 py-1">Apply Now</Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );

  const TendersView = () => (
    <div className="py-20 animate-in fade-in duration-500">
      <div className="container mx-auto px-6">
        <SectionHeading 
          title="Tenders & Quotations" 
          subtitle="Transparency in procurement and development projects."
        />
        <div className="flex flex-wrap gap-4 mb-8">
          <Button variant="secondary" className="text-sm">Active Tenders</Button>
          <Button variant="outline" className="text-sm">Archive</Button>
          <Button variant="outline" className="text-sm">E-Tendering Portal</Button>
        </div>
        <div className="space-y-4">
          {[
            { title: "Supply and Installation of Cinema Projectors at Kairali Theatre", val: "Above 5L", date: "Jan 30, 2024" },
            { title: "Annual Maintenance Contract for Studio Audio Hardware", val: "Below 5L", date: "Feb 15, 2024" },
            { title: "Renovation of Studio Floor No. 3 (Flooring & Acoustics)", val: "Above 5L", date: "Jan 12, 2024" },
            { title: "Pest Control Services for Head Office Complex", val: "Below 5L", date: "Mar 05, 2024" }
          ].map((tender, idx) => (
            <div key={idx} className="bg-white p-6 rounded-xl border flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div>
                <h4 className="font-bold text-slate-900 text-lg mb-1">{tender.title}</h4>
                <div className="flex gap-4 text-xs">
                  <span className="text-slate-500">Category: <span className="text-slate-900 font-medium">{tender.val}</span></span>
                  <span className="text-slate-500">Deadline: <span className="text-slate-900 font-medium">{tender.date}</span></span>
                </div>
              </div>
              <div className="flex gap-3">
                <Button variant="outline" className="px-3"><Download className="w-4 h-4 mr-2" /> PDF</Button>
                {tender.val === "Above 5L" ? (
                  <Button className="bg-blue-600 text-white hover:bg-blue-700">Submit on GeM</Button>
                ) : (
                  <Button variant="secondary">Submit Online</Button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const ContactView = () => (
    <div className="py-20 animate-in fade-in duration-500">
      <div className="container mx-auto px-6">
        <div className="grid md:grid-cols-2 gap-16">
          <div>
            <SectionHeading title="Get in Touch" />
            <div className="space-y-8 mt-12">
              <div className="flex gap-6">
                <div className="p-3 bg-amber-100 rounded-full h-fit">
                  <MapPin className="w-6 h-6 text-amber-600" />
                </div>
                <div>
                  <h4 className="font-bold text-slate-900 mb-1">Head Office</h4>
                  <p className="text-slate-600">Kerala State Film Development Corporation Ltd.<br />Chalachithra Kalabhavan, Vazhuthacaud<br />Thiruvananthapuram - 695 014</p>
                </div>
              </div>
              <div className="flex gap-6">
                <div className="p-3 bg-amber-100 rounded-full h-fit">
                  <Phone className="w-6 h-6 text-amber-600" />
                </div>
                <div>
                  <h4 className="font-bold text-slate-900 mb-1">Phone & Fax</h4>
                  <p className="text-slate-600">+91 471 2321586, 2326120<br />Fax: +91 471 2320342</p>
                </div>
              </div>
            </div>
            <div className="mt-12 rounded-xl overflow-hidden border h-64 bg-slate-100 flex items-center justify-center grayscale">
              <span className="text-slate-400 italic">Interactive Map Placeholder</span>
            </div>
          </div>
          <div className="bg-slate-50 p-10 rounded-3xl border">
            <h3 className="text-2xl font-bold mb-6">Send a Message</h3>
            <form className="space-y-6">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">Full Name</label>
                  <input type="text" className="w-full p-3 rounded-lg border focus:ring-2 focus:ring-amber-500 outline-none" placeholder="Enter name" />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">Email Address</label>
                  <input type="email" className="w-full p-3 rounded-lg border focus:ring-2 focus:ring-amber-500 outline-none" placeholder="Enter email" />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium text-slate-700">Subject</label>
                <select className="w-full p-3 rounded-lg border focus:ring-2 focus:ring-amber-500 outline-none appearance-none">
                  <option>General Enquiry</option>
                  <option>Film Support Schemes</option>
                  <option>Studio Booking</option>
                  <option>Tenders / Quotations</option>
                </select>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium text-slate-700">Message</label>
                <textarea rows="4" className="w-full p-3 rounded-lg border focus:ring-2 focus:ring-amber-500 outline-none" placeholder="Your query..."></textarea>
              </div>
              <Button variant="secondary" className="w-full">Send Message</Button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );

  // --- Sub-Views (Chitranjali Studio) ---

  const ChitranjaliView = () => (
    <div className="animate-in fade-in duration-700">
      {/* Studio Hero */}
      <section className="relative h-[80vh] flex items-center text-white overflow-hidden bg-slate-950">
        <div className="absolute inset-0 opacity-40">
          <img 
            src="