import { Hero } from '@/components/Hero/Hero'

export function HeroDemo() {
  return <Hero />
}

import { TechStack } from '@/components/TechStack/TechStack'

export function TechStackDemo() {
  return <TechStack />
}

import { Features } from '@/components/Features/Features'

export function FeaturesDemo() {
  return <Features />
}

import { HowItWorks } from '@/components/HowItWorks/HowItWorks'

export function HowItWorksDemo() {
  return <HowItWorks />
}

import { IconFeatures } from '@/components/IconFeatures/IconFeatures'

export function IconFeaturesDemo() {
  return <IconFeatures />
}

import { Pricing } from '@/components/Pricing/Pricing'

export function PricingDemo() {
  return <Pricing />
}

import { CATALOG } from '@ffd/shared'
import { OfferCard } from '@/components/OfferCard/OfferCard'
import type { CardCopy } from '@/lib/catalog/card-copy'
import { UPDATES } from '@/lib/updates'

// Illustrative copy, not the shipped card's. `Pricing` owns the real
// `Record<Slug, CardCopy>`, and the amount and cadence below come off the
// catalog either way.
const COPY: CardCopy = {
  name: 'Pro',
  tagline: 'The boilerplate, and the storefront that sells it. One repo.',
  bullets: [
    'Permanent read access to the repository',
    'API (Express)',
    'Invite delivery with retries',
    'Lifetime updates',
  ],
  cta: 'Get the boilerplate',
  footnote: 'Pay once. Access is never revoked.',
  // Read off the changelog rather than typed here, so the claim above it is a
  // fact about the repo instead of a date that rots.
  updatedOn: UPDATES[0]?.date,
}

export function OfferCardDemo() {
  return <OfferCard slug="pro" entry={CATALOG.pro} copy={COPY} />
}

import { FAQ } from '@/components/FAQ/FAQ'

export function FaqDemo() {
  return <FAQ />
}

import { CTA } from '@/components/CTA/CTA'

export function CtaDemo() {
  return <CTA />
}

import { WithOrWithout } from '@/components/WithOrWithout/WithOrWithout'

export function WithOrWithoutDemo() {
  return <WithOrWithout />
}

import { MadeWith } from '@/components/MadeWith/MadeWith'

export function MadeWithDemo() {
  return <MadeWith />
}