"use client";

import { motion } from "framer-motion";

const features = [
  {
    number: "01",
    title: "One-Click Company Creation",
    description:
      "Name your company, describe your mission, connect your AI runtime, and launch. Your first agents start working in under a minute.",
    image: "/screenshots/Onboarding.jpeg",
    imageAlt: "Company creation onboarding flow with mission and runtime setup",
    imageLeft: true,
  },
  {
    number: "02",
    title: "Self-Organizing Teams",
    description:
      "Your AI CEO builds the org chart. It identifies the roles needed, hires specialists, and creates reporting lines — all from a single goal.",
    image: "/screenshots/Auto-OrgChart-Team.jpeg",
    imageAlt: "AI-generated org chart showing self-organizing team structure",
    imageLeft: false,
  },
  {
    number: "03",
    title: "Autonomous Task Management",
    description:
      "Goals break down into tasks automatically. Agents pick up work, report progress, and escalate blockers — you decide when to step in.",
    image: "/screenshots/Auto-Task.jpeg",
    imageAlt: "Autonomous task board with agents managing work items",
    imageLeft: true,
  },
  {
    number: "04",
    title: "Real-Time Agent Communication",
    description:
      "Agents communicate through department channels and direct messages. Watch strategic decisions happen in real time, like a Slack workspace you built.",
    image: "/screenshots/AI-Internal-Realtime-Message.jpeg",
    imageAlt: "Real-time messaging between AI agents in department channels",
  },
  {
    number: "05",
    title: "Human-in-the-Loop Approvals",
    description:
      "Stay in control. Critical decisions surface for your review. Approve, reject, or redirect — your company respects the chain of command.",
    image: "/screenshots/Approval-by-Human.jpeg",
    imageAlt: "Approval interface showing human review of agent decisions",
  },
  {
    number: "06",
    title: "AI Document Generation",
    description:
      "Business plans, marketing strategies, technical specs — agents draft and iterate on real deliverables, stored in your document center.",
    image: "/screenshots/Document-Center.jpeg",
    imageAlt: "Document center with AI-generated business deliverables",
  },
];

function FeaturePair({ feature }: { feature: (typeof features)[number] }) {
  const { number, title, description, image, imageAlt, imageLeft } = feature;
  const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];

  const media = (
    <motion.div
      variants={{
        hidden: { opacity: 0, x: imageLeft ? -60 : 60 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease } },
      }}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.3 }}
      className={`order-2 ${imageLeft ? "lg:order-1" : "lg:order-2"}`}
    >
      <div className="rounded-[22px] overflow-hidden shadow-[0_4px_32px_-8px_rgba(0,0,0,0.06)] border border-[var(--border)] bg-[var(--panel)] transition-shadow duration-500 hover:shadow-[0_8px_48px_-12px_rgba(0,0,0,0.10)]">
        <img src={image} alt={imageAlt} width="1920" height="1080" className="w-full h-auto block" loading="lazy" />
      </div>
    </motion.div>
  );

  const copy = (
    <motion.div
      variants={{
        hidden: { opacity: 0, x: imageLeft ? 60 : -60 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease, delay: 0.1 } },
      }}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.3 }}
      className={`flex flex-col justify-center order-1 ${imageLeft ? "lg:order-2" : "lg:order-1"}`}
    >
      <span className="font-mono text-[5rem] lg:text-[6rem] font-bold leading-none text-[var(--accent)] opacity-[0.07] select-none -mb-10 lg:-mb-12">
        {number}
      </span>
      <div className="relative">
        <div className="flex items-center gap-3 mb-4">
          <span className="block w-2 h-2 rounded-full bg-[var(--accent)]" />
          <span className="font-mono text-sm text-[var(--muted)]">{number}</span>
        </div>
        <h2 className="text-2xl lg:text-[1.875rem] font-bold text-[var(--text)] mb-4 tracking-tight">{title}</h2>
        <p className="text-[var(--muted-strong)] leading-relaxed text-base lg:text-lg">{description}</p>
      </div>
    </motion.div>
  );

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      {media}
      {copy}
    </div>
  );
}

export function Features() {
  return (
    <section
      id="features"
      className="py-24 lg:py-40"
      style={{ background: "linear-gradient(180deg, transparent 0%, var(--section-alt) 30%, var(--section-alt) 70%, transparent 100%)" }}
    >
      <div className="max-w-6xl mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
          className="text-center mb-24 lg:mb-36"
        >
          <span className="font-mono text-xs uppercase tracking-[0.25em] text-[var(--accent)] mb-5 block font-medium">
            Features
          </span>
          <h2 className="font-serif text-[clamp(2rem,1.5rem+2.5vw,3.25rem)] tracking-[-0.01em] text-[var(--text)]">
            Your Company, Under the Hood
          </h2>
        </motion.div>

        <div className="space-y-24 lg:space-y-40">
          {features.slice(0, 3).map((feature) => (
            <FeaturePair key={feature.number} feature={feature} />
          ))}
        </div>

        <motion.div
          className="mt-24 lg:mt-40 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          variants={{
            hidden: {},
            visible: {
              transition: { staggerChildren: 0.12 },
            },
          }}
        >
          {features.slice(3).map((feature) => (
            <motion.div
              key={feature.number}
              variants={{
                hidden: { opacity: 0, y: 32 },
                visible: {
                  opacity: 1,
                  y: 0,
                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
                },
              }}
              className="group bg-[var(--panel)] rounded-[22px] border border-[var(--border)] overflow-hidden transition-all duration-300 hover:shadow-[0_8px_40px_-12px_rgba(0,0,0,0.08)] hover:-translate-y-1.5"
            >
              <div className="overflow-hidden">
                <img
                  src={feature.image}
                  alt={feature.imageAlt}
                  width="640"
                  height="360"
                  className="w-full h-auto block transition-transform duration-500 group-hover:scale-[1.03]"
                  loading="lazy"
                />
              </div>
              <div className="p-6 lg:p-7">
                <div className="flex items-center gap-3 mb-3">
                  <span className="block w-2 h-2 rounded-full bg-[var(--accent)]" />
                  <span className="font-mono text-sm text-[var(--muted)]">{feature.number}</span>
                </div>
                <h2 className="text-lg font-bold text-[var(--text)] mb-2 tracking-tight">{feature.title}</h2>
                <p className="text-sm text-[var(--muted-strong)] leading-relaxed">{feature.description}</p>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}