// ============================================================
// autoclient.io — PROJECTS / WORKS (visual portfolio)
// ============================================================
const { useState: usePrS } = React;

const PROJECTS = [
  { client: "Enterprise SaaS Platform", cats: ["Website", "UI-UX"], hue: "purple", label: "SaaS", icon: "cloud", result: "Enterprise demand-gen across search & social", year: "2024", slug: "saas" },
  { client: "Cloud Infrastructure Brand", cats: ["Website"], hue: "violet", label: "Cloud", icon: "server", result: "Organic pipeline built on technical content", year: "2023", slug: "cloud" },
  { client: "National Cosmetic-Surgery Group", cats: ["UI-UX"], hue: "coral", label: "Medical", icon: "stethoscope", result: "Consult bookings up via email & CRM automation", year: "2024", slug: "cosmetic" },
  { client: "Multi-Location Law Firm", cats: ["Website", "UI-UX"], hue: "mix", label: "Law", icon: "scale", result: "Local SEO + lead-gen that signs more cases", year: "2025", slug: "law" },
  { client: "National Ecommerce Retailer", cats: ["Website"], hue: "pink", label: "Retail", icon: "shopping-cart", result: "Ecommerce paid media at enterprise scale", year: "2022", slug: "retail" },
  { client: "Auto-Parts Ecommerce", cats: ["UI-UX"], hue: "violet", label: "Auto", icon: "settings", result: "Conversion-focused storefront redesign", year: "2023", slug: "auto" },
];
const FILTERS = ["All", "UI-UX", "Website"];

function ProjectsHero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "176px 0 64px" }}>
      <Aura color="#8784FD" size={560} top={-200} left={"30%"} opacity={0.4} drift={1} />
      <Aura color="#FF6666" size={420} top={-20} right={-160} opacity={0.28} drift={2} />
      <div className="wrap" style={{ position: "relative", zIndex: 1, maxWidth: 900 }}>
        <span className="overline-grad fade-up">Our work</span>
        <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,5.4vw,4.8rem)", lineHeight: 1.05, letterSpacing: "-0.03em", margin: "20px 0 0" }}>
          Work that captivates, engages, and <span className="gt" style={{ fontWeight: 300 }}>gets results.</span>
        </h1>
        <p className="fade-up" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg-on-dark-2)", maxWidth: 640, margin: "26px 0 0" }}>
          A look at the brands and websites we've built. Want the numbers behind the work? Read <a href="#/case-studies" className="gt" style={{ fontWeight: 600 }}>our case studies</a>.
        </p>
      </div>
    </section>
  );
}

function WorksGrid() {
  const [filter, setFilter] = usePrS("All");
  const shown = PROJECTS.filter((p) => filter === "All" || p.cats.includes(filter));
  return (
    <section style={{ paddingBottom: 96 }}>
      <div className="wrap-wide">
        <div style={{ display: "flex", gap: 10, marginBottom: 40, flexWrap: "wrap" }}>
          {FILTERS.map((f) => (
            <button key={f} onClick={() => setFilter(f)} className="pill" style={{
              cursor: "pointer", border: 0, fontSize: 14, padding: "10px 22px",
              background: filter === f ? "var(--auto-gradient)" : "transparent",
              color: filter === f ? "#fff" : "var(--fg-on-dark-2)",
              boxShadow: filter === f ? "var(--shadow-glow)" : "inset 0 0 0 1px var(--line-on-dark)",
              transition: "all .2s",
            }}>{f}</button>
          ))}
        </div>
        <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 22 }}>
          {shown.map((p, i) => <WorkCard key={p.client} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}
function WorkCard({ p, i }) {
  const [hover, setHover] = usePrS(false);
  const href = p.slug ? `#/case-studies/${p.slug}` : "#/case-studies";
  const cta = p.slug ? "View case study" : "View work";
  return (
    <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "block" }}>
      <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", transform: hover ? "translateY(-4px)" : "none", transition: "transform .25s var(--ease-out), box-shadow .25s", boxShadow: hover ? "var(--shadow-glow)" : "none" }}>
        <ProjectThumb hue={p.hue} label={p.label} icon={p.icon} ratio={64} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(26,23,24,0.78), transparent 50%)", opacity: hover ? 1 : 0, transition: "opacity .25s", display: "flex", alignItems: "flex-end", padding: 24 }}>
          <span className="btn btn-secondary btn-sm" style={{ color: "#fff", boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.5)" }}>{cta} <Icon name="arrow-up-right" size={15} /></span>
        </div>
      </div>
      <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
        <div>
          <h3 style={{ fontWeight: 500, fontSize: 21, margin: "0 0 8px" }}>{p.client}</h3>
          <p style={{ fontSize: 14.5, color: "var(--fg-on-dark-2)", margin: "0 0 12px", lineHeight: 1.5, maxWidth: 380 }}>{p.result}</p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {p.cats.map((c) => <span key={c} className="pill pill-outline" style={{ fontSize: 12 }}>{c}</span>)}
          </div>
        </div>
        <span style={{ fontSize: 13, color: "var(--fg-on-dark-3)", whiteSpace: "nowrap" }}>{p.year}</span>
      </div>
    </a>
  );
}

function ProjectsPage() {
  useReveal();
  return (
    <main>
      <ProjectsHero />
      <WorksGrid />
      <CtaBanner title="Your project could be next." sub="Tell us what you're building. We'll show you how to grow it." primary="Start a Project" small />
    </main>
  );
}

Object.assign(window, { ProjectsPage });