Features 04 — Feature Spotlight

"use client"

import * as React from "react"
import { motion } from "motion/react"
import { ArrowRight, Check } from "lucide-react"

import { buttonVariants } from "@/components/ui/button"
import { GlowBorder } from "@/components/ludus/glow-border"
import { TiltCard } from "@/components/ludus/tilt-card"
import { fadeUp, stagger, viewport } from "@/lib/motion"
import { cn } from "@/lib/utils"

type Cta = { label: string; href: string }

type FunnelStep = {
  label: string
  drop: string
  /** Highlight this step as the one Lumen can fix right now. */
  highlighted?: boolean
  /** One-line fix note shown on the highlighted step. */
  note?: string
}

export type Features04Props = {
  index?: string
  label?: string
  note?: string
  title?: React.ReactNode
  description?: string
  /** Exactly three one-line proof points. */
  checkpoints?: string[]
  cta?: Cta
  ctaNote?: string
  panelTitle?: string
  panelMeta?: string
  /** Funnel steps rendered inside the report mock. */
  steps?: FunnelStep[]
  /** Heading element — use "h1" when this is the page's main heading. */
  as?: "h1" | "h2"
  className?: string
}

const defaultSteps: FunnelStep[] = [
  { label: "Cart → Shipping", drop: "−12%" },
  { label: "Shipping → Payment", drop: "−9%" },
  {
    label: "Payment → Confirm",
    drop: "−31%",
    highlighted: true,
    note: "↑ Fix ready · recovers ≈ $18k/mo",
  },
]

const bars = [22, 30, 26, 38, 34, 46, 42, 58, 54, 70, 66, 82]

export function Features04({
  index = "02",
  label = "Feature",
  note = "Funnel X-ray",
  title = "See exactly where buyers give up.",
  description = "Funnel X-ray traces every session from landing to receipt and pinpoints the step that leaks the most revenue — with the fix attached.",
  checkpoints = [
    "Every drop-off mapped to a step, not a hunch",
    "Each leak priced in dollars per month",
    "First report ready 4 minutes after install",
  ],
  cta = { label: "Run your first X-ray free", href: "#" },
  ctaNote = "Free 14-day trial · No credit card",
  panelTitle = "Funnel X-ray — Checkout",
  panelMeta = "Last 7 days",
  steps = defaultSteps,
  as: Heading = "h2",
  className,
}: Features04Props) {
  return (
    <section className={cn("relative bg-background", className)}>
      <motion.div
        initial="hidden"
        whileInView="visible"
        viewport={viewport}
        variants={stagger(0.09)}
        className="mx-auto max-w-6xl px-6 py-20 md:py-28"
      >
        {/* Indexed caption bar */}
        <motion.div
          variants={fadeUp}
          className="flex items-baseline justify-between border-b pb-3 text-xs tracking-[0.2em] text-muted-foreground uppercase"
        >
          <span>
            <span className="text-primary">{index}</span> — {label}
          </span>
          <span className="hidden sm:block">{note}</span>
        </motion.div>

        {/* Golden split: benefit brief / focal panel */}
        <div className="mt-16 grid gap-x-12 gap-y-16 lg:grid-cols-[1fr_1.618fr]">
          <motion.div variants={fadeUp} className="flex flex-col">
            <Heading className="text-4xl font-medium tracking-tight text-balance md:text-5xl">
              {title}
            </Heading>
            <p className="mt-6 max-w-[44ch] text-pretty text-muted-foreground">
              {description}
            </p>

            <ul className="mt-8 divide-y">
              {checkpoints.map((point) => (
                <li key={point} className="flex items-center gap-3 py-3 text-sm">
                  <span
                    aria-hidden
                    className="flex size-5 shrink-0 items-center justify-center bg-primary/10 text-primary"
                  >
                    <Check className="size-3" />
                  </span>
                  {point}
                </li>
              ))}
            </ul>

            <div className="mt-8">
              <a
                href={cta.href}
                className={cn(buttonVariants({ size: "lg" }), "group w-full justify-between sm:w-auto sm:gap-3")}
              >
                {cta.label}
                <ArrowRight className="transition-transform group-hover:translate-x-0.5" />
              </a>
              <p className="mt-3 text-xs tracking-wide text-muted-foreground/70 uppercase">
                {ctaNote}
              </p>
            </div>
          </motion.div>

          {/* Focal product panel — GlowBorder is its living frame */}
          <motion.div variants={fadeUp}>
            <TiltCard maxTilt={3}>
              <div className="relative border bg-background p-6 md:p-8">
                <GlowBorder intensity={0.45} />
                <div className="relative">
                  <div className="flex items-baseline justify-between gap-4 border-b pb-3 text-xs tracking-[0.2em] text-muted-foreground uppercase">
                    <span>{panelTitle}</span>
                    <span className="flex items-center gap-1.5">
                      <span aria-hidden className="size-1.5 animate-pulse rounded-full bg-primary" />
                      {panelMeta}
                    </span>
                  </div>

                  <div className="mt-6 divide-y border">
                    {steps.map((step) => (
                      <div
                        key={step.label}
                        className={cn("px-4 py-3", step.highlighted && "bg-primary/10")}
                      >
                        <div className="flex items-center justify-between gap-4 text-sm">
                          <span className={cn(step.highlighted && "font-medium")}>
                            {step.label}
                          </span>
                          <span
                            className={cn(
                              "text-muted-foreground tabular-nums",
                              step.highlighted && "font-medium text-primary"
                            )}
                          >
                            {step.drop}
                          </span>
                        </div>
                        {step.highlighted && step.note && (
                          <p className="mt-1 text-xs text-primary">{step.note}</p>
                        )}
                      </div>
                    ))}
                  </div>

                  <div aria-hidden className="mt-6 flex h-16 items-end gap-1 border-t pt-4">
                    {bars.map((h, i) => (
                      <div
                        key={i}
                        style={{ height: `${h}%` }}
                        className={cn("flex-1", i >= bars.length - 3 ? "bg-primary" : "bg-primary/25")}
                      />
                    ))}
                  </div>
                </div>
              </div>
            </TiltCard>
          </motion.div>
        </div>
      </motion.div>
    </section>
  )
}