ttvfx/app/page.tsx

import Link from "next/link";
import Hero from "@/components/Hero";
import ProjectCard from "@/components/ProjectCard";
import Reveal from "@/components/Reveal";
import SectionLabel from "@/components/SectionLabel";
import { projects, services, site, stats } from "@/content/site";

const pipeline = [
  { step: "Breakdown", body: "Script and plate breakdowns, bids and a shot list everyone agrees on." },
  { step: "Build", body: "Assets, environments and lookdev, approved in context, not in isolation." },
  { step: "Shot", body: "Artists work in tracked versions, reviewed daily on our own review platform." },
  { step: "QC", body: "Every EXR is checked automatically for frame range, NaNs, dead pixels and colour space before a human signs off." },
  { step: "Deliver", body: "Spec-correct, frame-accurate deliveries with full shot metadata." },
];

export default function Home() {
  return (
    <>
      <Hero />

      {/* Selected work */}
      <section id="work" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
        <SectionLabel index="01">Selected work</SectionLabel>
        <div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
          {projects.slice(0, 4).map((p, i) => (
            <Reveal key={p.slug} delay={(i % 2) * 120} className={i % 2 === 1 ? "md:mt-24" : ""}>
              <ProjectCard project={p} />
            </Reveal>
          ))}
        </div>
        <div className="mt-20 flex justify-center">
          <Link
            href="/work/"
            className="border border-white/25 px-8 py-4 font-mono text-xs tracking-[0.2em] uppercase transition-colors hover:border-accent hover:text-accent"
          >
            All projects →
          </Link>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="border-t border-line bg-ink-2">
        <div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
          <SectionLabel index="02">Services</SectionLabel>
          <Reveal>
            <h2 className="max-w-4xl font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
              From first breakdown to final <span className="text-accent">delivery</span>.
            </h2>
          </Reveal>
          <div className="mt-16 grid border-t border-l border-line sm:grid-cols-2 lg:grid-cols-3">
            {services.map((s, i) => (
              <Reveal key={s.code} delay={(i % 3) * 100} className="border-r border-b border-line">
                <div className="group h-full p-8 transition-colors hover:bg-white/[0.02] md:p-10">
                  <span className="font-mono text-xs text-accent">{s.code}</span>
                  <h3 className="mt-6 font-display text-2xl font-light tracking-wide uppercase">{s.title}</h3>
                  <p className="mt-4 text-sm leading-relaxed text-muted">{s.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Studio / pipeline */}
      <section id="studio" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
        <SectionLabel index="03">Studio</SectionLabel>
        <div className="grid gap-16 lg:grid-cols-2">
          <Reveal>
            <h2 className="font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
              Two tales. <br />
              One <span className="font-light">obsession</span>.
            </h2>
            <div className="mt-8 space-y-5 text-base leading-relaxed text-muted md:text-lg">
              <p>
                Two Tales started in {site.founded} as an animation studio. A decade later we&apos;re a visual
                effects house that still thinks like animators: every frame is performance, every shot is story.
              </p>
              <p>
                We&apos;re small on purpose. Senior artists, direct lines to supervisors, and an in-house pipeline
                (review, shot tracking and automated QC) that lets a tight team deliver like a big one.
              </p>
            </div>
          </Reveal>
          <ol className="relative border-l border-line">
            {pipeline.map((p, i) => (
              <Reveal key={p.step} delay={i * 80}>
                <li className="relative pb-10 pl-10 last:pb-0">
                  <span className="absolute top-1.5 -left-[5px] h-[9px] w-[9px] rotate-45 bg-accent" />
                  <div className="flex items-baseline gap-4">
                    <span className="font-mono text-xs text-muted">{String(i + 1).padStart(2, "0")}</span>
                    <h3 className="font-display text-xl font-light tracking-[0.15em] uppercase">{p.step}</h3>
                  </div>
                  <p className="mt-2 text-sm leading-relaxed text-muted">{p.body}</p>
                </li>
              </Reveal>
            ))}
          </ol>
        </div>

        <div className="mt-24 grid grid-cols-2 border-t border-line md:grid-cols-4">
          {stats.map((s) => (
            <div key={s.label} className="border-b border-line py-10 pr-6 md:border-b-0">
              <p className="font-display text-5xl font-thin md:text-6xl">{s.value}</p>
              <p className="mt-3 font-mono text-[11px] tracking-[0.2em] text-muted uppercase">{s.label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="relative overflow-hidden border-t border-line">
        <div
          className="pointer-events-none absolute -bottom-1/2 left-1/2 h-[80vmax] w-[80vmax] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgb(232_87_42/0.14),transparent_60%)]"
          aria-hidden="true"
        />
        <div className="relative mx-auto max-w-7xl px-5 py-28 text-center md:px-8 md:py-44">
          <SectionLabel index="04" className="justify-center">
            Contact
          </SectionLabel>
          <Reveal>
            <h2 className="font-display text-5xl leading-[0.95] font-thin uppercase md:text-8xl">
              Got a story
              <br />
              to tell?
            </h2>
            <p className="mx-auto mt-8 max-w-lg text-muted md:text-lg">
              Send us a script, a breakdown or just an idea. We&apos;ll come back with a plan and a bid.
            </p>
            <a
              href={`mailto:${site.email}?subject=New%20project%20enquiry`}
              className="mt-12 inline-block border-b border-accent pb-2 font-display text-2xl font-light tracking-wider break-all transition-colors hover:text-accent md:text-4xl"
            >
              {site.email}
            </a>
          </Reveal>
        </div>
      </section>
    </>
  );
}