import {
  BarChart3,
  Boxes,
  Code2,
  FlaskConical,
  Gauge,
  Headset,
  Lock,
  type LucideIcon,
  Megaphone,
  Network,
  Receipt,
  ScrollText,
  UserCheck,
} from "lucide-react";
import Link from "next/link";

import { HeroAmbient } from "./HeroAmbient";

/* Marketing landing — WorkClaw's full section layout/styling reproduced 1:1,
   Clawmates-branded with honest claims (no borrowed customer logos, no
   unverified SOC 2). Measurements/colours lifted from the live source.
   Coral text on light fills uses the AA-safe `coral-strong`; #e0584a stays on
   dark fills and solid buttons. */

const ctaCoral =
  "inline-flex items-center justify-center rounded-full bg-marketing-coral-strong font-semibold text-white transition-colors hover:bg-[#a63a2f]";

/* ---------- Hero ---------- */
export function Hero() {
  return (
    <section
      className="relative -mt-[98px] h-[760px] w-full overflow-hidden bg-[#0b1220] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
      style={{ zIndex: 2 }}
    >
      {/* Animated ambient backdrop (replaces the hero illustration). */}
      <HeroAmbient />
      <div
        className="absolute left-1/2 flex w-full max-w-[720px] -translate-x-1/2 flex-col items-center px-6 text-center"
        style={{ top: "clamp(160px, 12.0139vw, 173px)", gap: 48, zIndex: 2 }}
      >
        <div className="flex flex-col items-center" style={{ gap: 16 }}>
          <span
            className="font-[500] uppercase"
            style={{ color: "#94a3b8", fontSize: 13, letterSpacing: "0.16em" }}
          >
            Agentic infrastructure
          </span>
          <h1
            className="m-0 font-[675]"
            style={{
              color: "#f5f8fc",
              fontSize: "clamp(40px, 5vw, 64px)",
              lineHeight: 1.02,
              letterSpacing: "-0.02em",
            }}
          >
            Build safe, scalable
            <br className="hidden sm:inline" /> agentic systems
          </h1>
          <p
            className="m-0 font-medium"
            style={{
              color: "#cbd5e1",
              fontSize: "clamp(16px, 1.6vw, 22px)",
              lineHeight: 1.45,
              letterSpacing: "-0.01em",
              maxWidth: 620,
            }}
          >
            From a single agent to an entire company of them — with the
            hierarchy, controls, and human approvals to run them safely in
            production.
          </p>
        </div>
        <div
          className="flex w-full flex-col items-stretch justify-center px-4 sm:flex-row sm:items-center sm:px-0"
          style={{ gap: 16, maxWidth: 460 }}
        >
          <a
            href="mailto:sales@clawmates.work"
            className={`${ctaCoral} h-14 px-10 text-base sm:h-16`}
          >
            Book a demo
          </a>
          <a
            href="https://git.redclaw.dev/osobh/clawmates"
            className="inline-flex h-14 items-center justify-center rounded-full border border-white/25 px-10 text-base font-semibold text-white transition-colors hover:bg-white/10 sm:h-16"
          >
            Read the docs
          </a>
        </div>
      </div>
      {/* Soft fade into the white section below. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-white"
        style={{ zIndex: 1 }}
      />
    </section>
  );
}

/* Shared bits for the value sections below. */
const eyebrow = "font-[500] uppercase";
const eyebrowStyle = {
  color: "#475569",
  fontSize: 13,
  letterSpacing: "0.16em",
} as const;

function IconChip({ Icon }: { Icon: LucideIcon }) {
  return (
    <span
      className="flex size-12 items-center justify-center rounded-2xl"
      style={{ backgroundColor: "rgba(59,130,246,0.1)" }}
    >
      <Icon aria-hidden size={24} strokeWidth={1.75} className="text-marketing-azure" />
    </span>
  );
}

/* ---------- Scale (one → a company) ---------- */
const SCALE = [
  {
    Icon: Boxes,
    title: "Per-tenant runtime",
    body: "Each workspace runs in its own isolated container — separate data, separate compute, no noisy neighbors.",
  },
  {
    Icon: Gauge,
    title: "Scale to zero",
    body: "Idle workspaces cost nothing and resume in seconds, so a thousand agents are as cheap to keep as one.",
  },
  {
    Icon: Network,
    title: "Delegation hierarchy",
    body: "Agents spawn and manage sub-agents, so one operator can run a whole org chart of them.",
  },
];

export function Scale() {
  return (
    <section id="scale" className="flex w-full flex-col items-center bg-white px-6 py-[104px] sm:py-[128px]">
      <div className="flex w-full max-w-[760px] flex-col items-center gap-4 text-center">
        <span className={eyebrow} style={eyebrowStyle}>
          Scale
        </span>
        <h2 className="text-[32px] leading-none font-[650] tracking-[-1.6px] text-marketing-ink sm:text-[48px] lg:text-[56px]">
          From one agent to a whole company
        </h2>
        <p className="max-w-[560px] text-[18px] leading-[1.6] text-marketing-slate sm:text-[20px]">
          Start with a single claw. Grow to a fleet that delegates across teams —
          without changing how you run it.
        </p>
      </div>
      <div className="mt-12 grid w-full max-w-[1100px] gap-6 sm:grid-cols-3">
        {SCALE.map(({ Icon, title, body }) => (
          <div
            key={title}
            className="flex flex-col items-start gap-4 rounded-3xl border border-marketing-border bg-marketing-mist px-7 py-9"
          >
            <IconChip Icon={Icon} />
            <h3 className="text-[20px] font-semibold tracking-[-0.01em] text-marketing-ink">
              {title}
            </h3>
            <p className="text-[15px] leading-[1.6] text-marketing-slate">{body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Why governed + hierarchical ---------- */
const WHY = [
  {
    Icon: UserCheck,
    title: "Humans where it matters",
    body: "Agents move fast inside the sandbox; only actions that leave it — email, payments, deletes — pause for a one-click human approval.",
  },
  {
    Icon: ScrollText,
    title: "Nothing runs un-audited",
    body: "Every action and decision lands in a single, tamper-evident journal you can replay end to end.",
  },
  {
    Icon: Network,
    title: "Delegation, not chaos",
    body: "A clear hierarchy keeps large fleets organized and accountable — you always know which agent did what, and why.",
  },
  {
    Icon: Lock,
    title: "No rogue access",
    body: "Sandboxed compute with no egress, plus a secret broker the agent can never read — credentials are used, never seen.",
  },
];

export function WhyGoverned() {
  return (
    <section id="why" className="flex w-full flex-col items-center bg-marketing-mist px-6 py-[104px] sm:py-[128px]">
      <div className="flex w-full max-w-[760px] flex-col items-center gap-4 text-center">
        <span className={eyebrow} style={eyebrowStyle}>
          Why Clawmates
        </span>
        <h2 className="text-[32px] leading-none font-[650] tracking-[-1.6px] text-marketing-ink sm:text-[48px] lg:text-[56px]">
          Built to run in production
        </h2>
        <p className="max-w-[560px] text-[18px] leading-[1.6] text-marketing-slate sm:text-[20px]">
          The controls that make a fleet of autonomous agents safe to point at
          real work.
        </p>
      </div>
      <div className="mt-12 grid w-full max-w-[920px] gap-6 sm:grid-cols-2">
        {WHY.map(({ Icon, title, body }) => (
          <div
            key={title}
            className="flex flex-col items-start gap-4 rounded-3xl border border-marketing-border bg-white px-7 py-9"
          >
            <IconChip Icon={Icon} />
            <h3 className="text-[20px] font-semibold tracking-[-0.01em] text-marketing-ink">
              {title}
            </h3>
            <p className="text-[15px] leading-[1.6] text-marketing-slate">{body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Built for any domain (use cases) ---------- */
const USE_CASES = [
  { Icon: Headset, title: "Customer support", body: "Triage tickets, draft replies, and escalate with approvals." },
  { Icon: Megaphone, title: "Marketing ops", body: "Draft campaigns, schedule posts, and report on performance." },
  { Icon: FlaskConical, title: "Research", body: "Gather sources, synthesize findings, and keep a cited trail." },
  { Icon: Code2, title: "Engineering", body: "Open PRs, run checks, and ship behind human review." },
  { Icon: Receipt, title: "Finance & ops", body: "Reconcile, process refunds, and move money — only with sign-off." },
  { Icon: BarChart3, title: "Data & analytics", body: "Query warehouses, build reports, and surface anomalies." },
];

export function UseCases() {
  return (
    <section id="use-cases" className="flex w-full flex-col items-center bg-white px-6 py-[104px] sm:py-[128px]">
      <div className="flex w-full max-w-[760px] flex-col items-center gap-4 text-center">
        <span className={eyebrow} style={eyebrowStyle}>
          Use cases
        </span>
        <h2 className="text-[32px] leading-none font-[650] tracking-[-1.6px] text-marketing-ink sm:text-[48px] lg:text-[56px]">
          Put a crew on any kind of work
        </h2>
        <p className="max-w-[560px] text-[18px] leading-[1.6] text-marketing-slate sm:text-[20px]">
          Clawmates is domain-agnostic — give each claw a job, the tools, and the
          guardrails, and it gets to work.
        </p>
      </div>
      <div className="mt-12 grid w-full max-w-[1100px] gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {USE_CASES.map(({ Icon, title, body }) => (
          <div
            key={title}
            className="flex flex-col items-start gap-3 rounded-3xl border border-marketing-border bg-marketing-mist px-7 py-8"
          >
            <IconChip Icon={Icon} />
            <h3 className="text-[18px] font-semibold tracking-[-0.01em] text-marketing-ink">
              {title}
            </h3>
            <p className="text-[15px] leading-[1.55] text-marketing-slate">{body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Final CTA band ---------- */
export function FinalCta() {
  return (
    <section className="relative w-full overflow-hidden bg-[#0b1220] px-6 py-[112px]">
      <div className="mx-auto flex max-w-[680px] flex-col items-center gap-7 text-center">
        <h2
          className="m-0 font-[650]"
          style={{ color: "#f5f8fc", fontSize: "clamp(32px, 4.5vw, 52px)", lineHeight: 1.05, letterSpacing: "-0.02em" }}
        >
          Build your agent company
        </h2>
        <p className="m-0 max-w-[520px] text-[18px] leading-[1.5] text-[#cbd5e1]">
          Stand up your first claw today — and the controls to run a thousand of
          them safely.
        </p>
        <div className="flex w-full flex-col items-stretch justify-center gap-4 sm:w-auto sm:flex-row sm:items-center">
          <a href="mailto:sales@clawmates.work" className={`${ctaCoral} h-14 px-10 text-base sm:h-16`}>
            Book a demo
          </a>
          <a
            href="https://git.redclaw.dev/osobh/clawmates"
            className="inline-flex h-14 items-center justify-center rounded-full border border-white/25 px-10 text-base font-semibold text-white transition-colors hover:bg-white/10 sm:h-16"
          >
            Read the docs
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer (dark tier) ---------- */
const FOOTER_LINKS = [
  { label: "Sign up", href: "/login" },
  { label: "Use cases", href: "#use-cases" },
  { label: "Why", href: "#why" },
  { label: "FAQ", href: "#faq" },
  { label: "Docs", href: "https://git.redclaw.dev/osobh/clawmates" },
  { label: "Book a demo", href: "mailto:sales@clawmates.work" },
];

export function Footer() {
  return (
    <footer className="w-full">
      <div className="relative flex w-full flex-col items-center bg-[#161d27] px-6 pt-[40px] pb-12 sm:pt-[42px] sm:pb-16">
        <div className="flex w-full max-w-[1100px] flex-col gap-[48px] sm:gap-[72px]">
          <div className="flex items-center justify-between gap-8">
            <Link href="/" aria-label="clawmates" className="flex items-center gap-3">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/images/clawmates-mark.png"
                alt=""
                className="h-10 w-auto sm:h-12"
              />
              <span className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
                clawmates
              </span>
            </Link>
            <div className="flex flex-col items-end gap-6">
              <nav className="flex flex-col items-end gap-6 text-[16px] font-normal text-white sm:flex-row sm:items-center">
                {FOOTER_LINKS.map((l) =>
                  l.href.startsWith("/") ? (
                    <Link key={l.label} href={l.href} className="transition-colors hover:text-white/80">{l.label}</Link>
                  ) : (
                    <a key={l.label} href={l.href} className="transition-colors hover:text-white/80">{l.label}</a>
                  ),
                )}
              </nav>
              <div className="flex items-center gap-4">
                {SOCIALS.map((s) => (
                  <a key={s.label} href="#" aria-label={s.label} className="text-white/70 transition-colors hover:text-white">
                    {s.icon}
                  </a>
                ))}
              </div>
            </div>
          </div>
          <div className="flex items-center justify-between text-[16px] font-normal text-[#77879e]">
            <span>© 2026 Clawmates</span>
            <div className="flex items-center gap-8">
              <a href="#" className="transition-colors hover:text-white/60">Privacy Policy</a>
              <a href="#" className="transition-colors hover:text-white/60">Terms of Service</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

const SOCIALS = [
  { label: "Instagram", icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="5" /><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none" /></svg>) },
  { label: "X", icon: (<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>) },
  { label: "LinkedIn", icon: (<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>) },
];