import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowRight,
  FileText,
  AudioLines,
  ImageIcon,
  Languages,
  Repeat,
  ListMusic,
  Share2,
  Users,
  KeyRound,
  CreditCard,
  Edit3,
  Download,
  Sparkles,
  Mic2,
  Radio,
  MessagesSquare,
  Palette,
  Globe2,
  Workflow,
  Gauge,
  ShieldCheck,
  Wand2,
  Mail,
  Hash,
  Clock,
  Check,
  Rocket,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export const metadata: Metadata = {
  title: "Features",
  description:
    "Everything Podcast Distribution AI does — AI scriptwriting, realistic multi-voice audio, cover art, repurposing, a season generator, 13+ languages, team white-label, an API, and more.",
};

const HERO_IMG =
  "https://images.unsplash.com/photo-1590602847861-f357a9332bbc?auto=format&fit=crop&w=1600&q=80";
const AUDIO_IMG =
  "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?auto=format&fit=crop&w=1400&q=80";
const TEAM_IMG =
  "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80";

export default function FeaturesPage() {
  return (
    <>
      {/* 1 — Hero */}
      <section className="relative overflow-hidden bg-hero-wash">
        <div className="container grid items-center gap-12 py-20 md:grid-cols-2 md:py-28">
          <div className="space-y-7">
            <Eyebrow>Every feature, one workflow</Eyebrow>
            <h1 className="text-balance font-display text-4xl font-extrabold leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
              The entire podcast studio, <span className="text-brand">powered by AI</span>
            </h1>
            <p className="max-w-xl text-lg text-muted-foreground">
              Write, narrate, illustrate, edit, repurpose, and publish — Podcast Distribution AI replaces a
              writer, a voice actor, an editor, and a designer with one clean, end-to-end workflow.
              No microphone, no software, no skills required.
            </p>
            <div className="flex flex-col gap-3 sm:flex-row">
              <Button asChild size="lg">
                <Link href="/sign-up">
                  Start free <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/pricing">See pricing</Link>
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              Free plan — 3 scripts &amp; 1 audio generation / month. No card required.
            </p>
          </div>
          <div className="relative">
            <div className="overflow-hidden rounded-3xl border border-border shadow-xl">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={HERO_IMG}
                alt="Studio condenser microphone"
                className="h-full w-full object-cover"
                width={1600}
                height={1067}
              />
            </div>
            <div className="absolute -bottom-5 -left-5 hidden rounded-2xl border border-border bg-card p-4 shadow-lg sm:block">
              <div className="flex items-center gap-3">
                <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10 text-brand">
                  <Sparkles className="h-5 w-5" />
                </span>
                <div>
                  <p className="text-sm font-semibold">Topic → episode</p>
                  <p className="text-xs text-muted-foreground">in minutes, not hours</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2 — Model strip */}
      <section className="border-y border-border bg-secondary/60 py-10">
        <div className="container flex flex-col items-center gap-6 text-center">
          <p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-muted-foreground">
            Best-in-class AI, stitched into one product
          </p>
          <div className="grid w-full gap-4 sm:grid-cols-3">
            <ModelChip icon={FileText} name="GPT-4" role="Scriptwriting" />
            <ModelChip icon={AudioLines} name="ElevenLabs" role="Realistic voices" />
            <ModelChip icon={ImageIcon} name="DALL·E" role="Cover art" />
          </div>
        </div>
      </section>

      {/* 3 — AI script generation */}
      <FeatureBand
        eyebrow="AI scriptwriting"
        icon={FileText}
        title="Scripts that actually sound good out loud"
        body="Describe a topic and GPT-4 writes a structured, on-brand episode — intro, segments, and outro — tailored to your tone, audience, and target length. It writes for the ear, not the page: natural, spoken-word dialogue with no stage directions to clean up."
        bullets={[
          "Set tone, audience, length and format up front",
          "Structured sections you can edit and re-order",
          "Per-section regeneration when you want a fresh take",
          "13+ languages, written natively (not translated)",
        ]}
      />

      {/* 4 — Multi-voice audio (with image) */}
      <FeatureBand
        reverse
        tinted
        eyebrow="Realistic multi-voice audio"
        icon={AudioLines}
        title="14+ lifelike voices, multi-speaker dialogue"
        body="ElevenLabs turns your script into broadcast-quality audio. Cast a different voice for every speaker, and Podcast Distribution AI synthesizes the dialogue, stitches the segments, and loudness-normalizes the whole episode into one clean MP3 — automatically."
        bullets={[
          "14+ premium voices across accents and styles",
          "True multi-speaker conversations, not one narrator",
          "Automatic segmentation, stitching & normalization",
          "Download a publish-ready MP3 in a click",
        ]}
        image={AUDIO_IMG}
        imageAlt="Audio mixing console"
      />

      {/* 5 — Formats */}
      <section className="py-20 md:py-24">
        <div className="container">
          <SectionHeading
            eyebrow="Any format"
            title="Solo, interview, or a full panel"
            subtitle="Pick a format and Podcast Distribution AI casts the right number of voices and writes for it."
          />
          <div className="mt-14 grid gap-6 md:grid-cols-3">
            <FormatCard
              icon={Mic2}
              title="Solo"
              body="One host narrating directly to the listener — perfect for explainers, essays, and daily updates."
            />
            <FormatCard
              icon={MessagesSquare}
              title="Interview"
              body="A host and a guest in natural back-and-forth, each with their own distinct voice."
            />
            <FormatCard
              icon={Radio}
              title="Multi-host"
              body="A lively panel of co-hosts who react to each other — banter, debate, and chemistry included."
            />
          </div>
        </div>
      </section>

      {/* 6 — Cover art */}
      <FeatureBand
        tinted
        eyebrow="AI cover art"
        icon={Palette}
        title="Scroll-stopping artwork, generated for you"
        body="Every episode gets bespoke cover art from DALL·E, matched to your topic and tone — bold, modern, and square-format ready for every directory. Don't love it? Regenerate until it's perfect."
        bullets={[
          "On-topic, on-brand art in one click",
          "One-tap regeneration for new directions",
          "Square album-cover format, podcast-directory ready",
          "Downloaded with your episode assets",
        ]}
        visual={<ArtVisual />}
      />

      {/* 7 — Languages */}
      <section className="py-20 md:py-24">
        <div className="container">
          <SectionHeading
            eyebrow="Go global"
            title="Publish in 13+ languages"
            subtitle="Reach a worldwide audience without re-recording anything. Scripts are written natively and narrated by multilingual voices."
          />
          <div className="mx-auto mt-12 flex max-w-3xl flex-wrap justify-center gap-2.5">
            {[
              "English",
              "Spanish",
              "French",
              "German",
              "Italian",
              "Portuguese",
              "Dutch",
              "Polish",
              "Hindi",
              "Japanese",
              "Korean",
              "Chinese",
              "Arabic",
              "Turkish",
              "Russian",
            ].map((l) => (
              <span
                key={l}
                className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium shadow-sm"
              >
                <Globe2 className="h-3.5 w-3.5 text-brand" />
                {l}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* 8 — Workflow */}
      <section className="border-y border-border bg-secondary/60 py-20 md:py-24">
        <div className="container">
          <SectionHeading
            eyebrow="How it flows"
            title="Three steps to a finished episode"
            subtitle="Configure once. The AI does the heavy lifting. You fine-tune and publish."
          />
          <div className="mt-14 grid gap-6 md:grid-cols-3">
            <StepCard
              n="01"
              icon={Workflow}
              title="Configure"
              body="Topic, tone, format, length, audience, language, and your cast of voices."
            />
            <StepCard
              n="02"
              icon={Wand2}
              title="Generate"
              body="GPT-4 writes, ElevenLabs records, DALL·E illustrates — with a live progress stepper."
            />
            <StepCard
              n="03"
              icon={Rocket}
              title="Publish"
              body="Fine-tune, download the MP3 and assets, share a public link, or repurpose it."
            />
          </div>
        </div>
      </section>

      {/* 9 — Script editor */}
      <FeatureBand
        eyebrow="Full control"
        icon={Edit3}
        title="A real editor, not a black box"
        body="Generated doesn't mean final. Tweak any line, regenerate a single section, then re-record just the audio that changed — so a small edit never costs a full re-render. Live word counts and spoken-duration estimates keep you on target."
        bullets={[
          "Edit every line; dirty-state save bar",
          "Regenerate one section at a time",
          "Re-record audio for only what you changed",
          "Copy the full transcript in one click",
        ]}
      />

      {/* 10 — Player & downloads */}
      <FeatureBand
        reverse
        tinted
        eyebrow="Studio-grade output"
        icon={Download}
        title="Listen, scrub, and export everything"
        body="A built-in waveform player lets you preview and scrub your episode in the browser. When you're ready, download the MP3 — or grab a single ZIP with the audio, cover art, transcript, and show notes, ready to publish anywhere."
        bullets={[
          "In-browser waveform player with volume + scrub",
          "One-click MP3 download",
          "Download everything as a tidy .zip",
          "Auto-generated transcript & show notes",
        ]}
        visual={<PlayerVisual />}
      />

      {/* 11 — Repurposing */}
      <section className="py-20 md:py-24">
        <div className="container">
          <SectionHeading
            eyebrow="Do more with every episode"
            title="One recording, a week of content"
            subtitle="Turn any episode into the formats your audience already reads — instantly."
          />
          <div className="mt-14 grid gap-6 md:grid-cols-3">
            <FormatCard icon={FileText} title="Blog post" body="An SEO-friendly article with headings, drawn straight from your episode." />
            <FormatCard icon={Hash} title="Social thread" body="A punchy, numbered thread with a strong hook, ready to post." />
            <FormatCard icon={Mail} title="Newsletter" body="A friendly email edition with takeaways and a call-to-action to listen." />
          </div>
        </div>
      </section>

      {/* 12 — Series generator */}
      <FeatureBand
        tinted
        eyebrow="Think in seasons"
        icon={ListMusic}
        title="Plan an entire season from one prompt"
        body="The series generator maps out a cohesive season — titles, topics, and summaries for every episode — from a single theme. Then generate each episode straight from the plan. Available on Pro and Agency."
        bullets={[
          "A full season outline from one idea",
          "Per-episode titles, topics & summaries",
          "Generate any planned episode in a click",
          "Keep a whole show consistent and on-theme",
        ]}
      />

      {/* 13 — Share & publish */}
      <FeatureBand
        eyebrow="Share instantly"
        icon={Share2}
        title="A public link for every episode"
        body="Flip on sharing and get a clean, no-login public page where anyone can listen — with the cover, an embedded player, and show notes. Perfect for a quick preview, a client review, or distribution before it hits the directories."
        bullets={[
          "Beautiful public listen page, zero login",
          "Embedded streaming player with seek support",
          "Carries your white-label branding (Agency)",
          "Toggle on or off anytime",
        ]}
        visual={<ShareVisual />}
      />

      {/* 14 — Teams / white-label (with image) */}
      <FeatureBand
        reverse
        tinted
        eyebrow="For studios & agencies"
        icon={Users}
        title="A workspace built for teams"
        body="The Agency plan adds a 5-seat shared workspace, white-label mode, and custom branding — so you can produce podcasts for clients under your own brand, with your color and logo flowing through the app and every public share page."
        bullets={[
          "5-seat team workspace with invitations",
          "White-label mode — remove Podcast Distribution AI branding",
          "Custom brand color & logo across the app",
          "Branded public share pages for clients",
        ]}
        image={TEAM_IMG}
        imageAlt="A team collaborating around a laptop"
      />

      {/* 15 — API */}
      <FeatureBand
        eyebrow="Build on it"
        icon={KeyRound}
        title="Generate episodes from your own apps"
        body="Pro and Agency unlock a developer API with scoped keys, so you can create and fetch episodes programmatically — wire Podcast Distribution AI into your CMS, automate a daily show, or build it into your own product."
        bullets={[
          "Scoped, revocable API keys",
          "Create + list episodes over REST",
          "Same plan limits and quotas enforced",
          "Rate-limited and ready for automation",
        ]}
        visual={<ApiVisual />}
      />

      {/* 16 — Plans, usage & billing */}
      <section className="border-y border-border bg-secondary/60 py-20 md:py-24">
        <div className="container grid items-center gap-10 md:grid-cols-2">
          <div className="space-y-5">
            <Eyebrow>Transparent &amp; flexible</Eyebrow>
            <h2 className="font-display text-3xl font-extrabold tracking-tight sm:text-4xl">
              Clear limits, your choice of payment
            </h2>
            <p className="text-muted-foreground">
              Start free and upgrade as you grow. A live usage dashboard shows exactly where you
              stand against your plan, with friendly nudges before you hit a limit. Pay with a card
              via Stripe or with PayPal — whichever you prefer.
            </p>
            <div className="flex flex-wrap gap-2">
              <FeatureChip icon={Gauge} label="Live usage meters" />
              <FeatureChip icon={CreditCard} label="Stripe & PayPal" />
              <FeatureChip icon={ShieldCheck} label="Cancel anytime" />
            </div>
            <Button asChild>
              <Link href="/pricing">
                Compare plans <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <MiniStat value="4" label="Plans, Free → Agency" />
            <MiniStat value="2" label="Payment providers" />
            <MiniStat value="14+" label="Voices included" />
            <MiniStat value="13+" label="Languages" />
          </div>
        </div>
      </section>

      {/* 17 — Everything included grid */}
      <section className="py-20 md:py-24">
        <div className="container">
          <SectionHeading
            eyebrow="The whole toolkit"
            title="Everything that comes in the box"
            subtitle="One subscription, the complete production pipeline."
          />
          <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {EVERYTHING.map((f) => (
              <div key={f.title} className="flex gap-4 rounded-2xl border border-border bg-card p-5">
                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-brand">
                  <f.icon className="h-5 w-5" />
                </span>
                <div className="space-y-1">
                  <p className="font-semibold">{f.title}</p>
                  <p className="text-sm text-muted-foreground">{f.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 18 — CTA */}
      <section className="pb-24">
        <div className="container">
          <div className="overflow-hidden rounded-3xl bg-primary px-8 py-16 text-center text-primary-foreground">
            <h2 className="font-display text-3xl font-extrabold tracking-tight sm:text-4xl">
              See it produce your first episode
            </h2>
            <p className="mx-auto mt-3 max-w-xl text-primary-foreground/75">
              Spin up a fully produced episode on the free plan in a couple of minutes — then decide.
            </p>
            <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
              <Button asChild size="lg" variant="secondary">
                <Link href="/sign-up">
                  Get started free <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="border-primary-foreground/30 bg-transparent text-primary-foreground hover:bg-primary-foreground/10"
              >
                <Link href="/pricing">View pricing</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ─────────────────────────── helpers ─────────────────────────── */

function Eyebrow({ children }: { children: React.ReactNode }) {
  return <p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">{children}</p>;
}

function SectionHeading({
  eyebrow,
  title,
  subtitle,
}: {
  eyebrow: string;
  title: string;
  subtitle: string;
}) {
  return (
    <div className="mx-auto max-w-2xl text-center">
      <Eyebrow>{eyebrow}</Eyebrow>
      <h2 className="mt-3 font-display text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h2>
      <p className="mt-4 text-lg text-muted-foreground">{subtitle}</p>
    </div>
  );
}

function FeatureBand({
  eyebrow,
  icon: Icon,
  title,
  body,
  bullets,
  image,
  imageAlt,
  visual,
  reverse,
  tinted,
}: {
  eyebrow: string;
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  body: string;
  bullets?: string[];
  image?: string;
  imageAlt?: string;
  visual?: React.ReactNode;
  reverse?: boolean;
  tinted?: boolean;
}) {
  return (
    <section className={tinted ? "border-y border-border bg-secondary/60 py-20 md:py-24" : "py-20 md:py-24"}>
      <div className="container grid items-center gap-12 md:grid-cols-2">
        <div className={reverse ? "md:order-2" : ""}>
          <span className="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-brand/10 text-brand">
            <Icon className="h-5 w-5" />
          </span>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h2 className="mt-3 font-display text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h2>
          <p className="mt-4 text-lg text-muted-foreground">{body}</p>
          {bullets && (
            <ul className="mt-6 space-y-3">
              {bullets.map((b) => (
                <li key={b} className="flex items-start gap-3">
                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-brand/10 text-brand">
                    <Check className="h-3.5 w-3.5" />
                  </span>
                  <span className="text-sm">{b}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className={reverse ? "md:order-1" : ""}>
          {image ? (
            <div className="overflow-hidden rounded-3xl border border-border shadow-xl">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={image} alt={imageAlt ?? ""} className="h-full w-full object-cover" width={1400} height={933} />
            </div>
          ) : (
            visual
          )}
        </div>
      </div>
    </section>
  );
}

function ModelChip({
  icon: Icon,
  name,
  role,
}: {
  icon: React.ComponentType<{ className?: string }>;
  name: string;
  role: string;
}) {
  return (
    <div className="flex items-center justify-center gap-3 rounded-2xl border border-border bg-card px-5 py-4 shadow-sm">
      <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10 text-brand">
        <Icon className="h-5 w-5" />
      </span>
      <div className="text-left">
        <p className="font-display font-bold leading-none">{name}</p>
        <p className="text-xs text-muted-foreground">{role}</p>
      </div>
    </div>
  );
}

function FormatCard({
  icon: Icon,
  title,
  body,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  body: string;
}) {
  return (
    <Card className="transition-all hover:-translate-y-0.5 hover:shadow-md">
      <CardContent className="space-y-3 p-6">
        <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-brand/10 text-brand">
          <Icon className="h-5 w-5" />
        </span>
        <h3 className="font-display text-lg font-bold">{title}</h3>
        <p className="text-sm text-muted-foreground">{body}</p>
      </CardContent>
    </Card>
  );
}

function StepCard({
  n,
  icon: Icon,
  title,
  body,
}: {
  n: string;
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  body: string;
}) {
  return (
    <Card className="relative overflow-hidden">
      <CardContent className="space-y-3 p-6">
        <div className="flex items-center justify-between">
          <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-brand/10 text-brand">
            <Icon className="h-5 w-5" />
          </span>
          <span className="font-display text-4xl font-extrabold text-muted-foreground/15">{n}</span>
        </div>
        <h3 className="font-display text-lg font-bold">{title}</h3>
        <p className="text-sm text-muted-foreground">{body}</p>
      </CardContent>
    </Card>
  );
}

function FeatureChip({
  icon: Icon,
  label,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
}) {
  return (
    <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium">
      <Icon className="h-3.5 w-3.5 text-brand" /> {label}
    </span>
  );
}

function MiniStat({ value, label }: { value: string; label: string }) {
  return (
    <div className="rounded-2xl border border-border bg-card p-5 text-center shadow-sm">
      <p className="font-display text-4xl font-extrabold tracking-tight text-brand">{value}</p>
      <p className="mt-1 text-xs text-muted-foreground">{label}</p>
    </div>
  );
}

/* lightweight, dependency-free "product" visuals for image-less bands */

function ArtVisual() {
  return (
    <div className="grid grid-cols-2 gap-4">
      {["from-brand/30 to-brand/5", "from-foreground/20 to-foreground/5", "from-amber-400/30 to-amber-400/5", "from-emerald-400/30 to-emerald-400/5"].map(
        (g, i) => (
          <div
            key={i}
            className={`flex aspect-square items-center justify-center rounded-2xl border border-border bg-gradient-to-br ${g}`}
          >
            <ImageIcon className="h-8 w-8 text-foreground/40" />
          </div>
        )
      )}
    </div>
  );
}

function PlayerVisual() {
  return (
    <div className="rounded-3xl border border-border bg-card p-6 shadow-xl">
      <div className="flex items-center gap-4">
        <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
          <AudioLines className="h-6 w-6" />
        </span>
        <div className="min-w-0 flex-1">
          <p className="truncate font-semibold">The history of coffee, ep. 1</p>
          <p className="text-xs text-muted-foreground">12:04 · solo · EN</p>
        </div>
      </div>
      <div className="mt-5 flex items-end gap-[3px]">
        {Array.from({ length: 48 }).map((_, i) => (
          <span
            key={i}
            className="w-full rounded-full bg-brand/60"
            style={{ height: `${10 + Math.abs(Math.sin(i * 0.7)) * 38}px` }}
          />
        ))}
      </div>
      <div className="mt-5 flex gap-2">
        <Button size="sm" className="flex-1">
          <Download className="h-4 w-4" /> MP3
        </Button>
        <Button size="sm" variant="outline" className="flex-1">
          <Download className="h-4 w-4" /> .zip
        </Button>
      </div>
    </div>
  );
}

function ShareVisual() {
  return (
    <div className="rounded-3xl border border-border bg-card p-6 shadow-xl">
      <div className="flex items-center gap-2 border-b border-border pb-3">
        <span className="h-3 w-3 rounded-full bg-destructive/40" />
        <span className="h-3 w-3 rounded-full bg-warning/50" />
        <span className="h-3 w-3 rounded-full bg-success/50" />
        <span className="ml-3 truncate rounded-full bg-secondary px-3 py-1 text-xs text-muted-foreground">
          podcastdistributionai.com/p/aZ9k…
        </span>
      </div>
      <div className="mt-5 flex gap-4">
        <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-brand/30 to-brand/5">
          <Mic2 className="h-8 w-8 text-brand" />
        </div>
        <div className="space-y-2">
          <Badge variant="success" className="gap-1">
            <Share2 className="h-3 w-3" /> Public
          </Badge>
          <p className="font-display font-bold leading-tight">Your episode, live for anyone</p>
          <p className="flex items-center gap-1 text-xs text-muted-foreground">
            <Clock className="h-3 w-3" /> no login required
          </p>
        </div>
      </div>
    </div>
  );
}

function ApiVisual() {
  return (
    <div className="overflow-hidden rounded-3xl border border-border bg-foreground shadow-xl">
      <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
        <KeyRound className="h-4 w-4 text-background/70" />
        <span className="font-mono text-xs text-background/70">POST /api/v1/episodes</span>
      </div>
      <pre className="overflow-x-auto p-5 font-mono text-xs leading-relaxed text-background/90">
        <code>{`curl -X POST https://podcastdistributionai.com/api/v1/episodes \\
  -H "Authorization: Bearer pky_live_…" \\
  -d '{
    "topic": "Why deep work matters",
    "format": "SOLO",
    "language": "en"
  }'

→ 201  { "id": "ep_8fk2…", "status": "QUEUED" }`}</code>
      </pre>
    </div>
  );
}

const EVERYTHING = [
  { icon: FileText, title: "GPT-4 scripts", body: "Structured, spoken-word scripts in seconds." },
  { icon: AudioLines, title: "Multi-voice audio", body: "14+ realistic voices, multi-speaker." },
  { icon: ImageIcon, title: "AI cover art", body: "Bespoke DALL·E artwork per episode." },
  { icon: Languages, title: "13+ languages", body: "Native scripts and narration." },
  { icon: Edit3, title: "Script editor", body: "Edit, regenerate sections, re-record." },
  { icon: Download, title: "MP3 + ZIP export", body: "Audio, art, transcript & notes." },
  { icon: Repeat, title: "Repurposing", body: "Blog, social thread, newsletter." },
  { icon: ListMusic, title: "Series generator", body: "Plan whole seasons from one prompt." },
  { icon: Share2, title: "Public share pages", body: "No-login listen links, branded." },
  { icon: Users, title: "Team workspace", body: "5 seats, invitations, roles." },
  { icon: Palette, title: "White-label", body: "Your brand color, logo, no Podcast Distribution AI." },
  { icon: KeyRound, title: "Developer API", body: "Generate episodes programmatically." },
  { icon: Gauge, title: "Usage dashboard", body: "Live meters and limit nudges." },
  { icon: CreditCard, title: "Stripe & PayPal", body: "Pay your way; cancel anytime." },
  { icon: Sparkles, title: "Live generation", body: "Watch each stage stream in real time." },
  { icon: ShieldCheck, title: "Yours to keep", body: "Download and publish anywhere." },
];