"use client";

"use client";

import Image from "next/image";
import { motion } from "framer-motion";

const sectionVariants = {
  hidden: { opacity: 1, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as [number, number, number, number] },
  },
};

export function LandingFeatures() {
  return (
    <motion.section
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.25 }}
      variants={sectionVariants}
      className="py-16 lg:py-20"
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-12">
          <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Not Just Tracking. Thinking.
          </h2>
          <p className="mt-4 text-lg text-muted-foreground">
            LedgerOne turns your raw transaction firehose into AI-native context—what&apos;s
            happening, what&apos;s coming, and what you should do about it.
          </p>
        </div>

        <div className="grid gap-8 lg:grid-cols-3">
          {/* AI Financial Insights */}
          <motion.div
            whileHover={{ y: -6, scale: 1.02 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="group rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 p-6 shadow-glass shadow-[0_0_60px_rgba(34,197,94,0.25)]"
          >
            <div className="mb-5 flex h-10 w-10 items-center justify-center rounded-2xl bg-emerald-500/10 text-emerald-400">
              <span className="text-xs font-semibold">AI</span>
            </div>
            <h3 className="mb-2 text-lg font-semibold text-foreground">AI Financial Insights</h3>
            <p className="mb-5 text-sm text-muted-foreground">
              Get plain-language explanations of what changed, why it matters, and what we recommend
              you do next.
            </p>
            <div className="overflow-hidden rounded-2xl border border-border/80 bg-background/80 text-left text-xs shadow-inner">
              {/* Preview of AI chat responding (image placeholder for now) */}
              <div className="relative aspect-video w-full overflow-hidden">
                <Image
                  src="/images/feature-reports.png"
                  alt="AI financial insights preview"
                  fill
                  sizes="(min-width: 1024px) 33vw, 100vw"
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/75 via-slate-950/15 to-transparent" />
                {/* AI prediction label */}
                <div className="pointer-events-none absolute left-3 top-3 inline-flex items-center gap-2 rounded-full bg-slate-950/80 px-2 py-1 text-[10px] text-emerald-200 ring-1 ring-emerald-400/60">
                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-300 animate-pulse" />
                  <span>AI prediction · High confidence</span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Predictive Cash Flow */}
          <motion.div
            whileHover={{ y: -6, scale: 1.02 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="group rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 p-6 shadow-glass shadow-[0_0_60px_rgba(56,189,248,0.22)]"
          >
            <div className="mb-5 flex h-10 w-10 items-center justify-center rounded-2xl bg-sky-500/10 text-sky-400">
              <svg
                className="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M4 19.5V10M4 10L8 6M4 10L0 6" />
                <path d="M12 19.5V4.5M12 4.5L16 8.5M12 4.5L8 8.5" />
                <path d="M20 4.5V14M20 14L16 18M20 14L24 18" />
              </svg>
            </div>
            <h3 className="mb-2 text-lg font-semibold text-foreground">Predictive Cash Flow</h3>
            <p className="mb-5 text-sm text-muted-foreground">
              See your balance 30 days from now—before it happens. Every bill, subscription, and
              paycheck automatically mapped.
            </p>
            <div className="relative overflow-hidden rounded-2xl border border-border/80 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-4">
              <div className="mb-3 flex items-center justify-between text-[11px] text-slate-300">
                <span>Projected net balance</span>
                <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] text-emerald-300">
                  94% on track
                </span>
              </div>
              {/* Cashflow line preview (image placeholder for now) */}
              <div className="relative aspect-video w-full overflow-hidden rounded-xl">
                <Image
                  src="/images/feature-cashflow.png"
                  alt="Predictive cash flow graph"
                  fill
                  sizes="(min-width: 1024px) 33vw, 100vw"
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                {/* Dynamic highlight where the curve dips */}
                <div className="pointer-events-none absolute bottom-3 right-3 inline-flex items-center gap-1 rounded-full bg-slate-950/80 px-2 py-1 text-[10px] text-amber-200 ring-1 ring-amber-400/60">
                  <span className="h-1.5 w-1.5 rounded-full bg-amber-300 animate-pulse" />
                  <span>Risk window · next 7 days</span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Smart Budgeting */}
          <motion.div
            whileHover={{ y: -6, scale: 1.02 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="group rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 p-6 shadow-glass shadow-[0_0_60px_rgba(139,92,246,0.25)]"
          >
            <div className="mb-5 flex h-10 w-10 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-400">
              <svg
                className="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M12 1v22M5 5h14a2 2 0 012 2v4H3V7a2 2 0 012-2Z" />
                <path d="M3 13h18v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4Z" />
              </svg>
            </div>
            <h3 className="mb-2 text-lg font-semibold text-foreground">Smart Budgeting</h3>
            <p className="mb-5 text-sm text-muted-foreground">
              Budgets that re-balance themselves based on your behavior—plus a real-time &quot;safe
              to spend&quot; number.
            </p>
            <div className="overflow-hidden rounded-2xl border border-border/80 bg-background/80 text-xs">
              {/* Progress rings + safe-to-spend preview (image placeholder for now) */}
              <div className="relative aspect-video w-full">
                <Image
                  src="/images/feature-reports.png"
                  alt="Smart budgeting preview"
                  fill
                  sizes="(min-width: 1024px) 33vw, 100vw"
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                {/* Safe-to-spend label */}
                <div className="pointer-events-none absolute left-3 bottom-3 inline-flex items-center gap-2 rounded-full bg-slate-950/75 px-2 py-1 text-[10px] text-emerald-200 ring-1 ring-emerald-400/60">
                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-300 animate-pulse" />
                  <span>Safe to spend · Updated live</span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
}