"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Play } from "lucide-react";
import { useState } from "react";
import { Reveal } from "@/components/reveal";
import { AmbientVideo } from "@/components/ambient-video";

const stories = [
  ["Cyberpunk", "/generated/videos/story-cyberpunk.mp4", "/generated/images/neon-portrait.webp", "Afterlight City"],
  ["Cinematic", "/generated/videos/story-cinematic.mp4", "/generated/images/cinematic-city.webp", "The Last Train"],
  ["Storybook", "/generated/videos/story-storybook.mp4", "/generated/images/storybook-forest.webp", "Fox & the Moon"],
  ["Dreamscape", "/generated/videos/story-dreamscape.mp4", "/generated/images/ocean-dream.webp", "Where Water Sleeps"]
];

const faqs = [
  ["What is moved.live?", "moved.live is a creator-first studio for turning written ideas into generated video stories through a focused, visual workflow."],
  ["Does this version generate a real AI video?", "Not yet. The current release uses a clearly staged mock generation flow and a downloadable placeholder file. The interface is ready for a real generation provider to be connected later."],
  ["Can I use it without editing experience?", "Yes. The workflow is designed around story, style and format choices rather than a traditional editing timeline."],
  ["Which formats can I plan for?", "You can choose landscape 16:9, vertical 9:16 or square 1:1 during creation."],
  ["Is my script uploaded anywhere?", "In this static demonstration, your script stays in the browser and is only used to build the local mock storyboard and download name."]
];

export default function Home() {
  const [creator, setCreator] = useState(0);
  const creators = ["Filmmakers", "Studios", "Authors", "Creators", "Marketers"];
  return (
    <>
      <section className="hero">
        <div className="hero-media" aria-hidden="true">
          <AmbientVideo src="/generated/videos/hero-orbit.mp4" poster="/generated/images/desert-orbit.webp" priority />
        </div>
        <div className="hero-copy">
          <div className="hero-kicker">AI-assisted visual storytelling</div>
          <h1>Stories, now<br />in <em>motion.</em></h1>
          <div className="hero-bottom">
            <Link className="button button-primary button-wide" href="/app/create/">Start creating <ArrowRight size={16} /></Link>
            <p>Turn a script, a thought, or a single frame into a cinematic story flow—without wrestling with an editing timeline.</p>
          </div>
        </div>
        <div className="scroll-cue">Explore</div>
      </section>

      <div className="ticker"><div className="ticker-track">{[0,1].flatMap((i) => ["FLUX", "Kling", "Veo", "Seedance", "PixVerse", "Wan"].map((name) => <span key={`${i}-${name}`}><i>✦</i>{name}</span>))}</div></div>

      <section className="section">
        <Reveal>
          <div className="section-head"><div><p className="eyebrow">Choose a world</p><h2>What story will<br />you tell?</h2></div><p>Start with an atmosphere, then make it yours. Each direction opens into the same simple creation flow.</p></div>
        </Reveal>
        <div className="story-rail">
          {stories.map(([label, video, poster, title], index) => <Reveal key={title} className="story-card"><AmbientVideo src={video} poster={poster} /><div className="story-card-copy"><span>0{index+1} — {label}</span><h3>{title}</h3></div></Reveal>)}
        </div>
      </section>

      <section className="section workflow">
        <Reveal><div className="section-head"><div><p className="eyebrow">One continuous flow</p><h2>From first line<br />to final frame.</h2></div><p>A focused three-step process keeps the creative decisions visible and the technical noise out of the way.</p></div></Reveal>
        <div className="workflow-grid">{[
          ["01", "Set the scene", "Bring a script or idea, then choose style and framing."], ["02", "Generate", "Watch the visual story assemble in one focused step."], ["03", "Download", "Receive every finished video together in one archive."]
        ].map(([n,title,text]) => <Reveal key={n} className="workflow-step"><span>{n}</span><h3>{title}</h3><p>{text}</p></Reveal>)}</div>
        <Reveal className="workflow-screen"><Image src="/generated/images/workflow-editor.webp" alt="moved video creation workspace" fill sizes="90vw" /></Reveal>
      </section>

      <section className="section capabilities">
        <Reveal><div className="section-head"><div><p className="eyebrow">Built around the story</p><h2>Creative control<br />without the clutter.</h2></div></div></Reveal>
        {[
          ["Keep every scene in the same world.", "Characters, atmosphere and framing stay connected across your storyboard, so the result feels like one idea—not a stack of unrelated images.", "/generated/images/cinematic-city.webp"],
          ["Give your words a visual rhythm.", "moved turns narrative structure into purposeful visual beats. You can see where a moment needs space and where the pace should move.", "/generated/images/desert-orbit.webp"],
          ["Frame it for where it will live.", "Move between cinematic, square and vertical formats before export, keeping the composition focused for every channel.", "/generated/images/neon-portrait.webp"]
        ].map(([title,text,image], index) => <Reveal className="feature-row" key={title}><div className="feature-copy"><p className="eyebrow">0{index+1} / Capability</p><h3>{title}</h3><p>{text}</p><Link className="inline-link" href="/app/create/">Try the workflow <ArrowRight size={15}/></Link></div><div className="feature-media"><Image src={image} alt="" fill sizes="50vw" /></div></Reveal>)}
      </section>

      <section className="proof-line"><div className="proof-item"><strong>3</strong><span>Essential output formats</span></div><div className="proof-item"><strong>17</strong><span>Focused creative tools</span></div><div className="proof-item"><strong>1</strong><span>Simple, continuous workflow</span></div></section>

      <section className="section creator-section">
        <Reveal><div className="section-head"><div><p className="eyebrow">Make it your way</p><h2>For every kind<br />of storyteller.</h2></div></div></Reveal>
        <div className="creator-tabs">{creators.map((name,i) => <button key={name} className={i===creator?"active":""} onClick={() => setCreator(i)}>{name}</button>)}</div>
        <Reveal className="creator-stage"><Image src={["/generated/images/cinematic-city.webp","/generated/images/workflow-editor.webp","/generated/images/storybook-forest.webp","/generated/images/studio-character.webp","/generated/images/neon-portrait.webp"][creator]} alt={`${creators[creator]} workflow`} width={1100} height={900}/><div className="creator-stage-copy"><p className="eyebrow">For {creators[creator]}</p><h3>{["Pre-visualize the scene before the shoot.","Move from brief to visual direction faster.","Let readers step inside the world.","Give every idea a stronger opening.","Make campaigns feel like stories."][creator]}</h3><p>{["Translate a written scene into a visual plan you can discuss, pitch and refine.","Create a shared visual reference without waiting for a full production cycle.","Build book trailers, character moments and atmospheric story sequences.","Plan distinctive short-form concepts for every platform and format.","Turn a product thought into a clear, memorable visual narrative."][creator]}</p></div></Reveal>
      </section>

      <section className="section">
        <Reveal><div className="section-head"><div><p className="eyebrow">A few clear answers</p><h2>Frequently asked<br />questions.</h2></div></div></Reveal>
        <div className="faq-list">{faqs.map(([q,a],i) => <details className="faq-item" key={q} open={i===0}><summary>{q}</summary><p>{a}</p></details>)}</div>
      </section>

      <section className="section" style={{background:"#151020", textAlign:"center"}}><Reveal><p className="eyebrow">Your first frame is waiting</p><h2 className="editorial-title" style={{margin:"0 auto 36px"}}>Turn the idea in your head<br />into something you can see.</h2><Link className="button button-primary button-wide" href="/app/create/">Create a video <Play size={15} fill="currentColor"/></Link></Reveal></section>
    </>
  );
}
