"use client";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowUpRight, X, Maximize2, RefreshCw, Shield, Zap, Gamepad2, Bot, Cloud, CreditCard, Server } from "lucide-react";

const games = ["Minecraft","FiveM","Rust","ARK","CS2","Discord Bots"];
const features = [
  { title:"GAME SERVERS", desc:"Minecraft, FiveM, Rust, ARK, CS2 and more.", icon: Gamepad2 },
  { title:"DISCORD BOTS", desc:"Node.js, Python and Java bots — Pterodactyl managed.", icon: Bot },
  { title:"PTERODACTYL", desc:"Full console, files, backups, settings.", icon: Cloud },
  { title:"DDoS PROTECTION", desc:"Protection advertised by FreeDash.", icon: Shield },
  { title:"AUTO RESTART", desc:"Crash detection and automatic restart.", icon: Zap },
  { title:"GLOBAL NETWORK", desc:"Low-latency infrastructure across regions.", icon: Cloud },
];

export default function FreedashCaseStudy() {
  const [step, setStep] = useState(0);
  const [gallery, setGallery] = useState<string | null>(null);
  const [liveBlocked] = useState(true); // X-Frame-Options: DENY confirmed 2026-08-27
  const [zyKey, setZyKey] = useState(0);
  const [full, setFull] = useState(false);

  return (
    <div className="space-y-16 mt-10">
      {/* LIVE PREVIEW */}
      <section>
        <p className="text-[11px] tracking-[0.2em] text-white/30 uppercase">Live Preview • X-Frame-Options: DENY — fallback used</p>
        <div className="mt-3 rounded-[18px] border border-white/10 bg-[#0e1118] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
          <div className="flex items-center justify-between px-4 py-3 bg-[#0e1118] border-b border-white/10">
            <div className="flex gap-1.5"><span className="w-3 h-3 rounded-full bg-red-500/80" /><span className="w-3 h-3 rounded-full bg-yellow-500/80" /><span className="w-3 h-3 rounded-full bg-green-500/80" /></div>
            <span className="text-xs text-white/50 flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" /> freedash.zyphron.cloud</span>
            <div className="flex gap-1.5">
              <button onClick={()=>setZyKey(k=>k+1)} className="w-7 h-7 rounded-full bg-white/10 grid place-items-center text-white/60 hover:text-white"><RefreshCw size={12} /></button>
              <button onClick={()=>setFull(true)} className="w-7 h-7 rounded-full bg-white text-black grid place-items-center"><Maximize2 size={12} /></button>
              <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="hidden sm:inline-flex items-center gap-1 text-xs font-semibold px-3 py-1 rounded-full bg-[#2563eb] text-white">OPEN LIVE WEBSITE <ArrowUpRight size={12} /></a>
            </div>
          </div>
          <div className="relative h-[420px] bg-white overflow-hidden">
            {liveBlocked ? (
              <div className="absolute inset-0 bg-gradient-to-br from-[#93C5F7] via-[#5BA3EC] to-[#1B67D8] grid place-items-center p-8 text-center">
                <div className="max-w-[520px] bg-white rounded-[20px] p-6 sm:p-8 shadow-xl">
                  <img src="https://freedash.zyphron.cloud/banner.png" alt="FreeDash banner" className="h-12 mx-auto object-contain hidden" onError={e=> (e.currentTarget.style.display="none")} />
                  <p className="text-[11px] tracking-[0.15em] font-bold text-[#1B67D8]">A ZYPHRON CLOUD PRODUCT</p>
                  <h3 className="text-xl font-bold text-gray-900 mt-1">FreeDash</h3>
                  <p className="text-sm text-gray-600 mt-1">Free game server and Discord bot hosting — credits by inviting friends, watching ads, redeeming codes.</p>
                  <p className="text-xs text-gray-400 mt-2">Embedding blocked (X-Frame-Options: DENY) — preview is a live-accurate snapshot. Open the real site.</p>
                  <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="mt-4 inline-flex items-center gap-2 bg-[#1B67D8] text-white px-5 py-2.5 rounded-full font-semibold text-sm">OPEN LIVE WEBSITE <ArrowUpRight size={14} /></a>
                </div>
              </div>
            ) : (
              <iframe key={zyKey} src="https://freedash.zyphron.cloud/" title="FreeDash live" className="w-full h-full border-0" loading="lazy" />
            )}
          </div>
          <div className="px-4 py-2 flex justify-between text-xs text-white/30 bg-[#0e1118] border-t border-white/10"><span>Live preview — respects CSP / X-Frame</span><a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="text-white/60 hover:text-white">OPEN LIVE WEBSITE ↗</a></div>
        </div>
        {full && (
          <div className="fixed inset-0 z-40 bg-black/80 backdrop-blur flex flex-col">
            <div className="flex justify-between items-center px-4 py-3 bg-[#0e1118] border-b border-white/10"><span className="text-xs text-white/60">freedash.zyphron.cloud • Fullscreen preview (blocked — opening live)</span><button onClick={()=>setFull(false)} className="w-8 h-8 rounded-full bg-white/10 grid place-items-center text-white"><X size={16} /></button></div>
            <div className="flex-1 grid place-items-center bg-white p-8 text-center">
              <div>
                <p className="text-gray-600">Fullscreen iframe blocked by X-Frame-Options: DENY.</p>
                <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="mt-3 inline-flex bg-[#1B67D8] text-white px-5 py-2 rounded-full font-semibold">OPEN LIVE WEBSITE ↗</a>
              </div>
            </div>
          </div>
        )}
      </section>

      {/* WHAT IS */}
      <section>
        <h2 className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-white">WHAT IS FREEDASH?</h2>
        <p className="text-white/60 mt-2 max-w-[700px] leading-relaxed">FreeDash provides free hosting for Minecraft, FiveM, Rust, ARK, CS2 and Discord Bots — advertised on the live site and powered by Zyphron infrastructure.</p>
        <div className="mt-6 grid grid-cols-3 sm:grid-cols-6 gap-3">
          {games.map(g=>(
            <div key={g} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 text-center hover:bg-white hover:text-black group transition">
              <div className="w-10 h-10 mx-auto rounded-xl bg-gradient-to-br from-blue-500/30 to-cyan-400/20 border border-white/10 grid place-items-center group-hover:bg-black/5">{g==="Discord Bots" ? <Bot size={16} /> : <Gamepad2 size={16} />}</div>
              <p className="text-xs font-semibold mt-2">{g}</p>
            </div>
          ))}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section>
        <h2 className="text-xl font-bold text-white">HOW IT WORKS</h2>
        <div className="mt-4 grid sm:grid-cols-3 gap-4">
          {[
            { n:"01", t:"CREATE ACCOUNT", d:"Instant — no credit card required (per live site).", detail:"Sign up on freedash.zyphron.cloud and get a dashboard." },
            { n:"02", t:"EARN CREDITS", d:"Referrals, ads, promo codes.", detail:"Invite friends, watch ads, redeem codes — credits accumulate." },
            { n:"03", t:"DEPLOY SERVER", d:"Redeem credits for hosting.", detail:"Minecraft / FiveM / Bots auto-provisioned on Pterodactyl." },
          ].map((s,i)=>(
            <button key={s.n} onClick={()=>setStep(i)} onMouseEnter={()=>setStep(i)} className={`text-left rounded-2xl border p-5 transition ${step===i ? "bg-white text-black border-white" : "bg-white/[0.04] border-white/10 text-white hover:bg-white/[0.06]"}`}>
              <p className="text-xs tracking-widest opacity-50">{s.n}</p><p className="font-bold mt-1">{s.t}</p><p className="text-sm opacity-70 mt-1">{s.d}</p>{step===i && <p className="text-xs opacity-60 mt-2">{s.detail}</p>}{step===i && <span className="inline-flex mt-2 text-xs">↓</span>}
            </button>
          ))}
        </div>
      </section>

      {/* CREDIT SYSTEM */}
      <section className="rounded-[24px] border border-white/10 bg-gradient-to-br from-white/[0.06] to-transparent p-6 sm:p-8 text-center">
        <h2 className="text-[24px] font-[800] tracking-tight text-white">EARN. REDEEM. HOST.</h2>
        <div className="mt-6 flex flex-col items-center gap-2 font-mono text-xs max-w-[400px] mx-auto">
          <span className="px-4 py-2 rounded-full bg-blue-500 text-white font-bold">EARN CREDITS</span><span className="w-px h-4 bg-white/20" />
          <span className="px-3 py-1 rounded-full bg-white text-black font-bold">+100</span><span className="w-px h-4 bg-white/20" />
          <span className="px-4 py-2 rounded-full bg-white/10 border border-white/10 text-white">CREDIT BALANCE</span><span className="w-px h-4 bg-white/20" />
          <span className="px-4 py-2 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-300">REDEEM</span><span className="w-px h-4 bg-emerald-500/30" />
          <span className="px-6 py-2 rounded-full bg-white text-black font-bold flex items-center gap-2"><Server size={14} /> SERVER</span>
        </div>
        <p className="text-xs text-white/30 mt-3">Amounts from backend config — not hardcoded here.</p>
      </section>

      {/* INFRA */}
      <section>
        <h2 className="text-xl font-bold text-white">INFRASTRUCTURE</h2>
        <div className="mt-4 rounded-[24px] border border-white/10 bg-white/[0.03] p-6 text-center font-mono text-xs">
          <div className="flex flex-col items-center gap-1 text-white/70">
            <span className="px-6 py-2 rounded-full bg-[#2563eb] text-white font-bold">FREEDASH</span><span className="w-px h-4 bg-white/20" />
            <span className="px-4 py-2 rounded-full bg-white/10 border border-white/10">APPLICATION</span><span className="w-px h-4 bg-white/20" />
            <div className="flex gap-3"><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">ACCOUNTS</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">CREDITS</span></div><span className="w-px h-4 bg-white/20" />
            <span className="px-4 py-2 rounded-full bg-white text-black font-bold">PROVISIONER</span><span className="w-px h-4 bg-white/20" />
            <span className="px-4 py-2 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-300">PTERODACTYL</span><span className="w-px h-4 bg-emerald-500/30" />
            <div className="flex gap-2 flex-wrap justify-center"><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">MINECRAFT</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">FIVE-M</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">BOTS</span></div>
          </div>
        </div>
      </section>

      {/* PTERODACTYL */}
      <section>
        <h2 className="text-xl font-bold text-white">POWERED BY PTERODACTYL</h2>
        <p className="text-sm text-white/50 mt-1">Auto-provisioned servers — users receive console, files, backups and server settings (per live site).</p>
        <div className="mt-4 grid sm:grid-cols-4 gap-3">
          {[
            { t:"Console", d:"Logs & commands" },
            { t:"Files", d:"SFTP • editor" },
            { t:"Backups", d:"Snapshots" },
            { t:"Server Settings", d:"Startup • env" },
          ].map(f=>(
            <div key={f.t} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 text-center hover:bg-white hover:text-black group">
              <p className="font-semibold text-sm">{f.t}</p><p className="text-xs opacity-60">{f.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURES */}
      <section>
        <h2 className="text-xl font-bold text-white">FEATURES</h2>
        <div className="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {features.map(f=>(
            <div key={f.title} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 hover:bg-white/[0.06]">
              <f.icon size={16} className="text-blue-400" />
              <p className="font-semibold text-white text-sm mt-2">{f.title}</p><p className="text-xs text-white/50 mt-1">{f.desc}</p>
            </div>
          ))}
        </div>
        <p className="text-xs text-white/20 mt-2">Claims sourced from https://freedash.zyphron.cloud/ — no invented features.</p>
      </section>

      {/* EVOLUTION */}
      <section className="py-6 border-y border-white/10">
        <h2 className="text-xl font-bold text-white">FROM IDEA TO PLATFORM</h2>
        <div className="mt-4 flex flex-wrap gap-2 text-xs">
          {["IDEA","DESIGN","DEVELOPMENT","INFRASTRUCTURE","AUTOMATION","FREEDASH"].map((s,i)=>(
            <span key={s} className={`px-4 py-2 rounded-full border ${s==="FREEDASH" ? "bg-white text-black border-white font-bold" : "bg-white/5 border-white/10 text-white/60"}`}>{s} {i<5 && "↓"}</span>
          ))}
        </div>
        <p className="text-xs text-white/20 mt-2">Editable timeline — no invented dates.</p>
      </section>

      {/* ROLE */}
      <section>
        <h2 className="text-xl font-bold text-white">MY ROLE</h2>
        <div className="mt-3 flex flex-wrap gap-2">
          {["Founder","Product","Development","Infrastructure","Operations","Design","Business"].map(r=>(
            <span key={r} className="px-3 py-1.5 rounded-full bg-white text-black text-xs font-semibold">{r}</span>
          ))}
        </div>
        <p className="text-xs text-white/20 mt-2">Only accurate roles — editable.</p>
      </section>

      {/* GALLERY */}
      <section>
        <h2 className="text-xl font-bold text-white">SCREENSHOT GALLERY</h2>
        <p className="text-xs text-white/30">Real UI — homepage, dashboard, server deployment, credits, plans, panel.</p>
        <div className="mt-4 grid sm:grid-cols-3 gap-3">
          {["Homepage","Dashboard","Server deployment","Credit system","Hosting plans","Pterodactyl panel"].map(s=>(
            <button key={s} onClick={()=>setGallery(s)} className="h-36 rounded-2xl border border-white/10 bg-white/[0.04] grid place-items-center hover:bg-white/[0.06] text-white/40 text-xs tracking-widest uppercase">{s}</button>
          ))}
        </div>
        <AnimatePresence>
          {gallery && (
            <motion.div initial={{ opacity:0 }} animate={{ opacity:1 }} exit={{ opacity:0 }} className="fixed inset-0 z-40 bg-black/80 backdrop-blur grid place-items-center p-6" onClick={()=>setGallery(null)}>
              <div className="relative w-full max-w-2xl rounded-2xl bg-[#0e1118] border border-white/10 p-8 grid place-items-center min-h-[300px]">
                <button onClick={()=>setGallery(null)} className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white text-black grid place-items-center"><X size={14} /></button>
                <span className="text-white/60 text-sm">{gallery} — real screenshot placeholder (replace with actual capture)</span>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </section>

      {/* TECH STACK */}
      <section>
        <h2 className="text-xl font-bold text-white">BUILT WITH</h2>
        <div className="mt-3 grid sm:grid-cols-3 lg:grid-cols-4 gap-2">
          {[
            { k:"Frontend", v:"Next.js • React • Tailwind" },
            { k:"Backend", v:"Node.js" },
            { k:"Database", v:"Configurable" },
            { k:"Infra", v:"Pterodactyl • Docker • Linux" },
            { k:"Auth", v:"Accounts • Credits" },
            { k:"Hosting", v:"Zyphron Cloud" },
          ].map(s=>(
            <div key={s.k} className="rounded-xl border border-white/10 bg-white/[0.04] p-3"><p className="text-xs tracking-widest text-white/30">{s.k}</p><p className="text-sm text-white/70">{s.v}</p></div>
          ))}
        </div>
        <p className="text-xs text-white/20 mt-2">Configurable from project data — no invented stack.</p>
      </section>

      {/* TERMINAL */}
      <section>
        <div className="rounded-[18px] border border-white/10 bg-[#0a0d12] overflow-hidden">
          <div className="flex items-center justify-between px-4 py-3 bg-white/[0.04] border-b border-white/10"><span className="font-mono text-xs text-white/40">ravneet@freedash:~$ status</span><span className="text-xs text-emerald-400">●</span></div>
          <div className="p-5 font-mono text-xs leading-relaxed text-white/60">
            <div>Product: FreeDash<br />Platform: Zyphron Cloud<br />Type: Free Hosting</div>
            <div className="mt-3">$ infrastructure<br />Pterodactyl<br />Servers<br />Automation</div>
            <div className="mt-3">$ deployment<br /><span className="text-emerald-400">AUTO-PROVISIONING</span></div>
          </div>
        </div>
      </section>

      {/* HOST FOR FREE */}
      <section className="rounded-[24px] border border-emerald-500/20 bg-gradient-to-br from-emerald-500/10 to-transparent p-6 sm:p-8 text-center">
        <h2 className="text-[28px] font-[800] tracking-tight text-white">HOST FOR FREE.</h2>
        <p className="text-sm text-white/60 mt-1">Create an account, earn credits and redeem them for hosting. No credit card required (per live site).</p>
        <div className="mt-4 flex flex-wrap justify-center gap-3">
          <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="px-6 py-2.5 rounded-full bg-white text-black font-semibold text-sm">GET STARTED FREE ↗</a>
          <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="px-6 py-2.5 rounded-full border border-white/15 text-white font-semibold text-sm">LEARN MORE ↗</a>
        </div>
      </section>

      {/* RELATIONSHIP */}
      <section className="text-center py-6 border-y border-white/10">
        <h2 className="text-xl font-bold text-white">ONE ECOSYSTEM. DIFFERENT WAYS TO HOST.</h2>
        <div className="mt-4 flex flex-col items-center gap-1.5 font-mono text-xs max-w-[500px] mx-auto">
          <span className="px-6 py-2 rounded-full bg-[#2563eb] text-white font-bold">ZYPHRON CLOUD</span>
          <span className="w-px h-4 bg-white/20" />
          <div className="flex gap-3 w-full justify-center"><span className="flex-1 py-2 rounded-full bg-white text-black font-semibold">PREMIUM HOSTING</span><span className="flex-1 py-2 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 font-semibold">FREEDASH • FREE HOSTING</span></div>
          <span className="w-px h-4 bg-white/20" />
          <span className="px-4 py-2 rounded-full bg-white/10 border border-white/10 text-white/60">INFRASTRUCTURE</span>
        </div>
        <div className="mt-4 flex justify-center gap-3">
          <a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="px-4 py-2 rounded-full bg-white text-black font-semibold text-sm">Zyphron Cloud →</a>
          <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="px-4 py-2 rounded-full bg-emerald-500 text-white font-semibold text-sm">FreeDash →</a>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="text-center py-8">
        <h2 className="text-[28px] font-[800] tracking-tight text-white">WANT TO SEE IT FOR YOURSELF?</h2>
        <p className="text-sm text-white/50 mt-1">Free hosting for game servers and Discord bots.</p>
        <div className="mt-4 flex flex-wrap justify-center gap-3">
          <a href="https://freedash.zyphron.cloud/" target="_blank" rel="noopener noreferrer" className="px-6 py-2.5 rounded-full bg-white text-black font-semibold text-sm">VISIT FREEDASH ↗</a>
          <a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="px-6 py-2.5 rounded-full bg-[#2563eb] text-white font-semibold text-sm">EXPLORE ZYPHRON CLOUD ↗</a>
          <a href="/work" className="px-6 py-2.5 rounded-full border border-white/15 text-white font-semibold text-sm">BACK TO WORK →</a>
        </div>
      </section>
    </div>
  );
}