"use client";

import { useState } from "react";
import { motion } from "motion/react";
import { shortFormServices, longFormServices } from "@/data/services";

export function ServiceSwitcher() {
  const [mode, setMode] = useState<"short" | "long">("short");
  const short = mode === "short";

  return (
    <section className={`service-switcher ${short ? "is-short" : "is-long"}`}>
      <div className="service-switcher__tabs">
        <button className={short ? "is-active" : ""} onClick={() => setMode("short")}>SHORT FORM</button>
        <button className={!short ? "is-active" : ""} onClick={() => setMode("long")}>LONG FORM</button>
      </div>

      <div className="service-switcher__visual">
        <motion.div
          key={mode}
          initial={{ opacity: 0, scale: 1.05 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.65 }}
          className="service-switcher__poster"
        >
          <div className="poster-grid" />
          <span>{short ? "9:16 / SOCIAL" : "16:9 / CINEMA"}</span>
          <strong>{short ? "STOP\nSCROLLING." : "KEEP\nWATCHING."}</strong>
        </motion.div>
      </div>

      <div className="service-switcher__content">
        <span className="eyebrow">{short ? "01 / SHORT FORM" : "02 / LONG FORM"}</span>
        <h2>{short ? "MAKE THEM STOP SCROLLING." : "KEEP THEM WATCHING."}</h2>
        <p>
          {short
            ? "Fast cuts, strong hooks, motion graphics and storytelling optimized for social media."
            : "From podcasts to YouTube and music videos, we turn footage into structured stories with rhythm, emotion and purpose."}
        </p>
        <div className="service-switcher__list">
          {(short ? shortFormServices : longFormServices).slice(0, 8).map((service, i) => (
            <span key={service}><b>0{i + 1}</b>{service}</span>
          ))}
        </div>
      </div>
    </section>
  );
}