import React from 'react'

// M/S AVON CARD BOARD — Unique single-file React PWA
// - Different layout & style from previous projects
// - Purpose: Tiered membership cards, merchant directory, QR verification, fast checkout
// - Tailwind utility classes assumed

export default function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-gray-800 text-slate-100 font-sans">
      <TopBar />
      <main className="max-w-6xl mx-auto px-4 py-10">
        <Showcase />
        <Tiers />
        <MerchantMap />
        <VerifyQR />
        <Footer />
      </main>
    </div>
  )
}

function TopBar() {
  return (
    <header className="sticky top-0 bg-black/40 backdrop-blur z-20">
      <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-md bg-gradient-to-tr from-amber-400 to-rose-500 flex items-center justify-center text-black font-bold">A</div>
          <div>
            <div className="text-lg font-bold">M/S AVON CARD BOARD</div>
            <div className="text-xs text-slate-300">Premium Savings • Local & National Partners</div>
          </div>
        </div>
        <nav className="hidden md:flex gap-4 items-center">
          <a href="#tiers" className="text-sm">Tiers</a>
          <a href="#merchants" className="text-sm">Merchants</a>
          <a href="#verify" className="text-sm">Verify</a>
          <button className="px-3 py-2 bg-amber-400 text-black rounded-md">Buy Now</button>
        </nav>
      </div>
    </header>
  )
}

function Showcase() {
  return (
    <section className="grid md:grid-cols-2 gap-8 items-center py-8">
      <div>
        <h1 className="text-3xl font-extrabold">Avon Card — Save More, Live More</h1>
        <p className="mt-3 text-slate-300">Choose from Silver, Gold or Platinum membership — each with exclusive benefits, partner deals, and fuel & dining perks.</p>
        <div className="mt-4 flex gap-3">
          <a href="#tiers" className="px-4 py-2 bg-amber-400 text-black rounded-md font-semibold">See Tiers</a>
          <a href="#merchants" className="px-4 py-2 border border-slate-700 rounded-md">Find Merchants</a>
        </div>
      </div>

      <div className="flex gap-4 justify-end">
        <div className="w-44 h-28 bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl p-4 shadow-lg">
          <div className="text-sm text-amber-300">Platinum</div>
          <div className="text-2xl font-bold">₹999 / yr</div>
          <div className="text-xs text-slate-400 mt-1">Free priority support</div>
        </div>
        <div className="w-44 h-28 bg-gradient-to-tr from-slate-700 to-slate-600 rounded-xl p-4 shadow-lg">
          <div className="text-sm text-slate-300">Gold</div>
          <div className="text-2xl font-bold">₹699 / yr</div>
          <div className="text-xs text-slate-400 mt-1">Extra cashback at partners</div>
        </div>
      </div>
    </section>
  )
}

const tiers = [
  { id: 'silver', name: 'Silver', price: '₹299', perks: ['5% at groceries', 'Basic partner list'] },
  { id: 'gold', name: 'Gold', price: '₹699', perks: ['10% at dining', 'Fuel cashback'] },
  { id: 'platinum', name: 'Platinum', price: '₹999', perks: ['15% at selected stores', 'Priority support'] },
]

function Tiers() {
  return (
    <section id="tiers" className="py-8">
      <h2 className="text-2xl font-bold">Membership Tiers</h2>
      <div className="mt-4 grid md:grid-cols-3 gap-4">
        {tiers.map(t => (
          <div key={t.id} className="p-4 bg-slate-800 border border-slate-700 rounded-lg">
            <div className="flex justify-between items-center">
              <div>
                <div className="font-semibold">{t.name}</div>
                <div className="text-sm text-slate-400">{t.price} / year</div>
              </div>
              <button className="px-3 py-1 bg-amber-400 text-black rounded">Buy</button>
            </div>
            <ul className="mt-3 text-sm text-slate-300 list-disc pl-5">
              {t.perks.map((p, i) => <li key={i}>{p}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  )
}

function MerchantMap() {
  return (
    <section id="merchants" className="py-8">
      <h2 className="text-2xl font-bold">Nearby Merchants</h2>
      <p className="text-slate-400 mt-2">Search partners by city or category</p>
      <div className="mt-4 grid md:grid-cols-3 gap-4">
        <MerchantCard name="Urban Bistro" cat="Food" deal="20% off" />
        <MerchantCard name="Savera Fuel" cat="Fuel" deal="₹5/l cashback" />
        <MerchantCard name="City Grocers" cat="Groceries" deal="8% off" />
      </div>
    </section>
  )
}

function MerchantCard({ name, cat, deal }) {
  return (
    <div className="p-3 bg-slate-800 border border-slate-700 rounded-md">
      <div className="flex justify-between items-start">
        <div>
          <div className="font-semibold">{name}</div>
          <div className="text-xs text-slate-400">{cat}</div>
        </div>
        <div className="text-sm text-amber-300 font-bold">{deal}</div>
      </div>
      <div className="mt-3 text-xs text-slate-400">Show AVON card QR at checkout</div>
    </div>
  )
}

function VerifyQR() {
  return (
    <section id="verify" className="py-8">
      <h2 className="text-2xl font-bold">Merchant QR Verification</h2>
      <p className="text-slate-400 mt-2">Merchants can scan/validate membership QR here (demo mode)</p>
      <div className="mt-4 p-4 bg-slate-800 border border-slate-700 rounded">
        <div className="text-sm text-slate-300">Scan result: <span className="font-semibold">Demo User — Platinum — Valid</span></div>
        <div className="mt-3">
          <button className="px-4 py-2 bg-amber-400 text-black rounded-md">Start Scan (demo)</button>
        </div>
      </div>
    </section>
  )
}

function Footer() {
  return (
    <footer className="pt-8 border-t border-slate-700 mt-8 text-slate-400">
      <div className="flex flex-col md:flex-row md:justify-between gap-4">
        <div>
          <div className="font-semibold text-white">M/S AVON CARD BOARD</div>
          <div className="text-sm">GSTIN: (add here)</div>
        </div>
        <div className="text-sm">Hosted as PWA — ready for TWA wrap and Play Store</div>
      </div>
    </footer>
  )
}

/*
  Deployment notes (short):
  - Place file as src/App.jsx in a Vite + Tailwind project.
  - Add public/manifest.json and icons (dark-friendly) and a service worker for offline.
  - For payment use Razorpay/Stripe; secure endpoints on backend.
  - To publish on Play Store wrap via Bubblewrap (TWA) after HTTPS + manifest + SW ready.

  Want next: manifest & icons? backend endpoints? Hostinger deploy steps? I'll add whichever you want.
*/