hanzo.ai/components/sign/Pricing.tsx

'use client'

/**
 * The e-signing plans, as a band of the product page they sit on.
 *
 * Same frame, same reasons, as `components/captable/Pricing.tsx` — read that
 * file for the three moves this one also makes (`FADE` for the ground, the
 * `Title` role for the heading, and the `{ min: 240, max: 4 }` deck that
 * wraps on width rather than at `md` and `lg`).
 */

import PricingPlan from "@/components/pricing/PricingPlan";
import { PenLine, Building2, Rocket } from "lucide-react"
import { Github } from "@/components/brand"
import { Grid } from '@hanzo/ui/grid'
import { Band, Head, FADE } from '@/components/marketing/band'

/** Every tier's mark, at the size and ink components/pricing draws them. */
const MARK = { size: 24, color: 'var(--muted-foreground)' } as const

const Pricing = () => {
  return (
    <Band rule={false} pad="$10" measure={1152} ground={FADE}>
      <Head
        title="What it costs"
        lede="Run it yourself and pay nothing but your own hosting. Pay us and we run it, on the same code."
      />

      <Grid columns={{ min: 240, max: 4 }} gap={24}>
        <PricingPlan
          name="Community"
          icon={<Github {...MARK} />}
          price="Free"
          description="Self-host and own your data. Full source code on GitHub."
          githubLink
          features={[
            'Unlimited documents',
            'All field types',
            'Templates',
            'API access',
            'Email notifications',
            'Community support',
          ]}
        />
        <PricingPlan
          name="Starter"
          icon={<PenLine {...MARK} />}
          price="$30"
          billingPeriod="/mo"
          description="For individuals and small teams getting started with e-signing."
          features={[
            'Everything in Community',
            'Managed cloud hosting',
            'Custom branding',
            'Priority email support',
            'Signing certificates',
            '5 team members',
          ]}
        />
        <PricingPlan
          name="Business"
          icon={<Building2 {...MARK} />}
          price="$50"
          billingPeriod="/mo"
          popular
          description="For growing teams that need advanced features and integrations."
          features={[
            'Everything in Starter',
            'Unlimited team members',
            'Custom domain',
            'Advanced templates',
            'Webhooks',
            'SAML SSO',
            'Audit logs',
            'Priority support',
          ]}
        />
        <PricingPlan
          name="Enterprise"
          icon={<Rocket {...MARK} />}
          price="Custom"
          description="For organizations with advanced security and compliance needs."
          contactSalesUrl="/contact-sales"
          features={[
            'Everything in Business',
            'Dedicated infrastructure',
            'Custom SLA',
            'On-premise deployment',
            'Compliance certifications',
            'Dedicated account manager',
            '24/7 phone support',
          ]}
        />
      </Grid>
    </Band>
  );
};

export default Pricing;