import React, { useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  ArrowRight,
  Check,
  ChevronUp,
  Clapperboard,
  Download,
  ExternalLink,
  Film,
  Layers3,
  Mail,
  MapPin,
  MessageSquareText,
  Phone,
  Play,
  Sparkles,
  SlidersHorizontal,
  Video,
  WandSparkles,
} from "lucide-react";
import "./styles.css";

const workItems = [
  {
    id: "01",
    title: "Advertising Films",
    type: "Advertising",
    summary: "Campaign edits and high-impact motion for commercial and branded stories.",
    meta: ["Campaign edits", "TVC polish", "Launch films"],
    tools: "Premiere Pro, After Effects, Photoshop",
    tone: "amber",
  },
  {
    id: "02",
    title: "Corporate Stories",
    type: "Corporate",
    summary: "Clean edits, infographics, typography, and internal communication films.",
    meta: ["Brand films", "Internal comms", "Event edits"],
    tools: "Premiere Pro, After Effects, Photoshop, Illustrator",
    tone: "steel",
  },
  {
    id: "03",
    title: "Social Motion",
    type: "Social",
    summary: "Fast, format-aware animated content for social and digital campaigns.",
    meta: ["Vertical cuts", "Animated type", "Format adaptation"],
    tools: "After Effects, Premiere Pro, Photoshop",
    tone: "cyan",
  },
  {
    id: "04",
    title: "3D & VFX",
    type: "3D",
    summary: "3D environments, tracking, roto, compositing, look development, and finishing.",
    meta: ["3D scenes", "Tracking", "Compositing"],
    tools: "After Effects, Photoshop, Illustrator, 3D, VFX pipeline",
    tone: "amber",
  },
  {
    id: "05",
    title: "Illustrator Design",
    type: "Illustrator",
    summary: "Vector assets, layout elements, campaign graphics, icons, and brand-ready design support.",
    meta: ["Vector assets", "Layouts", "Brand graphics"],
    tools: "Adobe Illustrator, Photoshop, After Effects",
    tone: "cyan",
  },
  {
    id: "06",
    title: "AI Look Development",
    type: "AI",
    summary: "Prompt-led concept frames, moodboards, storyboard support, and visual exploration.",
    meta: ["Moodboards", "Reference frames", "Prompt workflows"],
    tools: "Firefly, Runway, Kling, Veo-style workflows",
    tone: "steel",
  },
];

const proofPoints = [
  ["17+ years", "TV, advertising, corporate video, VFX, 3D, and digital content."],
  ["Production to post", "Shoot awareness, edit, compositing, motion, finishing, and delivery."],
  ["Core tools", "After Effects, Premiere Pro, Photoshop, Illustrator, 3D, and AI-assisted workflows."],
];

const projectMaterials = {
  Advertising: [
    {
      title: "Campaign Film Slot",
      format: "30 sec hero film + social cutdowns",
      role: "Edit, motion graphics, compositing, final polish",
      video: "/assets/videos/advertising-campaign-01.mp4",
      poster: "/assets/work-thumbnails/advertising-campaign-01.jpg",
    },
    {
      title: "Product Launch Slot",
      format: "Launch film / digital campaign",
      role: "Storyboard support, motion design, typography",
      video: "/assets/videos/advertising-launch-02.mp4",
      poster: "/assets/work-thumbnails/advertising-launch-02.jpg",
    },
  ],
  Corporate: [
    {
      title: "Corporate Story Slot",
      format: "Brand film / internal communication",
      role: "Edit, animated infographics, finishing",
      video: "/assets/videos/corporate-story-01.mp4",
      poster: "/assets/work-thumbnails/corporate-story-01.jpg",
    },
  ],
  Social: [
    {
      title: "Social Motion Slot",
      format: "Vertical reel / campaign cutdown",
      role: "Animated typography, pacing, format adaptation",
      video: "/assets/videos/social-motion-01.mp4",
      poster: "/assets/work-thumbnails/social-motion-01.jpg",
    },
  ],
  "3D": [
    {
      title: "3D / VFX Breakdown Slot",
      format: "3D scene / before-after breakdown",
      role: "3D environment support, tracking, cleanup, compositing",
      video: "/assets/videos/3d-vfx-breakdown-01.mp4",
      poster: "/assets/work-thumbnails/3d-vfx-breakdown-01.jpg",
    },
  ],
  Illustrator: [
    {
      title: "Illustrator Design Slot",
      format: "Vector campaign graphics / brand assets",
      role: "Illustration, vector layout, icon and graphic preparation",
      video: "/assets/videos/illustrator-design-01.mp4",
      poster: "/assets/work-thumbnails/illustrator-design-01.jpg",
    },
  ],
  AI: [
    {
      title: "AI Look Development Slot",
      format: "Concept frames / image-to-video exploration",
      role: "Prompting, reference direction, human-led refinement",
      video: "/assets/videos/ai-lookdev-01.mp4",
      poster: "/assets/work-thumbnails/ai-lookdev-01.jpg",
    },
  ],
};

const processSteps = [
  ["Brief", "Understand goals, audience, delivery formats, and the story the work needs to tell.", MessageSquareText],
  ["Boards", "Build moodboards, reference frames, storyboards, and motion direction before production.", Layers3],
  ["Motion", "Design rhythm, transitions, typography, compositing, pacing, and sound-aware movement.", Video],
  ["Finish", "Polish color, legibility, export specs, feedback, and delivery for every platform.", Check],
];

const aiSteps = [
  ["Ideate", "Rapid concepts, campaign angles, moodboards, and pre-production look tests.", Sparkles],
  ["Generate", "Prompted image and video references for client alignment before final craft.", WandSparkles],
  ["Refine", "Human-led art direction, compositing judgement, brand control, and quality checks.", SlidersHorizontal],
  ["Integrate", "AI output folded into 3D, edit, motion, and finishing workflows with discipline.", Layers3],
];

const experience = [
  ["2022 - Present", "The Channel MENA", "Senior Motion Graphic Designer", "Broadcast, media, promotional, and digital content in Kuwait."],
  ["2014 - 2021", "Phoenix Media Production", "Motion Graphic Designer", "Advertising and corporate videos from storyboard through final delivery."],
  ["2012 - 2013", "Freelance", "Videographer / Editor / Motion Designer", "Client briefs, shoots, edits, event films, and motion elements."],
  ["2008 - 2010", "Froggy Animation", "3D Generalist", "3D environments, lighting, rendering, and look development for production shots."],
  ["2006 - 2008", "Artery Animation and FX", "VFX Artist", "Tracking, rotoscoping, compositing, and animation for film and television."],
];

function App() {
  const [filter, setFilter] = useState("All");
  const categories = ["All", ...workItems.map((item) => item.type)];
  const visibleWork = useMemo(
    () => (filter === "All" ? workItems : workItems.filter((item) => item.type === filter)),
    [filter],
  );

  const showWorkCategory = (category) => {
    setFilter(category);
    window.history.replaceState(null, "", "#work");
    document.getElementById("work")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <main>
      <header className="site-header">
        <a className="brand" href="#top" aria-label="Kapildev Maroli home">
          Kapildev Maroli
        </a>
        <nav aria-label="Primary navigation">
          <a href="#work">Work</a>
          <a href="#process">Process</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </nav>
        <a className="header-cta" href="#contact">
          Start a project
          <ArrowRight size={16} aria-hidden="true" />
        </a>
      </header>

      <section className="hero" id="top">
        <div className="hero-copy">
          <h1>Motion That Moves Brands</h1>
          <p>
            Senior motion designer and post-production specialist creating advertising, corporate, social,
            DOOH, VFX, and AI-assisted visual content.
          </p>
          <div className="hero-actions">
            <a className="primary-button" href="#work">
              <Play size={17} fill="currentColor" aria-hidden="true" />
              View selected work
            </a>
            <a className="secondary-button" href="#contact">
              Contact me
              <ArrowRight size={17} aria-hidden="true" />
            </a>
          </div>
        </div>
        <div className="hero-visual" aria-label="Abstract motion design visual">
          <img src="/assets/kapildev-hero.png" alt="" />
          <div className="scanline" />
          <div className="timeline-strip">
            <span />
            <span />
            <span />
            <span />
          </div>
        </div>
      </section>

      <section className="proof-strip" aria-label="Portfolio strengths">
        {proofPoints.map(([title, text]) => (
          <article key={title}>
            <Clapperboard size={22} aria-hidden="true" />
            <div>
              <h2>{title}</h2>
              <p>{text}</p>
            </div>
          </article>
        ))}
      </section>

      <section className="section work-section" id="work">
        <div className="section-heading">
          <h2>Selected Work</h2>
          <p>Focused work lanes that make your range clear: campaign polish, brand storytelling, production-aware post, and modern visual exploration.</p>
        </div>
        <div className="filter-bar" aria-label="Work filters">
          {categories.map((category) => (
            <button
              key={category}
              className={filter === category ? "active" : ""}
              type="button"
              onClick={() => setFilter(category)}
            >
              {category}
            </button>
          ))}
        </div>
        {filter === "All" && (
          <div className="work-grid">
            {visibleWork.map((item) => (
              <button
                type="button"
                className={`work-card ${item.tone}`}
                key={item.id}
                aria-label={`Show ${item.title} work`}
                onClick={() => showWorkCategory(item.type)}
              >
                <div className="card-index">{item.id}</div>
                <div className="poster-art">
                  <Film size={34} aria-hidden="true" />
                  <span>{item.type}</span>
                </div>
                <h3>{item.title}</h3>
                <p>{item.summary}</p>
                <div className="work-meta" aria-label={`${item.title} focus areas`}>
                  {item.meta.map((value) => (
                    <span key={value}>{value}</span>
                  ))}
                </div>
                <p className="tools-line">{item.tools}</p>
                <span className="card-action">
                  View {item.type.toLowerCase()} work
                  <ArrowRight size={15} aria-hidden="true" />
                </span>
              </button>
            ))}
          </div>
        )}
        {filter !== "All" && (
          <div className="materials-panel" aria-label={`${filter} materials`}>
            <div className="materials-heading">
              <h3>{filter} materials</h3>
              <p>
                A horizontal set of self-hosted video materials for this work type. Replace the sample MP4 and
                poster paths with your final project files.
              </p>
            </div>
            <div className="materials-grid">
              {projectMaterials[filter].map((project) => (
                <article className="material-card" key={project.title}>
                  <div className="video-tile">
                    <video controls preload="metadata" poster={project.poster}>
                      <source src={project.video} type="video/mp4" />
                      Your browser does not support the video tag.
                    </video>
                    <span className="video-icon">
                      <Play size={15} fill="currentColor" aria-hidden="true" />
                    </span>
                  </div>
                  <div>
                    <h4>{project.title}</h4>
                    <p>{project.format}</p>
                    <span>{project.role}</span>
                  </div>
                </article>
              ))}
            </div>
          </div>
        )}
      </section>

      <section className="section process-section" id="process">
        <div className="section-heading">
          <h2>My Process</h2>
          <p>A clear path from idea to impact, designed for busy producers, agencies, and brand teams.</p>
        </div>
        <div className="process-rail">
          {processSteps.map(([title, text, Icon], index) => (
            <article className="process-step" key={title}>
              <div className="step-top">
                <span>{String(index + 1).padStart(2, "0")}</span>
                <Icon size={25} aria-hidden="true" />
              </div>
              <h3>{title}</h3>
              <p>{text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section ai-section">
        <div className="section-heading">
          <h2>AI-Assisted Workflow</h2>
          <p>Technology to amplify creativity, not replace craft, authorship, or quality control.</p>
        </div>
        <div className="ai-flow">
          {aiSteps.map(([title, text, Icon]) => (
            <article key={title}>
              <Icon size={30} aria-hidden="true" />
              <h3>{title}</h3>
              <p>{text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section about-section" id="about">
        <div className="about-copy">
          <h2>17+ years across production, post, VFX, and visual systems.</h2>
          <p>
            With experience across production and post, I understand how to shape visuals from brief and
            shoot requirements through edit, motion, and compositing to deliver polished content.
          </p>
        </div>
        <div className="timeline">
          {experience.map(([date, studio, role, detail]) => (
            <article className="timeline-row" key={`${date}-${studio}`}>
              <time>{date}</time>
              <h3>{studio}</h3>
              <strong>{role}</strong>
              <p>{detail}</p>
            </article>
          ))}
        </div>
      </section>

      <footer className="contact-section" id="contact">
        <div className="contact-copy">
          <h2>Let's create something remarkable.</h2>
          <p>
            Got a project in mind? Let's talk about how motion, post-production, and AI-assisted visuals can
            shape the story.
          </p>
          <div className="contact-links">
            <a href="mailto:devmaroli@gmail.com"><Mail size={17} /> devmaroli@gmail.com</a>
            <a href="tel:+96555329866"><Phone size={17} /> +965 5532 9866</a>
            <span><MapPin size={17} /> Salmiya, Kuwait</span>
          </div>
        </div>
        <div className="contact-panel" aria-label="Contact actions">
          <a className="primary-button" href="mailto:devmaroli@gmail.com">
            Email me
            <Mail size={17} aria-hidden="true" />
          </a>
          <a className="secondary-button" href="/assets/Kapildev_Maroli.docx" download>
            Download CV
            <Download size={17} aria-hidden="true" />
          </a>
          <a className="secondary-button" href="https://linkedin.com/in/kapilmaroli" target="_blank" rel="noreferrer">
            LinkedIn
            <ExternalLink size={17} aria-hidden="true" />
          </a>
          <div className="fit-list">
            <span>Best fit</span>
            <p>Advertising films, corporate video, social motion, DOOH campaigns, 3D, post-production finishing, VFX support, and AI-assisted pre-production boards.</p>
          </div>
        </div>
        <a className="back-top" href="#top" aria-label="Back to top">
          <ChevronUp size={19} aria-hidden="true" />
        </a>
      </footer>
    </main>
  );
}

createRoot(document.getElementById("root")).render(<App />);