import Link from "next/link";
import { Reveal } from "@/components/ui/Reveal";
import { SectionLabel } from "@/components/ui/SectionLabel";
import { ArrowLink } from "@/components/ui/ArrowLink";
import { VideoPreview } from "@/components/media/VideoPreview";
import { ServiceSwitcher } from "@/components/portfolio/ServiceSwitcher";
import { PortfolioGrid } from "@/components/portfolio/PortfolioGrid";
import { BeforeAfter } from "@/components/portfolio/BeforeAfter";
import { capabilities } from "@/data/services";
import { clients } from "@/data/clients";
import { testimonials } from "@/data/testimonials";
import { siteConfig, whatsappUrl } from "@/lib/config";

export default function Home() {
  const testimonial = testimonials[0];

  return (
    <div className="page">
      <section className="hero">
        <div className="hero__media" aria-hidden="true">
          <VideoPreview src="/videos/showreel.mp4" poster="/images/showreel.svg" autoPlay label="" />
          <div className="hero__poster-art"><strong>00S</strong></div>
        </div>

        <div className="hero__content">
          <div className="hero__kicker">
            <span>VIDEO EDITING / POST PRODUCTION</span>
            <span>JAKARTA / INDONESIA — 2026</span>
          </div>
          <h1 className="display hero__title">
            <span>WE MAKE</span>
            <span>VIDEOS</span>
            <span className="accent">HARD TO SKIP.</span>
          </h1>
          <div className="hero__bottom">
            <p className="hero__copy">
              Short-form content, YouTube videos, podcasts, music videos and everything in between.
              Your footage goes in. Something worth watching comes out.
            </p>
            <div className="hero__actions">
              <ArrowLink href="#work">VIEW OUR WORK ↓</ArrowLink>
              <a href={whatsappUrl("Hi, I'd like to start a video editing project.")} target="_blank" rel="noreferrer" className="big-button">START A PROJECT ↗</a>
            </div>
          </div>
          <div className="hero__scroll">SCROLL TO EXPLORE ↓</div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionLabel number="01">OUR REEL / 2026</SectionLabel>
          <div className="reel-head">
            <h2 className="display">CUTS THAT<br />MOVE.</h2>
            <p className="reel-head__meta">01:24 / SHOWREEL<br />EDITING • MOTION • SOUND • COLOR</p>
          </div>
          <div className="reel-frame">
            <VideoPreview src="/videos/showreel.mp4" poster="/images/showreel.svg" autoPlay hoverPlay label="PLAY" />
            <Link href="/work" className="reel-play" data-cursor="PLAY" aria-label="View showreel work">PLAY</Link>
          </div>
        </div>
      </section>

      <section className="manifesto">
        <div className="container manifesto__grid">
          <Reveal>
            <h2 className="display">WE DON'T JUST<br /><span>CUT VIDEOS.</span><br /><span>WE BUILD ATTENTION.</span></h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p>
              We combine editing, storytelling, motion, sound and visual rhythm to transform raw
              footage into content designed to be watched.
            </p>
          </Reveal>
        </div>
      </section>

      <ServiceSwitcher />

      <section className="section section--tight">
        <div className="split-feature">
          <Reveal className="split-feature__media">
            <div className="split-feature__media-box">
              <VideoPreview src="/videos/project-01.mp4" poster="/images/project-01.svg" autoPlay hoverPlay label="PLAY" />
            </div>
          </Reveal>
          <Reveal className="split-feature__content" delay={0.1}>
            <span className="eyebrow">SHORT FORM / 01</span>
            <h2 className="display">MAKE THEM<br />STOP<br />SCROLLING.</h2>
            <p>Fast cuts, strong hooks, motion graphics and storytelling optimized for social media.</p>
            <div className="feature-list">
              {["TikTok", "Instagram Reels", "YouTube Shorts", "Ads", "UGC", "Automotive"].map((x) => <span key={x}>{x}</span>)}
            </div>
            <div style={{ marginTop: 30 }}><ArrowLink href="/work?filter=short">VIEW SHORT FORM WORK</ArrowLink></div>
          </Reveal>
        </div>
      </section>

      <section className="section section--tight">
        <div className="split-feature split-feature--reverse">
          <Reveal className="split-feature__media">
            <div className="split-feature__media-box">
              <VideoPreview src="/videos/project-03.mp4" poster="/images/project-03.svg" autoPlay hoverPlay label="PLAY" />
            </div>
          </Reveal>
          <Reveal className="split-feature__content" delay={0.1}>
            <span className="eyebrow">LONG FORM / 02</span>
            <h2 className="display">KEEP THEM<br />WATCHING.</h2>
            <p>From podcasts to YouTube and music videos, we turn footage into structured stories with rhythm, emotion and purpose.</p>
            <div className="feature-list">
              {["YouTube", "Podcast", "Music Video", "Documentary", "Commercial"].map((x) => <span key={x}>{x}</span>)}
            </div>
            <div style={{ marginTop: 30 }}><ArrowLink href="/work">VIEW LONG FORM WORK</ArrowLink></div>
          </Reveal>
        </div>
      </section>

      <section className="work-section" id="work">
        <div className="container">
          <SectionLabel number="02">PORTFOLIO / SELECTED WORK</SectionLabel>
          <div className="work-heading">
            <h2 className="display">SELECTED<br />WORK</h2>
            <p className="work-heading__side">A mix of social campaigns, creator content, podcasts, music films and commercial edits.</p>
          </div>
          <PortfolioGrid limit={5} />
          <div style={{ marginTop: 60 }}><ArrowLink href="/work">VIEW ALL PROJECTS</ArrowLink></div>
        </div>
      </section>

      <section className="horizontal-reel">
        <div className="horizontal-track" aria-label="Project reel">
          {["VERTICAL", "PODCAST", "AUTOMOTIVE", "MUSIC", "COMMERCIAL", "VERTICAL"].map((x, i) => (
            <div className="horizontal-card" key={`${x}-${i}`}>
              <div className="horizontal-card__art">
                <span className="horizontal-card__index">0{i + 1}</span>
                <strong>{x}</strong>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionLabel number="03">RAW → FINAL</SectionLabel>
          <div className="reel-head">
            <h2 className="display">THE EDIT<br />CHANGES EVERYTHING.</h2>
            <p className="reel-head__meta">DRAG THE DIVIDER<br />SEE THE DIFFERENCE</p>
          </div>
          <BeforeAfter />
        </div>
      </section>

      <section className="capabilities">
        <div className="container">
          <SectionLabel number="04">CAPABILITIES</SectionLabel>
          <h2 className="display">WHAT WE<br />DO BEST</h2>
          <div className="capability-list">
            {capabilities.map((item, i) => (
              <Link key={item} href="/services" className="capability-row" data-cursor="VIEW">
                <span className="capability-row__number">0{i + 1}</span>
                <span className="capability-row__title">{item}</span>
                <span className="capability-row__arrow">↗</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="workflow">
        <div className="container">
          <span className="eyebrow">05 / PROCESS</span>
          <h2 className="display">FROM RAW<br />TO READY.</h2>
          <div className="workflow__steps">
            {["SEND YOUR FOOTAGE", "TELL US THE VISION", "WE EDIT", "REVIEW & REVISION", "FINAL DELIVERY"].map((step, i) => (
              <div className="workflow__step" key={step}>
                <span className="workflow__num">0{i + 1}</span>
                <h3>{step}</h3>
              </div>
            ))}
          </div>
          <p className="workflow__copy">Simple workflow. Clear communication. No unnecessary complexity.</p>
        </div>
      </section>

      <section className="stats">
        <div className="container stats-grid">
          {[
            ["500+", "VIDEOS EDITED"],
            ["100M+", "TOTAL VIEWS"],
            ["50+", "BRANDS & CREATORS"],
            ["5+", "YEARS EDITING"],
          ].map(([value, label]) => (
            <div className="stat" key={label}>
              <strong>{value}</strong>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </section>

      <div className="marquee" aria-label="Clients">
        <div className="marquee__track">
          {[...clients, ...clients].map((client, i) => <span className="marquee__item" key={`${client}-${i}`}>{client}</span>)}
        </div>
      </div>

      <section className="testimonial">
        <div className="container">
          <span className="eyebrow">06 / CLIENT WORDS</span>
          <p className="testimonial__quote">{testimonial.quote}</p>
          <div className="testimonial__by"><span>{testimonial.name}</span><span>—</span><span>{testimonial.role}</span></div>
        </div>
      </section>

      <section className="big-cta">
        <div className="big-cta__content">
          <span className="eyebrow">07 / NEXT CUT</span>
          <h2 className="display">
            <span>GOT FOOTAGE?</span>
            <span>LET'S TURN IT</span>
            <span>INTO SOMETHING</span>
            <span>WORTH WATCHING.</span>
          </h2>
          <div className="big-cta__links">
            <a href={whatsappUrl("Hi, I have footage and want to discuss a project.")} target="_blank" rel="noreferrer">WHATSAPP ↗</a>
            <a href={`mailto:${siteConfig.email}`}>EMAIL ↗</a>
            <a href={siteConfig.socials.instagram} target="_blank" rel="noreferrer">INSTAGRAM ↗</a>
          </div>
        </div>
      </section>
    </div>
  );
}