import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

function ExampleBlock({
  text,
  category,
  specificity,
  explanation,
}: {
  text: string;
  category: string;
  specificity: number;
  explanation: string;
}) {
  return (
    <div className="my-3 rounded-md border border-border bg-muted/50 p-4">
      <p className="font-serif text-sm italic text-foreground/90">{text}</p>
      <div className="mt-2 flex flex-wrap items-center gap-2">
        <Badge variant="secondary">{category}</Badge>
        <Badge variant="outline">Specificity {specificity}</Badge>
        <span className="text-xs text-muted-foreground">{explanation}</span>
      </div>
    </div>
  );
}

function ISItem({ children }: { children: React.ReactNode }) {
  return (
    <li className="text-green-700 dark:text-green-400">{children}</li>
  );
}

function NOTItem({ children }: { children: React.ReactNode }) {
  return (
    <li className="text-red-700 dark:text-red-400">{children}</li>
  );
}

function SectionHeading({
  id,
  level,
  children,
}: {
  id: string;
  level: 2 | 3;
  children: React.ReactNode;
}) {
  const Tag = level === 2 ? "h2" : "h3";
  return (
    <Tag id={id} className={`scroll-mt-20 ${level === 2 ? "text-2xl font-bold" : "text-xl font-semibold"} text-foreground`}>
      {children}
    </Tag>
  );
}

const tocSections = [
  { id: "overview", label: "Overview" },
  { id: "content-categories", label: "Content Categories" },
  { id: "decision-rules", label: "Category Decision Rules" },
  { id: "specificity-levels", label: "Specificity Levels" },
  { id: "borderline-cases", label: "Borderline Cases" },
];

export default function CodebookPage() {
  return (
    <div className="bg-background text-foreground">
      {/* Sticky header */}
      <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="mx-auto flex max-w-4xl items-center justify-between px-6 py-4">
          <h1 className="text-2xl font-bold">Labeling Codebook</h1>
          <Link
            href="/dashboard"
            className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
          >
            &larr; Back to Dashboard
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-4xl px-6 py-8 space-y-10">
        {/* Table of Contents */}
        <nav className="rounded-lg border border-border bg-muted/30 p-5">
          <h2 className="mb-3 text-lg font-semibold">Table of Contents</h2>
          <ol className="list-decimal list-inside space-y-1 text-sm">
            {tocSections.map((s) => (
              <li key={s.id}>
                <a href={`#${s.id}`} className="text-blue-600 hover:underline dark:text-blue-400">
                  {s.label}
                </a>
              </li>
            ))}
          </ol>
        </nav>

        {/* ================================================================
            SECTION 1: OVERVIEW
            ================================================================ */}
        <section id="overview" className="space-y-4">
          <SectionHeading id="overview" level={2}>
            1. Overview
          </SectionHeading>

          <p>
            <strong>Unit of analysis:</strong> One paragraph from an SEC filing
            (Item 1C of 10-K, or Item 1.05/8.01/7.01 of 8-K).
          </p>
          <p>
            <strong>Classification type:</strong> Multi-class (single-label),
            NOT multi-label. Each paragraph receives exactly one content
            category.
          </p>
          <p>
            <strong>Each paragraph receives two labels:</strong>
          </p>
          <ol className="list-decimal list-inside space-y-1 pl-2">
            <li>
              <strong>Content Category</strong> — single-label, one of 7
              mutually exclusive classes
            </li>
            <li>
              <strong>Specificity Level</strong> — ordinal integer 1&ndash;4
            </li>
          </ol>
          <p>
            <strong>None/Other policy:</strong> Required. Since this is
            multi-class (not multi-label), we need a catch-all for paragraphs
            that don&rsquo;t fit the 6 substantive categories. A paragraph
            receives None/Other when it contains no cybersecurity-specific
            disclosure content (e.g., forward-looking statement disclaimers,
            section headers, general business language).
          </p>
        </section>

        <Separator />

        {/* ================================================================
            SECTION 2: CONTENT CATEGORIES
            ================================================================ */}
        <section id="content-categories" className="space-y-8">
          <SectionHeading id="content-categories" level={2}>
            2. Content Categories
          </SectionHeading>
          <p>
            Each paragraph is assigned exactly <strong>one</strong> content
            category. If a paragraph spans multiple categories, assign the{" "}
            <strong>dominant</strong> category — the one that best describes the
            paragraph&rsquo;s primary communicative purpose.
          </p>

          {/* ---------- Board Governance ---------- */}
          <div className="space-y-3">
            <SectionHeading id="board-governance" level={3}>
              Board Governance
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li><strong>SEC basis:</strong> Item 106(c)(1)</li>
              <li>
                <strong>Covers:</strong> Board or committee oversight of
                cybersecurity risks, briefing frequency, board member
                cybersecurity expertise
              </li>
              <li>
                <strong>Key markers:</strong> &ldquo;Audit Committee,&rdquo;
                &ldquo;Board of Directors oversees,&rdquo; &ldquo;quarterly
                briefings,&rdquo; &ldquo;board-level expertise,&rdquo;
                &ldquo;board committee&rdquo;
              </li>
              <li>
                <strong>Assign when:</strong> The grammatical subject performing
                the primary action is the board or a board committee
              </li>
            </ul>

            <ExampleBlock
              text="The Board of Directors oversees the Company's management of cybersecurity risks. The Board has delegated oversight of cybersecurity and data privacy matters to the Audit Committee."
              category="Board Governance"
              specificity={3}
              explanation="Names Audit Committee — firm-specific delegation"
            />
            <ExampleBlock
              text="Our Board of Directors recognizes the critical importance of maintaining the trust and confidence of our customers and stakeholders, and cybersecurity risk is an area of increasing focus for our Board."
              category="Board Governance"
              specificity={1}
              explanation="Could apply to any company — generic statement of intent"
            />
            <ExampleBlock
              text="The Audit Committee, which includes two members with significant technology and cybersecurity expertise, receives quarterly reports from the CISO and conducts an annual deep-dive review of the Company's cybersecurity program, threat landscape, and incident response readiness."
              category="Board Governance"
              specificity={3}
              explanation="Names specific committee, describes specific briefing cadence and scope"
            />
          </div>

          {/* ---------- Management Role ---------- */}
          <div className="space-y-3">
            <SectionHeading id="management-role" level={3}>
              Management Role
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li><strong>SEC basis:</strong> Item 106(c)(2)</li>
              <li>
                <strong>Covers:</strong> The specific <em>person</em> filling a
                cybersecurity leadership position: their name, qualifications,
                career history, credentials, tenure, reporting lines, management
                committees responsible for cybersecurity
              </li>
              <li>
                <strong>Key markers:</strong> &ldquo;Chief Information Security
                Officer,&rdquo; &ldquo;reports to,&rdquo; &ldquo;years of
                experience,&rdquo; &ldquo;management committee,&rdquo;
                &ldquo;CISSP,&rdquo; &ldquo;CISM,&rdquo; named individuals,
                career background
              </li>
              <li>
                <strong>Assign when:</strong> The paragraph tells you something
                about <em>who the person is</em> — their background,
                credentials, experience, or reporting structure. A paragraph that
                names a CISO/CIO/CTO and then describes what the cybersecurity{" "}
                <em>program</em> does is NOT Management Role — it is Risk
                Management Process with an incidental role attribution. The test
                is whether the paragraph is about the <strong>person</strong> or
                about the <strong>function</strong>.
              </li>
            </ul>

            <div className="rounded-md border border-border bg-muted/30 p-4 text-sm">
              <p className="font-semibold">The person-vs-function test:</p>
              <p className="mt-1">
                If you removed the role holder&rsquo;s name, title,
                qualifications, and background from the paragraph and the
                remaining content still describes substantive cybersecurity
                activities, processes, or oversight &rarr; the paragraph is about
                the function (Risk Management Process), not the person
                (Management Role). Management Role requires the person&rsquo;s
                identity or credentials to be the primary content, not just a
                brief attribution of who runs the program.
              </p>
            </div>

            <ExampleBlock
              text="Our Vice President of Information Security, who holds CISSP and CISM certifications and has over 20 years of experience in cybersecurity, reports directly to our Chief Information Officer and is responsible for leading our cybersecurity program."
              category="Management Role"
              specificity={3}
              explanation="The paragraph is about the person: their credentials, experience, and reporting line (named role, certifications, reporting line — all firm-specific)"
            />
            <ExampleBlock
              text="Management is responsible for assessing and managing cybersecurity risks within the organization."
              category="Management Role"
              specificity={1}
              explanation="Generic, no named roles or structure"
            />
            <ExampleBlock
              text="Our CISO, Sarah Chen, leads a dedicated cybersecurity team of 35 professionals and presents monthly threat briefings to the executive leadership team. Ms. Chen joined the Company in 2019 after serving as Deputy CISO at a Fortune 100 financial services firm."
              category="Management Role"
              specificity={4}
              explanation="The paragraph is about the person: their name, team size, background, prior role (named individual, team size, specific frequency, prior employer — multiple verifiable facts)"
            />
            <ExampleBlock
              text="Our CISO oversees the Company's cybersecurity program, which includes risk assessments, vulnerability scanning, penetration testing, and incident response planning aligned with the NIST CSF framework."
              category="Risk Management Process"
              specificity={2}
              explanation="NOT Management Role — The CISO is mentioned once as attribution, but the paragraph is about what the program does. Remove 'Our CISO oversees' and the paragraph still makes complete sense as a process description."
            />
          </div>

          {/* ---------- Risk Management Process ---------- */}
          <div className="space-y-3">
            <SectionHeading id="risk-management-process" level={3}>
              Risk Management Process
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li><strong>SEC basis:</strong> Item 106(b)</li>
              <li>
                <strong>Covers:</strong> Risk assessment methodology, framework
                adoption (NIST, ISO, etc.), vulnerability management, monitoring,
                incident response planning, tabletop exercises, ERM integration
              </li>
              <li>
                <strong>Key markers:</strong> &ldquo;NIST CSF,&rdquo; &ldquo;ISO
                27001,&rdquo; &ldquo;risk assessment,&rdquo; &ldquo;vulnerability
                management,&rdquo; &ldquo;tabletop exercises,&rdquo;
                &ldquo;incident response plan,&rdquo; &ldquo;SOC,&rdquo;
                &ldquo;SIEM&rdquo;
              </li>
              <li>
                <strong>Assign when:</strong> The paragraph primarily describes
                the company&rsquo;s internal cybersecurity processes, tools, or
                methodologies
              </li>
            </ul>

            <ExampleBlock
              text="We maintain a cybersecurity risk management program that is integrated into our overall enterprise risk management framework. Our program is designed to identify, assess, and manage material cybersecurity risks to our business."
              category="Risk Management Process"
              specificity={1}
              explanation="Generic, could apply to any company"
            />
            <ExampleBlock
              text="Our cybersecurity program is aligned with the NIST Cybersecurity Framework and incorporates elements of ISO 27001. We conduct regular risk assessments, vulnerability scanning, and penetration testing as part of our continuous monitoring approach."
              category="Risk Management Process"
              specificity={2}
              explanation="Names frameworks but no firm-specific detail"
            />
            <ExampleBlock
              text="We operate a 24/7 Security Operations Center that uses Splunk SIEM and CrowdStrike Falcon endpoint detection. Our incident response team conducts quarterly tabletop exercises simulating ransomware, supply chain compromise, and insider threat scenarios."
              category="Risk Management Process"
              specificity={4}
              explanation="Named tools, named vendor, specific exercise frequency and scenarios — verifiable"
            />
          </div>

          {/* ---------- Third-Party Risk ---------- */}
          <div className="space-y-3">
            <SectionHeading id="third-party-risk" level={3}>
              Third-Party Risk
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li><strong>SEC basis:</strong> Item 106(b)</li>
              <li>
                <strong>Covers:</strong> Vendor/supplier risk oversight, external
                assessor engagement, contractual security requirements, supply
                chain risk management
              </li>
              <li>
                <strong>Key markers:</strong> &ldquo;third-party,&rdquo;
                &ldquo;service providers,&rdquo; &ldquo;vendor risk,&rdquo;
                &ldquo;external auditors,&rdquo; &ldquo;supply chain,&rdquo;
                &ldquo;SOC 2 report,&rdquo; &ldquo;contractual
                requirements&rdquo;
              </li>
              <li>
                <strong>Assign when:</strong> The central topic is oversight of
                external parties&rsquo; cybersecurity, not the company&rsquo;s
                own internal processes
              </li>
            </ul>

            <ExampleBlock
              text="We face cybersecurity risks associated with our use of third-party service providers who may have access to our systems and data."
              category="Third-Party Risk"
              specificity={1}
              explanation="Generic risk statement"
            />
            <ExampleBlock
              text="Our vendor risk management program requires all third-party service providers with access to sensitive data to meet minimum security standards, including SOC 2 Type II certification or equivalent third-party attestation."
              category="Third-Party Risk"
              specificity={2}
              explanation="Names SOC 2 standard but no firm-specific detail about which vendors or how many"
            />
            <ExampleBlock
              text="We assessed 312 vendors in fiscal 2024 through our Third-Party Risk Management program. All Tier 1 vendors (those with access to customer PII or financial data) are required to provide annual SOC 2 Type II reports. In fiscal 2024, 14 vendors were placed on remediation plans and 3 vendor relationships were terminated for non-compliance."
              category="Third-Party Risk"
              specificity={4}
              explanation="Specific numbers, specific actions, specific criteria — all verifiable"
            />
          </div>

          {/* ---------- Incident Disclosure ---------- */}
          <div className="space-y-3">
            <SectionHeading id="incident-disclosure" level={3}>
              Incident Disclosure
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li>
                <strong>SEC basis:</strong> 8-K Item 1.05 (and 8.01/7.01
                post-May 2024)
              </li>
              <li>
                <strong>Covers:</strong> Description of cybersecurity incidents —
                nature, scope, timing, impact assessment, remediation actions,
                ongoing investigation
              </li>
              <li>
                <strong>Key markers:</strong> &ldquo;unauthorized access,&rdquo;
                &ldquo;detected,&rdquo; &ldquo;incident,&rdquo;
                &ldquo;remediation,&rdquo; &ldquo;impacted,&rdquo;
                &ldquo;forensic investigation,&rdquo; &ldquo;breach,&rdquo;
                &ldquo;compromised&rdquo;
              </li>
              <li>
                <strong>Assign when:</strong> The paragraph primarily describes
                what happened in a cybersecurity incident
              </li>
            </ul>

            <ExampleBlock
              text="We have experienced, and may in the future experience, cybersecurity incidents that could have a material adverse effect on our business, results of operations, and financial condition."
              category="Incident Disclosure"
              specificity={1}
              explanation="Hypothetical — no actual incident described. Note: if this appears in Item 1C rather than an 8-K, consider None/Other instead since it's generic risk language"
            />
            <ExampleBlock
              text="On January 15, 2024, we detected unauthorized access to our customer support portal. The threat actor exploited a known vulnerability in a third-party software component. Upon detection, we activated our incident response plan, contained the intrusion, and engaged Mandiant for forensic investigation."
              category="Incident Disclosure"
              specificity={4}
              explanation="Specific date, specific system, named forensic firm, specific attack vector — all verifiable"
            />
            <ExampleBlock
              text="In December 2023, the Company experienced a cybersecurity incident involving unauthorized access to certain internal systems. The Company promptly took steps to contain and remediate the incident, including engaging third-party cybersecurity experts."
              category="Incident Disclosure"
              specificity={3}
              explanation="Specific month, specific action — but no named firms or quantified impact"
            />
          </div>

          {/* ---------- Strategy Integration ---------- */}
          <div className="space-y-3">
            <SectionHeading id="strategy-integration" level={3}>
              Strategy Integration
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li><strong>SEC basis:</strong> Item 106(b)(2)</li>
              <li>
                <strong>Covers:</strong> Material impact (or lack thereof) on
                business strategy or financials, cybersecurity insurance,
                investment/resource allocation, cost of incidents
              </li>
              <li>
                <strong>Key markers:</strong> &ldquo;business strategy,&rdquo;
                &ldquo;insurance,&rdquo; &ldquo;investment,&rdquo;
                &ldquo;material,&rdquo; &ldquo;financial condition,&rdquo;
                &ldquo;budget,&rdquo; &ldquo;not materially affected,&rdquo;
                &ldquo;results of operations&rdquo;
              </li>
              <li>
                <strong>Assign when:</strong> The paragraph primarily discusses
                business/financial consequences or strategic response to cyber
                risk, not the risk management activities themselves
              </li>
              <li>
                <strong>Includes materiality disclaimers:</strong> Any paragraph
                that explicitly assesses whether cybersecurity risks have or
                could &ldquo;materially affect&rdquo; the company&rsquo;s
                business, strategy, financial condition, or results of operations
                is Strategy Integration — even if the assessment is boilerplate.
                The company is making a strategic judgment about cyber risk
                impact, which is the essence of this category. A cross-reference
                to Risk Factors appended to a materiality assessment does not
                change the classification.
              </li>
            </ul>

            <ExampleBlock
              text="Cybersecurity risks, including those described above, have not materially affected, and are not reasonably likely to materially affect, our business strategy, results of operations, or financial condition."
              category="Strategy Integration"
              specificity={1}
              explanation="Boilerplate materiality statement — nearly identical language appears across thousands of filings, but it IS a materiality assessment"
            />
            <ExampleBlock
              text="We have not identified any cybersecurity incidents or threats that have materially affected us. For more information, see Item 1A, Risk Factors."
              category="Strategy Integration"
              specificity={1}
              explanation="The materiality assessment is the substantive content. The cross-reference is noise and does not pull the paragraph to None/Other."
            />
            <ExampleBlock
              text="We maintain cybersecurity insurance coverage as part of our overall risk management strategy to help mitigate potential financial losses from cybersecurity incidents."
              category="Strategy Integration"
              specificity={2}
              explanation="Mentions insurance but no specifics"
            />
            <ExampleBlock
              text="We increased our cybersecurity budget by 32% to $45M in fiscal 2024, representing 0.8% of revenue. We maintain cyber liability insurance with $100M in aggregate coverage through AIG and Chubb, with a $5M deductible per incident."
              category="Strategy Integration"
              specificity={4}
              explanation="Dollar amounts, percentages, named insurers, specific deductible — all verifiable"
            />
          </div>

          {/* ---------- None/Other ---------- */}
          <div className="space-y-3">
            <SectionHeading id="none-other" level={3}>
              None/Other
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <li>
                <strong>Covers:</strong> Forward-looking statement disclaimers,
                section headers, cross-references to other filing sections,
                general business language that mentions cybersecurity
                incidentally, text erroneously extracted from outside Item
                1C/1.05
              </li>
              <li>
                <strong>No specificity scoring needed:</strong> Always assign
                Specificity 1 for None/Other paragraphs (since there is no
                cybersecurity disclosure to rate)
              </li>
              <li>
                <strong>SPACs and shell companies:</strong> Companies that
                explicitly state they have no operations, no cybersecurity
                program, or no formal processes receive None/Other regardless of
                incidental mentions of board oversight or risk acknowledgment.
                The absence of a program is not a description of a program.
                Paragraphs like &ldquo;We have not adopted any cybersecurity risk
                management program. Our board is generally responsible for
                oversight&rdquo; are None/Other — the board mention is
                perfunctory, not substantive governance disclosure.
              </li>
              <li>
                <strong>Distinguishing from Strategy Integration:</strong> A pure
                cross-reference (&ldquo;See Item 1A, Risk Factors&rdquo;) with
                no materiality assessment is None/Other. But if the paragraph
                includes an explicit materiality conclusion (&ldquo;have not
                materially affected our business strategy&rdquo;), it becomes
                Strategy Integration even if a cross-reference is also present.
                The test: does the paragraph make a substantive claim about
                cybersecurity&rsquo;s impact on the business? If yes &rarr;
                Strategy Integration. If it only points elsewhere &rarr;
                None/Other.
              </li>
            </ul>

            <ExampleBlock
              text="This Annual Report on Form 10-K contains forward-looking statements within the meaning of Section 27A of the Securities Act of 1933, as amended, and Section 21E of the Securities Exchange Act of 1934, as amended."
              category="None/Other"
              specificity={1}
              explanation="Forward-looking statement disclaimer"
            />
            <ExampleBlock
              text="Item 1C. Cybersecurity"
              category="None/Other"
              specificity={1}
              explanation="Section header only"
            />
            <ExampleBlock
              text="For additional information about risks related to our information technology systems, see Part I, Item 1A, 'Risk Factors.'"
              category="None/Other"
              specificity={1}
              explanation="Cross-reference, no disclosure content"
            />
            <ExampleBlock
              text="We are a special purpose acquisition company with no business operations. We have not adopted any cybersecurity risk management program. Our board of directors is generally responsible for oversight of cybersecurity risks, if any."
              category="None/Other"
              specificity={1}
              explanation="No substantive disclosure. The board mention is incidental; the company explicitly has no program to disclose."
            />
            <ExampleBlock
              text="We do not consider that we face significant cybersecurity risk and have not adopted any formal processes for assessing cybersecurity risk."
              category="None/Other"
              specificity={1}
              explanation="Absence of a program is not a program description."
            />
          </div>
        </section>

        <Separator />

        {/* ================================================================
            SECTION 3: CATEGORY DECISION RULES
            ================================================================ */}
        <section id="decision-rules" className="space-y-8">
          <SectionHeading id="decision-rules" level={2}>
            3. Category Decision Rules
          </SectionHeading>

          {/* Rule 1 */}
          <div className="space-y-3">
            <SectionHeading id="rule-1" level={3}>
              Rule 1: Dominant Category
            </SectionHeading>
            <p>
              If a paragraph spans multiple categories, assign the one whose
              topic occupies the most text or is the paragraph&rsquo;s primary
              communicative purpose.
            </p>
          </div>

          {/* Rule 2 */}
          <div className="space-y-3">
            <SectionHeading id="rule-2" level={3}>
              Rule 2: Board vs. Management
            </SectionHeading>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Signal</TableHead>
                  <TableHead>Category</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>Board/committee is the grammatical subject</TableCell>
                  <TableCell>Board Governance</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Board delegates responsibility to management</TableCell>
                  <TableCell>Board Governance</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Management role reports TO the board</TableCell>
                  <TableCell>Management Role</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Management role&rsquo;s qualifications are described</TableCell>
                  <TableCell>Management Role</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>&ldquo;Board oversees... CISO reports to Board quarterly&rdquo;</TableCell>
                  <TableCell>Board Governance (board is primary actor)</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>&ldquo;CISO reports quarterly to the Board on...&rdquo;</TableCell>
                  <TableCell>Management Role (CISO is primary actor)</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          {/* Rule 2b */}
          <div className="space-y-3">
            <SectionHeading id="rule-2b" level={3}>
              Rule 2b: Person-vs-Function Test (Management Role vs. Risk Management Process)
            </SectionHeading>
            <p>
              This is the single most common source of annotator disagreement.
              The line is: <strong>is the paragraph about the person or about the function?</strong>
            </p>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Signal</TableHead>
                  <TableHead>Category</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>The person&rsquo;s background, credentials, tenure, experience, education, career history</TableCell>
                  <TableCell>Management Role</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>The person&rsquo;s name is given</TableCell>
                  <TableCell>Management Role (strong signal)</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Reporting lines as primary content (who reports to whom, management committee structure)</TableCell>
                  <TableCell>Management Role</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Role title mentioned as attribution (&ldquo;Our CISO oversees...&rdquo;) followed by process description</TableCell>
                  <TableCell>Risk Management Process</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Activities, tools, methodologies, frameworks as the primary content</TableCell>
                  <TableCell>Risk Management Process</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>The paragraph would still make sense if you removed the role title and replaced it with &ldquo;the Company&rdquo;</TableCell>
                  <TableCell>Risk Management Process</TableCell>
                </TableRow>
              </TableBody>
            </Table>
            <div className="rounded-md border border-border bg-muted/30 p-4 text-sm">
              <p className="font-semibold">Key principle:</p>
              <p className="mt-1">
                Naming a cybersecurity leadership title (CISO, CIO, CTO, VP of
                Security) does not make a paragraph Management Role. The title is
                often an incidental attribution — the paragraph names who is
                responsible then describes what the program does. If the
                paragraph&rsquo;s substantive content is about processes,
                activities, or tools, it is Risk Management Process regardless of
                how many times a role title appears. Management Role requires the
                paragraph&rsquo;s content to be about the <em>person</em> — who
                they are, what makes them qualified, how long they&rsquo;ve
                served, what their background is.
              </p>
            </div>
          </div>

          {/* Rule 3 */}
          <div className="space-y-3">
            <SectionHeading id="rule-3" level={3}>
              Rule 3: Risk Management vs. Third-Party
            </SectionHeading>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Signal</TableHead>
                  <TableHead>Category</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>Company&rsquo;s own internal processes, tools, teams</TableCell>
                  <TableCell>Risk Management Process</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Third parties mentioned as ONE component of internal program</TableCell>
                  <TableCell>Risk Management Process</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Vendor oversight is the CENTRAL topic</TableCell>
                  <TableCell>Third-Party Risk</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>External assessor hired to test the company</TableCell>
                  <TableCell>Risk Management Process (they serve the company)</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Requirements imposed ON vendors</TableCell>
                  <TableCell>Third-Party Risk</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          {/* Rule 4 */}
          <div className="space-y-3">
            <SectionHeading id="rule-4" level={3}>
              Rule 4: Incident vs. Strategy
            </SectionHeading>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Signal</TableHead>
                  <TableHead>Category</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>Describes what happened (timeline, scope, response)</TableCell>
                  <TableCell>Incident Disclosure</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Describes business impact of an incident (costs, revenue, insurance claim)</TableCell>
                  <TableCell>Strategy Integration</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Mixed: &ldquo;We detected X... at a cost of $Y&rdquo;</TableCell>
                  <TableCell>Assign based on which is dominant — if cost is one sentence in a paragraph about the incident &rarr; Incident Disclosure</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          {/* Rule 5 */}
          <div className="space-y-3">
            <SectionHeading id="rule-5" level={3}>
              Rule 5: None/Other Threshold
            </SectionHeading>
            <p>
              Assign None/Other ONLY when the paragraph contains no substantive
              cybersecurity disclosure content. If a paragraph mentions
              cybersecurity even briefly in service of a disclosure obligation,
              assign the relevant content category.
            </p>
            <div className="rounded-md border border-border bg-muted/30 p-4 text-sm">
              <p className="font-semibold">Exception — SPACs and no-operations companies:</p>
              <p className="mt-1">
                A paragraph that explicitly states the company has no
                cybersecurity program, no operations, or no formal processes is
                None/Other even if it perfunctorily mentions board oversight or
                risk acknowledgment. The absence of a program is not substantive
                disclosure.
              </p>
            </div>
          </div>

          {/* Rule 6 */}
          <div className="space-y-3">
            <SectionHeading id="rule-6" level={3}>
              Rule 6: Materiality Disclaimers &rarr; Strategy Integration
            </SectionHeading>
            <p>
              Any paragraph that explicitly assesses whether cybersecurity risks
              or incidents have &ldquo;materially affected&rdquo; (or are
              &ldquo;reasonably likely to materially affect&rdquo;) the
              company&rsquo;s business strategy, results of operations, or
              financial condition is <strong>Strategy Integration</strong> — even
              when the assessment is boilerplate. The materiality assessment is
              the substantive content. A cross-reference to Risk Factors appended
              to a materiality assessment does not change the classification to
              None/Other. Only a <em>pure</em> cross-reference with no
              materiality conclusion is None/Other.
            </p>
          </div>
        </section>

        <Separator />

        {/* ================================================================
            SECTION 4: SPECIFICITY LEVELS
            ================================================================ */}
        <section id="specificity-levels" className="space-y-8">
          <SectionHeading id="specificity-levels" level={2}>
            4. Specificity Levels
          </SectionHeading>
          <p>
            Each paragraph receives a specificity level (1&ndash;4) indicating
            how company-specific the disclosure is. Apply the decision test in
            order — stop at the first &ldquo;yes.&rdquo;
          </p>

          {/* Decision Test */}
          <div className="space-y-3">
            <SectionHeading id="decision-test" level={3}>
              Decision Test (Waterfall)
            </SectionHeading>
            <ol className="list-decimal list-inside space-y-2 text-sm">
              <li>
                <strong>Count hard verifiable facts ONLY</strong> (specific
                dates, dollar amounts, headcounts/percentages, named third-party
                firms, named products/tools, named certifications). TWO or more?
                &rarr; <strong>Quantified-Verifiable (4)</strong>
              </li>
              <li>
                <strong>Does it contain at least one fact from the IS list
                below?</strong> &rarr; <strong>Firm-Specific (3)</strong>
              </li>
              <li>
                <strong>Does it name a recognized standard</strong> (NIST, ISO
                27001, SOC 2, CIS, GDPR, PCI DSS, HIPAA)? &rarr;{" "}
                <strong>Sector-Adapted (2)</strong>
              </li>
              <li>
                <strong>None of the above?</strong> &rarr;{" "}
                <strong>Generic Boilerplate (1)</strong>
              </li>
            </ol>
            <p className="text-sm text-muted-foreground">
              None/Other paragraphs always receive Specificity 1.
            </p>
          </div>

          {/* Level Definitions */}
          <div className="space-y-3">
            <SectionHeading id="level-definitions" level={3}>
              Level Definitions
            </SectionHeading>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-16">Level</TableHead>
                  <TableHead className="w-48">Name</TableHead>
                  <TableHead>Description</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>1</TableCell>
                  <TableCell>Generic Boilerplate</TableCell>
                  <TableCell>
                    Could paste into any company&rsquo;s filing unchanged. No
                    named entities, frameworks, roles, dates, or specific details.
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>2</TableCell>
                  <TableCell>Sector-Adapted</TableCell>
                  <TableCell>
                    Names a specific recognized standard (NIST, ISO 27001, SOC 2,
                    etc.) but contains nothing unique to THIS company. General
                    practices (pen testing, vulnerability scanning, tabletop
                    exercises) do NOT qualify — only named standards.
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>3</TableCell>
                  <TableCell>Firm-Specific</TableCell>
                  <TableCell>
                    Contains at least one fact from the IS list that identifies
                    something unique to THIS company&rsquo;s disclosure.
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>4</TableCell>
                  <TableCell>Quantified-Verifiable</TableCell>
                  <TableCell>
                    Contains TWO or more hard verifiable facts (see QV-eligible
                    list). One fact = Firm-Specific, not QV.
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          {/* IS list */}
          <div className="space-y-3">
            <SectionHeading id="is-list" level={3}>
              IS a Specific Fact (any ONE &rarr; at least Firm-Specific)
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <ISItem><strong>Cybersecurity-specific titles:</strong> CISO, CTO, CIO, VP of IT/Security, Information Security Officer, Director of IT Security, HSE Director overseeing cybersecurity, Chief Digital Officer (when overseeing cyber), Cybersecurity Director</ISItem>
              <ISItem><strong>Named non-generic committees:</strong> Technology Committee, Cybersecurity Committee, Risk Committee, ERM Committee (NOT &ldquo;Audit Committee&rdquo; — that exists at every public company)</ISItem>
              <ISItem><strong>Specific team/department compositions:</strong> &ldquo;Legal, Compliance, and Finance&rdquo; (but NOT just &ldquo;a cross-functional team&rdquo;)</ISItem>
              <ISItem><strong>Specific dates:</strong> &ldquo;In December 2023&rdquo;, &ldquo;On May 6, 2024&rdquo;, &ldquo;fiscal 2025&rdquo;</ISItem>
              <ISItem><strong>Named internal programs with unique identifiers:</strong> &ldquo;Cyber Incident Response Plan (CIRP)&rdquo; (must have a distinguishing name/abbreviation — generic &ldquo;incident response plan&rdquo; does not qualify)</ISItem>
              <ISItem><strong>Named products, systems, tools:</strong> Splunk, CrowdStrike Falcon, Azure Sentinel, ServiceNow</ISItem>
              <ISItem><strong>Named third-party firms:</strong> Mandiant, Deloitte, CrowdStrike, PwC</ISItem>
              <ISItem><strong>Specific numbers:</strong> headcounts, dollar amounts, percentages, exact durations (&ldquo;17 years&rdquo;, &ldquo;12 professionals&rdquo;)</ISItem>
              <ISItem><strong>Certification claims:</strong> &ldquo;We maintain ISO 27001 certification&rdquo; (holding a certification is more than naming a standard)</ISItem>
              <ISItem><strong>Named universities in credential context:</strong> &ldquo;Ph.D. from Princeton University&rdquo; (independently verifiable)</ISItem>
            </ul>
          </div>

          {/* IS NOT list */}
          <div className="space-y-3">
            <SectionHeading id="is-not-list" level={3}>
              IS NOT a Specific Fact (do NOT use to justify Firm-Specific)
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm">
              <NOTItem><strong>Generic governance:</strong> &ldquo;the Board&rdquo;, &ldquo;Board of Directors&rdquo;, &ldquo;management&rdquo;, &ldquo;Audit Committee&rdquo;, &ldquo;the Committee&rdquo;</NOTItem>
              <NOTItem><strong>Generic C-suite:</strong> CEO, CFO, COO, President, General Counsel — these exist at every company and are not cybersecurity-specific</NOTItem>
              <NOTItem><strong>Generic IT leadership (NOT cybersecurity-specific):</strong> &ldquo;Head of IT&rdquo;, &ldquo;IT Manager&rdquo;, &ldquo;Director of IT&rdquo;, &ldquo;Chief Compliance Officer&rdquo;, &ldquo;Associate Vice President of IT&rdquo; — these are general corporate/IT titles, not cybersecurity roles per the IS list</NOTItem>
              <NOTItem><strong>Unnamed entities:</strong> &ldquo;third-party experts&rdquo;, &ldquo;external consultants&rdquo;, &ldquo;cybersecurity firms&rdquo;, &ldquo;managed service provider&rdquo;</NOTItem>
              <NOTItem><strong>Generic cadences:</strong> &ldquo;quarterly&rdquo;, &ldquo;annual&rdquo;, &ldquo;periodic&rdquo;, &ldquo;regular&rdquo; — without exact dates</NOTItem>
              <NOTItem><strong>Boilerplate phrases:</strong> &ldquo;cybersecurity risks&rdquo;, &ldquo;material adverse effect&rdquo;, &ldquo;business operations&rdquo;, &ldquo;financial condition&rdquo;</NOTItem>
              <NOTItem><strong>Standard incident language:</strong> &ldquo;forensic investigation&rdquo;, &ldquo;law enforcement&rdquo;, &ldquo;regulatory obligations&rdquo;, &ldquo;incident response protocols&rdquo;</NOTItem>
              <NOTItem><strong>Vague quantifiers:</strong> &ldquo;certain systems&rdquo;, &ldquo;some employees&rdquo;, &ldquo;a number of&rdquo;, &ldquo;a portion of&rdquo;</NOTItem>
              <NOTItem><strong>Common practices:</strong> &ldquo;penetration testing&rdquo;, &ldquo;vulnerability scanning&rdquo;, &ldquo;tabletop exercises&rdquo;, &ldquo;phishing simulations&rdquo;, &ldquo;security awareness training&rdquo;</NOTItem>
              <NOTItem><strong>Generic program names:</strong> &ldquo;incident response plan&rdquo;, &ldquo;business continuity plan&rdquo;, &ldquo;cybersecurity program&rdquo;, &ldquo;Third-Party Risk Management Program&rdquo;, &ldquo;Company-wide training&rdquo; — no unique identifier or distinguishing abbreviation</NOTItem>
              <NOTItem><strong>Company self-references:</strong> the company&rsquo;s own name, &ldquo;the Company&rdquo;, &ldquo;the Bank&rdquo;, subsidiary names, filing form types</NOTItem>
              <NOTItem><strong>Company milestones:</strong> &ldquo;since our IPO&rdquo;, &ldquo;since inception&rdquo; — not cybersecurity facts</NOTItem>
            </ul>
          </div>

          {/* QV-Eligible Facts */}
          <div className="space-y-3">
            <SectionHeading id="qv-eligible" level={3}>
              QV-Eligible Facts (count toward the 2-fact threshold for Quantified-Verifiable)
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm text-green-700 dark:text-green-400">
              <li>Specific dates (month+year or exact date)</li>
              <li>Dollar amounts, headcounts, percentages</li>
              <li>Named third-party firms (Mandiant, CrowdStrike, Deloitte)</li>
              <li>Named products/tools (Splunk, Azure Sentinel)</li>
              <li>Named certifications held by individuals (CISSP, CISM, CEH)</li>
              <li>Years of experience as a specific number (&ldquo;17 years&rdquo;, &ldquo;over 20 years&rdquo;)</li>
              <li>Named universities in credential context</li>
            </ul>
          </div>

          {/* Do NOT count toward QV */}
          <div className="space-y-3">
            <SectionHeading id="not-qv" level={3}>
              Do NOT Count Toward QV (these trigger Firm-Specific but not QV)
            </SectionHeading>
            <ul className="list-disc list-inside space-y-1 text-sm text-red-700 dark:text-red-400">
              <li>Named roles (CISO, CIO)</li>
              <li>Named committees</li>
              <li>Named frameworks (NIST, ISO 27001) — these trigger Sector-Adapted</li>
              <li>Team compositions, reporting structures</li>
              <li>Named internal programs</li>
              <li>Generic degrees without named university (&ldquo;BS in Management&rdquo;)</li>
            </ul>
          </div>

          {/* Validation Step */}
          <div className="space-y-3">
            <SectionHeading id="validation-step" level={3}>
              Validation Step
            </SectionHeading>
            <p>
              Before finalizing specificity, review the extracted facts. Remove
              any that appear on the NOT list. If no facts remain after filtering
              &rarr; Generic Boilerplate (or Sector-Adapted if a named standard
              is present). Do not let NOT-list items inflate the specificity
              rating.
            </p>
          </div>
        </section>

        <Separator />

        {/* ================================================================
            SECTION 5: BORDERLINE CASES
            ================================================================ */}
        <section id="borderline-cases" className="space-y-8">
          <SectionHeading id="borderline-cases" level={2}>
            5. Borderline Cases
          </SectionHeading>

          {/* Case 1 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 1: Framework mention + firm-specific fact</h4>
            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;We follow NIST CSF and our CISO oversees the program.&rdquo;</p>
            </div>
            <p className="text-sm">
              The NIST mention &rarr; Level 2 anchor. The CISO reference &rarr;
              firm-specific. <strong>Apply boundary rule 2&rarr;3:</strong>{" "}
              &ldquo;Does it mention anything unique to THIS company?&rdquo; Yes
              (CISO role exists at this company) &rarr;{" "}
              <strong>Level 3.</strong>
            </p>
          </div>

          {/* Case 2 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 2: Named role but generic description</h4>
            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;Our Chief Information Security Officer is responsible for managing cybersecurity risks.&rdquo;</p>
            </div>
            <p className="text-sm">
              Names a role (CISO) &rarr; potentially Level 3. But the description
              is completely generic. <strong>Apply judgment:</strong> the mere
              existence of a CISO title is firm-specific (not all companies have
              one). &rarr; <strong>Level 3.</strong> If the paragraph said
              &ldquo;a senior executive is responsible&rdquo; without naming the
              role &rarr; Level 1.
            </p>
          </div>

          {/* Case 3 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 3: Specificity-rich None/Other</h4>
            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;On March 15, 2025, we filed a Current Report on Form 8-K disclosing a cybersecurity incident. For details, see our Form 8-K filed March 15, 2025, accession number 0001193125-25-012345.&rdquo;</p>
            </div>
            <p className="text-sm">
              Contains specific dates and filing numbers, but the paragraph
              itself contains no disclosure content — it&rsquo;s a
              cross-reference. &rarr; <strong>None/Other, Specificity 1.</strong>{" "}
              Specificity only applies to disclosure substance, not to metadata.
            </p>
          </div>

          {/* Case 4 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 4: Hypothetical incident language in 10-K</h4>
            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;We may experience cybersecurity incidents that could disrupt our operations.&rdquo;</p>
            </div>
            <p className="text-sm">
              This appears in Item 1C, not an 8-K. It describes no actual
              incident. &rarr;{" "}
              <strong>
                Risk Management Process or Strategy Integration (depending on
                context), NOT Incident Disclosure.
              </strong>{" "}
              Incident Disclosure is reserved for descriptions of events that
              actually occurred.
            </p>
          </div>

          {/* Case 5 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 5: Dual-category paragraph</h4>
            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;The Audit Committee oversees our cybersecurity program, which is led by our CISO who holds CISSP certification and reports quarterly to the Committee.&rdquo;</p>
            </div>
            <p className="text-sm">
              Board (Audit Committee oversees) + Management (CISO qualifications,
              reporting). The opening clause sets the frame: this is about the
              Audit Committee&rsquo;s oversight, and the CISO detail is
              subordinate. &rarr; <strong>Board Governance, Specificity 3.</strong>
            </p>
          </div>

          {/* Case 6 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 6: Management Role vs. Risk Management Process — the person-vs-function test</h4>

            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;Our CISO oversees the Company&rsquo;s cybersecurity program, which includes risk assessments, vulnerability scanning, and incident response planning. The program is aligned with the NIST CSF framework and integrated into our enterprise risk management process.&rdquo;</p>
            </div>
            <p className="text-sm">
              The CISO is named as attribution, but the paragraph is about what
              the program does — assessments, scanning, response planning,
              framework alignment, ERM integration. Remove &ldquo;Our CISO
              oversees&rdquo; and it still makes complete sense as a process
              description. &rarr;{" "}
              <strong>Risk Management Process, Specificity 2</strong> (NIST CSF
              framework, no firm-specific facts beyond that).
            </p>

            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;Our CISO has over 20 years of experience in cybersecurity and holds CISSP and CISM certifications. She reports directly to the CIO and oversees a team of 12 security professionals. Prior to joining the Company in 2019, she served as VP of Security at a Fortune 500 technology firm.&rdquo;</p>
            </div>
            <p className="text-sm">
              The entire paragraph is about the person: experience,
              certifications, reporting line, team size, tenure, prior role.
              &rarr; <strong>Management Role, Specificity 4</strong> (years of
              experience + team headcount + named certifications = multiple
              QV-eligible facts).
            </p>
          </div>

          {/* Case 7 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 7: Materiality disclaimer — Strategy Integration vs. None/Other</h4>

            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;We have not identified any cybersecurity incidents or threats that have materially affected our business strategy, results of operations, or financial condition. However, like other companies, we have experienced threats from time to time. For more information, see Item 1A, Risk Factors.&rdquo;</p>
            </div>
            <p className="text-sm">
              Contains an explicit materiality assessment (&ldquo;materially
              affected... business strategy, results of operations, or financial
              condition&rdquo;). The cross-reference and generic threat mention
              are noise. &rarr;{" "}
              <strong>Strategy Integration, Specificity 1.</strong>
            </p>

            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;For additional information about risks related to our information technology systems, see Part I, Item 1A, &lsquo;Risk Factors.&rsquo;&rdquo;</p>
            </div>
            <p className="text-sm">
              No materiality assessment. Pure cross-reference. &rarr;{" "}
              <strong>None/Other, Specificity 1.</strong>
            </p>
          </div>

          {/* Case 8 */}
          <div className="space-y-2">
            <h4 className="font-semibold text-foreground">Case 8: SPAC / no-operations company</h4>
            <div className="rounded-md border border-border bg-muted/50 p-4">
              <p className="font-serif text-sm italic">&ldquo;We are a special purpose acquisition company with no business operations. We have not adopted any cybersecurity risk management program or formal processes. Our Board of Directors is generally responsible for oversight of cybersecurity risks, if any. We have not encountered any cybersecurity incidents since our IPO.&rdquo;</p>
            </div>
            <p className="text-sm">
              Despite touching RMP (no program), Board Governance (board is
              responsible), and Strategy Integration (no incidents), the paragraph
              contains no substantive disclosure. The company explicitly has no
              program, and the board mention is perfunctory (&ldquo;generally
              responsible... if any&rdquo;). The absence of a program is not a
              program description. &rarr;{" "}
              <strong>None/Other, Specificity 1.</strong>
            </p>
          </div>
        </section>

        {/* Bottom spacer */}
        <div className="h-16" />
      </main>
    </div>
  );
}
