import React from 'react';
import { Disclaimer } from './Disclaimer';

export const Hero: React.FC = () => {
  return (
    <section className="pt-14 pb-16 px-6 border-b hairline">
      <div className="max-w-6xl mx-auto">
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-7">
            <div className="mono text-[11px] uppercase tracking-[0.18em] text-slate-500 mb-4">
              Publication · Red Team Commentary · Verifiable Artifacts
            </div>
            <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 leading-[1.05] mb-5">
              Shadow Dossiers
            </h1>
            <p className="text-lg text-slate-700 leading-relaxed max-w-2xl mb-8">
              Satirical, operator‑grade commentary on governance and compliance theater—published alongside an evidence index
              so readers can verify what’s being referenced.
            </p>

            <div className="flex flex-wrap gap-3">
              <a
                href="#dossiers"
                className="inline-flex items-center justify-center rounded-md bg-slate-900 text-white px-5 py-3 text-sm font-semibold hover:bg-slate-800 transition-colors"
              >
                Browse dossiers
              </a>
              <a
                href="#dossiers"
                target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center rounded-md border hairline bg-white px-5 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-50 transition-colors"
              >
                Evidence index
              </a>
              <a
                href="mailto:dave@infrafabric.io"
                className="inline-flex items-center justify-center rounded-md border hairline bg-transparent px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-white transition-colors"
              >
                Contact
              </a>
            </div>
          </div>

          <div className="lg:col-span-5">
            <Disclaimer />
          </div>
        </div>
      </div>
    </section>
  );
};