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();
  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 it move","Watch a generated preview in your selected format and style."]].map(([n,t,d])=><article key={n}><span>{n}</span><h2>{t}</h2><p>{d}</p></article>)}</div></section><section className="tool-callout"><Image src="/generated/images/workflow-editor.webp" alt="moved 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">{[[`What can I make with ${tool.name}?`,`Use it to create short-form concepts, visual narratives, explainers and social videos that begin with ${tool.eyebrow.toLowerCase()}.`],["Is the generated result real?","Yes. moved.live generates a short AI video preview from your description and selected visual settings."],["Which aspect ratios are available?","The creator supports 16:9 landscape, 9:16 vertical and 1:1 square framing." ]].map(([q,a])=><details className="faq-item" key={q}><summary>{q}</summary><p>{a}</p></details>)}</div></section></>;
}