"use client";

import * as React from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { Mail, Phone, Globe, MapPin, ArrowUpRight, QrCode } from "lucide-react";
import { founders, company } from "@/lib/content";
import { SectionHeading, Reveal } from "@/components/ui-stratops/reveal";

export function LeadershipSection() {
  return (
    <section
      id="leadership"
      className="relative overflow-hidden border-t border-border/60 py-20 sm:py-28 lg:py-32"
    >
      {/* Hex pattern backdrop */}
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.07]"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0L45 0L60 26L45 52L15 52L0 26Z' fill='none' stroke='oklch(0.65 0.20 252)' stroke-width='1'/%3E%3C/svg%3E\")",
          backgroundSize: "60px 52px",
        }}
      />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Leadership"
          title={
            <>
              Two founders.{" "}
              <span className="text-brand italic">
                One standard of excellence.
              </span>
            </>
          }
          description="The people who pitch are the people who deliver. Every StratOps engagement is led personally by one of our two founders — no hand-offs, no junior substitution."
          className="mb-14"
        />

        <div className="grid gap-6 lg:grid-cols-2">
          {founders.map((founder, i) => (
            <Reveal key={founder.name} delay={i * 0.12}>
              <BusinessCard founder={founder} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BusinessCard({
  founder,
}: {
  founder: (typeof founders)[number];
}) {
  const [flipped, setFlipped] = React.useState(false);

  return (
    <div
      className="group relative h-[440px] [perspective:1600px]"
      onMouseEnter={() => setFlipped(true)}
      onMouseLeave={() => setFlipped(false)}
    >
      <motion.div
        className="relative h-full w-full [transform-style:preserve-3d]"
        animate={{ rotateY: flipped ? 180 : 0 }}
        transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
      >
        {/* FRONT */}
        <CardFront founder={founder} />

        {/* BACK */}
        <CardBack founder={founder} />
      </motion.div>
    </div>
  );
}

function CardFront({ founder }: { founder: (typeof founders)[number] }) {
  return (
    <div className="absolute inset-0 flex flex-col overflow-hidden rounded-2xl border border-brand/30 bg-gradient-to-br from-ink via-card to-ink p-7 shadow-[0_30px_80px_-40px_var(--brand-deep)] [backface-visibility:hidden] sm:p-9">
      {/* Diagonal brand lines (echo of original card) */}
      <div className="pointer-events-none absolute inset-0 opacity-30">
        <div
          className="absolute -right-20 top-0 h-[140%] w-px rotate-[18deg]"
          style={{
            background:
              "linear-gradient(to bottom, transparent, var(--brand), transparent)",
          }}
        />
        <div
          className="absolute -right-32 top-0 h-[140%] w-px rotate-[18deg] opacity-50"
          style={{
            background:
              "linear-gradient(to bottom, transparent, var(--brand-soft), transparent)",
          }}
        />
      </div>

      {/* Top: logo + wordmark */}
      <div className="relative flex items-center gap-3">
        <Image
          src="/brand/logo-right.png"
          alt="StratOps logo"
          width={48}
          height={48}
          className="h-11 w-11 object-contain drop-shadow-[0_2px_12px_rgba(110,170,255,0.5)]"
        />
        <div className="flex flex-col leading-none">
          <span className="font-display text-lg font-semibold tracking-tight text-foreground">
            StratOps
          </span>
          <span className="font-mono-num text-[10px] uppercase tracking-[0.22em] text-brand">
            Advisory Group
          </span>
        </div>
      </div>

      {/* Middle: founder identity */}
      <div className="relative mt-10 flex items-start gap-5">
        <div className="relative flex-shrink-0">
          <div
            className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-brand to-brand-soft font-display text-2xl font-bold text-background shadow-[0_10px_30px_-12px_var(--brand)]"
            style={{
              clipPath:
                "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
            }}
          >
            {founder.initials}
          </div>
          <span className="absolute -bottom-1.5 -right-1.5 flex h-6 w-6 items-center justify-center rounded-full border-2 border-ink bg-brand/20">
            <span className="h-2 w-2 rounded-full bg-brand animate-pulse-glow" />
          </span>
        </div>
        <div className="min-w-0 flex-1 pt-1">
          <h3 className="font-display text-2xl font-semibold leading-tight tracking-tight text-foreground">
            {founder.name}
          </h3>
          <p className="mt-1 text-sm font-medium text-gold">
            {founder.role}
          </p>
          <span className="mt-2.5 inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-background/40 px-2.5 py-1 font-mono-num text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
            Focus · {founder.focus}
          </span>
        </div>
      </div>

      {/* Contact rows */}
      <div className="relative mt-6 flex flex-col gap-1.5 border-t border-border/60 pt-4 text-sm">
        <a
          href={`mailto:${founder.email}`}
          className="group/email inline-flex items-center gap-2.5 text-foreground/90 transition-colors hover:text-brand"
        >
          <Mail className="h-3.5 w-3.5 text-muted-foreground group-hover/email:text-brand" />
          {founder.email}
        </a>
        <a
          href={`tel:${founder.phone.replace(/\s/g, "")}`}
          className="group/phone inline-flex items-center gap-2.5 text-foreground/90 transition-colors hover:text-brand"
        >
          <Phone className="h-3.5 w-3.5 text-muted-foreground group-hover/phone:text-brand" />
          {founder.phone}
        </a>
        <div className="inline-flex items-center gap-2.5 text-muted-foreground">
          <Globe className="h-3.5 w-3.5" />
          {company.website}
        </div>
        <div className="inline-flex items-center gap-2.5 text-muted-foreground">
          <MapPin className="h-3.5 w-3.5" />
          {company.location}
        </div>
      </div>

      {/* Tagline footer */}
      <div className="relative mt-auto pt-5">
        <div
          className="h-px w-full"
          style={{
            background:
              "linear-gradient(90deg, var(--brand), transparent)",
          }}
        />
        <p className="mt-3 font-mono-num text-[11px] uppercase tracking-[0.28em] text-brand">
          {founder.tagline}
        </p>
      </div>

      {/* Hint to flip */}
      <span className="absolute right-6 top-6 flex items-center gap-1 font-mono-num text-[9px] uppercase tracking-[0.24em] text-muted-foreground/60">
        Hover · flip
      </span>
    </div>
  );
}

function CardBack({ founder }: { founder: (typeof founders)[number] }) {
  // Decorative QR-style pattern (deterministic per founder name)
  const qrCells = React.useMemo(() => {
    return Array.from({ length: 49 }).map((_, idx) => {
      const seed = (idx * 7 + founder.name.length) % 100;
      return seed > 45;
    });
  }, [founder.name]);

  return (
    <div className="absolute inset-0 flex flex-col items-center justify-center overflow-hidden rounded-2xl border border-brand/30 bg-gradient-to-br from-background via-card to-background p-7 shadow-[0_30px_80px_-40px_var(--brand-deep)] [backface-visibility:hidden] [transform:rotateY(180deg)] sm:p-9">
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.08]"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg width='40' height='35' viewBox='0 0 40 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0L30 0L40 17.5L30 35L10 35L0 17.5Z' fill='none' stroke='oklch(0.65 0.20 252)' stroke-width='1'/%3E%3C/svg%3E\")",
          backgroundSize: "40px 35px",
        }}
      />

      <div className="relative flex flex-col items-center text-center">
        <Image
          src="/brand/logo-bottom.png"
          alt="StratOps"
          width={120}
          height={120}
          className="h-24 w-auto object-contain drop-shadow-[0_4px_20px_rgba(110,170,255,0.5)]"
        />
        <p className="mt-4 font-display text-lg font-semibold tracking-tight text-foreground">
          StratOps Advisory Group
        </p>
        <p className="font-mono-num text-[10px] uppercase tracking-[0.22em] text-brand">
          {company.location}
        </p>

        {/* QR-style element (decorative) */}
        <div className="mt-7 flex flex-col items-center gap-2">
          <div className="relative grid h-24 w-24 grid-cols-7 grid-rows-7 gap-0.5 rounded-lg border border-brand/30 bg-ink/60 p-2">
            {/* Decorative QR-like grid */}
            {qrCells.map((on, idx) => (
              <span
                key={idx}
                className={
                  on ? "rounded-[1px] bg-brand" : "rounded-[1px] bg-transparent"
                }
              />
            ))}
            {/* Corner markers */}
            <span className="pointer-events-none absolute left-1 top-1 h-3 w-3 rounded-sm border-2 border-brand bg-ink" />
            <span className="pointer-events-none absolute right-1 top-1 h-3 w-3 rounded-sm border-2 border-brand bg-ink" />
            <span className="pointer-events-none absolute bottom-1 left-1 h-3 w-3 rounded-sm border-2 border-brand bg-ink" />
          </div>
          <span className="flex items-center gap-1.5 font-mono-num text-[9px] uppercase tracking-[0.24em] text-muted-foreground">
            <QrCode className="h-3 w-3" />
            Scan to visit our website
          </span>
        </div>

        <a
          href={`mailto:${founder.email}`}
          className="mt-6 inline-flex items-center gap-1.5 rounded-full bg-brand px-4 py-2 text-xs font-semibold text-background transition-colors hover:bg-brand-soft"
        >
          Contact {founder.name.split(" ")[0]}
          <ArrowUpRight className="h-3.5 w-3.5" />
        </a>
      </div>
    </div>
  );
}