import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Card } from "@/components/ui/card"

export default function ShopRetroModern() {
  return (
    <div className="max-w-6xl mx-auto p-6">
      {/* Tabs principais */}
      <Tabs defaultValue="home">
        <TabsList className="grid grid-cols-4 mb-6">
          <TabsTrigger value="home">Home</TabsTrigger>
          <TabsTrigger value="shop">Shop</TabsTrigger>
          <TabsTrigger value="about">About</TabsTrigger>
          <TabsTrigger value="contact">Contact</TabsTrigger>
        </TabsList>

        {/* Home */}
        <TabsContent value="home">
          <h1 className="text-2xl font-bold">Bem-vindo!</h1>
          <p className="text-gray-600">Explore nosso catálogo retrô-modern.</p>
        </TabsContent>

        {/* Shop */}
        <TabsContent value="shop">
          <h2 className="text-xl font-semibold mb-4">下着各種</h2>
          <p className="text-sm text-gray-700 mb-6">
            人気商品から定番商品まで、君の下半身をグッとさせる下着を取り揃えています。
          </p>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {/* Item */}
            <div className="flex flex-col items-center">
              <img src="https://via.placeholder.com/150x200"
                   alt="item"
                   className="border border-gray-400 shadow-sm mb-2" />
              <p className="text-sm font-semibold">オリジナル ラグパン</p>
              <p className="text-xs text-gray-600">¥3,980</p>
              <button className="mt-2 border border-blue-400 text-blue-600 px-4 py-1 text-xs hover:bg-blue-50">
                購入
              </button>
            </div>

            {/* Outro item */}
            <div className="flex flex-col items-center">
              <img src="https://via.placeholder.com/150x200"
                   alt="item"
                   className="border border-gray-400 shadow-sm mb-2" />
              <p className="text-sm font-semibold">スポーツブリーフ 黒</p>
              <p className="text-xs text-gray-600">¥2,580</p>
              <button className="mt-2 border border-blue-400 text-blue-600 px-4 py-1 text-xs hover:bg-blue-50">
                購入
              </button>
            </div>
          </div>
        </TabsContent>

        {/* About */}
        <TabsContent value="about">
          <h2 className="text-xl font-semibold">Sobre</h2>
          <p className="text-gray-600">Nossa história e missão.</p>
        </TabsContent>

        {/* Contact */}
        <TabsContent value="contact">
          <h2 className="text-xl font-semibold">Contato</h2>
          <p className="text-gray-600">Envie-nos uma mensagem!</p>
        </TabsContent>
      </Tabs>
    </div>
  )
}