import { useState, useEffect, FormEvent } from 'react';
import Header from './components/Header';
import ServiceExplorer from './components/ServiceExplorer';
import ProjectEstimator from './components/ProjectEstimator';
import CompanyTimeline from './components/CompanyTimeline';
import FAQSection from './components/FAQSection';
import AuroraBackground from './components/AuroraBackground';
import { BrandIcon, BrandLogo } from './components/BrandAssets';
import { Inquiry } from './types';
import {
  MapPin,
  Mail,
  Phone,
  Clock,
  Send,
  CheckCircle2,
  ArrowRight,
  Sparkles
} from 'lucide-react';

export default function App() {
  // General Contact Form States
  const [contactName, setContactName] = useState('');
  const [contactEmail, setContactEmail] = useState('');
  const [contactSubject, setContactSubject] = useState('General Services Inquiry');
  const [contactMessage, setContactMessage] = useState('');
  const [contactSuccess, setContactSuccess] = useState(false);
  const [contactLoading, setContactLoading] = useState(false);

  // Stats Counters state for load-in effect
  const [activeClients, setActiveClients] = useState(12);
  const [completedProjects, setCompletedProjects] = useState(25);

  useEffect(() => {
    // Soft animate stats for visual delight
    const clientsTimer = setInterval(() => {
      setActiveClients((prev) => {
        if (prev >= 65) {
          clearInterval(clientsTimer);
          return 65;
        }
        return prev + 2;
      });
    }, 40);

    const projectsTimer = setInterval(() => {
      setCompletedProjects((prev) => {
        if (prev >= 142) {
          clearInterval(projectsTimer);
          return 142;
        }
        return prev + 4;
      });
    }, 25);

    return () => {
      clearInterval(clientsTimer);
      clearInterval(projectsTimer);
    };
  }, []);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      const headerOffset = 80;
      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
      const offsetPosition = elementPosition - headerOffset;
      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth',
      });
    }
  };

  const handleGeneralContactSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!contactName || !contactEmail || !contactMessage) return;

    setContactLoading(true);

    // Save general inquiry to localStorage
    const savedMsg = {
      id: `contact-${Date.now()}`,
      name: contactName,
      email: contactEmail,
      subject: contactSubject,
      message: contactMessage,
      date: new Date().toLocaleDateString('en-ZA'),
    };

    const pastMsgs = JSON.parse(localStorage.getItem('litecharms_general_contacts') || '[]');
    pastMsgs.push(savedMsg);
    localStorage.setItem('litecharms_general_contacts', JSON.stringify(pastMsgs));

    try {
      await fetch('/api/send-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: contactName,
          email: contactEmail,
          subject: contactSubject,
          message: contactMessage,
          isEstimate: false,
        }),
      });
    } catch (err) {
      console.error('SMTP API Submission failed. Saved locally instead:', err);
    } finally {
      setContactLoading(false);
      setContactSuccess(true);
      setContactName('');
      setContactEmail('');
      setContactMessage('');
    }
  };

  const handleEstimatorInquiry = (inquiry: Inquiry) => {
    console.log('Received Estimate Inquiry:', inquiry);
  };

  return (
    <div className="min-h-screen bg-brand-950 font-sans text-slate-300 antialiased relative z-10 selection:bg-brand-500/30 selection:text-white" id="app-root">
      {/* Aurora Background */}
      <AuroraBackground />

      {/* Navigation Header */}
      <Header onScrollTo={scrollToSection} />

      {/* 1. Hero Section */}
      <section
        id="hero"
        className="pt-32 pb-20 md:pt-40 md:pb-28 relative overflow-hidden"
      >
        <div className="max-w-7xl mx-auto px-6 relative">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            {/* Hero Left Content */}
            <div className="lg:col-span-7 space-y-8 text-left">
              {/* South Africa Tag */}
              <div className="inline-flex items-center space-x-2 bg-brand-900/50 border border-brand-800/80 px-3.5 py-1.5 rounded-full" id="hero-sa-tag">
                <span className="w-2 h-2 rounded-full bg-brand-500 animate-pulse" />
                <span className="text-[11px] font-mono font-bold uppercase tracking-wider text-brand-100">
                  Established 2011 • Midrand, South Africa
                </span>
              </div>

              {/* Display Headline */}
              <h1 className="font-display text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.15]" id="hero-headline">
                Bespoke App Design & <br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-500 via-brand-200 to-accent-400">
                  Cloud Deployments
                </span>
              </h1>

              {/* Narrative Subhead */}
              <p className="text-base sm:text-lg text-slate-300 leading-relaxed max-w-2xl" id="hero-description">
                LiteCharms (PTY) Ltd provides an integrated approach to software layouts and modern deployment solutions. 
                We engineer immersive interfaces for web, mobile, and desktop systems, alongside Docker containerization, Kubernetes configurations, and cloud hosting for clients who do not have hosting environments.
              </p>

              {/* CTAs */}
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-2">
                <button
                  id="hero-cta-estimator"
                  onClick={() => scrollToSection('estimator')}
                  className="px-6 py-3.5 rounded-xl font-bold text-sm text-white bg-brand-500 hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all text-center flex items-center justify-center space-x-2 cursor-pointer hover:scale-[1.02] duration-250"
                >
                  <span>Build Interactive Estimate</span>
                  <Sparkles className="w-4 h-4 text-brand-100" />
                </button>
                <button
                  id="hero-cta-services"
                  onClick={() => scrollToSection('services')}
                  className="px-6 py-3.5 rounded-xl font-bold text-sm text-slate-200 bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all text-center flex items-center justify-center space-x-2 cursor-pointer hover:scale-[1.02] duration-250"
                >
                  <span>Explore Our Services</span>
                  <ArrowRight className="w-4 h-4 text-slate-400" />
                </button>
              </div>

              {/* Deployment Disclaimer Badge */}
              <div className="p-4 rounded-xl bg-slate-900/50 backdrop-blur-md border border-slate-800/80 flex items-start space-x-3 text-xs text-slate-400 max-w-xl">
                <div className="w-5 h-5 rounded-md bg-brand-950 border border-brand-800/50 flex items-center justify-center text-brand-500 font-bold shrink-0 text-[10px] mt-0.5 font-mono">IaC</div>
                <p className="leading-relaxed">
                  <strong>Cloud & Container Ready:</strong> Built to compile as a lightweight optimized single-page layout, ready to deploy flawlessly inside containerized Docker environments or on our khongisa.co.za private cloud.
                </p>
              </div>
            </div>

            {/* Hero Right Visuals - Bento grid style */}
            <div className="lg:col-span-5 grid grid-cols-2 gap-4 relative" id="hero-visual-bento">
              {/* Card 1: Main Stats Box */}
              <div className="bg-slate-900/50 backdrop-blur-md rounded-2xl p-6 border border-slate-800/80 shadow-sm col-span-2 hover:border-slate-700 transition-all">
                <p className="text-[10px] font-mono text-slate-400 uppercase tracking-widest">
                  Our Engineering Track Record
                </p>
                <div className="grid grid-cols-3 gap-4 mt-4">
                  <div>
                    <p className="text-2xl md:text-3xl font-extrabold font-display text-brand-500">
                      2011
                    </p>
                    <p className="text-[10px] font-medium text-slate-400 uppercase mt-0.5">
                      Established
                    </p>
                  </div>
                  <div>
                    <p className="text-2xl md:text-3xl font-extrabold font-display text-white">
                      {completedProjects}+
                    </p>
                    <p className="text-[10px] font-medium text-slate-400 uppercase mt-0.5">
                      Projects
                    </p>
                  </div>
                  <div>
                    <p className="text-2xl md:text-3xl font-extrabold font-display text-white">
                      {activeClients}+
                    </p>
                    <p className="text-[10px] font-medium text-slate-400 uppercase mt-0.5">
                      Active Clients
                    </p>
                  </div>
                </div>
              </div>

              {/* Card 2: Core Focus A */}
              <div className="bg-gradient-to-br from-brand-600 to-brand-850 rounded-2xl p-6 text-white shadow-md shadow-brand-500/5 border border-brand-500/20">
                <div className="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center mb-4">
                  <BrandIcon className="w-5 h-5 text-brand-100" />
                </div>
                <h4 className="font-display font-bold text-sm leading-tight">
                  Responsive App Layouts
                </h4>
                <p className="text-[10px] text-brand-100 mt-2 leading-relaxed">
                  Wireframes and structural guidelines for web dashboards, native iOS/Android, and high-productivity desktop software.
                </p>
              </div>

              {/* Card 3: Core Focus B */}
              <div className="bg-slate-900/80 backdrop-blur-md rounded-2xl p-6 text-slate-100 shadow-md border border-slate-800/80">
                <div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center mb-4 border border-slate-700">
                  <span className="text-brand-500 text-xs font-mono font-bold">IaC</span>
                </div>
                <h4 className="font-display font-bold text-sm leading-tight text-white">
                  Docker & Kubernetes
                </h4>
                <p className="text-[10px] text-slate-400 mt-2 leading-relaxed">
                  Declarative Kubernetes cluster blueprints, Docker multi-stage configurations, and cloud setups on khongisa.co.za.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. About Section & Timeline */}
      <section id="about" className="py-24 sm:py-32 relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
            {/* Left side text */}
            <div className="lg:col-span-5 space-y-6 lg:sticky lg:top-28">
              <span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
                Our Heritage
              </span>
              <h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
                Established in Midrand. <br />
                Sustained by Engineering.
              </h2>
              <div className="space-y-4 text-sm leading-relaxed text-slate-300">
                <p>
                  LiteCharms (PTY) Ltd was born in Midrand in 2011, initially serving as a specialist interface consulting firm for the emerging mobile industry in South Africa. As local enterprise operations expanded, we observed a crucial bottleneck: software layout design cannot achieve its full potential if clients lack reliable, containerized hosting environments and flexible scale options.
                </p>
                <p>
                  In 2017, we expanded our core divisions to provide automated Docker container layouts, declarative Kubernetes blueprints, and cloud setups, powered by our high-performance private cloud platform, khongisa.co.za.
                </p>
                <p className="font-medium text-white">
                  Today, we bridge the gap between user experience and modern cloud orchestration, delivering reliable structures that are optimized, secure, and fully documented.
                </p>
              </div>

              {/* Physical Address details widget */}
              <div className="pt-6 border-t border-slate-800 space-y-3 text-xs">
                <div className="flex items-center space-x-3 text-slate-300">
                  <MapPin className="w-4 h-4 text-brand-500 shrink-0" />
                  <span>Grand Central Office Park, Midrand, Johannesburg, 1685, South Africa</span>
                </div>
                <div className="flex items-center space-x-3 text-slate-300">
                  <Clock className="w-4 h-4 text-brand-500 shrink-0" />
                  <span>Monday - Friday: 08:00 - 17:00 (GMT+2)</span>
                </div>
              </div>
            </div>

            {/* Right side interactive timeline */}
            <div className="lg:col-span-7">
              <CompanyTimeline />
            </div>
          </div>
        </div>
      </section>

      {/* 3. Services Section */}
      <section id="services" className="py-24 sm:py-32 relative border-y border-slate-900 bg-slate-950/20 backdrop-blur-[2px]">
        <div className="max-w-7xl mx-auto px-6 text-center space-y-12">
          <div className="max-w-3xl mx-auto space-y-4">
            <span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
              Full Suite Solutions
            </span>
            <h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
              Bespoke Digital Design & Cloud Deployments
            </h2>
            <p className="text-sm sm:text-base text-slate-300 leading-relaxed">
              We separate our specialties into cohesive pillars. Explore our capabilities to see how we plan, design, and roll out interfaces and infrastructure.
            </p>
          </div>

          {/* Service Explorer Accordion / Tabs */}
          <ServiceExplorer />
        </div>
      </section>

      {/* 4. Project Estimator Section */}
      <section id="estimator" className="py-24 sm:py-32 relative">
        <div className="max-w-7xl mx-auto px-6 space-y-12">
          <div className="text-center max-w-3xl mx-auto space-y-4">
            <span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
              Interactive Estimator
            </span>
            <h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
              Model Your Custom Project Scope
            </h2>
            <p className="text-sm sm:text-base text-slate-300 leading-relaxed">
              Select your required app layout services or cloud hosting parameters. Our system computes an investment range in South African Rands (ZAR) instantly. Submit the configuration to lock in your draft!
            </p>
          </div>

          <ProjectEstimator onInquirySubmitted={handleEstimatorInquiry} />
        </div>
      </section>

      {/* 5. FAQs Section */}
      <section id="faqs" className="py-24 sm:py-32 border-t border-slate-900 bg-slate-950/30 backdrop-blur-[2px]">
        <div className="max-w-7xl mx-auto px-6 space-y-12">
          <div className="text-center max-w-3xl mx-auto space-y-4">
            <span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
              Support Center
            </span>
            <h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
              Frequently Answered Questions
            </h2>
            <p className="text-sm sm:text-base text-slate-300 leading-relaxed">
              Find instant answers regarding our site planning timelines, khongisa.co.za cloud hosting options, Gauteng region operations, and modern cloud deployment configurations.
            </p>
          </div>

          <FAQSection />
        </div>
      </section>

      {/* 6. Contact & Directions Section */}
      <section id="contact" className="py-24 sm:py-32 relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
            {/* Contact Info Panel */}
            <div className="lg:col-span-5 space-y-8" id="contact-info-panel">
              <div className="space-y-4">
                <span className="text-xs font-mono font-bold uppercase tracking-wider text-brand-100 bg-brand-900/50 px-3 py-1.5 rounded-md border border-brand-800/60 inline-block">
                  Get In Touch
                </span>
                <h2 className="font-display text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
                  Reach Our Midrand Office
                </h2>
                <p className="text-sm leading-relaxed text-slate-300">
                  Ready to map out your infrastructure or design high-performance software layouts? Contact our directors directly or submit the general inquiry form. You can also visit our offices in Gauteng.
                </p>
              </div>

              {/* Direct Info list */}
              <div className="space-y-4" id="direct-contact-links">
                <a
                  href="mailto:contact@litecharms.co.za"
                  id="contact-email-link"
                  className="flex items-center space-x-4 p-4 rounded-xl border border-slate-800/80 hover:border-slate-700 bg-slate-900/20 hover:bg-slate-900/40 transition-all text-slate-300 hover:text-white"
                >
                  <div className="w-10 h-10 rounded-lg bg-brand-900/60 flex items-center justify-center text-brand-500">
                    <Mail className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="text-[10px] font-mono font-semibold text-slate-500 uppercase">Email Us</p>
                    <p className="text-sm font-bold">contact@litecharms.co.za</p>
                  </div>
                </a>

                <a
                  href="tel:+27872659463"
                  id="contact-phone-link"
                  className="flex items-center space-x-4 p-4 rounded-xl border border-slate-800/80 hover:border-slate-700 bg-slate-900/20 hover:bg-slate-900/40 transition-all text-slate-300 hover:text-white"
                >
                  <div className="w-10 h-10 rounded-lg bg-brand-900/60 flex items-center justify-center text-brand-500">
                    <Phone className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="text-[10px] font-mono font-semibold text-slate-500 uppercase">Call Office</p>
                    <p className="text-sm font-bold">+27 (0) 87 265 9463</p>
                  </div>
                </a>

                <div className="flex items-center space-x-4 p-4 rounded-xl border border-slate-800/80 bg-slate-900/20 text-slate-300">
                  <div className="w-10 h-10 rounded-lg bg-brand-900/60 flex items-center justify-center text-brand-500">
                    <Clock className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="text-[10px] font-mono font-semibold text-slate-500 uppercase">Core Office Hours</p>
                    <p className="text-sm font-bold">Mon - Fri: 08:00 - 17:00</p>
                  </div>
                </div>
              </div>

              {/* Graphic Midrand South Africa Map Representation */}
              <div className="p-6 bg-slate-900/40 backdrop-blur-sm rounded-2xl border border-slate-800/80 space-y-4" id="map-visual-block">
                <div className="flex justify-between items-start">
                  <div>
                    <h4 className="font-display font-bold text-sm text-white">Midrand Headquarters</h4>
                    <p className="text-xs text-slate-400 mt-1">1633 Liebenburg Rd, Boordwyk, Midrand, Gauteng, ZA</p>
                  </div>
                  <span className="text-[9px] font-mono font-bold uppercase bg-slate-800 text-slate-300 px-2 py-0.5 rounded border border-slate-700 shrink-0">
                    Gauteng Corridor
                  </span>
                </div>

                {/* Styled geometric CSS map visual */}
                <div className="h-32 bg-brand-950 rounded-xl relative overflow-hidden border border-slate-800 flex items-center justify-center">
                  {/* Grid background lines */}
                  <div className="absolute inset-0 bg-[radial-gradient(#00bcac_2px,transparent_2px)] [background-size:20px_20px] opacity-15" />
                  <div className="absolute top-1/2 w-full h-0.5 bg-brand-500/20" />
                  <div className="absolute left-1/3 h-full w-0.5 bg-brand-500/20" />
                  <div className="absolute right-1/4 h-full w-0.5 bg-brand-500/20" />

                  {/* Johannesburg - Pretoria corridor labels */}
                  <span className="absolute top-3 left-4 text-[9px] font-mono text-brand-200">Pretoria (N1 North)</span>
                  <span className="absolute bottom-3 left-4 text-[9px] font-mono text-brand-200">Johannesburg (N1 South)</span>

                  {/* Pulsing local coordinate pointer */}
                  <div className="relative z-10 flex flex-col items-center">
                    <div className="w-3 h-3 bg-brand-500 rounded-full animate-ping absolute" />
                    <div className="w-3 h-3 bg-brand-500 rounded-full border-2 border-white relative z-10" />
                    <span className="text-[10px] font-bold text-white bg-slate-950/90 backdrop-blur-sm px-2 py-0.5 rounded border border-slate-800 mt-1.5 shadow-md">
                      LiteCharms Offices
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* General Contact Form */}
            <div className="lg:col-span-7 bg-slate-900/30 backdrop-blur-md border border-slate-800/80 p-8 rounded-2xl shadow-sm" id="contact-form-panel">
              <div className="border-b border-slate-800 pb-5 mb-6">
                <h3 className="font-display text-xl font-bold text-white">General Message Form</h3>
                <p className="text-xs text-slate-400 mt-1">
                  Have a general service query or want to request a hardcopy portfolio handover? Leave your request below.
                </p>
              </div>

              {contactSuccess ? (
                <div className="p-8 text-center bg-slate-900/50 rounded-xl border border-brand-500/30 space-y-4 animate-fade-in" id="contact-success-box">
                  <div className="w-12 h-12 bg-brand-900/50 border border-brand-500/30 text-brand-500 rounded-full flex items-center justify-center mx-auto shadow-sm">
                    <CheckCircle2 className="w-6 h-6" />
                  </div>
                  <div>
                    <h4 className="font-display font-bold text-lg text-white">Message Delivered!</h4>
                    <p className="text-xs text-slate-400 mt-1.5 leading-relaxed max-w-md mx-auto">
                      Thank you for contacting LiteCharms (PTY) Ltd. Your inquiry has been cataloged. Our South African helpdesk will reply within 4 business hours.
                    </p>
                  </div>
                  <button
                    id="btn-send-another-message"
                    onClick={() => setContactSuccess(false)}
                    className="mt-2 text-xs font-bold text-brand-500 hover:text-brand-400 underline cursor-pointer"
                  >
                    Send Another Message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleGeneralContactSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Your Full Name *</label>
                      <input
                        type="text"
                        required
                        id="contact-input-name"
                        value={contactName}
                        onChange={(e) => setContactName(e.target.value)}
                        placeholder="Sipho Cele"
                        className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white placeholder:text-slate-600"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Your Email Address *</label>
                      <input
                        type="email"
                        required
                        id="contact-input-email"
                        value={contactEmail}
                        onChange={(e) => setContactEmail(e.target.value)}
                        placeholder="sipho@company.co.za"
                        className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white placeholder:text-slate-600"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs font-semibold text-slate-400 mb-1">Subject of Inquiry</label>
                    <select
                      id="contact-input-subject"
                      value={contactSubject}
                      onChange={(e) => setContactSubject(e.target.value)}
                      className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white"
                    >
                      <option value="General Services Inquiry">General Services Inquiry</option>
                      <option value="App UX Layout Request">App UX/UI Layout Request</option>
                      <option value="Docker & Kubernetes Deployment Planning">Docker & Kubernetes Deployment Planning</option>
                      <option value="Cloud Hosting (khongisa.co.za)">Cloud Hosting (khongisa.co.za)</option>
                      <option value="Career & SLA Proposals">Career & SLA Proposals</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-xs font-semibold text-slate-400 mb-1">Detailed Message *</label>
                    <textarea
                      required
                      id="contact-textarea-message"
                      value={contactMessage}
                      onChange={(e) => setContactMessage(e.target.value)}
                      rows={5}
                      placeholder="Specify your operational needs, site layout details, or timeframe..."
                      className="w-full px-4 py-2.5 rounded-xl border border-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-slate-900/50 text-white placeholder:text-slate-600 resize-none"
                    />
                  </div>

                  <button
                    type="submit"
                    id="contact-btn-submit"
                    disabled={contactLoading}
                    className="w-full py-3 px-6 rounded-xl font-bold bg-brand-500 hover:bg-brand-600 text-white shadow-md shadow-brand-500/15 flex items-center justify-center space-x-2 transition-colors disabled:opacity-50 cursor-pointer"
                  >
                    {contactLoading ? (
                      <span>Sending Message...</span>
                    ) : (
                      <>
                        <span>Send Message</span>
                        <Send className="w-4 h-4" />
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950/60 backdrop-blur-md text-slate-400 py-16 border-t border-slate-900" id="app-footer">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start border-b border-slate-900 pb-12">
            
            {/* Branding Column */}
            <div className="md:col-span-5 space-y-4 text-left">
              <div className="flex items-center space-x-2">
                <BrandLogo className="h-10 w-auto" />
              </div>
              <p className="text-xs text-slate-400 max-w-sm leading-relaxed">
                Registered IT Services provider based in Midrand, South Africa. Delivering exceptional digital layouts and resilient containerized deployment environments since 2011.
              </p>
              <div className="text-[10px] font-mono bg-slate-950 px-3 py-2 rounded-lg border border-slate-900 inline-block text-slate-500">
                Registration No: 2011/104859/07 • Midrand, ZA
              </div>
            </div>

            {/* Links Columns */}
            <div className="md:col-span-3 text-left space-y-3">
              <h5 className="text-xs font-mono font-bold text-slate-200 uppercase tracking-wider">
                Services Links
              </h5>
              <ul className="space-y-2 text-xs text-slate-400">
                <li>
                  <button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    Web & Mobile App Design
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    Desktop Layout Customization
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    Docker Containerization
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('services')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    Kubernetes IaC & Hosting
                  </button>
                </li>
              </ul>
            </div>

            <div className="md:col-span-2 text-left space-y-3">
              <h5 className="text-xs font-mono font-bold text-slate-200 uppercase tracking-wider">
                Company
              </h5>
              <ul className="space-y-2 text-xs text-slate-400">
                <li>
                  <button onClick={() => scrollToSection('about')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    Our History (Timeline)
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('estimator')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    Interactive Estimator
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('faqs')} className="hover:text-brand-400 transition-colors cursor-pointer text-left">
                    FAQ Hub
                  </button>
                </li>
              </ul>
            </div>

            <div className="md:col-span-2 text-left space-y-3">
              <h5 className="text-xs font-mono font-bold text-slate-200 uppercase tracking-wider">
                Specifications
              </h5>
              <div className="space-y-2">
                <span className="inline-block text-[10px] font-semibold bg-emerald-950/50 text-emerald-400 px-2.5 py-1 rounded border border-emerald-900/50">
                  Container & Cloud Ready
                </span>
                <p className="text-[10px] leading-relaxed text-slate-500">
                  Fully optimized container configurations with integrated Docker structures, designed for easy deployment to khongisa.co.za or custom Kubernetes setups.
                </p>
              </div>
            </div>

          </div>

          <div className="pt-8 flex flex-col md:flex-row justify-between items-center text-xs">
            <p className="text-slate-500 text-center md:text-left">
              &copy; {new Date().getFullYear()} LiteCharms (PTY) Ltd. All Rights Reserved. Midrand, South Africa.
            </p>
            <p className="text-slate-600 mt-2 md:mt-0 text-center md:text-right">
              Designed with precision • Est. 2011 • Reg 2011/104859/07
            </p>
          </div>

        </div>
      </footer>
    </div>
  );
}