import type { Metadata } from "next";
import Image from "next/image";
import { Button } from "@/components/Button";
import { Reveal } from "@/components/Reveal";
// CreatorStrip kept in components/home/CreatorStrip.tsx — temporarily hidden from the homepage.
import heroImg from "@/assets/img/hero/paid-posts.webp";

export const metadata: Metadata = {
  title: { absolute: "Postvertise — Brands discover creators. Creators connect." },
  description:
    "Postvertise helps brands discover creators, run campaigns, and review deliverables. Creators connect supported social accounts so authorized metrics come from official platform APIs.",
};

function Check({ className = "mt-[3px] shrink-0 text-accent" }: { className?: string }) {
  return (
    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" width="16" height="16" aria-hidden="true">
      <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
    </svg>
  );
}

export default function HomePage() {
  return (
    <main id="main-content" className="flex-1">
      <section className="py-16 pb-[84px]" id="top" aria-labelledby="hero-heading">
        <div className="mx-auto grid w-full max-w-page items-center justify-between gap-11 px-4 md:grid-cols-[1.04fr_0.96fr] md:gap-16 md:px-6 max-[960px]:grid-cols-1">
          <div>
            <p className="text-[0.72rem] font-medium tracking-[0.16em] text-ink-40 uppercase">Connecting brands and creators</p>
            <h1 id="hero-heading">
              Paid Posts
              <br />
              <em>Advertising</em>
            </h1>
            <p className="mt-5 max-w-[52ch] text-[1.14rem] text-ink-60">
              Postvertise helps brands discover creators, create campaigns, invite collaborators, and review deliverable submissions. Creators build profiles and connect supported social accounts so marketplace-relevant metrics come from official platform APIs.
            </p>
            <div className="mt-[30px] flex flex-wrap gap-[0.7rem]">
              <Button href="/signup">Get started</Button>
              <Button href="/paid-posts" variant="secondary">
                Learn more
              </Button>
            </div>
          </div>
          <Image
            className="w-full max-w-[300px] justify-self-end max-[960px]:justify-self-start"
            alt="Phone mockup of a social feed with a Creator Paid Posts promo for Postvertise."
            src={heroImg}
            priority
          />
        </div>
      </section>

      {/* <CreatorStrip /> — temporarily hidden */}

      <section className="border-y border-line bg-surface py-[88px]" id="why" aria-labelledby="why-heading">
        <div className="mx-auto w-full max-w-page px-4 md:px-6">
          <Reveal className="mb-[50px] max-w-[56ch]">
            <p className="text-[0.72rem] font-medium tracking-[0.16em] text-ink-40 uppercase">Why both sides use Postvertise</p>
            <h2 className="my-3" id="why-heading">
              Discovery, campaigns, and authorized social data in one place.
            </h2>
          </Reveal>
          <div className="grid gap-4 min-[901px]:grid-cols-3">
            {[
              {
                n: "01",
                title: "Numbers from the account, not a scraper",
                body: "Creators connect Instagram, Facebook, TikTok, or X. Where supported, Postvertise retrieves profile and audience metrics through official APIs after authorization—not by scraping websites.",
                stat: "Official APIs",
                label: "where the platform supports them",
                icon: "chart",
              },
              {
                n: "02",
                title: "Campaigns with clear deliverables",
                body: "Brands create campaigns, invite creators, and review applications. Creators submit deliverable URLs for review, revision requests, and approval. Brands may authorize a payment method when booking; charges and creator transfers run through the Platform’s payment flow after applicable conditions are met. Automatic social publishing is not currently supported.",
                stat: "URL review",
                label: "deliverables today",
                icon: "lock",
              },
              {
                n: "03",
                title: "Profiles brands can evaluate",
                body: "Creators build public profiles and connect accounts so brands can discover niches, follower-style counts, and—when Insights return them—aggregated audience breakdowns from the connected platform.",
                stat: "Discover",
                label: "creators by niche and reach",
                icon: "card",
              },
            ].map((c) => (
              <Reveal
                as="article"
                key={c.n}
                className="flex min-w-0 flex-col rounded-pv border border-line bg-bg px-[26px] pt-7 pb-[22px] transition hover:-translate-y-[3px] hover:border-primary/28 hover:shadow-[0_18px_36px_-28px_rgba(23,37,84,0.45)]"
              >
                <div className="mb-[22px] flex items-center justify-between gap-3">
                  <div className="grid size-[42px] shrink-0 place-items-center rounded-pv bg-accent/12 text-accent" aria-hidden="true">
                    {c.icon === "chart" && (
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" width="20" height="20">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                      </svg>
                    )}
                    {c.icon === "lock" && (
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" width="20" height="20">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                      </svg>
                    )}
                    {c.icon === "card" && (
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" width="20" height="20">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                      </svg>
                    )}
                  </div>
                  <p className="text-[0.72rem] font-semibold tracking-[0.1em] text-accent">{c.n}</p>
                </div>
                <h3 className="mb-2.5 max-w-[16ch] text-[1.22rem]">{c.title}</h3>
                <p className="text-[0.94rem] leading-[1.55] text-ink-60">{c.body}</p>
                <p className="mt-auto border-t border-dashed border-line pt-[18px] text-[0.68rem] font-medium tracking-[0.1em] text-ink-40 uppercase">
                  <span className="text-[0.82rem] tracking-normal text-primary tabular-nums">{c.stat}</span> {c.label}
                </p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-primary py-[88px] text-bg" id="creators" aria-labelledby="creators-heading">
        <div className="mx-auto grid w-full max-w-page items-center gap-10 px-4 min-[901px]:grid-cols-2 min-[901px]:gap-16 md:px-6">
          <Reveal>
            <p className="text-[0.72rem] font-medium tracking-[0.16em] text-bg/45 uppercase">For creators</p>
            <h2 className="text-white" id="creators-heading">
              Build a profile. Connect accounts. Apply to campaigns.
            </h2>
            <p className="mt-4 max-w-[52ch] text-[1.14rem] text-bg/66">
              Creators create a Postvertise profile, optionally connect supported social accounts, browse opportunities, and submit deliverable URLs for brand review. After approvals and payment conditions are met, creator service amounts can be transferred through the Platform’s Stripe Connect flow. Automatic publishing to social networks is not currently supported.
            </p>
            <ul className="my-7 mb-8 flex flex-col gap-3">
              {[
                "Connect Instagram, Facebook Pages, TikTok, or X where you authorize access.",
                "Show API-backed metrics on your profile when the platform returns them.",
                "Apply to brand campaigns and submit deliverable URLs for review.",
                "Disconnect any social account or delete your Postvertise account anytime from Settings.",
              ].map((t) => (
                <li key={t} className="flex items-start gap-[11px] text-[0.97rem] text-bg/86">
                  <Check className="mt-1.5 shrink-0 text-accent" />
                  <span>{t}</span>
                </li>
              ))}
            </ul>
            <Button href="/signup?role=creator" variant="inverse">
              Create your profile
            </Button>
          </Reveal>
          <Reveal className="rounded-pv border border-white/13 bg-white/[0.055] p-[26px]" id="creatorWorkflowCard">
            <div className="mb-5 flex items-center justify-between">
              <span className="text-[0.72rem] tracking-[0.12em] text-bg/45 uppercase">Creator workflow</span>
              <span className="text-[0.72rem] tracking-[0.12em] text-accent uppercase">Available now</span>
            </div>
            <p className="text-[1.6rem] leading-snug font-semibold tracking-[-0.03em] text-white">Profile → connect → apply → submit</p>
            <p className="mt-2 text-[0.86rem] text-bg/50">Campaign participation with payment authorization and deliverable URL review—no auto-publishing</p>
            <div className="mt-[26px] flex flex-col gap-3.5">
              {[
                ["Create a profile", "Niche, bio, and public page"],
                ["Connect social accounts", "Official OAuth where supported"],
                ["Join campaigns", "Invites, applications, URL deliverables"],
              ].map(([l, v]) => (
                <div key={l} className="text-[0.85rem] text-bg/70">
                  <div className="mb-1.5 flex justify-between gap-3">
                    <span>{l}</span>
                    <span className="text-right text-white/80">{v}</span>
                  </div>
                  <div className="bar h-1.5 overflow-hidden rounded-full bg-white/12">
                    <i style={{ width: "100%" }} />
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="py-[88px]" id="pricing" aria-labelledby="pricing-heading">
        <div className="mx-auto w-full max-w-page px-4 md:px-6">
          <Reveal className="mb-[50px] max-w-[56ch]">
            <p className="text-[0.72rem] font-medium tracking-[0.16em] text-ink-40 uppercase">Getting started</p>
            <h2 className="my-3" id="pricing-heading">
              Free to create an account.
              <br />
              Payment authorization when you book.
            </h2>
            <p className="max-w-[52ch] text-[1.14rem] text-ink-60">
              You can sign up, connect accounts, discover creators, and run campaign workflows today. When a brand books a creator, a payment method may be authorized; the brand is charged when applicable payment conditions are met. Creator service amounts are transferred through Stripe Connect. Postvertise does not currently initiate bank payouts from the application, and automatic social publishing is not supported.
            </p>
          </Reveal>
          <div className="grid grid-cols-1 gap-4 min-[821px]:grid-cols-2">
            <Reveal as="article" className="flex min-w-0 flex-col rounded-pv border border-line bg-surface px-8 pt-8 pb-7">
              <p className="text-[0.72rem] font-medium tracking-[0.16em] text-ink-40 uppercase">For brands</p>
              <p className="mt-3.5 text-[2.9rem] leading-[0.92] font-extrabold tracking-[-0.05em] text-primary">Discover</p>
              <p className="mt-3.5 text-[1.12rem] font-semibold tracking-[-0.02em] text-text">Find creators and run campaigns.</p>
              <ul className="mt-4 flex flex-col gap-2.5">
                <li className="flex items-start gap-2.5 text-[0.94rem] leading-[1.4] text-ink-60">
                  <Check />
                  <span>Browse creator profiles with authorized social metrics where available.</span>
                </li>
                <li className="flex items-start gap-2.5 text-[0.94rem] leading-[1.4] text-ink-60">
                  <Check />
                  <span>Create campaigns, invite creators, and review deliverable URLs.</span>
                </li>
              </ul>
              <Button href="/signup?role=brand" className="mt-[22px] self-start">
                Get started
              </Button>
            </Reveal>
            <Reveal as="article" className="flex min-w-0 flex-col rounded-pv border border-primary bg-primary px-8 pt-8 pb-7 text-bg">
              <p className="text-[0.72rem] font-medium tracking-[0.16em] text-bg/45 uppercase">For creators</p>
              <p className="mt-3.5 text-[2.9rem] leading-[0.92] font-extrabold tracking-[-0.05em] text-accent">Connect</p>
              <p className="mt-3.5 text-[1.12rem] font-semibold tracking-[-0.02em] text-white">Show real account data. Join campaigns.</p>
              <ul className="mt-4 flex flex-col gap-2.5">
                <li className="flex items-start gap-2.5 text-[0.94rem] leading-[1.4] text-bg/62">
                  <Check />
                  <span>Free to create a profile and connect supported social accounts.</span>
                </li>
                <li className="flex items-start gap-2.5 text-[0.94rem] leading-[1.4] text-bg/62">
                  <Check />
                  <span>Analytics availability depends on platform APIs and permissions.</span>
                </li>
              </ul>
              <Button href="/signup?role=creator" variant="inverse" className="mt-[22px] self-start">
                Create your profile
              </Button>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden bg-primary py-[110px] text-center text-white" id="get-started" aria-labelledby="final-heading">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img className="absolute inset-0 size-full object-cover opacity-[0.38]" alt="" loading="lazy" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&q=80&w=1600" />
        <span className="absolute inset-0 bg-[radial-gradient(120%_90%_at_50%_40%,rgba(23,37,84,0.35),rgba(23,37,84,0.94))]" />
        <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="final-heading">
            Brands discover. Creators connect.
          </Reveal>
          <Reveal as="p" className="mx-auto max-w-[52ch] text-[1.14rem] text-white/72">
            Create a profile or start discovering creators today. Automatic social publishing is not currently part of the product.
          </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>
  );
}