const { useState } = React;

const DEFAULT_MEMBER_NAME = "Robert L. Wesley, Esq.";
const DEFAULT_SEAL_VARIANT = "circular";

const HrOrnament = () => (
  <div className="hr-ornament" aria-hidden="true">
    <svg viewBox="0 0 18 18">
      <rect x="6" y="6" width="6" height="6" transform="rotate(45 9 9)"
            fill="none" stroke="currentColor" strokeWidth="1" />
      <circle cx="9" cy="9" r="1.4" fill="currentColor" />
    </svg>
  </div>
);

const SectionLabel = ({ roman, label }) => (
  <div className="section-label">
    <span className="roman">{roman}.</span>
    <span className="lbl">{label}</span>
  </div>
);

function Masthead() {
  return (
    <header className="masthead">
      <div className="container masthead-inner">
        <div className="mast-brand">
          <div className="mark"><Seal variant={DEFAULT_SEAL_VARIANT} size={32} /></div>
          <div className="wordmark">
            NADBA
            <small>Nat'l Assoc. of Not Database Administrators</small>
          </div>
        </div>
        <nav className="mast-nav">
          <a href="#premise">The Premise</a>
          <a href="#certify">Certification</a>
          <a href="#why">Why This Exists</a>
          <a href="#merch">Merch</a>
          <a href="#workshop">Workshops</a>
          <span className="member-btn" aria-disabled="true">Portal Forthcoming</span>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-main">
            <div className="hero-meta">
              <span className="eyebrow">
                File №&nbsp;NADBA-001<span className="dot" />
                Office of the Registrar
              </span>
            </div>
            <h1>
              National Association of <span className="em">Not</span> Database Administrators
            </h1>
            <p className="subhead">
              For the people doing database-adjacent labor without the title,
              budget, ceremony, or emotional support.
            </p>
            <p className="support">
              Unbelievably official for something this unserious.
              Unfortunately, also extremely real.
            </p>
            <div className="cta-row">
              <a href="#certify" className="btn btn-primary">
                Get Certified as Not A DBA <span className="arrow">→</span>
              </a>
              <a href="#qualify" className="btn btn-secondary">
                See If You Qualify
              </a>
            </div>
          </div>

          <aside className="hero-aside">
            <RegistryCard />
          </aside>
        </div>
      </div>
    </section>
  );
}

function RegistryCard() {
  return (
    <div className="registry">
      <div className="registry-head">
        <span className="title">Certificate of Authority</span>
        <span className="stamp">Provisional</span>
      </div>

      <div style={{ display: "flex", justifyContent: "center", padding: "10px 0 22px" }}>
        <Seal variant={DEFAULT_SEAL_VARIANT} size={150} />
      </div>

      <div className="registry-row">
        <span className="k">Chartered</span>
        <span className="v"><span className="num">MMXXVI</span></span>
      </div>
      <div className="registry-row">
        <span className="k">Members in Good Standing</span>
        <span className="v">provisional roll</span>
      </div>
      <div className="registry-row">
        <span className="k">States Recognizing Charter</span>
        <span className="v"><span className="num">0 of 50</span></span>
      </div>
      <div className="registry-row">
        <span className="k">Bylaws on File</span>
        <span className="v">forthcoming</span>
      </div>
    </div>
  );
}

function Ticker() {
  const cells = [
    { v: "Many", k: "Certified Not-DBAs" },
    { v: "Late", k: "Avg. Incident Hour" },
    { v: "Usually", k: "Did Not Sign Up For This" },
    { v: "$0", k: "Pay Grades Adjusted" },
  ];

  return (
    <div className="ticker">
      <div className="container">
        <div className="ticker-grid">
          {cells.map((c, i) => (
            <div className="ticker-cell" key={i}>
              <div className="v">{c.v}</div>
              <div className="k">{c.k}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Premise() {
  const decls = [
    {
      num: "i.",
      h: "You did not ask to manage schemas.",
      p: "And yet — here is a migration with your name on it, twelve unresolved comments, and a slow erosion of your weekend.",
    },
    {
      num: "ii.",
      h: "You did not volunteer to debug permissions at 2 a.m.",
      p: "But the rotation page has fallen on the person nearest the database, and that person, statistically speaking, keeps being you.",
    },
    {
      num: "iii.",
      h: "You are somehow in the blast radius anyway.",
      p: "The incident retro will say \"the team\" — which is generous. The runbook will say your name — which is accurate.",
    },
    {
      num: "iv.",
      h: "NADBA sees you.",
      p: "We cannot raise your salary. We cannot reclassify your role. We can, however, issue you a certificate suitable for framing.",
    },
  ];

  return (
    <section className="spread" id="premise">
      <div className="container">
        <SectionLabel roman="I" label="The Premise" />
        <h2 className="spread-title">
          A short list of things our members <span className="em">did not consent to.</span>
        </h2>
        <p className="spread-deck">
          NADBA membership begins, in nearly every case, with a Slack message that
          starts: <span style={{ color: "var(--ink)" }}>"quick question — who owns this table?"</span>
        </p>

        <div className="declarations">
          {decls.map((d) => (
            <article className="decl" key={d.num}>
              <div className="decl-num">{d.num}</div>
              <div className="decl-body">
                <h3>{d.h}</h3>
                <p>{d.p}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertificateSpread() {
  const [name, setName] = useState(DEFAULT_MEMBER_NAME);
  const [issued, setIssued] = useState(false);

  function issueCertificate() {
    setIssued(true);
  }

  return (
    <section className="spread cert-spread" id="certify">
      <div className="container">
        <SectionLabel roman="II" label="Membership & Certification" />
        <h2 className="spread-title">
          The artifact. <span className="em">Suitable for framing.</span>
        </h2>
        <p className="spread-deck">
          Each certified member receives a formal document recognizing their
          substantial database-adjacent labor, performed outside of formal
          classification.
        </p>

        <div className="cert-grid">
          <div className="cert-wrap">
            <Certificate name={name || "—"} />
          </div>

          <div className="enroll" id="qualify">
            <h3>Enroll Today</h3>
            <p className="lead">Dues: $0 forever. Recognition: priceless, allegedly.</p>

            <div className="enroll-fields">
              <div className="field">
                <label>Full Name (as it appears on incident reports)</label>
                <input value={name} onChange={(e) => setName(e.target.value)}
                       placeholder="e.g. Robert L. Wesley, Esq." />
              </div>
              <div className="field">
                <label>Actual Job Title</label>
                <input placeholder="e.g. Senior Backend Engineer" />
              </div>
              <div className="field">
                <label>Database System Most Often Blamed</label>
                <select defaultValue="postgres">
                  <option value="postgres">PostgreSQL</option>
                  <option value="mysql">MySQL / MariaDB</option>
                  <option value="mssql">SQL Server</option>
                  <option value="oracle">Oracle (condolences)</option>
                  <option value="mongo">MongoDB</option>
                  <option value="redshift">Redshift / Snowflake / BigQuery</option>
                  <option value="dynamo">DynamoDB</option>
                  <option value="sqlite">SQLite (in production, somehow)</option>
                  <option value="other">Other / Several / I Refuse To Say</option>
                </select>
              </div>
            </div>

            <label className="checkbox">
              <input type="checkbox" defaultChecked />
              <span>
                I affirm that I am <em>not</em> the DBA, but the present situation
                strongly suggests otherwise. I agree to the provisional NADBA
                code of conduct, whether or not it has completed drafting.
              </span>
            </label>

            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={issueCertificate}>
              Issue My Certificate <span className="arrow">→</span>
            </button>

            <div className="fineprint">
              This form updates the on-page certificate for v1. Public member portals,
              directories, and ceremonial archives remain forthcoming by decree.
            </div>

            {issued && (
              <div className="issue-status" role="status">
                Certificate issued provisionally. Framing, printing, and office politics remain your responsibility.
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Certificate({ name }) {
  return (
    <div className="cert">
      <div className="cert-inner">
        <div className="cert-corners" aria-hidden="true"><i /><i /><i /><i /></div>

        <div className="cert-tag">— Certificate № NADBA-001 —</div>
        <div className="cert-association">
          National Association of Not Database Administrators
        </div>

        <div className="cert-title">
          Certified <span className="em">Not</span> A DBA
        </div>
        <div className="cert-sub">— hereby and forthwith —</div>

        <div className="cert-presented">This is to recognize</div>
        <div className="cert-name">{name}</div>

        <div className="cert-text">
          for substantial database-adjacent heroics performed without the
          title, budget, ceremony, headcount, on-call differential, or
          emotional support customarily afforded the same. Member is hereby
          excused from no responsibilities whatsoever.
        </div>

        <div className="cert-footer">
          <div className="cert-sig">
            <span className="name">R. Bob</span>
            Registrar, NADBA
          </div>
          <div className="cert-seal-slot">
            <Seal variant={DEFAULT_SEAL_VARIANT} size={68} color="var(--gold-deep)" accent="var(--accent)" />
          </div>
          <div className="cert-sig">
            <span className="name">{new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</span>
            Date of Conferral
          </div>
        </div>
      </div>
    </div>
  );
}

function Why() {
  return (
    <section className="spread why-spread" id="why">
      <div className="container">
        <SectionLabel roman="III" label="The Real Signal" />
        <div className="why-grid">
          <div>
            <h2 className="spread-title">
              Why this <span className="em">exists.</span>
            </h2>

            <div className="why-body">
              <p>
                Database administration, as a formal discipline, has been
                quietly dissolving into the rest of the organization for two
                decades. The role did not disappear. The responsibility did
                not disappear. What disappeared was the title, the budget,
                and the org chart line.
              </p>
              <p>
                What remains is a category of person — present in nearly every
                engineering team, analytics group, and ops rotation — who
                inherits database risk without being given database
                authority. They write the migration. They get the page.
                They take the blame. They do not get the headcount, the tooling
                budget, or the sleep.
              </p>
              <p>
                NADBA gives that category a name. The joke is the package;
                the observation is the freight. Once the role is named, it
                can be staffed, paid, trained, and — when leadership is ready —
                taken seriously.
              </p>
            </div>
          </div>

          <aside>
            <blockquote className="pullquote">
              "Database administration often exists as an accidental burden
              scattered across people whose titles do not match the risk
              they carry."
            </blockquote>
            <div className="pullquote-attr">— NADBA Foundational Memo, Art. I</div>

            <div className="why-stats">
              <div className="why-stat">
                <div className="v">Often</div>
                <div className="k">engineers become the de facto DBA<br/>without formal recognition</div>
              </div>
              <div className="why-stat">
                <div className="v">After hours</div>
                <div className="k">is when this labor most often becomes<br/>fully visible to leadership</div>
              </div>
              <div className="why-stat">
                <div className="v">$0</div>
                <div className="k">remains an uncomfortably common comp adjustment<br/>for assuming the role</div>
              </div>
              <div className="why-stat">
                <div className="v">Several</div>
                <div className="k">unread alerts may currently exist in<br/>a channel near you</div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function MerchPlaceholder({ shape }) {
  const ink = "var(--ink-soft)";
  const stroke = { fill: "none", stroke: ink, strokeWidth: 1.5 };
  if (shape === "certificate") {
    return (
      <svg width="92" height="68" viewBox="0 0 92 68">
        <rect x="6" y="4" width="80" height="60" {...stroke} />
        <rect x="10" y="8" width="72" height="52" {...stroke} strokeWidth="0.8" />
        <line x1="20" y1="22" x2="72" y2="22" stroke={ink} strokeWidth="1" />
        <line x1="28" y1="32" x2="64" y2="32" stroke={ink} strokeWidth="0.8" opacity="0.6" />
        <line x1="32" y1="38" x2="60" y2="38" stroke={ink} strokeWidth="0.8" opacity="0.6" />
        <circle cx="46" cy="50" r="6" {...stroke} />
        <circle cx="46" cy="50" r="2.5" fill={ink} />
      </svg>
    );
  }
  if (shape === "card") {
    return (
      <svg width="100" height="64" viewBox="0 0 100 64">
        <rect x="2" y="6" width="96" height="52" rx="4" {...stroke} />
        <rect x="8" y="14" width="22" height="22" rx="2" fill={ink} opacity="0.85" />
        <line x1="36" y1="18" x2="86" y2="18" stroke={ink} strokeWidth="1" />
        <line x1="36" y1="26" x2="76" y2="26" stroke={ink} strokeWidth="0.7" opacity="0.6" />
        <line x1="8" y1="46" x2="92" y2="46" stroke={ink} strokeWidth="0.5" opacity="0.5" strokeDasharray="2 2" />
        <line x1="8" y1="52" x2="44" y2="52" stroke={ink} strokeWidth="0.7" opacity="0.7" />
      </svg>
    );
  }
  if (shape === "lanyard") {
    return (
      <svg width="74" height="100" viewBox="0 0 74 100">
        <path d="M20 4 L37 26 L54 4" {...stroke} />
        <circle cx="37" cy="28" r="2.5" {...stroke} />
        <rect x="12" y="34" width="50" height="60" rx="3" {...stroke} />
        <line x1="20" y1="50" x2="54" y2="50" stroke={ink} strokeWidth="1" />
        <line x1="24" y1="58" x2="50" y2="58" stroke={ink} strokeWidth="0.7" opacity="0.6" />
        <rect x="22" y="68" width="30" height="14" {...stroke} strokeWidth="1" />
        <text x="37" y="79" fontFamily="IBM Plex Mono, monospace" fontSize="6"
              letterSpacing="1" textAnchor="middle" fill={ink}>NOT DBA</text>
      </svg>
    );
  }
  if (shape === "pin") {
    return (
      <svg width="86" height="86" viewBox="0 0 86 86">
        <circle cx="43" cy="43" r="34" {...stroke} />
        <circle cx="43" cy="43" r="28" {...stroke} strokeWidth="0.8" />
        <circle cx="43" cy="43" r="18" fill={ink} opacity="0.9" />
        <text x="43" y="47" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="14" textAnchor="middle" fill="var(--bg)">N</text>
        <rect x="40" y="8" width="6" height="6" transform="rotate(45 43 11)" fill={ink} />
      </svg>
    );
  }
  if (shape === "mug") {
    return (
      <svg width="100" height="80" viewBox="0 0 100 80">
        <rect x="14" y="14" width="56" height="58" rx="3" {...stroke} />
        <path d="M70 26 Q88 26 88 44 Q88 60 70 60" {...stroke} />
        <line x1="22" y1="32" x2="62" y2="32" stroke={ink} strokeWidth="1" />
        <line x1="26" y1="40" x2="58" y2="40" stroke={ink} strokeWidth="0.7" opacity="0.6" />
        <rect x="28" y="48" width="28" height="10" {...stroke} strokeWidth="1" />
        <text x="42" y="56" fontFamily="IBM Plex Mono, monospace" fontSize="6"
              letterSpacing="1.4" textAnchor="middle" fill={ink}>NADBA</text>
      </svg>
    );
  }
  if (shape === "tee") {
    return (
      <svg width="100" height="86" viewBox="0 0 100 86">
        <path d="M20 14 L36 6 Q50 14 64 6 L80 14 L92 26 L80 34 L80 80 L20 80 L20 34 L8 26 Z"
              {...stroke} />
        <circle cx="50" cy="34" r="2" fill={ink} />
        <line x1="40" y1="46" x2="60" y2="46" stroke={ink} strokeWidth="1.2" />
        <text x="50" y="60" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="9" textAnchor="middle" fill={ink}>NOT THE</text>
        <text x="50" y="72" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="11" textAnchor="middle" fill={ink}>DBA</text>
      </svg>
    );
  }
  if (shape === "sticker") {
    return (
      <svg width="86" height="86" viewBox="0 0 86 86">
        <rect x="10" y="10" width="66" height="66" rx="4" {...stroke} strokeDasharray="3 3" />
        <rect x="16" y="16" width="54" height="54" rx="2" {...stroke} />
        <text x="43" y="38" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="11" textAnchor="middle" fill={ink}>NOT</text>
        <text x="43" y="52" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="11" textAnchor="middle" fill={ink}>YOUR</text>
        <text x="43" y="66" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="11" textAnchor="middle" fill={ink}>DBA</text>
      </svg>
    );
  }
  if (shape === "tote") {
    return (
      <svg width="86" height="96" viewBox="0 0 86 96">
        <path d="M22 14 Q22 4 32 4 Q32 14 32 14" {...stroke} />
        <path d="M54 14 Q54 4 64 4 Q64 14 64 14" {...stroke} />
        <path d="M14 14 L72 14 L78 90 L8 90 Z" {...stroke} />
        <text x="43" y="50" fontFamily="Libre Caslon Text, Georgia, serif" fontWeight="700"
              fontSize="12" textAnchor="middle" fill={ink}>NADBA</text>
        <line x1="22" y1="58" x2="64" y2="58" stroke={ink} strokeWidth="0.8" opacity="0.6" />
        <text x="43" y="74" fontFamily="IBM Plex Mono, monospace" fontSize="6"
              letterSpacing="2" textAnchor="middle" fill={ink}>EST · MMXXVI</text>
      </svg>
    );
  }
  return null;
}

function Merch() {
  const items = [
    { sku: "NADBA-CERT-01", shape: "certificate", title: "Certificate of Conferral", desc: "Suitable for framing, mocking, or attaching to a salary review.", price: "Free" },
    { sku: "NADBA-CARD-02", shape: "card",        title: "Member Card (Laminated)",   desc: "Wallet-sized. Presentable during access-request escalations.", price: "$12" },
    { sku: "NADBA-LANY-03", shape: "lanyard",     title: '"Not The DBA" Lanyard',     desc: "Emergency credential for outages where a name tag would help nothing.", price: "$18" },
    { sku: "NADBA-PIN-04",  shape: "pin",         title: "Enamel Lapel Pin",          desc: "Heavy. Cloisonné. Worn at the office. Removed at airports.", price: "$15" },
    { sku: "NADBA-MUG-05",  shape: "mug",         title: "Bylaws Mug",                desc: "12 oz. Holds coffee, tea, and quiet professional grievance.", price: "$22" },
    { sku: "NADBA-TEE-06",  shape: "tee",         title: '"Not The DBA" Tee',         desc: "Cotton. Embroidered chest mark. Says it without saying it.", price: "$32" },
    { sku: "NADBA-STKR-07", shape: "sticker",     title: "Vinyl Sticker Set (×6)",    desc: "For laptops, water bottles, and notebooks that have seen things.", price: "$8" },
    { sku: "NADBA-TOTE-08", shape: "tote",        title: "Heritage Tote",             desc: "Heavy canvas. Carries documents, dignity, conference swag.", price: "$28" },
  ];
  return (
    <section className="spread" id="merch">
      <div className="container">
        <SectionLabel roman="IV" label="Officially Sanctioned Goods" />
        <h2 className="spread-title">
          The institutional <span className="em">gift shop.</span>
        </h2>
        <p className="spread-deck">
          Every association needs a gift shop. Ours is small, well-considered,
          and entirely supported by people who keep getting paged about Postgres.
        </p>

        <div className="merch-grid">
          {items.map((it) => (
            <article className="merch-card" key={it.sku}>
              <div className="merch-thumb">
                <MerchPlaceholder shape={it.shape} />
                <span className="ph-label">{it.shape}</span>
              </div>
              <div className="merch-body">
                <div className="sku">{it.sku}</div>
                <h4>{it.title}</h4>
                <p className="desc">{it.desc}</p>
                <div className="footer">
                  <span className="price">
                    {it.price === "Free" ? <span className="free">Free w/ membership</span> : it.price}
                  </span>
                  <span className="add placeholder-link">Catalog Forthcoming</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Workshop() {
  return (
    <section className="workshop" id="workshop">
      <div className="container">
        <div className="workshop-grid">
          <div>
            <SectionLabel roman="V" label="Advisory & Workshops" />
            <h2>
              For teams whose accidental DBAs <span className="em">deserve better.</span>
            </h2>
            <p className="lead">
              NADBA runs a small number of private workshops each quarter — sessions
              for engineering orgs that have quietly turned their best people into
              part-time database administrators and would like to do something
              about it.
            </p>
            <div className="cta-row">
              <a href="mailto:bob@bobeckert.com?subject=NADBA%20Workshop%20Inquiry" className="btn btn-primary">
                Ask About a Workshop <span className="arrow">→</span>
              </a>
              <a href="#why" className="btn btn-secondary">Read the Memo</a>
            </div>
          </div>

          <div className="workshop-card">
            <div className="tag">Curriculum / Excerpts</div>
            <h3>The Accidental DBA Audit</h3>
            <ul>
              <li>Mapping the database labor your org chart denies.</li>
              <li>Reading on-call rotations as job descriptions.</li>
              <li>Compensation, scope, and the politics of naming the role.</li>
              <li>Pragmatic schema and migration governance for non-DBAs.</li>
              <li>When to hire a real one (and when, frankly, not to).</li>
            </ul>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em",
                          textTransform: "uppercase", color: "var(--ink-mute)",
                          paddingTop: 12, borderTop: "1px dotted var(--rule)" }}>
              Half-day · On-site or remote · Capped at 12 attendees
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div className="foot-col foot-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
              <Seal variant={DEFAULT_SEAL_VARIANT} size={56} color="var(--gold)" accent="var(--gold)" />
              <div>
                <div className="wordmark">NADBA</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em",
                              textTransform: "uppercase", color: "rgba(241,235,221,.55)" }}>
                  Est. MMXXVI · Provisional Charter
                </div>
              </div>
            </div>
            <p>
              The professional association for people who are definitely not
              database administrators. Official recognition for unofficial
              responsibility.
            </p>
            <div className="addr">
              Office of the Registrar<br/>
              c/o The Bob Empire<br/>
              bob@bobeckert.com
            </div>
          </div>

          <div className="foot-col">
            <h5>The Association</h5>
            <ul>
              <li><a href="#premise">About NADBA</a></li>
              <li><a href="#why">Foundational Memo</a></li>
              <li><span className="placeholder-link">Bylaws (Draft) — forthcoming</span></li>
              <li><span className="placeholder-link">Code of Conduct — forthcoming</span></li>
              <li><span className="placeholder-link">Board of Directors — forthcoming</span></li>
            </ul>
          </div>

          <div className="foot-col">
            <h5>For Members</h5>
            <ul>
              <li><a href="#certify">Get Certified</a></li>
              <li><a href="#merch">Gift Shop</a></li>
              <li><a href="#workshop">Workshops</a></li>
              <li><span className="placeholder-link">Member Directory — forthcoming</span></li>
              <li><span className="placeholder-link">Annual Banquet — pending venue diplomacy</span></li>
            </ul>
          </div>

          <div className="foot-col">
            <h5>Empire</h5>
            <ul>
              <li><a href="https://thekingofdns.com">TheKingOfDNS.com →</a></li>
              <li><a href="mailto:bob@bobeckert.com?subject=NADBA%20Merch%20or%20Press%20Inquiry">Press, merch, or consulting inquiries</a></li>
              <li><span className="placeholder-link">Newsletter linkage — forthcoming</span></li>
              <li><span className="placeholder-link">Mentions archive — forthcoming</span></li>
            </ul>
          </div>
        </div>

        <div className="foot-bottom">
          <div>© MMXXVI NADBA · All Rights Reserved (Such As They Are)</div>
          <div className="empire">
            Part of <a href="https://thekingofdns.com">the Bob empire</a> ·
            <span style={{ marginLeft: 10 }}>NADBA is a satirical professional association. It is also, in the ways that matter, real.</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  React.useEffect(() => {
    document.body.dataset.palette = "default";
    document.body.dataset.display = "caslon";
  }, []);

  return (
    <>
      <Masthead />
      <Hero />
      <Ticker />
      <Premise />
      <CertificateSpread />
      <Why />
      <Merch />
      <Workshop />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);