import type { Metadata } from "next";
import Link from "next/link";
import { Downloader } from "@/components/Downloader";
import { FaqList } from "@/components/FaqList";
import { StructuredData } from "@/components/SiteChrome";
import { devices, faqs, features, mediaTypes, steps } from "@/content/home";
import { getSiteUrl, siteName } from "@/lib/site";

export const metadata: Metadata = {
  alternates: { canonical: "/" },
};

export default function HomePage() {
  const siteUrl = getSiteUrl();
  const website = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: siteName,
    url: siteUrl,
    description: "Download public TikTok videos, photos, and audio when a real file is available.",
  };
  const faq = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map((item) => ({
      "@type": "Question",
      name: item.question,
      acceptedAnswer: { "@type": "Answer", text: item.answer },
    })),
  };

  return (
    <main id="main">
      <StructuredData data={website} />
      <StructuredData data={faq} />
      <section className="hero" id="downloader">
        <div className="container">
          <h1>TikTok Video Downloader</h1>
          <p className="hero-lede">Paste a public TikTok link and save the video, photos, or audio the service can actually retrieve.</p>
          <Downloader />
        </div>
      </section>

      <section className="section" id="without-watermark">
        <div className="container">
          <h2>Download TikTok videos without a watermark</h2>
          <p className="section-intro">
            Some TikTok files include a username watermark. When the public post includes both a playback file and a separate download file, Clipwell labels the playback file “Download without watermark” and the download file “Download with watermark.” If only one video file is present, the button says “Download video.” This site does not edit the file.
          </p>
          <p className="section-intro">
            Photo posts can be saved as separate images when those images are returned. A slideshow is not turned into a new video on this server.
          </p>
        </div>
      </section>

      <section className="section section-muted" id="how-to">
        <div className="container">
          <h2>How to use the downloader</h2>
          <ol className="steps">
            {steps.map((step, index) => (
              <li key={step.title} className="step">
                <div className="step-index">{index + 1}</div>
                <h3>{step.title}</h3>
                <p>{step.text}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="section" id="copy-link">
        <div className="container">
          <h2>How to copy a TikTok video link</h2>
          <div className="card-grid">
            <article className="info-card">
              <h3>On a phone</h3>
              <p>Open the TikTok app, find the video, tap Share, then tap Copy link. Come back here and paste that link.</p>
            </article>
            <article className="info-card">
              <h3>On a computer</h3>
              <p>Open the video in the browser, click Share, then Copy link. A full address that contains /video/ or /photo/ also works.</p>
            </article>
            <article className="info-card">
              <h3>Short links</h3>
              <p>Links from vm.tiktok.com, vt.tiktok.com, and tiktok.com/t/ are accepted. A profile link such as tiktok.com/@name is not a video.</p>
            </article>
          </div>
        </div>
      </section>

      <section className="section section-muted" id="devices">
        <div className="container">
          <h2>Supported devices and browsers</h2>
          <p className="section-intro">Use a current browser. The page is built for narrow phones as well as wide desktop windows.</p>
          <ul className="plain-list">
            {devices.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      </section>

      <section className="section" id="media-types">
        <div className="container">
          <h2>Supported media types</h2>
          <div className="card-grid">
            {mediaTypes.map((item) => (
              <article key={item.title} className="info-card">
                <h3>{item.title}</h3>
                <p>{item.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-muted" id="features">
        <div className="container">
          <h2>What this downloader does</h2>
          <ul className="feature-grid">
            {features.map((feature) => (
              <li key={feature.title} className="feature">
                <h3>{feature.title}</h3>
                <p>{feature.text}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="section" id="faq">
        <div className="container">
          <h2>Frequently asked questions</h2>
          <FaqList />
        </div>
      </section>

      <section className="section section-muted" id="guides">
        <div className="container">
          <h2>Related guides</h2>
          <div className="guide-grid">
            <Link className="guide-card" href="/how-to-download-tiktok-videos">
              <h3>Full download guide</h3>
              <p>Step-by-step notes for Android, iPhone, and desktop, plus what to do when a link fails.</p>
            </Link>
            <Link className="guide-card" href="/copyright">
              <h3>Copyright and takedown</h3>
              <p>How a rights holder can ask Clipwell to stop providing a download for a specific post.</p>
            </Link>
            <Link className="guide-card" href="/about">
              <h3>About Clipwell</h3>
              <p>What the site sends to the media service, and what it does not claim to do.</p>
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}