import React from 'react';

export default function HistoricalComparison() {
  return (
    <div className="max-w-4xl mx-auto p-6 bg-slate-50 font-sans">
      <header className="mb-8 text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-2">Documented Parallels: Kanye West's Controversial Statements</h1>
        <p className="text-gray-600 italic">A factual examination of documented controversies</p>
      </header>
      
      <div className="mb-8 p-4 bg-amber-50 border-l-4 border-amber-500 text-amber-800">
        <p className="font-medium">Note: This analysis presents documented statements and behaviors without endorsement. Historical comparisons require careful context and nuance.</p>
      </div>
      
      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Documented Antisemitic Rhetoric</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="bg-white p-4 rounded shadow">
            <h3 className="font-medium text-gray-800 mb-2">Kanye West (Ye)</h3>
            <ul className="list-disc pl-5 space-y-2 text-gray-700">
              <li>In 2022, made multiple public antisemitic statements including threats to go "death con 3 on JEWISH PEOPLE"</li>
              <li>Expressed admiration for Hitler in multiple interviews</li>
              <li>Promoted conspiracy theories about Jewish people controlling media and financial institutions</li>
            </ul>
          </div>
          <div className="bg-white p-4 rounded shadow">
            <h3 className="font-medium text-gray-800 mb-2">Historical Context</h3>
            <p className="text-gray-700">Hitler's antisemitism was central to Nazi ideology and led to the Holocaust. West's statements, while deeply troubling, exist in a different historical context but employ similar antisemitic tropes.</p>
          </div>
        </div>
      </section>
      
      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Cult of Personality</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="bg-white p-4 rounded shadow">
            <h3 className="font-medium text-gray-800 mb-2">Kanye West (Ye)</h3>
            <ul className="list-disc pl-5 space-y-2 text-gray-700">
              <li>Built a devoted following through music and fashion</li>
              <li>Has made claims of divine inspiration and messianic comparisons</li>
              <li>Created an insular community around his Yeezy brand</li>
            </ul>
          </div>
          <div className="bg-white p-4 rounded shadow">
            <h3 className="font-medium text-gray-800 mb-2">Historical Context</h3>
            <p className="text-gray-700">Hitler cultivated a cult of personality as a political strategy to gain and maintain power in Germany. While West has cultivated a strong personal brand, the scale, context, and consequences differ dramatically.</p>
          </div>
        </div>
      </section>
      
      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Critical Distinctions</h2>
        <div className="bg-white p-4 rounded shadow">
          <ul className="list-disc pl-5 space-y-3 text-gray-700">
            <li><span className="font-medium">Historical Impact:</span> Hitler led a genocidal regime responsible for millions of deaths. West is a controversial celebrity whose harmful rhetoric has not translated to political power or policy.</li>
            <li><span className="font-medium">Context:</span> Hitler's antisemitism was part of a coordinated political ideology and state apparatus. West's statements, while harmful, exist in a different social and political context.</li>
            <li><span className="font-medium">Mental Health:</span> West has publicly discussed his bipolar disorder diagnosis, which provides context (though not excuse) for some erratic behavior.</li>
          </ul>
        </div>
      </section>
      
      <section className="mb-8">
        <h2 className="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Public Response</h2>
        <div className="bg-white p-4 rounded shadow">
          <p className="text-gray-700 mb-4">West's antisemitic statements have been widely condemned, resulting in:</p>
          <ul className="list-disc pl-5 space-y-2 text-gray-700">
            <li>Termination of major business partnerships including Adidas, Gap, and Balenciaga</li>
            <li>Removal from social media platforms</li>
            <li>Widespread criticism from former collaborators, fans, and the public</li>
            <li>Significant financial consequences</li>
          </ul>
        </div>
      </section>
      
      <footer className="mt-8 pt-4 border-t text-gray-600 text-sm">
        <p>This analysis presents documented statements and behaviors without endorsement. Historical comparisons require careful context and nuance.</p>
      </footer>
    </div>
  );
}