'use client'

import { useEffect, Suspense } from 'react'
import { useSearchParams } from 'next/navigation'
import Nav from './components/Nav'
import Drop from './components/Drop'
import InfoBox from './components/InfoBox'
import Signup from './components/Signup'
import PastDrops from './components/PastDrops'
import Footer from './components/Footer'
import UnlockBar from './components/UnlockBar'

function PaymentHandler() {
  const searchParams = useSearchParams()

  useEffect(() => {
    const payment = searchParams.get('payment')
    const orderId = searchParams.get('order_id')

    if (payment === 'success' && orderId) {
      // Clean up URL - IPN is handled by external service
      window.history.replaceState({}, '', window.location.pathname)
    } else if (payment === 'cancelled') {
      alert('Payment was cancelled.')
      // Clean up URL
      window.history.replaceState({}, '', window.location.pathname)
    }
  }, [searchParams])

  return null
}

export default function Home() {

  return (
    <>
      <Suspense fallback={null}>
        <PaymentHandler />
      </Suspense>
      <Nav />
      <UnlockBar />
      <header className="container">
        <h1>Shop together. Wholesale prices for private buyers.</h1>
        <p>
          Limited CBD drops directly from Swiss producers. No retail.
          No markup. Just collective bulk prices.
        </p>
      </header>

      <section className="container" id="drop">
        <Drop />
        <InfoBox />
      </section>

      <section className="container" id="community">
        <Signup />
      </section>

      <section className="container" id="past">
        <h2>Past Drops</h2>
        <PastDrops limit={3} showMoreLink={true} />
      </section>

      <Footer />
    </>
  )
}