"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ExternalLink, Upload } from "lucide-react"

export default function YowisBenStore() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null)

  const redirectToWA = (text: string) => {
    const no = "6282221415484"
    const pesan = encodeURIComponent(text)
    window.open(`https://wa.me/${no}?text=${pesan}`, "_blank")
  }

  const kirimTelegram = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedFile) return

    const formData = new FormData()
    formData.append("chat_id", "7596781256")
    formData.append("caption", "Bukti transfer dari YowisBen Store")
    formData.append("document", selectedFile)

    try {
      await fetch("https://api.telegram.org/bot8171533030:AAFMOAum8zI5KMyeaDR_zj6U5aZIl-JHku0/sendDocument", {
        method: "POST",
        body: formData,
      })
      alert("Bukti transfer berhasil dikirim ke Telegram bot")
    } catch (error) {
      alert("Gagal mengirim bukti transfer")
    }
  }

  const navItems = [
    { text: "Open Jual Beli Akun All Game", message: "Saya ingin beli akun all game" },
    { text: "Open Jasa Rekber/MC-an", message: "Saya butuh jasa rekber/mc-an" },
    { text: "Open Suntik All Sosmed", message: "Saya ingin suntik sosmed" },
    { text: "Open Jasa Rename Script", message: "Saya ingin rename script" },
    { text: "Open Keamanan Akun Game", message: "Saya butuh keamanan akun game" },
    { text: "Open Pembuatan Website All Konsep", message: "Saya ingin buat website konsep tertentu" },
    { text: "Open Panel Prodactly", message: "Saya ingin panel prodactly" },
    { text: "Jasa Pembuatan Domain", message: "Saya ingin jasa pembuatan domain" },
    { text: "Open Jasa Pasang Bot (WA & Telegram)", message: "Saya ingin pasang bot via WA/Telegram" },
    { text: "Open Kebutuhan JB & Market & Hostinger", message: "Saya butuh hosting dan market" },
  ]

  const socialLinks = [
    { name: "Tiktok", url: "https://tiktok.com/@yowisbenstorereal", icon: "🎵" },
    { name: "Instagram", url: "https://www.instagram.com/ini.benzx?igsh=bXIyMXhzOWlsaDVh", icon: "📷" },
    { name: "Youtube", url: "https://www.youtube.com/@YowisBenStore", icon: "📺" },
    { name: "Telegram", url: "https://t.me/Yowisbenzzzz12", icon: "✈️" },
    { name: "Channel Stok", url: "https://whatsapp.com/channel/0029VanLoUuJuyAGCiRZuL3V", icon: "📦" },
    { name: "Channel Testimoni", url: "https://whatsapp.com/channel/0029VbAllCMBlHpcsiklld3t", icon: "⭐" },
    { name: "Grup Jual Beli 1 & 2", url: "https://chat.whatsapp.com/G3dPzPoJRb9836Xhy7VDPU?mode=r_c", icon: "👥" },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 text-gray-100">
      <header className="bg-slate-900/80 backdrop-blur-sm text-center py-8 px-4 animate-in slide-in-from-left duration-1000">
        <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
          YowisBen Store
        </h1>
        <p className="text-gray-300 text-lg">Jual Beli Akun All Game dan Layanan Digital Otomatis</p>
      </header>

      <nav className="bg-slate-800/50 backdrop-blur-sm p-4 animate-in slide-in-from-left duration-1200">
        <div className="flex flex-wrap justify-center gap-2">
          {navItems.map((item, index) => (
            <Button
              key={index}
              variant="ghost"
              className="text-sm hover:bg-slate-700 hover:text-white transition-all duration-300"
              onClick={() => redirectToWA(item.message)}
            >
              {item.text}
            </Button>
          ))}
        </div>
      </nav>

      <div className="container mx-auto px-4 py-8 space-y-8">
        {/* Payment Methods */}
        <Card
          className="bg-slate-800/50 backdrop-blur-sm border-slate-700 cursor-pointer hover:scale-105 hover:shadow-xl hover:shadow-blue-500/20 transition-all duration-500 animate-in fade-in-up duration-1000"
          onClick={() => redirectToWA("Saya ingin informasi pembayaran")}
        >
          <CardContent className="p-6">
            <h3 className="text-2xl font-bold mb-4 text-blue-400">Metode Pembayaran</h3>
            <div className="space-y-3">
              <p className="text-lg">
                <strong className="text-green-400">DANA:</strong> 082221415484
              </p>
              <div>
                <p className="text-lg font-semibold mb-3">QRIS:</p>
                <div className="flex justify-center">
                  <img
                    src="https://img1.pixhost.to/images/5879/601443255_biyuofficial.jpg"
                    alt="QRIS Code"
                    className="max-w-48 rounded-lg shadow-lg"
                  />
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Upload Transfer Proof */}
        <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700 animate-in fade-in-up duration-1000 delay-200">
          <CardContent className="p-6">
            <h3 className="text-2xl font-bold mb-4 text-purple-400">Kirim Bukti Transfer</h3>
            <form onSubmit={kirimTelegram} className="space-y-4">
              <div className="flex items-center gap-4">
                <Input
                  type="file"
                  required
                  onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
                  className="bg-slate-700 border-slate-600 text-white file:bg-slate-600 file:text-white file:border-0 file:rounded file:px-3 file:py-1"
                />
                <Button
                  type="submit"
                  className="bg-blue-600 hover:bg-blue-700 flex items-center gap-2"
                  disabled={!selectedFile}
                >
                  <Upload className="w-4 h-4" />
                  Kirim ke Telegram
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

        {/* Contact & Social Media */}
        <Card
          className="bg-slate-800/50 backdrop-blur-sm border-slate-700 cursor-pointer hover:scale-105 hover:shadow-xl hover:shadow-green-500/20 transition-all duration-500 animate-in fade-in-up duration-1000 delay-400"
          onClick={() => redirectToWA("Saya ingin info kontak dan media sosial")}
        >
          <CardContent className="p-6">
            <h3 className="text-2xl font-bold mb-4 text-green-400">Kontak & Sosial Media</h3>
            <div className="space-y-3">
              <p>
                <strong className="text-yellow-400">Nama:</strong> YowisBen Store
              </p>
              <p>
                <strong className="text-yellow-400">Owner 1:</strong> 082221415484
              </p>
              <p>
                <strong className="text-yellow-400">Owner 2:</strong> 081228561931
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-6">
                {socialLinks.map((social, index) => (
                  <a
                    key={index}
                    href={social.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 p-3 bg-slate-700/50 rounded-lg hover:bg-slate-600/50 transition-colors duration-300"
                  >
                    <span className="text-xl">{social.icon}</span>
                    <span className="text-blue-300 hover:text-blue-200">{social.name}</span>
                    <ExternalLink className="w-4 h-4 ml-auto opacity-60" />
                  </a>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <footer className="bg-slate-900/80 backdrop-blur-sm text-center py-6 mt-12 animate-in slide-in-from-left duration-1500">
        <p className="text-gray-400">&copy; 2025 YowisBen Store. All rights reserved.</p>
      </footer>
    </div>
  )
}