import React, { useState } from 'react';
import { 
  ArrowRight, Calendar, Clock, AlertCircle, Link as LinkIcon, 
  Workflow, Zap, Box, Puzzle, CheckCircle2, ChevronDown, ChevronUp,
  Star, Menu, X, Twitter, Linkedin, Github, BarChart3, Users,
  PhoneCall, ShieldCheck, Briefcase
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [openFaq, setOpenFaq] = useState(0);
  const [isAuditModalOpen, setIsAuditModalOpen] = useState(false);
  const [auditFormStatus, setAuditFormStatus] = useState('idle');

  const faqs = [
    {
      q: "Do I need any technical or coding skills?",
      a: "Not at all. That's the beauty of our Done-For-You service. Our team of expert engineers handles all the coding, API connections, and complex logic. You just tell us your business goals."
    },
    {
      q: "How long does a custom automation build take?",
      a: "It depends on the complexity of your workflows, but most standard projects are scoped, built, tested, and deployed within 2 to 4 weeks. We'll give you a precise timeline during our discovery call."
    },
    {
      q: "What platforms and tools do you work with?",
      a: "We are experts in connecting over 200+ applications including Shopify, WooCommerce, Meta Ads, Google Ads, Klaviyo, HubSpot, Salesforce, and Slack. If it has an API, we can automate it."
    },
    {
      q: "Who manages the automations after they are live?",
      a: "We offer handover training so your team can understand how things work. Alternatively, most of our clients opt for our 'Automation Partner' retainer where we continuously monitor, maintain, and optimize your systems 24/7."
    },
    {
      q: "Are my company's data and systems secure?",
      a: "Absolutely. We follow strict security protocols, utilizing bank-level encryption and secure API key management. We sign NDAs and never retain your proprietary customer data on our own servers."
    }
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 selection:bg-cyan-500 selection:text-white">
      {/* Navigation */}
      <nav className="fixed w-full z-50 top-0 transition-all duration-300 bg-[#0B1121]/90 backdrop-blur-md border-b border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center">
                <Workflow className="w-5 h-5 text-white" />
              </div>
              <span className="font-bold text-xl text-white tracking-tight">MasterAutomation</span>
            </div>
            
            <div className="hidden md:flex items-center gap-8">
              <a href="#services" className="text-sm font-medium text-slate-300 hover:text-cyan-400 transition-colors">Our Services</a>
              <a href="#process" className="text-sm font-medium text-slate-300 hover:text-cyan-400 transition-colors">How It Works</a>
              <a href="#packages" className="text-sm font-medium text-slate-300 hover:text-cyan-400 transition-colors">Packages</a>
              <button 
                onClick={() => setIsAuditModalOpen(true)}
                className="bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-semibold py-2 px-5 rounded-full transition-all transform hover:scale-105 shadow-[0_0_15px_rgba(6,182,212,0.3)]">
                Book a Free Audit
              </button>
            </div>

            <div className="md:hidden flex items-center">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-slate-300">
                {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>
        </div>
        
        {isMenuOpen && (
          <div className="md:hidden bg-[#0B1121] border-b border-slate-800 pb-4 px-4">
            <div className="flex flex-col gap-4 pt-2">
              <a href="#services" className="text-slate-300 font-medium">Our Services</a>
              <a href="#process" className="text-slate-300 font-medium">How It Works</a>
              <a href="#packages" className="text-slate-300 font-medium">Packages</a>
              <button 
                onClick={() => { setIsAuditModalOpen(true); setIsMenuOpen(false); }}
                className="bg-cyan-500 text-slate-900 font-bold py-3 rounded-lg mt-2 flex items-center justify-center gap-2">
                <Calendar className="w-4 h-4"/> Book a Free Audit
              </button>
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 bg-[#0B1121] overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
        <div className="absolute top-1/4 -left-64 w-96 h-96 bg-cyan-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-30 animate-pulse"></div>
        <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-blue-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-20"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800 border border-slate-700 text-cyan-400 font-semibold text-xs tracking-wide uppercase mb-6">
                <Briefcase className="w-3.5 h-3.5" /> Done-For-You Automation Agency
              </div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] mb-6 tracking-tight">
                Automate the Busywork. <br className="hidden sm:block" />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
                  Accelerate What Matters.
                </span>
              </h1>
              <p className="text-lg sm:text-xl text-slate-300 mb-8 leading-relaxed max-w-xl">
                We design and build custom, AI-powered automation systems for retailers and marketers. Stop wasting time on repetitive tasks. Let our experts streamline your operations so you can scale without adding headcount.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <button 
                  onClick={() => setIsAuditModalOpen(true)}
                  className="flex items-center justify-center gap-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-semibold py-4 px-8 rounded-full transition-all transform hover:-translate-y-1 shadow-[0_0_20px_rgba(6,182,212,0.4)]">
                  <Calendar className="w-5 h-5" />
                  Book a Strategy Call
                </button>
              </div>
            </div>

            <div className="relative lg:ml-10 hidden sm:block">
              <div className="absolute inset-0 bg-gradient-to-tr from-cyan-500/20 to-blue-500/20 rounded-2xl transform rotate-3 scale-105 blur-lg"></div>
              <div className="relative bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden flex flex-col p-8">
                <h3 className="text-white font-bold text-xl mb-6 text-center">ROI Focus: Manual vs Automated</h3>
                <div className="space-y-6">
                  <div className="bg-slate-800/50 rounded-xl p-5 border border-rose-500/20">
                    <div className="flex items-center gap-3 mb-3">
                      <span className="bg-rose-500/20 text-rose-400 text-xs font-bold px-2 py-1 rounded">TRADITIONAL</span>
                      <span className="text-slate-300 text-sm">Manual Operations</span>
                    </div>
                    <div className="flex items-center gap-2 text-slate-500 text-sm line-through">
                      <div className="p-2 bg-slate-800 rounded"><LinkIcon className="w-4 h-4" /></div>
                      CSV Exports &rarr; Human Cleaning &rarr; CRM Upload &rarr; Manual Alerts
                    </div>
                    <p className="text-rose-400 text-xs mt-3 font-semibold flex items-center gap-1"><Clock className="w-3 h-3"/> Resource Drain: 15-20 hours/week</p>
                  </div>

                  <div className="flex justify-center">
                    <div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center">
                      <ArrowRight className="w-4 h-4 text-cyan-400 transform rotate-90" />
                    </div>
                  </div>

                  <div className="bg-gradient-to-r from-slate-800 to-[#0B1121] rounded-xl p-5 border border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.1)]">
                    <div className="flex items-center gap-3 mb-3">
                      <span className="bg-cyan-50 text-slate-900 text-xs font-bold px-2 py-1 rounded">MASTER AUTOMATION</span>
                      <span className="text-white text-sm font-semibold">Managed AI Engine</span>
                    </div>
                    <div className="flex items-center gap-3 text-cyan-100 text-sm">
                      <div className="p-2 bg-slate-800 rounded text-cyan-400"><Zap className="w-4 h-4" /></div>
                      Instant API Sync &rarr; AI Enrichment &rarr; CRM Updated &rarr; Instant Alert
                    </div>
                    <p className="text-emerald-400 text-xs mt-3 font-semibold flex items-center gap-1"><ShieldCheck className="w-3 h-3"/> 99.9% Accuracy. Millions in recovered ROI.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Social Proof Bar */}
      <section className="bg-[#0f172a] border-y border-slate-800 py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-center items-center gap-8 md:gap-16 text-center divide-y md:divide-y-0 md:divide-x divide-slate-700">
            <div className="px-8 pt-4 md:pt-0">
              <p className="text-3xl font-bold text-white mb-1">500+</p>
              <p className="text-sm font-medium text-slate-400 uppercase tracking-wider">Clients Transformed</p>
            </div>
            <div className="px-8 pt-4 md:pt-0">
              <p className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 mb-1">2M+</p>
              <p className="text-sm font-medium text-slate-400 uppercase tracking-wider">Tasks Automated Daily</p>
            </div>
            <div className="px-8 pt-4 md:pt-0">
              <div className="flex items-center justify-center gap-1 mb-1">
                <p className="text-3xl font-bold text-white">4.9</p>
                <div className="flex text-amber-400 ml-1">
                  <Star className="w-5 h-5 fill-current" /><Star className="w-5 h-5 fill-current" /><Star className="w-5 h-5 fill-current" /><Star className="w-5 h-5 fill-current" /><Star className="w-5 h-5 fill-current" />
                </div>
              </div>
              <p className="text-sm font-medium text-slate-400 uppercase tracking-wider">Average Rating</p>
            </div>
          </div>
        </div>
      </section>

      {/* Pain Point Section */}
      <section className="py-24 bg-white relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Sound Familiar?</h2>
            <div className="w-20 h-1 bg-cyan-500 mx-auto rounded-full"></div>
            <p className="mt-6 text-lg text-slate-600 max-w-2xl mx-auto">
              You didn't start a business to become a data-entry clerk or IT manager.
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-slate-50 rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center mb-6">
                <Clock className="w-7 h-7 text-rose-500" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">Drowning in Manual Tasks</h3>
              <p className="text-slate-600 leading-relaxed">
                Your team spends hours copying data, updating spreadsheets, and sending follow-ups by hand instead of doing high-value work.
              </p>
            </div>
            
            <div className="bg-slate-50 rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center mb-6">
                <AlertCircle className="w-7 h-7 text-amber-500" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">Missed Revenue Opportunities</h3>
              <p className="text-slate-600 leading-relaxed">
                Slow response times, forgotten lead follow-ups, and inconsistent outreach are costing you customers every single day.
              </p>
            </div>
            
            <div className="bg-slate-50 rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="w-14 h-14 bg-slate-200 rounded-xl flex items-center justify-center mb-6">
                <LinkIcon className="w-7 h-7 text-slate-600" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">Too Many Disconnected Tools</h3>
              <p className="text-slate-600 leading-relaxed">
                Your tech stack doesn't talk to itself, and duct-taping APIs together has become an exhausting full-time job.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Solutions Section */}
      <section id="services" className="py-24 bg-slate-50 border-t border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">We Build The Engine. You Drive The Growth.</h2>
            <p className="text-lg text-slate-600">
              Master Automation Tools isn't just software you have to learn. We are an expert team that builds bespoke connections between your ad platforms, CRMs, inventory systems, and emails.
            </p>
          </div>

          <div className="space-y-24">
            <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
              <div className="flex-1">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-100 text-cyan-800 font-semibold text-sm mb-6">
                  <Workflow className="w-4 h-4" /> Custom Automation Architecture
                </div>
                <h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">We design workflows perfectly tailored to your business.</h3>
                <p className="text-lg text-slate-600 mb-6">
                  Forget generic templates. Our engineers map out your specific operational bottlenecks and custom-code robust, multi-step solutions that run silently in the background.
                </p>
                <ul className="space-y-3">
                  <li className="flex items-center gap-3 text-slate-700 font-medium"><CheckCircle2 className="w-5 h-5 text-cyan-500" /> Comprehensive workflow auditing</li>
                  <li className="flex items-center gap-3 text-slate-700 font-medium"><CheckCircle2 className="w-5 h-5 text-cyan-500" /> Custom API and webhook integrations</li>
                  <li className="flex items-center gap-3 text-slate-700 font-medium"><CheckCircle2 className="w-5 h-5 text-cyan-500" /> Zero coding required on your end</li>
                </ul>
              </div>
              <div className="flex-1 relative w-full aspect-square max-w-md mx-auto">
                <div className="absolute inset-0 bg-gradient-to-tr from-cyan-200 to-blue-200 rounded-3xl transform rotate-3 scale-105 opacity-50"></div>
                <div className="relative h-full bg-white border border-slate-200 rounded-3xl shadow-xl flex items-center justify-center p-8 overflow-hidden">
                   <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-cyan-500 via-transparent to-transparent"></div>
                   <div className="relative grid grid-cols-2 gap-4 w-full h-full">
                      <div className="bg-slate-50 rounded-xl border border-slate-200 p-4 flex flex-col justify-center items-center shadow-sm z-10 relative">
                        <Users className="w-8 h-8 text-indigo-500 mb-2"/>
                        <p className="text-[10px] font-bold text-slate-500">Lead Captured</p>
                      </div>
                      <div className="bg-cyan-50 rounded-xl border border-cyan-200 p-4 flex flex-col justify-center items-center shadow-sm transform translate-y-6 z-10 relative">
                        <Zap className="w-8 h-8 text-amber-500 mb-2"/>
                        <p className="text-[10px] font-bold text-slate-500 text-center">Our Custom<br/>AI Routing</p>
                      </div>
                      <div className="bg-slate-50 rounded-xl border border-slate-200 p-4 flex flex-col justify-center items-center shadow-sm transform -translate-y-4 z-10 relative">
                        <Box className="w-8 h-8 text-emerald-500 mb-2"/>
                        <p className="text-[10px] font-bold text-slate-500">Inventory Reserved</p>
                      </div>
                      <div className="bg-slate-50 rounded-xl border border-slate-200 p-4 flex flex-col justify-center items-center shadow-sm transform translate-y-2 z-10 relative">
                        <BarChart3 className="w-8 h-8 text-cyan-500 mb-2"/>
                        <p className="text-[10px] font-bold text-slate-500 text-center">Sales Team<br/>Notified</p>
                      </div>
                   </div>
                </div>
              </div>
            </div>

            <div className="flex flex-col lg:flex-row-reverse items-center gap-12 lg:gap-20">
              <div className="flex-1">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 text-purple-800 font-semibold text-sm mb-6">
                  <Zap className="w-4 h-4" /> Fully Managed AI Campaigns
                </div>
                <h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">We launch and optimize your campaigns on autopilot.</h3>
                <p className="text-lg text-slate-600 mb-6">
                  Our team builds smart systems that automatically segment your audiences, trigger highly personalized messages, A/B test creatives, and reallocate budget based on real-time AI insights.
                </p>
              </div>
              <div className="flex-1 relative w-full aspect-square max-w-md mx-auto">
                <div className="absolute inset-0 bg-gradient-to-tr from-purple-200 to-pink-200 rounded-3xl transform -rotate-3 scale-105 opacity-50"></div>
                <div className="relative h-full bg-white border border-slate-200 rounded-3xl shadow-xl p-6 flex flex-col">
                  <div className="flex items-center justify-between mb-6">
                    <span className="font-bold text-slate-800">Campaign Performance</span>
                    <span className="text-xs bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full font-bold">+24% ROI Delivered</span>
                  </div>
                  <div className="flex-1 bg-slate-50 rounded-xl border border-slate-100 relative overflow-hidden flex items-end">
                    <div className="w-full flex justify-around items-end h-[80%] px-4 pb-4 gap-2">
                      {[40, 55, 45, 70, 60, 90, 85].map((height, i) => (
                         <div key={i} className="w-full bg-gradient-to-t from-purple-500 to-indigo-400 rounded-t-sm" style={{ height: `${height}%`, opacity: 0.7 + (i * 0.05) }}></div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section id="process" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Our Proven Done-For-You Process</h2>
            <div className="w-20 h-1 bg-cyan-500 mx-auto rounded-full"></div>
          </div>

          <div className="relative">
            <div className="hidden md:block absolute top-12 left-[10%] right-[10%] h-0.5 bg-slate-200"></div>
            <div className="grid md:grid-cols-3 gap-12 relative z-10">
              <div className="text-center relative">
                <div className="w-24 h-24 mx-auto bg-white border-4 border-slate-50 rounded-full shadow-xl flex items-center justify-center mb-6 relative">
                  <div className="absolute inset-0 bg-cyan-500 rounded-full opacity-10 scale-150 animate-pulse"></div>
                  <span className="text-3xl font-extrabold text-cyan-600">1</span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Discovery & Strategy</h3>
                <p className="text-slate-600 max-w-xs mx-auto">We analyze your business, identify critical bottlenecks, and map out a custom automation blueprint for maximum ROI.</p>
              </div>

              <div className="text-center relative">
                <div className="w-24 h-24 mx-auto bg-white border-4 border-slate-50 rounded-full shadow-xl flex items-center justify-center mb-6 relative">
                  <span className="text-3xl font-extrabold text-blue-600">2</span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Custom Build & Deployment</h3>
                <p className="text-slate-600 max-w-xs mx-auto">Our expert engineers write the code, configure the APIs, and rigorously test the entire workflow before it goes live.</p>
              </div>

              <div className="text-center relative">
                <div className="w-24 h-24 mx-auto bg-white border-4 border-slate-50 rounded-full shadow-xl flex items-center justify-center mb-6 relative">
                  <span className="text-3xl font-extrabold text-purple-600">3</span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Hand-off & Optimization</h3>
                <p className="text-slate-600 max-w-xs mx-auto">You sit back and watch it work. We provide full training, ongoing technical support, and continuous optimization.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ROI / Results Section */}
      <section className="py-24 bg-[#0B1121] border-y border-slate-800 relative overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-64 bg-cyan-500 rounded-full mix-blend-screen filter blur-[150px] opacity-20 pointer-events-none"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">The Real ROI You Want</h2>
            <div className="w-20 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto rounded-full"></div>
            <p className="mt-6 text-lg text-slate-400 max-w-2xl mx-auto">
              We focus on metrics that matter. More revenue, more time, and zero manual errors.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-16">
            <div className="bg-slate-800/50 backdrop-blur border border-slate-700 rounded-2xl p-6 text-center">
              <p className="text-3xl md:text-4xl font-bold text-cyan-400 mb-2">12+ hr</p>
              <p className="text-sm text-slate-300">Average time saved per week</p>
            </div>
            <div className="bg-slate-800/50 backdrop-blur border border-slate-700 rounded-2xl p-6 text-center">
              <p className="text-3xl md:text-4xl font-bold text-cyan-400 mb-2">34%</p>
              <p className="text-sm text-slate-300">Increase in campaign ROI</p>
            </div>
            <div className="bg-slate-800/50 backdrop-blur border border-slate-700 rounded-2xl p-6 text-center">
              <p className="text-3xl md:text-4xl font-bold text-cyan-400 mb-2">91%</p>
              <p className="text-sm text-slate-300">Reduction in manual errors</p>
            </div>
            <div className="bg-slate-800/50 backdrop-blur border border-slate-700 rounded-2xl p-6 text-center">
              <p className="text-3xl md:text-4xl font-bold text-cyan-400 mb-2">100%</p>
              <p className="text-sm text-slate-300">Done-For-You Build</p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                industry: "E-Commerce Retailer",
                metric: "+£125k/mo",
                metricLabel: "Recovered Revenue",
                details: "Built a fully managed, 5-step abandoned cart and dynamic inventory sync workflow that eliminates stockouts.",
                icon: BarChart3,
                iconBg: "bg-cyan-500/10",
                iconColor: "text-cyan-400"
              },
              {
                industry: "B2B SaaS Company",
                metric: "40 hrs",
                metricLabel: "Saved Weekly",
                details: "Replaced 3 manual data-entry processes with a custom, seamless API connection between Salesforce and their proprietary app.",
                icon: Clock,
                iconBg: "bg-blue-500/10",
                iconColor: "text-blue-400"
              },
              {
                industry: "Marketing Agency",
                metric: "3x",
                metricLabel: "Faster Onboarding",
                details: "Automated client onboarding, folder creation, and initial ad campaign structure setup with zero human touch.",
                icon: Zap,
                iconBg: "bg-purple-500/10",
                iconColor: "text-purple-400"
              }
            ].map((roi, i) => {
              const Icon = roi.icon;
              return (
                <div key={i} className="bg-slate-900 border border-slate-800 rounded-2xl p-8 relative hover:border-slate-700 transition-all hover:-translate-y-1">
                  <div className={`w-14 h-14 ${roi.iconBg} rounded-xl flex items-center justify-center mb-6`}>
                    <Icon className={`w-7 h-7 ${roi.iconColor}`} />
                  </div>
                  <p className="text-slate-400 text-sm font-semibold uppercase tracking-wider mb-2">{roi.industry}</p>
                  <p className="text-4xl font-extrabold text-white mb-1">{roi.metric}</p>
                  <p className={`${roi.iconColor} font-medium mb-6`}>{roi.metricLabel}</p>
                  <div className="w-full h-px bg-slate-800 mb-6"></div>
                  <p className="text-slate-300 leading-relaxed">
                    {roi.details}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Pricing/Packages */}
      <section id="packages" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Service Packages Tailored To You</h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              Whether you need a full operational audit or an ongoing engineering partner, we have a structure that fits your needs.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto items-stretch">
            <div className="bg-white border border-slate-200 rounded-3xl p-8 shadow-sm flex flex-col">
              <h3 className="text-xl font-bold text-slate-900 mb-2">Automation Audit</h3>
              <p className="text-slate-500 text-sm mb-6 h-10">Best for identifying bottlenecks before you build.</p>
              <div className="mb-8">
                <span className="text-4xl font-extrabold text-slate-900">One-Time</span>
              </div>
              <ul className="space-y-4 mb-8 text-sm text-slate-700 flex-1">
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-cyan-500 flex-shrink-0" /> Full operational discovery session</li>
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-cyan-500 flex-shrink-0" /> Tech stack compatibility review</li>
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-cyan-500 flex-shrink-0" /> Custom automation blueprint document</li>
              </ul>
              <button 
                onClick={() => setIsAuditModalOpen(true)}
                className="w-full py-3 px-4 rounded-xl font-bold text-slate-700 bg-slate-100 hover:bg-slate-200 transition-colors">
                Book Your Audit
              </button>
            </div>

            <div className="bg-[#0B1121] border border-slate-800 rounded-3xl p-8 shadow-2xl relative transform md:-translate-y-4 flex flex-col">
              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wide">
                Most Popular
              </div>
              <h3 className="text-xl font-bold text-white mb-2">Custom Build Project</h3>
              <p className="text-slate-400 text-sm mb-6 h-10">Best for immediate implementation of high-impact workflows.</p>
              <div className="mb-8">
                <span className="text-4xl font-extrabold text-white">Project-Based</span>
              </div>
              <ul className="space-y-4 mb-8 text-sm text-slate-300 flex-1">
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-cyan-400 flex-shrink-0" /> Everything in the Audit</li>
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-cyan-400 flex-shrink-0" /> Full custom coding & API configuration</li>
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-cyan-400 flex-shrink-0" /> Rigorous QA testing and deployment</li>
              </ul>
              <button 
                onClick={() => setIsAuditModalOpen(true)}
                className="w-full py-3 px-4 rounded-xl font-bold text-slate-900 bg-cyan-400 hover:bg-cyan-300 transition-colors shadow-[0_0_15px_rgba(6,182,212,0.4)]">
                Get a Custom Proposal
              </button>
            </div>

            <div className="bg-white border border-slate-200 rounded-3xl p-8 shadow-sm flex flex-col">
              <h3 className="text-xl font-bold text-slate-900 mb-2">Automation Partner</h3>
              <p className="text-slate-500 text-sm mb-6 h-10">Best for businesses needing ongoing engineering support.</p>
              <div className="mb-8">
                <span className="text-4xl font-extrabold text-slate-900">Monthly Retainer</span>
              </div>
              <ul className="space-y-4 mb-8 text-sm text-slate-700 flex-1">
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-slate-800 flex-shrink-0" /> Unlimited workflow builds & iterations</li>
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-slate-800 flex-shrink-0" /> 24/7 monitoring and error resolution</li>
                <li className="flex items-start gap-3"><CheckCircle2 className="w-5 h-5 text-slate-800 flex-shrink-0" /> Dedicated lead engineer</li>
              </ul>
              <button 
                onClick={() => setIsAuditModalOpen(true)}
                className="w-full py-3 px-4 rounded-xl font-bold text-cyan-600 bg-cyan-50 border border-cyan-200 hover:bg-cyan-100 transition-colors">
                Contact Sales
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-24 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Got Questions? We've Got Answers.</h2>
          </div>
          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div 
                key={index} 
                className={`border rounded-2xl overflow-hidden transition-colors ${openFaq === index ? 'border-cyan-500 bg-cyan-50/30' : 'border-slate-200 bg-white'}`}
              >
                <button 
                  className="w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none"
                  onClick={() => setOpenFaq(openFaq === index ? -1 : index)}
                >
                  <span className="font-bold text-slate-900 pr-8">{faq.q}</span>
                  {openFaq === index ? (
                    <ChevronUp className="w-5 h-5 text-cyan-500 flex-shrink-0" />
                  ) : (
                    <ChevronDown className="w-5 h-5 text-slate-400 flex-shrink-0" />
                  )}
                </button>
                <div 
                  className={`px-6 overflow-hidden transition-all duration-300 ease-in-out ${openFaq === index ? 'max-h-48 pb-5 opacity-100' : 'max-h-0 opacity-0'}`}
                >
                  <p className="text-slate-600 leading-relaxed">{faq.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-24 bg-[#0B1121] relative overflow-hidden">
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute -top-24 -right-24 w-96 h-96 bg-blue-600 rounded-full mix-blend-screen filter blur-[100px] opacity-20"></div>
          <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-cyan-500 rounded-full mix-blend-screen filter blur-[100px] opacity-20"></div>
        </div>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <h2 className="text-4xl md:text-5xl font-extrabold text-white mb-6">Stop Doing Manually What AI Can Do Instantly.</h2>
          <p className="text-xl text-slate-300 mb-10 max-w-2xl mx-auto">
            Join hundreds of retailers and marketers who let our agency build their automated path to faster growth.
          </p>
          <button 
            onClick={() => setIsAuditModalOpen(true)}
            className="flex items-center justify-center gap-2 mx-auto bg-gradient-to-r from-cyan-400 to-blue-500 hover:from-cyan-300 hover:to-blue-400 text-slate-900 font-extrabold text-lg py-4 px-10 rounded-full transition-all transform hover:scale-105 shadow-[0_0_30px_rgba(6,182,212,0.5)] mb-4">
            <PhoneCall className="w-5 h-5"/>
            Book Your Free Strategy Call
          </button>
          <p className="text-slate-400 text-sm">No commitment required. Find out what's possible in just 30 minutes.</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 border-t border-slate-800 pt-16 pb-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
            <div className="lg:col-span-2">
              <div className="flex items-center gap-2 mb-6">
                <div className="w-8 h-8 rounded bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center">
                  <Workflow className="w-5 h-5 text-white" />
                </div>
                <span className="font-bold text-xl text-white">MasterAutomation</span>
              </div>
              <p className="text-slate-400 text-sm mb-6 max-w-xs leading-relaxed">
                A premium, Done-For-You automation agency empowering businesses to scale seamlessly with intelligent workflows.
              </p>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4 uppercase text-sm tracking-wider">Services</h4>
              <ul className="space-y-3">
                <li><a href="#services" className="text-slate-400 hover:text-cyan-400 text-sm transition-colors">Custom Architecture</a></li>
                <li><a href="#packages" className="text-slate-400 hover:text-cyan-400 text-sm transition-colors">Pricing Packages</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4 uppercase text-sm tracking-wider">Agency</h4>
              <ul className="space-y-3">
                <li><a href="#" className="text-slate-400 hover:text-cyan-400 text-sm transition-colors">About Us</a></li>
                <li><a href="#" className="text-slate-400 hover:text-cyan-400 text-sm transition-colors">Case Studies</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4 uppercase text-sm tracking-wider">Social</h4>
              <div className="flex gap-4">
                <a href="#" className="text-slate-500 hover:text-cyan-400 transition-colors"><Twitter className="w-5 h-5" /></a>
                <a href="#" className="text-slate-500 hover:text-cyan-400 transition-colors"><Linkedin className="w-5 h-5" /></a>
              </div>
            </div>
          </div>
          <div className="pt-8 border-t border-slate-800 text-center">
            <p className="text-slate-500 text-xs">
              &copy; {new Date().getFullYear()} MasterAutomationTools.com. All rights reserved.
            </p>
          </div>
        </div>
      </footer>

      {/* Audit Booking Modal */}
      {isAuditModalOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-900/80 backdrop-blur-sm" onClick={() => setIsAuditModalOpen(false)}></div>
          <div className="relative bg-white rounded-3xl w-full max-w-lg shadow-2xl overflow-hidden">
            <div className="bg-[#0B1121] p-6 text-white flex justify-between items-start">
              <div>
                <h3 className="text-2xl font-bold mb-1">Book Your Free Audit</h3>
                <p className="text-slate-400 text-sm">Discover how much time and money you could save.</p>
              </div>
              <button onClick={() => setIsAuditModalOpen(false)} className="text-slate-400 hover:text-white transition-colors p-1">
                <X className="w-6 h-6" />
              </button>
            </div>
            
            <div className="p-6 md:p-8">
              {auditFormStatus === 'success' ? (
                <div className="text-center py-8">
                  <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <CheckCircle2 className="w-8 h-8 text-emerald-500" />
                  </div>
                  <h4 className="text-xl font-bold text-slate-900 mb-2">Request Received!</h4>
                  <p className="text-slate-600 mb-6">Our lead engineer will be in touch within 24 hours.</p>
                  <button onClick={() => { setIsAuditModalOpen(false); setAuditFormStatus('idle'); }} className="w-full py-3 px-4 rounded-xl font-bold text-slate-900 bg-cyan-400 hover:bg-cyan-300 transition-colors">
                    Back to Website
                  </button>
                </div>
              ) : (
                <form 
                  onSubmit={(e) => {
                    e.preventDefault();
                    setAuditFormStatus('submitting');
                    setTimeout(() => setAuditFormStatus('success'), 1200);
                  }}
                  className="space-y-4"
                >
                  <div className="grid grid-cols-2 gap-4">
                    <input type="text" required className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg" placeholder="First Name" />
                    <input type="text" required className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg" placeholder="Last Name" />
                  </div>
                  <input type="email" required className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg" placeholder="Work Email" />
                  <textarea required rows="3" className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg resize-none" placeholder="What is your biggest manual bottleneck?"></textarea>
                  <button type="submit" disabled={auditFormStatus === 'submitting'} className="w-full py-3.5 px-4 rounded-xl font-bold text-slate-900 bg-cyan-400 hover:bg-cyan-300 transition-colors flex items-center justify-center gap-2">
                    {auditFormStatus === 'submitting' ? 'Processing...' : 'Schedule My Free Audit'}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;