import { motion } from "framer-motion";
import { Bot, Zap, Cloud, Code2, Users, Shield, ArrowRight, Sparkles } from "lucide-react";
import heroBanner from "@/assets/hero-banner.jpg";
import logo from "@/assets/cloudflow-logo-real.jpg";

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.1, duration: 0.6, ease: "easeOut" as const },
  }),
};

const services = [
  {
    icon: Code2,
    title: "Rapid App Development",
    description:
      "From concept to deployed application in days, not months. Our AI-first approach means your business app is live before the kettle boils. Well, almost.",
  },
  {
    icon: Cloud,
    title: "Cloud-Native Platforms",
    description:
      "Scalable, secure, and always-on. We build platforms that grow with your business — no server room required (or desired).",
  },
  {
    icon: Bot,
    title: "AI Integration",
    description:
      "We don't just talk about AI — we use it to build your software. Meta, right? It's like hiring a robot to build you a better robot.",
  },
  {
    icon: Shield,
    title: "Enterprise Security",
    description:
      "Bank-grade security baked in from day one. Because 'we'll add security later' is the tech equivalent of 'I'll start the diet Monday.'",
  },
];

const clients = [
  "vida e caffè",
  "Mount Joy",
  "Capital Assignments",
  "Life & Brand",
  "The Up Side",
  "GreenCube",
];

const Index = () => {
  return (
    <div className="min-h-screen bg-background">
      {/* Nav */}
      <nav className="fixed top-0 z-50 w-full border-b border-glow bg-background/80 backdrop-blur-xl">
        <div className="container mx-auto flex items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <img src={logo} alt="CloudFlow logo" width={40} height={40} />
            <span className="font-display text-xl font-bold text-foreground">
              Cloud<span className="text-primary">Flow</span>
            </span>
          </div>
          <div className="hidden items-center gap-8 md:flex">
            <a href="#services" className="text-sm text-muted-foreground transition-colors hover:text-primary">Services</a>
            <a href="#about" className="text-sm text-muted-foreground transition-colors hover:text-primary">About</a>
            <a href="#clients" className="text-sm text-muted-foreground transition-colors hover:text-primary">Clients</a>
            <a href="#contact" className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/25">
              Get Started <ArrowRight className="h-4 w-4" />
            </a>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="relative flex min-h-screen items-center overflow-hidden pt-20">
        <div className="absolute inset-0">
          <img
            src={heroBanner}
            alt="Abstract technology visualization"
            className="h-full w-full object-cover opacity-40"
            width={1920}
            height={800}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/60 via-background/80 to-background" />
        </div>
        <div className="container relative z-10 mx-auto px-6">
          <motion.div
            initial="hidden"
            animate="visible"
            className="mx-auto max-w-3xl text-center"
          >
            <motion.div
              custom={0}
              variants={fadeUp}
              className="mb-6 inline-flex items-center gap-2 rounded-full border border-glow bg-muted/50 px-4 py-1.5 text-sm text-muted-foreground backdrop-blur-sm"
            >
              <Sparkles className="h-4 w-4 text-secondary animate-pulse-glow" />
              Proudly crafted by AI — yes, really
            </motion.div>
            <motion.h1
              custom={1}
              variants={fadeUp}
              className="mb-6 font-display text-5xl font-bold leading-tight tracking-tight md:text-7xl"
            >
              We Build Apps{" "}
              <span className="text-gradient-primary">at the Speed</span> of
              Thought
            </motion.h1>
            <motion.p
              custom={2}
              variants={fadeUp}
              className="mx-auto mb-8 max-w-xl text-lg text-muted-foreground"
            >
              A small team with decades of experience — now supercharged with AI.
              We deliver beautiful business platforms, fast and cost-effectively.
              No fluff. No filler. Just flow.
            </motion.p>
            <motion.div custom={3} variants={fadeUp} className="flex flex-wrap items-center justify-center gap-4">
              <a
                href="#contact"
                className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/25"
              >
                Let's Talk <ArrowRight className="h-4 w-4" />
              </a>
              <a
                href="#services"
                className="inline-flex items-center gap-2 rounded-lg border border-glow px-6 py-3 font-medium text-foreground transition-all hover:bg-muted/50"
              >
                What We Do
              </a>
            </motion.div>
            <motion.p custom={4} variants={fadeUp} className="mt-6 text-xs text-muted-foreground/60 italic">
              🤖 Fun fact: This entire website was designed, coded, and deployed by an AI.
              The humans just pressed "Enter" and sipped coffee.
            </motion.p>
          </motion.div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="py-24">
        <div className="container mx-auto px-6">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.3 }}
            className="mb-16 text-center"
          >
            <motion.h2
              custom={0}
              variants={fadeUp}
              className="mb-4 font-display text-3xl font-bold md:text-5xl"
            >
              What We <span className="text-primary">Do</span>
            </motion.h2>
            <motion.p custom={1} variants={fadeUp} className="mx-auto max-w-lg text-muted-foreground">
              We harness AI to build platforms for business — integrating it,
              employing it, and occasionally arguing with it about semicolons.
            </motion.p>
          </motion.div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {services.map((service, i) => (
              <motion.div
                key={service.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                custom={i}
                variants={fadeUp}
                className="group rounded-xl border border-glow bg-card p-6 transition-all hover:glow-box"
              >
                <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3">
                  <service.icon className="h-6 w-6 text-primary" />
                </div>
                <h3 className="mb-2 font-display text-lg font-semibold text-card-foreground">
                  {service.title}
                </h3>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  {service.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="border-y border-glow bg-muted/20 py-24">
        <div className="container mx-auto px-6">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.3 }}
            className="mx-auto grid max-w-5xl items-center gap-12 md:grid-cols-2"
          >
            <div>
              <motion.h2
                custom={0}
                variants={fadeUp}
                className="mb-4 font-display text-3xl font-bold md:text-4xl"
              >
                Small Team.{" "}
                <span className="text-gradient-primary">Big Impact.</span>
              </motion.h2>
              <motion.p custom={1} variants={fadeUp} className="mb-4 text-muted-foreground leading-relaxed">
                CloudFlow is a lean, experienced team that has adopted AI as a
                core team member (it doesn't take lunch breaks and never calls in
                sick — but it does occasionally hallucinate).
              </motion.p>
              <motion.p custom={2} variants={fadeUp} className="mb-6 text-muted-foreground leading-relaxed">
                Our legacy spans all industries — from NGOs to medical records,
                project management to quote-to-invoice systems. We've built it,
                shipped it, and the AI only judged us a little.
              </motion.p>
              <motion.div custom={3} variants={fadeUp} className="flex items-center gap-6">
                <div>
                  <div className="font-display text-3xl font-bold text-primary">20+</div>
                  <div className="text-sm text-muted-foreground">Years Experience</div>
                </div>
                <div className="h-10 w-px bg-border" />
                <div>
                  <div className="font-display text-3xl font-bold text-secondary">50+</div>
                  <div className="text-sm text-muted-foreground">Projects Delivered</div>
                </div>
                <div className="h-10 w-px bg-border" />
                <div>
                  <div className="font-display text-3xl font-bold text-primary">∞</div>
                  <div className="text-sm text-muted-foreground">AI Prompts Written</div>
                </div>
              </motion.div>
            </div>
            <motion.div
              custom={2}
              variants={fadeUp}
              className="relative rounded-xl border border-glow bg-card p-8 glow-box"
            >
              <div className="mb-4 flex items-center gap-2">
                <div className="h-3 w-3 rounded-full bg-destructive" />
                <div className="h-3 w-3 rounded-full bg-secondary" />
                <div className="h-3 w-3 rounded-full bg-primary" />
              </div>
              <pre className="font-mono text-sm text-muted-foreground">
                <code>
{`> cloudflow init new-project
✓ AI architect engaged
✓ Requirements analysed
✓ Database schema designed
✓ Frontend scaffolded
✓ Tests written (yes, really)
✓ Deployed to production

Total time: 4 minutes 23 seconds
Coffees consumed: 0.5 ☕

// The AI wanted credit.
// So here it is. You're welcome, robot.`}
                </code>
              </pre>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Clients */}
      <section id="clients" className="py-24">
        <div className="container mx-auto px-6">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.3 }}
            className="text-center"
          >
            <motion.h2 custom={0} variants={fadeUp} className="mb-4 font-display text-3xl font-bold md:text-4xl">
              Trusted By <span className="text-primary">Humans</span>
            </motion.h2>
            <motion.p custom={1} variants={fadeUp} className="mx-auto mb-12 max-w-md text-muted-foreground">
              Real companies. Real results. The AI didn't make these up — we checked.
            </motion.p>
          </motion.div>
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            className="mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-6"
          >
            {clients.map((client, i) => (
              <motion.div
                key={client}
                custom={i}
                variants={fadeUp}
                className="rounded-lg border border-glow bg-card px-6 py-4 text-center font-display text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
              >
                {client}
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* CTA / Contact */}
      <section id="contact" className="border-t border-glow bg-muted/20 py-24">
        <div className="container mx-auto px-6">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.3 }}
            className="mx-auto max-w-2xl text-center"
          >
            <motion.div custom={0} variants={fadeUp}>
              <Zap className="mx-auto mb-4 h-10 w-10 text-secondary animate-float" />
            </motion.div>
            <motion.h2
              custom={1}
              variants={fadeUp}
              className="mb-4 font-display text-3xl font-bold md:text-5xl"
            >
              Ready to <span className="text-gradient-primary">Flow</span>?
            </motion.h2>
            <motion.p custom={2} variants={fadeUp} className="mb-8 text-muted-foreground">
              Whether you need a full business platform or a smart integration,
              we're here to help — powered by caffeine and cutting-edge AI.
            </motion.p>
            <motion.a
              custom={3}
              variants={fadeUp}
              href="mailto:info@cloudflow360.co.za"
              className="inline-flex items-center gap-2 rounded-lg bg-primary px-8 py-4 text-lg font-medium text-primary-foreground transition-all hover:shadow-xl hover:shadow-primary/25"
            >
              <Users className="h-5 w-5" />
              info@cloudflow360.co.za
            </motion.a>
            <motion.p custom={4} variants={fadeUp} className="mt-4 text-xs text-muted-foreground/60 italic">
              The AI promises not to read your emails. Probably.
            </motion.p>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-glow py-8">
        <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-6 md:flex-row">
          <div className="flex items-center gap-2">
            <img src={logo} alt="CloudFlow" width={24} height={24} />
            <span className="font-display text-sm font-semibold text-foreground">
              CloudFlow
            </span>
          </div>
          <p className="text-center text-xs text-muted-foreground">
            © {new Date().getFullYear()} CloudFlow. All rights reserved. Designed, built & deployed by AI.
            No humans were harmed in the making of this website — just mildly impressed.
          </p>
        </div>
      </footer>
    </div>
  );
};

export default Index;