import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "89 Motions — Global Creative & Design Solutions" },
      { name: "description", content: "We engineer impactful design built to move your business forward — high-performance web, strategic graphic design, and custom manufactured signage." },
      { property: "og:title", content: "89 Motions — Global Creative & Design Solutions" },
      { property: "og:description", content: "High-performance web, strategic graphic design, and custom manufactured signage for ambitious brands worldwide." },
      { property: "og:url", content: "/" },
    ],
    links: [{ rel: "canonical", href: "/" }],
  }),
  component: Home,
});

const SKILLS_LEFT = [
  ["Branding & Visual Identity", 95],
  ["Web Design & Front-End", 90],
  ["Graphic Design", 92],
  ["Social & Online Advertising", 85],
] as const;

const SKILLS_RIGHT = [
  ["Signage Design & Manufacturing", 95],
  ["SolidWorks 3D CAD & Modeling", 95],
  ["Client Communication", 90],
  ["Costing, Estimating & Bids", 65],
] as const;

const SERVICES = [
  { n: "01", t: "Web Design & Hosting", d: "Secure, cloud-hosted architectures paired with premium interfaces optimized for scale." },
  { n: "02", t: "Graphic Design", d: "Logos, corporate identity systems and brand literature engineered to cut through noise." },
  { n: "03", t: "3D CAD & Signage Architecture", d: "SolidWorks spatial mockups with precise material costing and fabrication planning." },
  { n: "04", t: "Performance Marketing", d: "Growth funnels targeted precisely to high-value audience cohorts across markets." },
];

const MARQUEE = [
  "Web Development", "SolidWorks", "Signage Fabrication", "Brand Systems",
  "3D Rendering", "Print & Digital", "Vehicle Wraps", "LED Backlit",
  "Corporate Identity", "Performance Ads",
];

function Home() {
  return (
    <>
      {/* HERO */}
      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 -z-10 opacity-[0.06]"
          style={{
            backgroundImage:
              "linear-gradient(oklch(0.18 0.015 60) 1px, transparent 1px), linear-gradient(90deg, oklch(0.18 0.015 60) 1px, transparent 1px)",
            backgroundSize: "56px 56px",
          }}
        />
        <div className="absolute top-24 right-[-10%] -z-10 h-[520px] w-[520px] rounded-full bg-signal/30 blur-[120px]" />

        <div className="mx-auto max-w-7xl px-6 pt-16 md:pt-24 pb-24 md:pb-32">
          <div className="grid gap-12 lg:grid-cols-12 items-end">
            <div className="lg:col-span-8 fade-up">
              <div className="flex items-center gap-3">
                <span className="h-2 w-2 rounded-full bg-signal animate-pulse" />
                <span className="eyebrow">Global Studio · Est. 89</span>
              </div>
              <h1 className="display-hero mt-6 text-[clamp(2.75rem,7vw,6.5rem)]">
                Impactful design,{" "}
                <span className="italic font-normal text-signal">engineered</span>{" "}
                to move your business forward.
              </h1>
              <p className="mt-8 max-w-2xl text-lg text-muted-foreground leading-relaxed">
                From high-performance web development to strategic graphic design and
                custom-manufactured signage — we build visual assets tailored to drive
                revenue, at any scale, in any market.
              </p>
              <div className="mt-10 flex flex-wrap gap-3">
                <Link to="/contact" className="btn-signal hover:brightness-110">
                  Get a free quote →
                </Link>
                <Link to="/portfolio" className="btn-ink hover:bg-ink/80">
                  View our work
                </Link>
              </div>
            </div>

            <div className="lg:col-span-4 grid grid-cols-2 gap-4">
              <StatCard k="120+" v="Global projects delivered" />
              <StatCard k="14yr" v="Cross-industry experience" />
              <StatCard k="3" v="Continents actively served" />
              <StatCard k="95%" v="Client retention rate" />
            </div>
          </div>
        </div>

        {/* Marquee */}
        <div className="border-y border-border bg-ink text-paper py-6 overflow-hidden">
          <div className="marquee-track">
            {[...MARQUEE, ...MARQUEE].map((m, i) => (
              <span key={i} className="font-display text-2xl md:text-4xl font-semibold whitespace-nowrap">
                {m} <span className="text-signal mx-6">✦</span>
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* WHO WE ARE */}
      <section className="mx-auto max-w-7xl px-6 py-24">
        <div className="grid gap-16 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <p className="eyebrow">Who we are</p>
            <h2 className="mt-4 text-4xl md:text-5xl font-bold">
              Digital strategy meets tangible, physical branding.
            </h2>
          </div>
          <div className="lg:col-span-7 space-y-6 text-lg leading-relaxed text-foreground/80">
            <p>
              89 Motions bridges the gap between digital strategy and tangible physical
              branding on an international scale.
            </p>
            <div className="grid sm:grid-cols-2 gap-4">
              <FeatureBlock title="Online Solutions">
                High-performing websites and digital campaigns designed to scale commercial operations.
              </FeatureBlock>
              <FeatureBlock title="Signage Solutions">
                Precision-made physical branding and high-impact custom signage setups.
              </FeatureBlock>
            </div>
            <p className="text-muted-foreground">
              Whether you need a digital presence that captures high-value leads or storefront
              branding that commands attention — we engineer assets tailored to drive maximum revenue.
            </p>
          </div>
        </div>
      </section>

      {/* SKILLS */}
      <section className="bg-ink text-paper py-24">
        <div className="mx-auto max-w-7xl px-6">
          <div className="max-w-2xl">
            <p className="eyebrow">Proficiencies</p>
            <h2 className="mt-4 text-4xl md:text-5xl font-bold text-paper">
              A multi-disciplinary execution toolkit.
            </h2>
            <p className="mt-4 text-paper/70">
              Covering creative direction, front-end development, industrial project
              estimation, and fabrication oversight.
            </p>
          </div>
          <div className="mt-14 grid md:grid-cols-2 gap-x-16 gap-y-8">
            {[...SKILLS_LEFT, ...SKILLS_RIGHT].map(([label, pct]) => (
              <SkillBar key={label} label={label} pct={pct} />
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES OVERVIEW */}
      <section className="mx-auto max-w-7xl px-6 py-24">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div className="max-w-xl">
            <p className="eyebrow">Core capabilities</p>
            <h2 className="mt-4 text-4xl md:text-5xl font-bold">
              End-to-end design, one accountable studio.
            </h2>
          </div>
          <Link to="/services" className="text-sm font-semibold underline underline-offset-4 hover:text-signal">
            All services →
          </Link>
        </div>
        <div className="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
          {SERVICES.map((s) => (
            <article
              key={s.n}
              className="panel-card p-8 transition-transform hover:-translate-y-1 hover:border-signal"
            >
              <span className="font-display text-signal text-sm font-semibold">{s.n}</span>
              <h3 className="mt-4 text-xl font-bold">{s.t}</h3>
              <p className="mt-3 text-sm text-muted-foreground leading-relaxed">{s.d}</p>
            </article>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="mx-auto max-w-7xl px-6 pb-24">
        <div className="panel-card overflow-hidden relative p-10 md:p-16 bg-ink text-paper">
          <div className="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-signal/40 blur-3xl" />
          <div className="relative grid gap-8 md:grid-cols-2 items-center">
            <div>
              <p className="eyebrow">Ready when you are</p>
              <h2 className="mt-4 text-4xl md:text-5xl font-bold text-paper">
                Let's move your brand — physically and digitally.
              </h2>
            </div>
            <div className="md:justify-self-end flex flex-wrap gap-3">
              <Link to="/contact" className="btn-signal hover:brightness-110">Start a project</Link>
              <a href="mailto:info@89motions.co.za" className="btn-ink border border-white/20 hover:bg-white/10">
                info@89motions.co.za
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function StatCard({ k, v }: { k: string; v: string }) {
  return (
    <div className="panel-card p-5">
      <div className="font-display text-3xl font-bold">{k}</div>
      <div className="mt-1 text-xs text-muted-foreground leading-snug">{v}</div>
    </div>
  );
}

function FeatureBlock({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-xl border border-border p-5 bg-card">
      <div className="flex items-center gap-2">
        <span className="h-1.5 w-6 rounded-full bg-signal" />
        <h3 className="font-semibold">{title}</h3>
      </div>
      <p className="mt-2 text-sm text-muted-foreground">{children}</p>
    </div>
  );
}

function SkillBar({ label, pct }: { label: string; pct: number }) {
  return (
    <div>
      <div className="flex justify-between text-sm">
        <span className="font-medium">{label}</span>
        <span className="text-signal font-display font-semibold">{pct}%</span>
      </div>
      <div className="mt-2 h-1.5 rounded-full bg-white/10 overflow-hidden">
        <div
          className="h-full bg-signal rounded-full"
          style={{ width: `${pct}%`, transition: "width 1s ease" }}
        />
      </div>
    </div>
  );
}