import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { notFound } from "next/navigation";
import { getTool, tools } from "@/lib/tool-data";

export function generateStaticParams() {
  return tools.map(({ slug }) => ({ slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const tool = getTool(slug);
  return tool ? { title: tool.name, description: tool.description } : {};
}

export default async function ToolPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const tool = getTool(slug);
  if (!tool) notFound();

  const questions = [
    [
      `What can I make with ${tool.name}?`,
      `Use it to plan short-form concepts, visual narratives, explainers and social videos that begin with ${tool.eyebrow.toLowerCase()}.`,
    ],
    [
      "Is the generated result real?",
      "Not in this release. nuvid.live shows a prepared visual placeholder and provides a demonstration ZIP download.",
    ],
    [
      "Which aspect ratios are available?",
      "The creator supports 16:9 landscape, 9:16 vertical and 1:1 square framing.",
    ],
  ];

  return (
    <>
      <section className="tool-hero">
        <div className="tool-hero-image">
          <Image
            src={tool.image}
            alt={`${tool.name} concept`}
            fill
            priority
            sizes="100vw"
          />
        </div>
        <div className="tool-hero-copy">
          <p className="eyebrow">{tool.eyebrow}</p>
          <h1>{tool.name}</h1>
          <p>
            {tool.description} Start with the words or frame you already have,
            then shape the sequence scene by scene.
          </p>
          <Link
            className="button button-primary"
            href={`/app/create/?tool=${tool.slug}`}
          >
            Try for free <ArrowRight size={16} />
          </Link>
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <div>
            <p className="eyebrow">A focused process</p>
            <h2>
              From raw idea
              <br />
              to visual direction.
            </h2>
          </div>
          <p>
            No complex timeline. Just the decisions that shape the story: the
            writing, the world and the frame.
          </p>
        </div>
        <div className="tool-steps">
          {[
            ["01", "Bring the idea", "Paste your script or describe the moment you want to create."],
            ["02", "Choose the language", "Select a visual style, aspect ratio and number of videos."],
            ["03", "See the preview", "Review the prepared placeholder in your selected format and style."],
          ].map(([number, title, description]) => (
            <article key={number}>
              <span>{number}</span>
              <h2>{title}</h2>
              <p>{description}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="tool-callout">
        <Image
          src="/generated/images/workflow-editor.webp"
          alt="nuvid workspace"
          fill
          sizes="100vw"
        />
        <div>
          <p className="eyebrow">The same workspace, tailored to you</p>
          <h2>
            Build with context.
            <br />
            Keep the momentum.
          </h2>
          <Link className="button" href={`/app/create/?tool=${tool.slug}`}>
            Open {tool.name}
          </Link>
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <div>
            <p className="eyebrow">Questions</p>
            <h2>Before you begin.</h2>
          </div>
        </div>
        <div className="faq-list">
          {questions.map(([question, answer]) => (
            <details className="faq-item" key={question}>
              <summary>{question}</summary>
              <p>{answer}</p>
            </details>
          ))}
        </div>
      </section>
    </>
  );
}