clawmates/frontend/src/components/marketing/Sections.tsx

import { Lock, ShieldCheck } from "lucide-react";
import Link from "next/link";

import { AgentToken } from "./AgentToken";
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:[email protected]"
            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>
  );
}

/* ---------- Crew strip (agent-token roster on the open Claw runtime) ---------- */
const CREW = [
  "Marketing Claw",
  "Support Claw",
  "Research Claw",
  "Engineering Claw",
  "Ops Claw",
  "Growth Claw",
  "Analytics Claw",
  "Design Claw",
];

export function CrewStrip() {
  return (
    <div className="relative w-full bg-white" style={{ zIndex: 1 }}>
      <div className="relative z-[1] mx-auto flex max-w-[1120px] flex-col items-center gap-7 px-6 pt-10 pb-14">
        <p className="text-center text-[16px] font-semibold text-[#647289]">
          A whole crew, built on the open{" "}
          <span className="text-marketing-coral-strong">Claw</span> runtime
        </p>
        <div className="flex w-full flex-wrap items-center justify-center gap-2.5">
          {CREW.map((name) => (
            <div
              key={name}
              className="flex items-center gap-2.5 rounded-2xl border border-marketing-border bg-white px-3 py-2"
            >
              <AgentToken name={name} size={30} />
              <span className="text-[13px] font-medium whitespace-nowrap text-marketing-ink">
                {name}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Enhanced security ---------- */
const SECURITY = [
  { icon: "icon-admin", title: "Admin controls", body: "Admins can control access, app integrations, and skill installations." },
  { icon: "icon-vault", title: "Custom-built vault", body: "Credentials are stored in a secure vault that can require human approval." },
  { icon: "icon-separation", title: "Separation of data", body: "Each clawmate has a separate computer with private file storage." },
  { icon: "icon-soc2", title: "Air-gappable", body: "Install from a signed, offline-verified bundle and run fully air-gapped." },
];

export function Security() {
  return (
    <section id="security" className="flex w-full flex-col items-center px-6 py-[104px] sm:py-[128px]">
      <div className="flex w-full max-w-[1100px] flex-col items-center gap-10">
        <div className="flex flex-col items-center gap-4 text-center">
          <h2 className="text-[36px] leading-none font-[650] tracking-[-2.24px] text-[#161d27] sm:text-[48px] lg:text-[56px]">
            Enhanced security
          </h2>
          <p className="max-w-[484px] text-[18px] leading-[1.6] text-[#0a0f1e]/75 sm:text-[20px]">
            Clawmates is built for security-minded teams, adding a layer of
            control and safety on top of the open Claw runtime.
          </p>
        </div>
        <div className="flex items-center justify-center py-2">
          <span
            className="relative flex items-center justify-center rounded-[28px] border border-marketing-border bg-marketing-mist"
            style={{ width: 132, height: 132 }}
          >
            <ShieldCheck aria-hidden size={64} strokeWidth={1.5} className="text-marketing-azure" />
            <span
              className="absolute -right-2 -bottom-2 flex size-9 items-center justify-center rounded-full bg-marketing-teal text-white"
              style={{ boxShadow: "0 6px 16px rgba(20,184,166,0.4)" }}
            >
              <Lock aria-hidden size={16} strokeWidth={2} />
            </span>
          </span>
        </div>
        <div className="grid w-full grid-cols-1 gap-10 pt-8 sm:grid-cols-2 lg:grid-cols-4">
          {SECURITY.map((s) => (
            <div key={s.title} className="mx-auto flex max-w-[256px] flex-col items-center gap-2">
              <img src={`/images/marketing/${s.icon}.svg`} alt="" className="size-6" />
              <h3 className="text-center text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">{s.title}</h3>
              <p className="max-w-[247px] text-center text-[14px] leading-[1.4] text-[#161d27]">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer (CTA tier + dark tier) ---------- */
const FOOTER_LINKS = [
  { label: "Sign up", href: "/login" },
  { label: "Pricing", href: "#crew" },
  { label: "Docs", href: "#" },
  { label: "Contact", href: "mailto:[email protected]" },
  { label: "Blog", href: "#deck" },
  { label: "Book a demo", href: "mailto:[email protected]" },
];

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>) },
];