import React, { useState, useEffect, useRef } from 'react';
import { 
  Building2, 
  BarChart3, 
  Users, 
  Layers, 
  Zap, 
  CheckCircle2, 
  ArrowRight, 
  Menu, 
  X, 
  ChevronDown,
  Mail,
  PieChart,
  ShieldCheck,
  Smartphone,
  Bot,
  Eye,
  Share2, 
  Clock,
  MapPin,
  FileText,
  MessageSquare,
  Send,
  Download
} from 'lucide-react';

/* --- CUSTOM CSS FOR ANIMATIONS & THEME --- */
const customStyles = `
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-float { animation: float 6s ease-in-out infinite; }
  
  .fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, visibility;
  }
  .fade-in-section.is-visible {
    opacity: 1;
    transform: none;
  }
  
  /* LIGHT THEME GLASS CARD (Solid Tints, No Gradients) */
  .glass-card {
    background: rgba(255, 255, 255, 0.85); /* More opaque, solid feel */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(179, 58, 58, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
  }

  /* DARK THEME GLASS CARD */
  .glass-card-dark {
    background: rgba(46, 46, 46, 0.9); /* Solid dark */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  }
  
  /* SOLID COLORS - NO GRADIENTS */
  .text-highlight {
    color: #B33A3A; /* Solid Brick Red */
  }
  
  .bg-primary {
    background-color: #B33A3A;
  }

  /* --- SOLID GLASS BUTTON STYLES --- */
  .brikly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    /* Solid Transparent Base - No Gradient */
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(46, 46, 46, 0.2);
    
    color: #2E2E2E;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 9999px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: ui-sans-serif, system-ui, sans-serif;
    position: relative;
    overflow: hidden;
  }

  /* Hover State - Solid Color Shift */
  .brikly-btn:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.3);
    border-color: #B33A3A;
    color: #B33A3A;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  /* Primary Button Variant (Solid Red) */
  .brikly-btn.primary {
    color: #FFFFFF;
    background-color: #B33A3A; /* Solid Red */
    border: 1px solid #B33A3A;
  }
  
  .brikly-btn.primary:hover {
    background-color: #962e2e; /* Darker Red on Hover */
    border-color: #962e2e;
    color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(179, 58, 58, 0.3);
  }

  /* Active: Press Down */
  .brikly-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* Inventory Grid Animations */
  .unit-box {
    transition: all 0.3s ease;
  }
  .unit-box:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  }

  /* Chat Animation */
  .chat-bubble {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  @keyframes popIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
  }
  .typing-dot:nth-child(1) { animation-delay: -0.32s; }
  .typing-dot:nth-child(2) { animation-delay: -0.16s; }
  @keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
  }
`;

/* --- REUSABLE COMPONENTS --- */

const useOnScreen = (ref) => {
  const [isIntersecting, setIntersecting] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIntersecting(entry.isIntersecting),
      { threshold: 0.1 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => { if (ref.current) observer.unobserve(ref.current); };
  }, [ref]);
  return isIntersecting;
};

const FadeInSection = ({ children, className = "" }) => {
  const ref = useRef(null);
  const isVisible = useOnScreen(ref);
  return (
    <div ref={ref} className={`fade-in-section ${isVisible ? 'is-visible' : ''} ${className}`}>
      {children}
    </div>
  );
};

const Button = ({ children, primary = false, className = "", onClick, ...props }) => {
  return (
    <button 
      onClick={onClick}
      className={`brikly-btn ${primary ? 'primary' : ''} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

/* --- FORM MODAL COMPONENT --- */
const ConsultationModal = ({ isOpen, onClose }) => {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    project: ''
  });

  if (!isOpen) return null;

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Construct Mailto Link
    const subject = `New Consultation Request from ${formData.name}`;
    const body = `Name: ${formData.name}%0D%0APhone: ${formData.phone}%0D%0AEmail: ${formData.email}%0D%0AProject Interest: ${formData.project}%0D%0A%0D%0ASent from Brikly Website.`;
    
    window.location.href = `mailto:vivek.baseinfr@gmail.com?subject=${subject}&body=${body}`;
    
    // Optional: Close modal after delay
    setTimeout(() => {
      onClose();
      alert("Opening your email client to send the request!");
    }, 500);
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center px-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm" 
        onClick={onClose}
      ></div>
      
      {/* Modal Content */}
      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 animate-float">
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"
        >
          <X className="w-6 h-6" />
        </button>
        
        <div className="text-center mb-6">
          <div className="w-12 h-12 bg-[#B33A3A]/10 rounded-full flex items-center justify-center mx-auto mb-4 text-[#B33A3A]">
            <Mail className="w-6 h-6" />
          </div>
          <h3 className="text-2xl font-bold text-[#2E2E2E]">Book Consultation</h3>
          <p className="text-gray-500 text-sm mt-1">Get expert advice on implementing Brikly.</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Full Name</label>
            <input 
              required
              type="text" 
              placeholder="John Doe"
              className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#B33A3A] focus:ring-1 focus:ring-[#B33A3A] outline-none transition-all"
              onChange={(e) => setFormData({...formData, name: e.target.value})}
            />
          </div>
          
          <div>
            <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Phone Number</label>
            <input 
              required
              type="tel" 
              placeholder="+91 98765 43210"
              className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#B33A3A] focus:ring-1 focus:ring-[#B33A3A] outline-none transition-all"
              onChange={(e) => setFormData({...formData, phone: e.target.value})}
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Email Address</label>
            <input 
              required
              type="email" 
              placeholder="john@company.com"
              className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#B33A3A] focus:ring-1 focus:ring-[#B33A3A] outline-none transition-all"
              onChange={(e) => setFormData({...formData, email: e.target.value})}
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Project / Requirement</label>
            <textarea 
              rows="3"
              placeholder="Tell us about your needs..."
              className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#B33A3A] focus:ring-1 focus:ring-[#B33A3A] outline-none transition-all resize-none"
              onChange={(e) => setFormData({...formData, project: e.target.value})}
            ></textarea>
          </div>

          <button 
            type="submit"
            className="w-full bg-[#B33A3A] text-white font-bold py-3 rounded-lg hover:bg-[#962e2e] transition-colors shadow-lg shadow-[#B33A3A]/20"
          >
            Send Request
          </button>
          
          <p className="text-xs text-center text-gray-400 mt-4">
            Submitting will open your email client.
          </p>
        </form>
      </div>
    </div>
  );
};

/* --- INTERACTIVE CITY BUILDER COMPONENT (THREE.JS) --- */
const Hero3D = () => {
  const mountRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js";
    script.async = true;
    
    script.onload = () => {
      if (!window.THREE || !mountRef.current) return;
      const THREE = window.THREE;

      // --- SCENE SETUP ---
      const scene = new THREE.Scene();
      scene.fog = new THREE.Fog(0xF5F5F5, 10, 60); 
      scene.background = new THREE.Color(0xF5F5F5);

      const camera = new THREE.PerspectiveCamera(75, mountRef.current.clientWidth / mountRef.current.clientHeight, 0.1, 1000);
      camera.position.set(0, 12, 18);
      camera.lookAt(0, 0, 0);

      const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
      renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      mountRef.current.appendChild(renderer.domElement);

      // --- LIGHTING ---
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Increased ambient for solid color visibility
      scene.add(ambientLight);

      // Solid White Light for true colors
      const dirLight = new THREE.DirectionalLight(0xffffff, 1.0); 
      dirLight.position.set(20, 40, 20);
      dirLight.castShadow = true;
      scene.add(dirLight);
      
      const redLight = new THREE.PointLight(0xB33A3A, 1, 40); // Soft fill light
      redLight.position.set(-10, 5, -10);
      scene.add(redLight);

      // --- INSTANCED MESH (SOLID RED BRICKS) ---
      const geometry = new THREE.BoxGeometry(0.8, 1, 0.8);
      // Move pivot to bottom so scaling happens upwards
      geometry.translate(0, 0.5, 0); 
      
      // Solid Opaque Material, No Glass, No Gradient
      const material = new THREE.MeshStandardMaterial({
        color: 0xB33A3A, // Solid Brick Red
        roughness: 0.6,  // Matte finish like real brick
        metalness: 0.1,  // Slight sheen
        flatShading: true, // Enhances the solid/low-poly look
      });

      const gridSize = 40;
      const count = gridSize * gridSize;
      const mesh = new THREE.InstancedMesh(geometry, material, count);
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      scene.add(mesh);

      // Initialize Matrix
      const dummy = new THREE.Object3D();
      const instanceScales = new Float32Array(count).fill(0.1); // Start flat
      
      // Initial Layout
      let i = 0;
      for (let x = -gridSize / 2; x < gridSize / 2; x++) {
        for (let z = -gridSize / 2; z < gridSize / 2; z++) {
          dummy.position.set(x, 0, z);
          dummy.scale.set(1, 0.1, 1); // Flat initially
          dummy.updateMatrix();
          mesh.setMatrixAt(i++, dummy.matrix);
        }
      }
      mesh.instanceMatrix.needsUpdate = true;

      // --- MOUSE INTERACTION SETUP ---
      const raycaster = new THREE.Raycaster();
      const mouse = new THREE.Vector2(9999, 9999);
      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
      
      const onMouseMove = (event) => {
        const rect = mountRef.current.getBoundingClientRect();
        mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
        mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
      };
      
      window.addEventListener('mousemove', onMouseMove);

      // --- ANIMATION LOOP ---
      const animate = () => {
        requestAnimationFrame(animate);

        raycaster.setFromCamera(mouse, camera);
        const target = new THREE.Vector3();
        raycaster.ray.intersectPlane(plane, target);

        let idx = 0;
        for (let x = -gridSize / 2; x < gridSize / 2; x++) {
          for (let z = -gridSize / 2; z < gridSize / 2; z++) {
            
            // Logic: Distance from mouse determines target height
            const dx = x - (target ? target.x : 999);
            const dz = z - (target ? target.z : 999);
            const dist = Math.sqrt(dx*dx + dz*dz);
            
            // "City" building effect
            let targetHeight = 0.1; // Ground level
            if (dist < 6) {
               // The closer, the taller. Max height around 6 units.
               targetHeight = Math.max(0.1, (6 - dist) + Math.random() * 0.5); 
            }

            // Smooth Lerp
            instanceScales[idx] += (targetHeight - instanceScales[idx]) * 0.1;

            dummy.position.set(x, 0, z);
            dummy.scale.set(1, instanceScales[idx], 1);
            dummy.updateMatrix();
            mesh.setMatrixAt(idx, dummy.matrix);
            
            idx++;
          }
        }
        mesh.instanceMatrix.needsUpdate = true;
        renderer.render(scene, camera);
      };

      animate();

      // Handle Resize
      const handleResize = () => {
        if (!mountRef.current) return;
        camera.aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
      };
      window.addEventListener('resize', handleResize);

      // Cleanup
      return () => {
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('resize', handleResize);
        if (mountRef.current) mountRef.current.removeChild(renderer.domElement);
      };
    };

    document.body.appendChild(script);
    return () => { 
        if(document.body.contains(script)) document.body.removeChild(script); 
    }
  }, []);

  return <div ref={mountRef} className="absolute inset-0 z-0 opacity-100" style={{ pointerEvents: 'none' }} />;
};

/* --- MAIN APP COMPONENT --- */

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isAnnual, setIsAnnual] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  // Chat Bot Animation State
  const [chatMessages, setChatMessages] = useState([]);
  const [isTyping, setIsTyping] = useState(false);
  const chatContainerRef = useRef(null);

  // Chat Sequence Data
  const chatSequence = [
    { type: 'user', text: "Show me park facing plots, North facing.", delay: 1000 },
    { type: 'bot', text: "I found 3 premium units matching your criteria:\n• Plot A-12 (1500 sqft)\n• Plot B-05 (1800 sqft)\n• Plot C-09 (1200 sqft)", delay: 2000 },
    { type: 'user', text: "What is the price of A-12?", delay: 4000 },
    { type: 'bot', text: "The base price for Unit A-12 is ₹75 Lakhs.", delay: 5000 },
    { type: 'user', text: "Send me the total costing.", delay: 7000 },
    { type: 'bot', text: "Generating Cost Sheet... 📄", isCostSheet: true, delay: 8500 }
  ];

  useEffect(() => {
    let timeoutIds = [];
    let startTime = 0;

    const runChatSequence = () => {
      setChatMessages([]); // Reset
      
      chatSequence.forEach((msg, index) => {
        // Show typing indicator before bot messages
        if (msg.type === 'bot') {
           const typingDelay = msg.delay - 1000;
           const tId1 = setTimeout(() => setIsTyping(true), typingDelay);
           timeoutIds.push(tId1);
        }

        const tId2 = setTimeout(() => {
          setIsTyping(false);
          setChatMessages(prev => [...prev, msg]);
          // Scroll to bottom
          if (chatContainerRef.current) {
            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
          }
        }, msg.delay);
        timeoutIds.push(tId2);
      });

      // Loop the animation
      const totalDuration = chatSequence[chatSequence.length - 1].delay + 4000;
      const loopId = setTimeout(runChatSequence, totalDuration);
      timeoutIds.push(loopId);
    };

    // Start observer to trigger animation only when visible could be added here
    // For now, just run it
    runChatSequence();

    return () => timeoutIds.forEach(clearTimeout);
  }, []);


  // Pricing Data based on provided document
  const pricingData = [
    {
      title: "Starter",
      target: "Small Developers",
      priceMonthly: 5000,
      priceAnnual: 4150, // ~17% off
      features: [
        "5 Users",
        "500 Leads",
        "3 Active Projects",
        "2 GB Storage",
        "Basic Dashboard",
        "1 Landing Page"
      ],
      notIncluded: ["Bot Assistant", "Adv. Analytics"],
      color: "from-[#B33A3A] to-[#D4AF37]" // Brick to Gold
    },
    {
      title: "Professional",
      target: "Mid-size Developers",
      priceMonthly: 15000,
      priceAnnual: 12450,
      popular: true,
      features: [
        "20 Users",
        "2,000 Leads",
        "10 Active Projects",
        "10 GB Storage",
        "Adv. Inventory & Costing",
        "Bot Assistant (Basic)",
        "50 Email Automations"
      ],
      notIncluded: ["White-labeling"],
      color: "from-[#B33A3A] to-[#2E2E2E]" // Brick to Charcoal
    },
    {
      title: "Enterprise",
      target: "Large Developers",
      priceMonthly: 50000,
      priceAnnual: 41500,
      features: [
        "Unlimited Users",
        "Unlimited Leads",
        "Unlimited Projects",
        "50 GB Storage",
        "Full AI Bot Assistant",
        "Priority Support",
        "White-label Option"
      ],
      notIncluded: [],
      color: "from-[#2E2E2E] to-[#D4AF37]" // Charcoal to Gold
    }
  ];

  const modules = [
    { name: "Landing Page Builder", price: "₹1,000", icon: <Layers className="w-6 h-6 text-[#B33A3A]" /> },
    { name: "Inventory & Costing", price: "₹2,500", icon: <Building2 className="w-6 h-6 text-[#D4AF37]" /> },
    { name: "Marketing Collateral", price: "₹2,000", icon: <PieChart className="w-6 h-6 text-[#2E2E2E]" /> },
    { name: "Bot Assistant", price: "₹2,000", icon: <Bot className="w-6 h-6 text-[#B33A3A]" /> },
    { name: "Email Automation", price: "₹1,500", icon: <Mail className="w-6 h-6 text-[#D4AF37]" /> },
    { name: "Advanced Analytics", price: "₹3,000", icon: <BarChart3 className="w-6 h-6 text-[#2E2E2E]" /> },
  ];

  return (
    <div className="min-h-screen bg-[#F5F5F5] text-[#2E2E2E] font-sans selection:bg-[#B33A3A] selection:text-white overflow-x-hidden">
      <style>{customStyles}</style>
      
      {/* Modal */}
      <ConsultationModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />

      {/* --- NAVIGATION --- */ }
      <nav className="fixed w-full z-50 top-0 start-0 border-b border-[#2E2E2E]/10 bg-[#F5F5F5]/80 backdrop-blur-xl">
        <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-between px-6 py-4">
          <a href="#" className="flex items-center space-x-2 rtl:space-x-reverse">
            <div className="w-10 h-10 bg-[#B33A3A] rounded flex items-center justify-center shadow-lg shadow-[#B33A3A]/30">
              <Building2 className="text-white w-6 h-6" />
            </div>
            <span className="self-center text-2xl font-bold whitespace-nowrap text-[#2E2E2E] tracking-tight">Brikly</span>
          </a>
          
          <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
            <Button primary className="hidden md:flex text-sm py-2 px-5" onClick={() => setIsModalOpen(true)}>Get Started</Button>
            <button 
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden hover:bg-[#2E2E2E]/5 text-[#2E2E2E] focus:outline-none"
            >
              {isMenuOpen ? <X /> : <Menu />}
            </button>
          </div>

          <div className={`items-center justify-between w-full md:flex md:w-auto md:order-1 ${isMenuOpen ? 'block' : 'hidden'}`}>
            <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border border-[#2E2E2E]/10 rounded-lg bg-white md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent">
              {['Features', 'Modules', 'Pricing', 'Resources'].map((item) => (
                <li key={item}>
                  <a href={`#${item.toLowerCase()}`} className="block py-2 px-3 text-[#2E2E2E]/70 rounded hover:text-[#B33A3A] md:p-0 transition-colors font-semibold">
                    {item}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </nav>

      {/* --- HERO SECTION WITH INTERACTIVE CITY BUILDER BACKGROUND --- */ }
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-[#F5F5F5] min-h-[800px]">
        {/* 3D Scene Container */}
        <Hero3D />

        <div className="px-6 mx-auto max-w-7xl text-center relative z-10 pointer-events-none">
          <FadeInSection>
            {/* Tagline Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/70 backdrop-blur-sm border border-[#B33A3A]/20 text-sm font-bold text-[#B33A3A] mb-8 hover:bg-white transition-colors cursor-default shadow-sm pointer-events-auto">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#D4AF37] opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-[#B33A3A]"></span>
              </span>
              <span className="text-[#2E2E2E]">Brikly 2.0</span> is now live with AI Reports
            </div>
            
            <h1 className="mb-6 text-5xl font-extrabold tracking-tight leading-tight md:text-7xl text-[#2E2E2E] drop-shadow-sm">
              Build Deals, <br />
              {/* Removed gradient here - solid color used */}
              <span className="text-highlight">Brick by Brick.</span>
            </h1>
            
            <p className="mb-10 text-lg font-medium text-[#2E2E2E]/80 lg:text-xl sm:px-16 lg:px-48 max-w-4xl mx-auto backdrop-blur-xl p-4 rounded-xl">
              The modular SaaS CRM tailored for real estate developers. Manage inventory, orchestrate broker networks, and close deals with solid precision.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pointer-events-auto">
              <Button primary className="w-full sm:w-auto text-lg px-8" onClick={() => setIsModalOpen(true)}>Start Free Trial</Button>
              <Button className="w-full sm:w-auto text-lg px-8 group" onClick={() => setIsModalOpen(true)}>
                Watch Demo <Zap className="w-4 h-4 ml-2 text-[#D4AF37] group-hover:text-[#B33A3A] transition-colors" />
              </Button>
            </div>
          </FadeInSection>
        </div>
      </section>

      {/* --- STATS SECTION --- */}
      <section className="py-12 border-y border-[#2E2E2E]/10 bg-white">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            {[
                { label: "Leads Processed", value: "10M+" },
                { label: "Active Projects", value: "500+" },
                { label: "Brokers Managed", value: "25k" },
                { label: "Uptime", value: "99.9%" },
            ].map((stat, i) => (
                <div key={i}>
                    <h3 className="text-3xl md:text-4xl font-extrabold text-[#2E2E2E] mb-1">{stat.value}</h3>
                    <p className="text-[#B33A3A] font-medium text-sm uppercase tracking-wider">{stat.label}</p>
                </div>
            ))}
        </div>
      </section>

      {/* --- INVENTORY MODULE SECTION --- */}
      <section className="py-24 bg-[#F5F5F5] relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col lg:flex-row items-center gap-16">
            <FadeInSection className="lg:w-1/2">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded bg-[#B33A3A]/10 text-[#B33A3A] font-bold text-xs uppercase tracking-wider mb-4 border border-[#B33A3A]/20">
                <Building2 className="w-4 h-4" /> Smart Inventory Command
              </div>
              <h2 className="text-4xl md:text-5xl font-extrabold text-[#2E2E2E] mb-6 leading-tight">
                Your Digital <span className="text-highlight">Stockyard.</span>
              </h2>
              <p className="text-lg text-[#2E2E2E]/70 mb-8 leading-relaxed">
                Forget Excel sheets. Visualize your entire project inventory in a real-time interactive grid. Block units, update cost sheets instantly, and prevent double-booking.
              </p>
              
              <ul className="space-y-4 mb-8">
                {[
                  "Real-time Available/Sold/Blocked status",
                  "One-click Unit Blocking from Mobile",
                  "Dynamic Cost Sheet Generation",
                  "Inventory History Logs"
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 text-[#2E2E2E]">
                    <div className="w-6 h-6 rounded-full bg-[#D4AF37]/20 flex items-center justify-center text-[#B33A3A]">
                      <CheckCircle2 className="w-4 h-4" />
                    </div>
                    {item}
                  </li>
                ))}
              </ul>
              
              <Button onClick={() => setIsModalOpen(true)}>Explore Inventory Module</Button>
            </FadeInSection>

            <FadeInSection className="lg:w-1/2 relative">
               <div className="absolute inset-0 bg-white/50 rounded-2xl transform rotate-2"></div>
               <div className="glass-card bg-white p-6 rounded-2xl relative shadow-2xl border border-white/40">
                  <div className="flex justify-between items-center mb-6 pb-4 border-b border-gray-100">
                    <div>
                      <h4 className="font-bold text-xl text-[#2E2E2E]">Tower A - Floor 5</h4>
                      <p className="text-xs text-gray-500">Residential Phase 1</p>
                    </div>
                    <div className="flex gap-2 text-xs font-semibold">
                      <span className="flex items-center gap-1"><div className="w-2 h-2 rounded-full bg-green-500"></div> Avail</span>
                      <span className="flex items-center gap-1"><div className="w-2 h-2 rounded-full bg-red-500"></div> Sold</span>
                      <span className="flex items-center gap-1"><div className="w-2 h-2 rounded-full bg-yellow-500"></div> Blocked</span>
                    </div>
                  </div>
                  
                  {/* Interactive Unit Grid Visualization */}
                  <div className="grid grid-cols-4 gap-3">
                    {Array.from({ length: 12 }).map((_, i) => {
                      // Simulating different unit statuses
                      let statusColor = "bg-green-50 border-green-200 text-green-700"; // Available
                      let statusLabel = "₹1.2Cr";
                      
                      if ([2, 5, 9].includes(i)) {
                        statusColor = "bg-red-50 border-red-200 text-red-700 opacity-60"; // Sold
                        statusLabel = "SOLD";
                      } else if ([1, 7].includes(i)) {
                        statusColor = "bg-yellow-50 border-yellow-200 text-yellow-700"; // Blocked
                        statusLabel = "Blocked";
                      }

                      return (
                        <div key={i} className={`unit-box p-3 rounded border ${statusColor} text-center cursor-pointer relative overflow-hidden group`}>
                           <div className="text-xs font-bold text-gray-500 mb-1">50{i+1}</div>
                           <div className="font-bold text-sm">{statusLabel}</div>
                           <div className="absolute inset-0 bg-white/80 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                              <span className="text-[10px] font-bold uppercase tracking-wider text-black">View</span>
                           </div>
                        </div>
                      )
                    })}
                  </div>
                  
                  <div className="mt-6 flex justify-between items-center bg-gray-50 p-3 rounded border border-gray-100">
                     <span className="text-sm font-medium text-gray-600">Total Valuation</span>
                     <span className="text-lg font-bold text-[#B33A3A]">₹ 42.5 Cr</span>
                  </div>
               </div>
            </FadeInSection>
          </div>
        </div>
      </section>

      {/* --- MARKETING TRACKING SECTION --- */}
      <section className="py-24 bg-[#2E2E2E] text-white relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col lg:flex-row-reverse items-center gap-16">
            <FadeInSection className="lg:w-1/2">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded bg-[#D4AF37]/20 text-[#D4AF37] font-bold text-xs uppercase tracking-wider mb-4 border border-[#D4AF37]/30">
                <Eye className="w-4 h-4" /> Marketing Intelligence
              </div>
              <h2 className="text-4xl md:text-5xl font-extrabold mb-6 leading-tight">
                Stop guessing — <span className="text-[#D4AF37]">start knowing.</span>
              </h2>
              <p className="text-lg text-gray-300 mb-8 leading-relaxed">
                Get real-time insights when clients view your brochure, cost sheet, or walkthrough video. <br className="hidden md:block" /> Follow up smarter, close faster.
              </p>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
                <div className="p-4 rounded bg-white/5 border border-white/10">
                  <Share2 className="w-6 h-6 text-[#D4AF37] mb-3" />
                  <h4 className="font-bold mb-1">Instant Sharing</h4>
                  <p className="text-sm text-gray-400">Share brochures & price lists with a single click.</p>
                </div>
                <div className="p-4 rounded bg-white/5 border border-white/10">
                  <Clock className="w-6 h-6 text-[#D4AF37] mb-3" />
                  <h4 className="font-bold mb-1">Time Tracking</h4>
                  <p className="text-sm text-gray-400">See how long they spent viewing the page.</p>
                </div>
              </div>
              
              <Button primary className="bg-[#D4AF37] text-black hover:bg-white shadow-none border-none" onClick={() => setIsModalOpen(true)}>Track Client Engagement Now</Button>
            </FadeInSection>

            <FadeInSection className="lg:w-1/2">
              <div className="glass-card-dark p-8 rounded-2xl relative border border-white/10">
                 {/* Decorative Glow */}
                 <div className="absolute -top-10 -left-10 w-32 h-32 bg-[#B33A3A] rounded-full blur-[60px] opacity-30"></div>
                 
                 <div className="flex items-center justify-between mb-8">
                    <h3 className="text-xl font-bold">Live Activity Feed</h3>
                    <div className="flex gap-2">
                       <span className="w-3 h-3 rounded-full bg-red-500"></span>
                       <span className="w-3 h-3 rounded-full bg-yellow-500"></span>
                       <span className="w-3 h-3 rounded-full bg-green-500"></span>
                    </div>
                 </div>

                 {/* Activity Items */}
                 <div className="space-y-4">
                    {[
                      { user: "Rajesh Kumar", action: "opened", file: "Tower B Brochure", time: "Just now", icon: <FileText className="w-4 h-4" />, color: "text-blue-400" },
                      { user: "Amit Shah", action: "downloaded", file: "Cost Sheet", time: "5 mins ago", icon: <ArrowRight className="w-4 h-4 rotate-90" />, color: "text-green-400" },
                      { user: "Priya Singh", action: "viewed", file: "Walkthrough Video", time: "12 mins ago", icon: <Eye className="w-4 h-4" />, color: "text-[#D4AF37]" }
                    ].map((activity, idx) => (
                      <div key={idx} className="flex items-center gap-4 p-4 rounded-lg bg-white/5 border border-white/5 hover:bg-white/10 transition-colors animate-float" style={{ animationDelay: `${idx * 0.5}s`, animationDuration: '8s' }}>
                         <div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center border border-white/10">
                            <span className="font-bold text-xs">{activity.user.charAt(0)}</span>
                         </div>
                         <div className="flex-1">
                            <p className="text-sm text-gray-200">
                               <span className="font-bold">{activity.user}</span> {activity.action} <span className={`${activity.color} font-medium`}>{activity.file}</span>
                            </p>
                            <div className="flex items-center gap-2 mt-1">
                               <MapPin className="w-3 h-3 text-gray-500" />
                               <span className="text-xs text-gray-500">Mumbai, India</span>
                            </div>
                         </div>
                         <span className="text-xs text-gray-500 whitespace-nowrap">{activity.time}</span>
                      </div>
                    ))}
                 </div>
                 
                 {/* Floating Notification Toast Simulation */}
                 <div className="absolute -bottom-6 -right-6 bg-[#B33A3A] text-white p-4 rounded-lg shadow-xl flex items-center gap-3 w-64 animate-bounce" style={{ animationDuration: '3s' }}>
                    <div className="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                    <div>
                       <p className="text-xs font-bold uppercase opacity-80">New Interaction</p>
                       <p className="text-sm font-bold">Client opened Quote #202</p>
                    </div>
                 </div>
              </div>
            </FadeInSection>
          </div>
        </div>
      </section>

      {/* --- NEW: AI SALES ASSISTANT (CHAT BOT) SECTION --- */}
      <section className="py-24 bg-[#F5F5F5] relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col lg:flex-row items-center gap-16">
            
            {/* Left: Text Content */}
            <FadeInSection className="lg:w-1/2">
               <div className="inline-flex items-center gap-2 px-3 py-1 rounded bg-[#B33A3A]/10 text-[#B33A3A] font-bold text-xs uppercase tracking-wider mb-4 border border-[#B33A3A]/20">
                 <Bot className="w-4 h-4" /> AI Sales Assistant
               </div>
               <h2 className="text-4xl md:text-5xl font-extrabold text-[#2E2E2E] mb-6 leading-tight">
                 Your 24/7 Sales <span className="text-highlight">Powerhouse.</span>
               </h2>
               <p className="text-lg text-[#2E2E2E]/70 mb-8 leading-relaxed">
                 Handle thousands of lead queries instantly. From checking inventory availability to generating complex cost sheets, the Brikly AI Bot does it all via WhatsApp or Web Chat.
               </p>
               <div className="flex gap-4">
                 <Button onClick={() => setIsModalOpen(true)}>Try AI Demo</Button>
               </div>
            </FadeInSection>

            {/* Right: Phone Simulator with Live Chat */}
            <FadeInSection className="lg:w-1/2 flex justify-center relative">
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-[#D4AF37]/10 rounded-full blur-[80px] -z-10"></div>
               
               {/* Phone Bezel */}
               <div className="w-[340px] h-[650px] bg-[#2E2E2E] rounded-[40px] p-3 shadow-2xl relative border-4 border-[#2E2E2E]">
                  {/* Screen */}
                  <div className="bg-white w-full h-full rounded-[30px] overflow-hidden flex flex-col relative">
                     {/* Status Bar */}
                     <div className="h-8 bg-[#B33A3A] w-full flex items-center justify-between px-6 text-white text-[10px]">
                        <span>9:41</span>
                        <div className="w-16 h-4 bg-black/20 rounded-full"></div>
                        <span>100%</span>
                     </div>
                     
                     {/* Chat Header */}
                     <div className="p-4 bg-white border-b border-gray-100 flex items-center gap-3 shadow-sm z-10">
                        <div className="w-10 h-10 rounded-full bg-[#B33A3A] flex items-center justify-center text-white">
                           <Bot className="w-6 h-6" />
                        </div>
                        <div>
                           <h4 className="font-bold text-[#2E2E2E]">Brikly Assistant</h4>
                           <p className="text-xs text-green-500 flex items-center gap-1">
                              <span className="w-2 h-2 bg-green-500 rounded-full"></span> Online
                           </p>
                        </div>
                     </div>

                     {/* Chat Area */}
                     <div className="flex-1 bg-gray-50 p-4 overflow-y-auto space-y-4 no-scrollbar scroll-smooth" ref={chatContainerRef}>
                        <div className="text-center text-xs text-gray-400 my-2">Today</div>
                        
                        {/* Messages Loop */}
                        {chatMessages.map((msg, i) => (
                           <div key={i} className={`flex ${msg.type === 'user' ? 'justify-end' : 'justify-start'} chat-bubble`}>
                              <div className={`max-w-[80%] p-3 rounded-2xl text-sm leading-relaxed shadow-sm ${
                                 msg.type === 'user' 
                                 ? 'bg-[#B33A3A] text-white rounded-br-none' 
                                 : 'bg-white text-[#2E2E2E] border border-gray-200 rounded-bl-none'
                              }`}>
                                 {msg.isCostSheet ? (
                                    <div className="space-y-2">
                                       <p className="font-bold border-b border-gray-100 pb-1 mb-1">Cost Sheet Generated</p>
                                       <div className="flex justify-between text-xs text-gray-500"><span>Base Price:</span> <span>₹75.00 L</span></div>
                                       <div className="flex justify-between text-xs text-gray-500"><span>GST (5%):</span> <span>₹3.75 L</span></div>
                                       <div className="flex justify-between text-xs text-gray-500"><span>PLC:</span> <span>₹2.00 L</span></div>
                                       <div className="flex justify-between font-bold text-[#B33A3A] pt-1 border-t border-gray-100 mt-1"><span>Total:</span> <span>₹80.75 L</span></div>
                                       <button className="w-full mt-2 bg-[#2E2E2E] text-white py-2 rounded flex items-center justify-center gap-2 text-xs">
                                          <Download className="w-3 h-3" /> Download PDF
                                       </button>
                                    </div>
                                 ) : (
                                    <div style={{ whiteSpace: 'pre-line' }}>{msg.text}</div>
                                 )}
                              </div>
                           </div>
                        ))}

                        {/* Typing Indicator */}
                        {isTyping && (
                           <div className="flex justify-start chat-bubble">
                              <div className="bg-white border border-gray-200 p-3 rounded-2xl rounded-bl-none flex gap-1 items-center h-10 shadow-sm">
                                 <div className="w-2 h-2 bg-gray-400 rounded-full typing-dot"></div>
                                 <div className="w-2 h-2 bg-gray-400 rounded-full typing-dot"></div>
                                 <div className="w-2 h-2 bg-gray-400 rounded-full typing-dot"></div>
                              </div>
                           </div>
                        )}
                        <div className="h-4"></div>
                     </div>

                     {/* Chat Input Area (Visual Only) */}
                     <div className="p-3 bg-white border-t border-gray-100">
                        <div className="bg-gray-100 rounded-full h-10 flex items-center px-4 justify-between text-gray-400 text-sm">
                           <span>Ask a question...</span>
                           <Send className="w-4 h-4 text-[#B33A3A]" />
                        </div>
                     </div>
                  </div>
               </div>
            </FadeInSection>

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

      {/* --- MODULAR ARCHITECTURE SECTION --- */}
      <section id="modules" className="py-24 relative bg-[#F5F5F5]">
        <div className="max-w-7xl mx-auto px-6">
          <FadeInSection className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-[#2E2E2E]">Why pay for what you don't use?</h2>
            <p className="text-[#2E2E2E]/70 max-w-2xl mx-auto">
              Brikly uses a unique modular pricing model. Start with the base plan and enable only the powerful modules your business actually needs.
            </p>
          </FadeInSection>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {modules.map((mod, idx) => (
              <FadeInSection key={idx} className="h-full">
                <div className="glass-card p-6 rounded-lg h-full hover:shadow-xl transition-all duration-300 group cursor-pointer border-l-4 border-l-transparent hover:border-l-[#B33A3A]">
                  <div className="flex justify-between items-start mb-4">
                    <div className="p-3 bg-[#B33A3A]/5 rounded-md group-hover:scale-110 transition-transform duration-300 group-hover:bg-[#B33A3A]/10">
                        {mod.icon}
                    </div>
                    <span className="text-xs font-mono py-1 px-2 rounded bg-[#2E2E2E] text-white font-bold">
                      {mod.price}/mo
                    </span>
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-[#2E2E2E] group-hover:text-[#B33A3A] transition-colors">{mod.name}</h3>
                  <p className="text-[#2E2E2E]/60 text-sm leading-relaxed">
                    Activate this module to unlock advanced capabilities specific to your workflow. Disable anytime.
                  </p>
                </div>
              </FadeInSection>
            ))}
          </div>
        </div>
      </section>

      {/* --- FEATURES GRID (Charcoal Background for Contrast) --- */}
      <section id="features" className="py-24 bg-[#2E2E2E] text-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <FadeInSection>
                <h2 className="text-3xl md:text-5xl font-bold mb-6">
                  Complete Control over <br/>
                  <span className="text-highlight">Real Estate Sales</span>
                </h2>
                <div className="space-y-8">
                    {[
                        { title: "Smart Inventory", desc: "Visualize unit availability, cost sheets, and block inventory in real-time.", icon: <Layers /> },
                        { title: "Broker Network", desc: "Onboard channel partners, track their leads, and automate commission payouts.", icon: <Users /> },
                        { title: "Automated Nurturing", desc: "Send WhatsApp, Email, and SMS blasts automatically based on lead stage.", icon: <Mail /> }
                    ].map((feat, i) => (
                        <div key={i} className="flex gap-4">
                            <div className="mt-1 p-2 rounded-lg bg-[#B33A3A]/20 h-fit text-[#B33A3A]">
                                {feat.icon}
                            </div>
                            <div>
                                <h4 className="text-xl font-bold mb-2 text-white">{feat.title}</h4>
                                <p className="text-gray-400">{feat.desc}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </FadeInSection>
            
            <FadeInSection className="relative">
                <div className="absolute inset-0 bg-[#B33A3A]/10 rounded-xl transform rotate-3"></div>
                <div className="glass-card-dark p-8 rounded-xl relative overflow-hidden">
                    <div className="flex justify-between items-center mb-8">
                        <h4 className="font-bold text-lg">Lead Pipeline</h4>
                        <button className="text-xs bg-[#B33A3A] text-white px-3 py-1 rounded hover:bg-[#962e2e] transition-colors">Export CSV</button>
                    </div>
                    <div className="space-y-4">
                        {[1,2,3,4].map((n) => (
                            <div key={n} className="flex items-center gap-4 p-3 rounded bg-white/5 border border-white/5">
                                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-500 to-gray-700 border border-white/10"></div>
                                <div className="flex-1">
                                    <div className="h-2 w-24 bg-white/20 rounded mb-2"></div>
                                    <div className="h-2 w-16 bg-white/10 rounded"></div>
                                </div>
                                <div className={`px-2 py-1 rounded text-xs border ${n===1 ? 'bg-[#D4AF37]/20 text-[#D4AF37] border-[#D4AF37]/30' : 'bg-[#B33A3A]/20 text-[#B33A3A] border-[#B33A3A]/30'}`}>
                                    {n===1 ? 'Booked' : 'Follow Up'}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </FadeInSection>
          </div>
        </div>
      </section>

      {/* --- PRICING --- */}
      <section id="pricing" className="py-24 relative bg-[#F5F5F5]">
        <div className="max-w-7xl mx-auto px-6">
          <FadeInSection className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold mb-6 text-[#2E2E2E]">Simple, Transparent Pricing</h2>
            <p className="text-[#2E2E2E]/70 mb-8">Choose the base plan that fits your scale. Add modules as you grow.</p>
            
            {/* Toggle */}
            <div className="inline-flex bg-white p-1 rounded-full border border-[#2E2E2E]/10 mb-8 shadow-sm">
              <button 
                onClick={() => setIsAnnual(false)}
                className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${!isAnnual ? 'bg-[#2E2E2E] text-white shadow-lg' : 'text-[#2E2E2E]/50 hover:text-[#2E2E2E]'}`}
              >
                Monthly
              </button>
              <button 
                onClick={() => setIsAnnual(true)}
                className={`px-6 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-2 ${isAnnual ? 'bg-[#2E2E2E] text-white shadow-lg' : 'text-[#2E2E2E]/50 hover:text-[#2E2E2E]'}`}
              >
                Annual <span className="text-xs bg-[#D4AF37] text-white font-bold px-2 py-0.5 rounded-full">-17%</span>
              </button>
            </div>
          </FadeInSection>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {pricingData.map((plan, idx) => (
              <FadeInSection key={idx} className="h-full">
                <div className={`relative h-full glass-card rounded-xl p-8 flex flex-col transition-all duration-300 hover:transform hover:-translate-y-2 ${plan.popular ? 'border-[#B33A3A] shadow-xl scale-105 z-10 bg-white' : 'border-[#2E2E2E]/10 hover:border-[#2E2E2E]/30 bg-white/50'}`}>
                  {plan.popular && (
                    <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-[#B33A3A] text-white px-4 py-1 rounded text-xs font-bold shadow-lg uppercase tracking-wider">
                      Most Popular
                    </div>
                  )}
                  
                  <div className="mb-8">
                    {/* Changed from gradient to solid */}
                    <h3 className={`text-2xl font-bold mb-2 text-[#B33A3A]`}>{plan.title}</h3>
                    <p className="text-[#2E2E2E]/60 text-sm mb-6">{plan.target}</p>
                    <div className="flex items-baseline gap-1">
                      <span className="text-4xl font-bold text-[#2E2E2E]">₹{(isAnnual ? plan.priceAnnual : plan.priceMonthly).toLocaleString()}</span>
                      <span className="text-[#2E2E2E]/50">/mo</span>
                    </div>
                    {isAnnual && <p className="text-xs text-[#B33A3A] mt-2 font-semibold">Billed ₹{(plan.priceAnnual * 12).toLocaleString()} yearly</p>}
                  </div>

                  <div className="space-y-4 mb-8 flex-grow">
                    {plan.features.map((feature, fIdx) => (
                        <div key={fIdx} className="flex items-center gap-3 text-sm text-[#2E2E2E]/80">
                            <CheckCircle2 className="w-4 h-4 text-[#B33A3A] flex-shrink-0" />
                            {feature}
                        </div>
                    ))}
                    {plan.notIncluded.map((feature, fIdx) => (
                        <div key={fIdx} className="flex items-center gap-3 text-sm text-[#2E2E2E]/40">
                            <X className="w-4 h-4 flex-shrink-0" />
                            {feature}
                        </div>
                    ))}
                  </div>

                  <Button primary={plan.popular} className="w-full rounded-md shadow-none" onClick={() => setIsModalOpen(true)}>
                    {plan.title === 'Enterprise' ? 'Contact Sales' : 'Start Free Trial'}
                  </Button>
                  
                  <p className="text-center text-xs text-[#2E2E2E]/40 mt-4">
                    + Pay-per-module pricing
                  </p>
                </div>
              </FadeInSection>
            ))}
          </div>
        </div>
      </section>

      {/* --- CTA SECTION (UPDATED: Force Dark Background & Modal Trigger) --- */}
      <section className="py-24 bg-[#F5F5F5]">
        <div className="max-w-5xl mx-auto px-6">
            <div className="relative rounded-xl overflow-hidden p-12 text-center shadow-2xl bg-[#2E2E2E]"> {/* Added direct bg color */}
                <div className="absolute inset-0 bg-[#2E2E2E] -z-10"></div>
                <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
                
                <h2 className="text-3xl md:text-5xl font-bold mb-6 text-white">Ready to close more deals?</h2>
                <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
                    Join 500+ developers using Brikly to streamline their sales. 
                    No credit card required for the 14-day trial.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                    <Button primary className="px-10 py-4 text-lg bg-[#D4AF37] text-black hover:bg-white border-none shadow-lg" onClick={() => setIsModalOpen(true)}>Get Started Now</Button>
                    <Button className="px-10 py-4 text-lg border-white text-white hover:bg-white hover:text-black" onClick={() => setIsModalOpen(true)}>Book Consultation</Button>
                </div>
            </div>
        </div>
      </section>

      {/* --- FOOTER --- */}
      <footer className="bg-[#2E2E2E] border-t border-white/5 pt-16 pb-8 text-sm text-white">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
            <div>
                <div className="flex items-center gap-2 mb-6">
                    <div className="w-8 h-8 bg-[#B33A3A] rounded flex items-center justify-center">
                         <Building2 className="text-white w-4 h-4" />
                    </div>
                    <span className="font-bold text-xl tracking-tight">Brikly</span>
                </div>
                <p className="text-gray-400 mb-4">Because Every Lead Deserves a Closing.</p>
                <div className="flex gap-4">
                    {/* Social Placeholders */}
                    <div className="w-8 h-8 rounded bg-white/10 hover:bg-[#B33A3A] hover:text-white cursor-pointer transition-colors"></div>
                    <div className="w-8 h-8 rounded bg-white/10 hover:bg-[#B33A3A] hover:text-white cursor-pointer transition-colors"></div>
                    <div className="w-8 h-8 rounded bg-white/10 hover:bg-[#B33A3A] hover:text-white cursor-pointer transition-colors"></div>
                </div>
            </div>
            
            <div>
                <h4 className="font-bold text-white mb-4">Product</h4>
                <ul className="space-y-2 text-gray-400">
                    <li><a href="#" className="hover:text-[#D4AF37]">Features</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">Modules</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">Pricing</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">API</a></li>
                </ul>
            </div>

            <div>
                <h4 className="font-bold text-white mb-4">Company</h4>
                <ul className="space-y-2 text-gray-400">
                    <li><a href="#" className="hover:text-[#D4AF37]">About</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">Blog</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">Careers</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">Contact</a></li>
                </ul>
            </div>

            <div>
                <h4 className="font-bold text-white mb-4">Legal</h4>
                <ul className="space-y-2 text-gray-400">
                    <li><a href="#" className="hover:text-[#D4AF37]">Privacy Policy</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">Terms of Service</a></li>
                    <li><a href="#" className="hover:text-[#D4AF37]">SLA</a></li>
                </ul>
            </div>
        </div>
        <div className="max-w-7xl mx-auto px-6 pt-8 border-t border-white/5 text-center text-gray-500">
            &copy; 2025 Brikly CRM. All rights reserved.
        </div>
      </footer>
    </div>
  );
}