import { Eyebrow } from "@/components/ui/eyebrow"

export default function TypographyDemo() {
  return (
    <article className="flex max-w-2xl flex-col font-sans">
      <header className="border-b border-border pb-8">
        <Eyebrow>Best AI Resume Builder</Eyebrow>
        <h1 className="max-w-xl font-serif text-[length:var(--kr-fs-h1)] leading-[56px] font-normal tracking-[var(--kr-tracking-display)] text-balance">
          Your success story begins with a resume.
        </h1>
        <p className="mt-4 max-w-xl leading-6 tracking-[var(--kr-tracking-body)] text-muted-foreground">
          Create a beautiful resume quickly with the help of artificial
          intelligence and our customizable templates.
        </p>
      </header>

      <section className="pt-8">
        <h2 className="font-serif text-[length:var(--kr-fs-h2)] leading-10 font-normal tracking-[var(--kr-tracking-h2)]">
          Make your experience count
        </h2>
        <p className="mt-3 leading-6 tracking-[var(--kr-tracking-body)]">
          Focus on the work that matters. A clear hierarchy helps recruiters
          scan your story while the details remain comfortable to read.
        </p>
        <blockquote className="my-8 font-serif text-2xl leading-8 tracking-[-0.04rem]">
          “A thoughtful resume turns experience into opportunity.”
        </blockquote>
        <h3 className="font-serif text-[length:var(--kr-fs-h3)] leading-8 font-normal tracking-[var(--kr-tracking-h2)]">
          A simple structure
        </h3>
        <ul className="mt-3 ml-5 list-disc leading-6 [&>li]:mt-2">
          <li>Lead with the result you created.</li>
          <li>Add just enough context to make it meaningful.</li>
          <li>Keep every sentence direct and easy to scan.</li>
        </ul>
      </section>
    </article>
  )
}

export default function TypographyFonts() {
  return (
    <div className="flex flex-col gap-8">
      <div>
        <p className="font-serif text-4xl leading-tight tracking-[-1px]">
          Henk-Work <em>Italic</em> <strong className="font-bold">Bold</strong>
        </p>
        <p className="mt-2 font-mono text-xs text-muted-foreground">
          Display · 400 / 400 italic / 700
        </p>
      </div>
      <div>
        <p className="font-sans text-3xl leading-tight font-medium">
          Graphik Web
        </p>
        <p className="mt-2 font-mono text-xs text-muted-foreground">
          Body and UI · 400 / 500 / 600 / 700
        </p>
      </div>
    </div>
  )
}

export default function TypographyH1() {
  return (
    <h1 className="max-w-2xl font-serif text-[length:var(--kr-fs-h1)] leading-[56px] font-normal tracking-[var(--kr-tracking-display)] text-balance">
      Your success story begins with a resume.
    </h1>
  )
}

export default function TypographyH2() {
  return (
    <h2 className="font-serif text-[length:var(--kr-fs-h2)] leading-10 font-normal tracking-[var(--kr-tracking-h2)]">
      Build a resume. Land a job.
    </h2>
  )
}

export default function TypographyH3() {
  return (
    <h3 className="font-serif text-[length:var(--kr-fs-h3)] leading-8 font-normal tracking-[var(--kr-tracking-h2)]">
      A template for every story
    </h3>
  )
}

export default function TypographyH4() {
  return (
    <h4 className="font-sans text-[length:var(--kr-fs-h4)] leading-7 font-medium tracking-[-0.4px]">
      Work experience
    </h4>
  )
}

export default function TypographyH5() {
  return (
    <h5 className="font-sans text-[length:var(--kr-fs-h5)] leading-6 font-medium">
      Senior Product Designer
    </h5>
  )
}

const styles = [
  {
    name: "Body",
    meta: "16 / 400 / 24",
    className:
      "text-base leading-6 font-normal tracking-[var(--kr-tracking-body)]",
    text: "Long-form copy and comfortable reading text.",
  },
  {
    name: "Medium",
    meta: "14 / 400 / 20",
    className:
      "text-sm leading-5 font-normal tracking-[var(--kr-tracking-small)]",
    text: "Captions, secondary labels, and helper text.",
  },
  {
    name: "Small",
    meta: "12 / 400 / 16",
    className: "text-xs leading-4 font-normal text-muted-foreground",
    text: "Metadata, badges, and fine print.",
  },
  {
    name: "Label",
    meta: "16 / 500 / 24",
    className: "text-base leading-6 font-medium",
    text: "Section label and primary UI emphasis.",
  },
  {
    name: "Label small",
    meta: "14 / 500 / 20",
    className: "text-sm leading-5 font-medium",
    text: "Form labels and compact UI emphasis.",
  },
]

export default function TypographyBody() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-6 font-sans">
      {styles.map((style) => (
        <div key={style.name} className="grid gap-1 sm:grid-cols-[7rem_1fr]">
          <p className="font-mono text-xs text-muted-foreground">
            {style.name}
            <br />
            {style.meta}
          </p>
          <p className={style.className}>{style.text}</p>
        </div>
      ))}
    </div>
  )
}

import { Eyebrow } from "@/components/ui/eyebrow"

export default function TypographyEyebrow() {
  return (
    <section className="max-w-xl text-center">
      <Eyebrow>Resume Templates</Eyebrow>
      <h2 className="font-serif text-[length:var(--kr-fs-h2)] leading-10 font-normal tracking-[var(--kr-tracking-h2)] text-balance">
        Pick a resume template. Make it your own.
      </h2>
    </section>
  )
}

export default function TypographyBlockquote() {
  return (
    <blockquote className="max-w-xl font-serif text-2xl leading-8 tracking-[-0.04rem]">
      “Kickresume helped me show the story behind my experience.”
    </blockquote>
  )
}

export default function TypographyStat() {
  return (
    <div className="text-center">
      <p className="font-serif text-[length:var(--kr-fs-stat)] leading-10 tracking-[-1px]">
        6,000,000+
      </p>
      <p className="mt-2 font-sans text-sm leading-5 text-muted-foreground">
        resumes created
      </p>
    </div>
  )
}

export default function TypographyLinks() {
  return (
    <p className="font-sans leading-6">
      Read our{" "}
      <a
        href="#"
        className="font-medium text-primary no-underline hover:underline"
      >
        resume guide
      </a>{" "}
      or discover{" "}
      <span className="text-premium-gradient font-semibold">
        AI-powered writing
      </span>
      .
    </p>
  )
}