import type { Metadata } from "next";
import { Button } from "@/components/Button";
import { Reveal } from "@/components/Reveal";

export const metadata: Metadata = {
  title: "Paid Posts",
  description:
    "How Postvertise works today: creator profiles, connected social accounts, brand discovery, campaigns, deliverable URL review, and Stripe-processed marketplace payments.",
};

const creatorSteps = [
  [
    "01",
    "Create your profile",
    "Sign up as a Creator, complete your profile, and publish a public page brands can discover.",
  ],
  [
    "02",
    "Connect your accounts",
    "Connect Instagram, Facebook Pages, TikTok, or X. Where supported, metrics come from official APIs after you authorize access—not from scraping.",
  ],
  [
    "03",
    "Browse opportunities",
    "See campaigns you are invited to or that you can apply for. Accepting an invite or applying creates a participation when the brand confirms; payment authorization and charging follow the Platform’s booking flow.",
  ],
  [
    "04",
    "Submit deliverables as URLs",
    "When assigned, submit content URLs and notes for brand review. Postvertise does not publish posts to social networks for you.",
  ],
  [
    "05",
    "Get reviewed and paid through Connect",
    "Brands can approve submissions or request revisions. After required approvals and a successful brand charge, your creator service amount can be transferred through Stripe Connect. Postvertise does not currently initiate bank payouts from the application.",
  ],
];

const brandSteps = [
  [
    "01",
    "Browse creators",
    "Discover creators by profile and connected-account metrics where the platform APIs return them.",
  ],
  [
    "02",
    "Create a campaign",
    "Define briefs, targeting metadata, and deliverables. Invite creators or review applications.",
  ],
  [
    "03",
    "Book and authorize payment",
    "When you book a creator, you may authorize a payment method. Campaign budgets are planning values and do not themselves create a charge.",
  ],
  [
    "04",
    "Collaborate on deliverables",
    "Creators submit content URLs for review. Approve or request revisions inside the campaign workflow. Automatic publishing to Instagram, Facebook, TikTok, or X is not implemented.",
  ],
  [
    "05",
    "Charge when conditions are met",
    "After required deliverables are approved, the brand is charged for the creator service amount plus Postvertise’s platform fee, and applicable taxes where tax calculation is enabled. Use authorized analytics where available—synced metrics depend on each platform API.",
  ],
];

function Path({
  kicker,
  title,
  steps,
  dark,
}: {
  kicker: string;
  title: string;
  steps: string[][];
  dark?: boolean;
}) {
  return (
    <Reveal
      as="article"
      className={
        dark
          ? "flex min-w-0 flex-col rounded-pv border border-primary bg-primary px-[30px] pt-8 pb-7 text-bg [&_h2]:text-white [&_h3]:text-white [&_li]:border-white/12"
          : "flex min-w-0 flex-col rounded-pv border border-line bg-surface px-[30px] pt-8 pb-7"
      }
    >
      <div className={dark ? "mb-7 border-b-[1.5px] border-white pb-5" : "mb-7 border-b-[1.5px] border-primary pb-5"}>
        <p className={dark ? "text-[0.72rem] font-medium tracking-[0.16em] text-bg/45 uppercase" : "text-[0.72rem] font-medium tracking-[0.16em] text-ink-40 uppercase"}>
          {kicker}
        </p>
        <h2 className="mt-2.5 text-[clamp(1.6rem,2.4vw,2.1rem)]">{title}</h2>
      </div>
      <ol className="flex list-none flex-col p-0">
        {steps.map(([n, h, b]) => (
          <li key={n} className="grid grid-cols-[auto_1fr] items-start gap-4 border-b border-line py-[18px] first:pt-0 last:border-b-0 last:pb-0">
            <p className="mt-1 text-[0.72rem] font-semibold tracking-[0.1em] text-accent">{n}</p>
            <div>
              <h3 className="mb-1.5 text-[1.08rem]">{h}</h3>
              <p className={dark ? "text-[0.92rem] leading-normal text-bg/62" : "text-[0.92rem] leading-normal text-ink-60"}>{b}</p>
            </div>
          </li>
        ))}
      </ol>
    </Reveal>
  );
}

export default function PaidPostsPage() {
  return (
    <main id="main-content" className="flex-1">
      <section className="pt-[72px] pb-12" id="top" aria-labelledby="paid-posts-hero-heading">
        <div className="mx-auto w-full max-w-page px-4 md:px-6">
          <Reveal as="p" className="text-[0.72rem] font-medium tracking-[0.16em] text-ink-40 uppercase">
            Paid Posts
          </Reveal>
          <Reveal as="h1" className="max-w-[16ch]" id="paid-posts-hero-heading">
            How Postvertise <em>Works</em>
          </Reveal>
          <Reveal as="p" className="mt-5 max-w-[48ch] text-[1.14rem] text-ink-60">
            A marketplace workflow for brands and creators: profiles, authorized social data, campaigns, deliverable URL review, and Stripe-processed payment authorization. Automatic social publishing is not currently part of the product.
          </Reveal>
        </div>
      </section>
      <section className="pt-10 pb-[88px]">
        <div className="mx-auto w-full max-w-page px-4 md:px-6">
          <div className="grid grid-cols-1 items-stretch gap-4 min-[861px]:grid-cols-2">
            <Path kicker="Creators" title="For Creators" steps={creatorSteps} />
            <Path kicker="Brands" title="For Brands" steps={brandSteps} dark />
          </div>
        </div>
      </section>
      <section className="relative overflow-hidden bg-primary py-[110px] text-center text-white" aria-labelledby="paid-posts-cta-heading">
        <div className="relative z-[2] mx-auto w-full max-w-page px-4 md:px-6">
          <Reveal as="h2" className="mx-auto mb-5 max-w-[18ch] text-[clamp(2.3rem,5.6vw,4rem)] text-white" id="paid-posts-cta-heading">
            Ready to get started?
          </Reveal>
          <Reveal as="p" className="mx-auto max-w-[42ch] text-[1.14rem] text-white/72">
            Create a creator profile or start discovering creators today.
          </Reveal>
          <Reveal className="mt-[30px] flex flex-wrap justify-center gap-[0.7rem]">
            <Button href="/signup?role=creator" variant="inverse">
              I&apos;m a creator
            </Button>
            <Button href="/signup?role=brand" variant="ghost">
              I&apos;m a brand
            </Button>
          </Reveal>
        </div>
      </section>
    </main>
  );
}