import React from 'react';
import { Header } from './components/Header';
import { Hero } from './components/Hero';
import { LeakViewer } from './components/LeakViewer';
import { PricingTiers } from './components/PricingTiers';
import { RoastGenerator } from './components/RoastGenerator';
import { Footer } from './components/Footer';

const App: React.FC = () => {
  return (
    <div className="min-h-screen selection:bg-red-ink selection:text-white overflow-x-hidden">
      <Header />
      <main>
        <Hero />
        <LeakViewer />
        <RoastGenerator />
        <PricingTiers />

        {/* Evidence CTA */}
        <section className="py-16 md:py-20 px-6 border-t hairline">
          <div className="max-w-6xl mx-auto">
            <div className="rounded-xl border hairline bg-white p-8 md:p-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
              <div>
                <div className="mono text-[11px] uppercase tracking-[0.18em] text-slate-500 mb-2">Verification</div>
                <h2 className="text-2xl md:text-3xl font-extrabold tracking-tight text-slate-900">Evidence index & trace verification</h2>
                <p className="text-slate-700 mt-2 max-w-2xl">
                  Browse hashes, trace bundles, and reproducibility notes. If you want the bite, keep the proof.
                </p>
              </div>
              <a
                href="#dossiers"
                target="_blank" rel="noopener noreferrer"
                className="inline-flex items-center justify-center rounded-md bg-slate-900 text-white px-6 py-3 text-sm font-semibold hover:bg-slate-800 transition-colors"
              >
                Evidence index (staged)
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default App;