import { useEffect } from "react";
import { motion } from "framer-motion";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function HomePage() {
  useEffect(() => {
    document.title = "Digital Dream Consulting";
  }, []);

  return (
    <div>
    <section className="relative bg-black text-white h-[85vh] flex items-center justify-center">
      <video
        autoPlay
        muted
        loop
        className="absolute w-full h-full object-cover opacity-20"
      >
        <source src="/background-video.mp4" type="video/mp4" />
      </video>
      <div className="z-10 text-center max-w-2xl px-6">
        <motion.h2
          className="text-4xl md:text-5xl font-bold mb-6 text-white"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          Empowering Enterprise Innovation
        </motion.h2>
        <motion.p
          className="text-lg mb-8 text-gray-300"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 1 }}
        >
          We deliver tailored digital solutions to help businesses scale, transform, and lead.
        </motion.p>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1, duration: 1 }}
        >
          <button className="text-white bg-blue-600 hover:bg-blue-700 px-6 py-3 text-lg rounded-full">
            Schedule a Free Consultation
          </button>
        </motion.div>
      </div>
    </section>

      {/* Vision Section */}
      <section className="py-24 bg-black text-center text-white">
        <div className="max-w-5xl mx-auto px-6">
          <h3 className="text-3xl font-bold mb-4">Our Vision</h3>
          <p className="text-gray-300 text-lg">
            We believe the future belongs to those who build it. At Digital Dream, we partner with enterprise clients to engineer that future—one innovation at a time.
          </p>
        </div>
      </section>

      {/* Trusted By Section */}
      <section className="py-20 bg-gray-900">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <h3 className="text-2xl font-bold text-white mb-8">Trusted by Industry Leaders</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
  <img src="/logos/Shopify.png" alt="Shopify" className="h-12 mx-auto grayscale opacity-60 hover:opacity-100 transition" />
  <img src="/logos/Telus.png" alt="Telus" className="h-12 mx-auto grayscale opacity-60 hover:opacity-100 transition" />
  <img src="/logos/TD.png" alt="TD Bank" className="h-12 mx-auto grayscale opacity-60 hover:opacity-100 transition" />
  <img src="/logos/IBM.png" alt="IBM" className="h-12 mx-auto grayscale opacity-60 hover:opacity-100 transition" />
</div>
        </div>
      </section>

      {/* Capabilities Grid */}
      <section className="py-24 bg-black text-white">
        <div className="max-w-6xl mx-auto px-6">
          <h3 className="text-3xl font-bold text-center mb-12">Our Capabilities</h3>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-gray-800 p-6 rounded-lg shadow-md">
              <h4 className="text-xl font-semibold mb-2">Enterprise Software</h4>
              <p className="text-gray-300">Custom platforms engineered for performance and scale.</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg shadow-md">
              <h4 className="text-xl font-semibold mb-2">Cloud Migration</h4>
              <p className="text-gray-300">Secure, scalable cloud strategies built for transformation.</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg shadow-md">
              <h4 className="text-xl font-semibold mb-2">AI & Data Science</h4>
              <p className="text-gray-300">Data-backed decisions through intelligent algorithms.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 bg-gray-900 text-white">
        <div className="max-w-5xl mx-auto px-6 text-center">
          <h3 className="text-3xl font-bold mb-8">What Our Clients Say</h3>
          <div className="space-y-8">
            <div className="bg-gray-800 p-6 rounded-lg">
              <p className="italic text-gray-300">“Digital Dream helped us reimagine our IT stack. Their strategic insight is unmatched.”</p>
              <p className="mt-4 font-semibold text-blue-400">— CTO, National Financial</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <p className="italic text-gray-300">“From cloud migration to AI integration, they delivered excellence at every step.”</p>
              <p className="mt-4 font-semibold text-blue-400">— Director of Tech, Global Health Corp</p>
            </div>
          </div>
        </div>
      </section>

      {/* Insights Preview */}
      <section className="py-24 bg-black text-white">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <h3 className="text-3xl font-bold mb-8">Insights & Innovation</h3>
          <div className="grid md:grid-cols-3 gap-8 text-left">
            <div className="bg-gray-800 p-6 rounded-lg">
              <h4 className="font-semibold mb-2">How AI is Transforming Enterprise Operations</h4>
              <p className="text-gray-300 text-sm">We explore the real-world applications of AI in global business.</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <h4 className="font-semibold mb-2">Cloud Modernization: Beyond Migration</h4>
              <p className="text-gray-300 text-sm">Modernizing for cloud-native performance and resiliency.</p>
            </div>
            <div className="bg-gray-800 p-6 rounded-lg">
              <h4 className="font-semibold mb-2">Top 5 Digital Strategies for 2025</h4>
              <p className="text-gray-300 text-sm">Key tactics shaping the future of digital enterprise.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function About() {
  return (
    <div className="p-12 text-white max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-4">About Digital Dream Consulting</h2>
      <p className="mb-4 text-gray-300">
        Digital Dream Consulting is a technology and strategy firm dedicated to delivering scalable digital solutions for modern enterprises. Our team of seasoned experts brings together years of experience in cloud architecture, enterprise software development, AI integration, and IT consulting.
      </p>
      <p className="text-gray-300">
        Our mission is simple: empower businesses to thrive in a digital-first world. We achieve this by offering tailored technology strategies that align with each client's unique vision and growth goals.
      </p>
    </div>
  );
}

function Services() {
  return (
    <div className="p-12 text-white max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-4">Our Services</h2>
      <ul className="list-disc pl-6 text-gray-300 space-y-3">
        <li><strong>Digital Transformation Strategy:</strong> End-to-end planning to modernize business operations using cutting-edge technology.</li>
        <li><strong>Custom Software Development:</strong> Enterprise-grade applications tailored to your workflow and scalability needs.</li>
        <li><strong>Cloud Solutions:</strong> Architecture, migration, and optimization services across AWS, Azure, and Google Cloud.</li>
        <li><strong>AI & Data Analytics:</strong> Business intelligence, predictive analytics, and machine learning integration.</li>
        <li><strong>IT Consulting:</strong> Strategic guidance to align your technology with your core business goals.</li>
      </ul>
    </div>
  );
}

function Industries() {
  return (
    <div className="p-12 text-white max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-4">Industries We Serve</h2>
      <p className="mb-4 text-gray-300">
        Our expertise spans across various verticals, enabling us to bring tailored solutions to your industry:
      </p>
      <ul className="list-disc pl-6 text-gray-300 space-y-2">
        <li><strong>Finance & Banking:</strong> Secure and compliant fintech platforms.</li>
        <li><strong>Healthcare:</strong> HIPAA-compliant digital health ecosystems.</li>
        <li><strong>Retail & E-commerce:</strong> Omnichannel platforms and digital storefronts.</li>
        <li><strong>Manufacturing:</strong> Smart factory systems and IoT integration.</li>
        <li><strong>Professional Services:</strong> CRM, ERP, and productivity tools tailored to consultants and legal professionals.</li>
      </ul>
    </div>
  );
}

function Careers() {
  return (
    <div className="p-12 text-white max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-4">Join Our Team</h2>
      <p className="mb-4 text-gray-300">
        At Digital Dream Consulting, we believe innovation begins with people. We're looking for curious minds, creative thinkers, and bold problem-solvers who are passionate about technology and its power to transform businesses.
      </p>
      <p className="text-gray-300">
        Explore current openings or reach out to us directly to start your journey with a company that's shaping the digital future.
      </p>
    </div>
  );
}

function Contact() {
  return (
    <div className="p-12 text-white max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-4">Get in Touch</h2>
      <p className="mb-4 text-gray-300">
        We’d love to learn more about your project and how we can help. Reach out to us directly via the form below or email us at contact@digitaldreamconsulting.ca.
      </p>
      <form className="space-y-4">
        <input type="text" placeholder="Your Name" className="w-full p-3 rounded bg-gray-800 text-white" />
        <input type="email" placeholder="Your Email" className="w-full p-3 rounded bg-gray-800 text-white" />
        <textarea placeholder="Your Message" rows="5" className="w-full p-3 rounded bg-gray-800 text-white"></textarea>
        <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded">
          Send Message
        </button>
      </form>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <div className="min-h-screen bg-black text-white">
        <header className="sticky top-0 bg-black shadow z-50">
          <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
            <img src="/DIGITAL%20DREAM%20LOGO%20-%20TRANSPARENT.png" alt="Digital Dream Logo" className="h-10" />
            <nav className="space-x-6 text-sm font-medium text-white">
              <Link to="/" className="hover:text-blue-400">Home</Link>
              <Link to="/about" className="hover:text-blue-400">About Us</Link>
              <Link to="/services" className="hover:text-blue-400">Services</Link>
              <Link to="/industries" className="hover:text-blue-400">Industries</Link>
              <Link to="/careers" className="hover:text-blue-400">Careers</Link>
              <Link to="/contact" className="hover:text-blue-400">Contact</Link>
            </nav>
          </div>
        </header>

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<About />} />
          <Route path="/services" element={<Services />} />
          <Route path="/industries" element={<Industries />} />
          <Route path="/careers" element={<Careers />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>

        <footer className="bg-black py-6 mt-12 text-center text-sm text-gray-500">
          © {new Date().getFullYear()} Digital Dream Consulting. All rights reserved.
        </footer>
      </div>
    </Router>
  );
}