"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Compass, Rocket, Building2, ShieldCheck, ArrowRight } from "lucide-react";
import { engagementFormats } from "@/lib/content";
import { SectionHeading, Reveal } from "@/components/ui-stratops/reveal";
import { LoopingVideoBackground } from "@/components/ui-stratops/looping-video-background";

const icons = [Compass, Rocket, Building2, ShieldCheck];

export function EngagementFormatsSection() {
  return (
    <section
      id="engagement"
      className="relative overflow-hidden border-t border-border/60 py-20 sm:py-28 lg:py-32"
    >
      {/* Handshake / consulting video backdrop */}
      <LoopingVideoBackground
        src="/video/handshake.mp4"
        poster="/markets/strategy.png"
        alt="StratOps founders shaking hands with a client across a desk"
        className="-z-10"
        overlayStyle={{
          background:
            "linear-gradient(180deg, oklch(0.10 0.05 258 / 0.94) 0%, oklch(0.13 0.05 258 / 0.90) 50%, oklch(0.10 0.05 258 / 0.96) 100%)",
        }}
      />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Engagement formats"
          title={
            <>
              Four ways to work with us.{" "}
              <span className="text-brand italic">
                One standard.
              </span>
            </>
          }
          description="Pick the format that matches where you are. Every engagement is founder-led and outcome-priced — the format just shapes the scope and cadence."
          className="mb-14"
        />

        <div className="grid gap-4 sm:grid-cols-2">
          {engagementFormats.map((fmt, i) => {
            const Icon = icons[i] ?? Compass;
            return (
              <Reveal key={fmt.title} delay={i * 0.08}>
                <article className="group relative h-full overflow-hidden rounded-2xl border border-border/60 bg-card p-7 transition-all duration-300 hover:border-brand/40 hover:shadow-[0_20px_60px_-30px_var(--brand)]">
                  <div
                    className="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full opacity-0 blur-3xl transition-opacity duration-500 group-hover:opacity-25"
                    style={{ background: "var(--brand)" }}
                  />
                  <div className="relative flex items-start justify-between gap-4">
                    <span className="flex h-12 w-12 items-center justify-center rounded-xl border border-border/60 bg-background/40 text-brand transition-colors group-hover:border-brand/50 group-hover:bg-brand/10">
                      <Icon className="h-5.5 w-5.5" strokeWidth={1.6} />
                    </span>
                    <span className="rounded-full border border-border/60 bg-background/40 px-3 py-1 font-mono-num text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
                      {fmt.duration}
                    </span>
                  </div>
                  <h3 className="relative mt-5 font-display text-2xl font-semibold tracking-tight text-foreground">
                    {fmt.title}
                  </h3>
                  <p className="relative mt-2 text-sm leading-relaxed text-muted-foreground">
                    {fmt.description}
                  </p>
                  <div className="relative mt-5 flex items-center gap-2 border-t border-border/60 pt-4">
                    <span className="font-mono-num text-[10px] uppercase tracking-[0.18em] text-iris">
                      Best for
                    </span>
                    <span className="text-sm text-foreground/85">
                      {fmt.bestFor}
                    </span>
                  </div>
                </article>
              </Reveal>
            );
          })}
        </div>

        <Reveal delay={0.1}>
          <div className="mt-10 flex flex-col items-start justify-between gap-4 rounded-2xl border border-brand/30 bg-brand/5 p-6 sm:flex-row sm:items-center sm:p-8">
            <div>
              <h3 className="font-display text-xl font-semibold text-foreground">
                Not sure which format fits?
              </h3>
              <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                Tell Thabo, our AI assistant, what you are facing — or book a
                free discovery session and a founder will help you choose.
              </p>
            </div>
            <a
              href="#book"
              className="flex-shrink-0 inline-flex items-center gap-2 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-background transition-colors hover:bg-brand-soft"
            >
              Book a discovery session
              <ArrowRight className="h-4 w-4" />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}