`src/app/pricing/page.tsx`

130 lines
import Link from "next/link";

export const metadata = {
  title: "Pricing — Drops",
  description: "Free trial, Standard $29/mo, Pro $99/mo. Cancel anytime.",
};

const FEATURES = [
  { label: "Daily curated drop", trial: true, standard: true, pro: true },
  { label: "Items per drop", trial: "3", standard: "3", pro: "10" },
  { label: "Abandoned trademarks", trial: true, standard: true, pro: true },
  { label: "Public-domain works", trial: true, standard: true, pro: true },
  { label: "Unregistered-brand alerts", trial: true, standard: true, pro: true },
  { label: "Domain-snipe alerts (expiring)", trial: false, standard: true, pro: true },
  { label: "Editorial scoring + commentary", trial: true, standard: true, pro: true },
  { label: "Pro tactical hints (NICE class, registrar tricks)", trial: false, standard: false, pro: true },
  { label: "SWOT preview per item", trial: false, standard: false, pro: true },
  { label: "Full drop archive", trial: false, standard: true, pro: true },
  { label: "API access", trial: false, standard: false, pro: true },
  { label: "7-day money-back", trial: "n/a", standard: true, pro: true },
];

function Cell({ v }: { v: boolean | string }) {
  if (v === true) return <span className="text-emerald-700">●</span>;
  if (v === false) return <span className="text-ink/20">—</span>;
  return <span className="text-ink/80 text-sm">{v}</span>;
}

export default function PricingPage() {
  return (
    <article className="mx-auto max-w-4xl space-y-6">
      <div className="card p-8">
        <div className="text-xs uppercase tracking-widest text-brass">Pricing</div>
        <h1 className="mt-2 text-3xl font-semibold">Three tiers. Cancel anytime. Pay in USD.</h1>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        <PlanCard
          name="Trial"
          price="Free"
          byline="3 drops, then pick a paid tier or walk away."
          features={["3 items per drop", "Basic edition", "No credit card required"]}
          ctaHref="/drops"
          ctaText="Start free trial"
        />
        <PlanCard
          name="Standard"
          price="$29"
          byline="Per month. Cancel anytime. 7-day money-back."
          features={[
            "3 curated items every day",
            "Full editorial commentary",
            "Drop archive access",
            "Abandoned trademarks + PD works",
            "Unregistered-brand + domain-snipe alerts",
          ]}
          ctaHref="/drops"
          ctaText="Get Standard"
        />
        <PlanCard
          name="Pro"
          price="$99"
          byline="Per month. For builders and brokers."
          highlight
          features={[
            "10 items every day (3× the catalog)",
            "Pro tactical hints on each item",
            "SWOT preview per candidate",
            "NICE-class filing suggestions",
            "API access + full archive",
          ]}
          ctaHref="/drops"
          ctaText="Get Pro"
        />
      </div>

      <div className="card p-6">
        <h2 className="text-xl font-semibold">What's in each tier, line by line</h2>
        <div className="mt-4 overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="border-b border-ink/10">
                <th className="py-2 text-left font-semibold text-ink/70">Feature</th>
                <th className="py-2 text-center font-semibold text-ink/70">Trial</th>
                <th className="py-2 text-center font-semibold text-ink/70">Standard</th>
                <th className="py-2 text-center font-semibold text-ink/70">Pro</th>
              </tr>
            </thead>
            <tbody>
              {FEATURES.map((f, i) => (
                <tr key={i} className="border-b border-ink/5">
                  <td className="py-2">{f.label}</td>
                  <td className="py-2 text-center"><Cell v={f.trial} /></td>
                  <td className="py-2 text-center"><Cell v={f.standard} /></td>
                  <td className="py-2 text-center"><Cell v={f.pro} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card p-6 text-sm text-ink/70">
        <b>Frequently asked:</b> Yes, you can cancel any time · Yes, we refund within 7 days · Yes, you can upgrade / downgrade · No, we don't offer annual billing yet · <Link href="/faq" className="text-brass underline">more</Link>.
      </div>
    </article>
  );
}

function PlanCard({
  name, price, byline, features, ctaHref, ctaText, highlight,
}: {
  name: string; price: string; byline: string; features: string[];
  ctaHref: string; ctaText: string; highlight?: boolean;
}) {
  return (
    <div className={`card p-6 flex flex-col ${highlight ? "border-brass/60 ring-1 ring-brass/30 bg-brass/5" : ""}`}>
      <h3 className="text-lg font-semibold">{name}</h3>
      <div className="mt-1 text-3xl font-semibold text-ink">{price}{price !== "Free" && <span className="text-sm text-ink/60">/mo</span>}</div>
      <p className="mt-1 text-sm text-ink/60">{byline}</p>
      <ul className="mt-4 space-y-1.5 text-sm text-ink/80">
        {features.map((f, i) => <li key={i}>· {f}</li>)}
      </ul>
      <div className="mt-auto pt-4">
        <Link href={ctaHref} className="btn w-full justify-center">{ctaText}</Link>
      </div>
    </div>
  );
}