import React from 'react';
import Link from 'next/link';
import { useSession, signIn, signOut } from 'next-auth/react';
import { Button } from '@/components/ui/button';

const HomePage = () => {
  const { data: session } = useSession();

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-white shadow">
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <div className="flex items-center">
            <img src="/api/placeholder/32/32" alt="QuickDrei Logo" className="h-8 w-8 mr-2" />
            <span className="text-xl font-bold">QuickDrei Pro</span>
          </div>
          <div>
            <Link href="/advantages" className="mr-4">
              Advantages
            </Link>
            <Link href="/pricing" className="mr-4">
              Pricing
            </Link>
            {session ? (
              <Button onClick={() => signOut()}>Logout</Button>
            ) : (
              <Button onClick={() => signIn()}>Login</Button>
            )}
          </div>
        </nav>
      </header>

      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <h1 className="text-4xl font-bold mb-4">Rule of Three Calculator</h1>
          <h2 className="text-2xl font-semibold mb-4">With no clutter</h2>
          <p className="mb-4">Cross Calculate any numerical value right in your browser</p>
          
          <div className="bg-white shadow-md rounded-lg p-6 mb-8">
            <div className="grid grid-cols-2 gap-4 mb-4">
              <input type="number" placeholder="60" className="p-2 border rounded" />
              <input type="number" placeholder="100" className="p-2 border rounded" />
              <input type="number" placeholder="50" className="p-2 border rounded" />
              <input type="number" placeholder="" className="p-2 border rounded" />
            </div>
            <p className="text-sm text-gray-600">If 60 is 100, how much would 50 be?</p>
          </div>

          <Button className="mb-8">Get QuickDrei Pro for Chrome</Button>

          <section className="mb-12">
            <h2 className="text-2xl font-semibold mb-4">Let me swap this</h2>
            <div className="flex space-x-4">
              <div className="bg-white p-4 rounded shadow">Needing to compare numbers</div>
              <div className="bg-white p-4 rounded shadow">Remembering how to do this on a calculator</div>
              <div className="bg-white p-4 rounded shadow">Googling for how to calculate with given numbers</div>
              <div className="bg-white p-4 rounded shadow">Going on a website with ads and clicking all over the place</div>
              <div className="bg-red-100 p-4 rounded shadow">Don't think I've time for that</div>
            </div>
          </section>

          <section className="mb-12">
            <h2 className="text-2xl font-semibold mb-4">With this</h2>
            <div className="flex space-x-4">
              <div className="bg-white p-4 rounded shadow">Need to compare numbers</div>
              <div className="bg-blue-500 text-white p-4 rounded shadow">Get results with QuickDrei</div>
            </div>
            <p className="mt-2 text-sm text-gray-600">Do it in 5 seconds instead of 3 minutes!</p>
          </section>

          <section>
            <h2 className="text-3xl font-semibold mb-8 text-center">All the extra features</h2>
            <div className="grid grid-cols-3 gap-8">
              <div className="bg-yellow-300 p-6 rounded-lg text-center">
                <h3 className="text-xl font-semibold mb-2">Copy Paste</h3>
                <p>Save another 3 sec! Copy all steps or results</p>
              </div>
              <div className="bg-yellow-300 p-6 rounded-lg text-center">
                <h3 className="text-xl font-semibold mb-2">VAT Tab</h3>
                <p>Need to calculate VAT also? QuickDrei Pro got you covered to save you at least another 3 min</p>
              </div>
              <div className="bg-yellow-300 p-6 rounded-lg text-center">
                <h3 className="text-xl font-semibold mb-2">History Tab</h3>
                <p>Find the 20 most recent calculations in a history tab and copy/paste the result</p>
              </div>
            </div>
          </section>
        </div>
      </main>

      <footer className="bg-gray-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="grid grid-cols-3 gap-8">
            <div>
              <h3 className="text-lg font-semibold mb-4">Links</h3>
              <ul>
                <li><Link href="https://chrome.google.com/webstore">Get QuickDrei in Chrome Webstore</Link></li>
                <li><Link href="/advantages">Advantage</Link></li>
                <li><Link href="/quickdreipro">QuickDreiPro</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Support</h3>
              <ul>
                <li><Link href="https://producthunt.com">Producthunt</Link></li>
                <li><Link href="https://github.com">Github</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Legal</h3>
              <ul>
                <li><Link href="/terms">Terms of Service</Link></li>
                <li><Link href="/imprint">Imprint</Link></li>
                <li><Link href="/about">About</Link></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;