import React, { useEffect, useState } from "react"; import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, } from "recharts";

export default function Home() { const [stats, setStats] = useState({ viewers: 82, followers: 91, clicks: 59 });

useEffect(() => { const interval = setInterval(() => { setStats((prev) => ({ viewers: prev.viewers + Math.floor(Math.random() * 3), followers: prev.followers + Math.floor(Math.random() * 2), clicks: prev.clicks + Math.floor(Math.random() * 4), })); }, 5000); return () => clearInterval(interval); }, []);

const chartData = [ { name: "Viewers", value: stats.viewers }, { name: "Followers", value: stats.followers }, { name: "Clicks", value: stats.clicks }, ];

return ( <main className="flex min-h-screen flex-col items-center justify-center bg-black text-white p-6 font-sans animate-fadeIn"> <div className="max-w-2xl w-full text-center"> <h1 className="text-5xl font-extrabold mb-4 text-purple-500 animate-pulse drop-shadow-md"> 🚀 Promotion Has Blasted Out! </h1> <p className="text-xl mb-6 text-pink-300"> Twitch streamer <span className="text-white font-semibold">m00n_rav3n</span> is rising fast — don’t miss the magic unfolding live! </p>

<div className="mb-4 text-sm text-gray-400">Updated every 5 seconds to reflect real-time campaign motion</div>

<div className="grid grid-cols-3 gap-4 mb-6">
  <div className="bg-gradient-to-br from-purple-700 to-pink-500 rounded-xl p-4 shadow-lg">
    <p className="text-sm text-white/80">Live Viewers</p>
    <p className="text-2xl font-bold">{stats.viewers}</p>
  </div>
  <div className="bg-gradient-to-br from-blue-700 to-indigo-500 rounded-xl p-4 shadow-lg">
    <p className="text-sm text-white/80">Followers</p>
    <p className="text-2xl font-bold">{stats.followers}</p>
  </div>
  <div className="bg-gradient-to-br from-yellow-600 to-orange-500 rounded-xl p-4 shadow-lg">
    <p className="text-sm text-white/80">Clicks</p>
    <p className="text-2xl font-bold">{stats.clicks}</p>
  </div>
</div>

<div className="bg-gray-900 border border-purple-500 rounded-xl p-4 mb-6">
  <p className="text-sm text-white/70">Campaign Funded</p>
  <p className="text-lg font-semibold text-white">$650</p>
  <p className="text-sm text-white/60 mt-2">Running: May 28, 2025 → June 28, 2025</p>
  <div className="mt-4 w-full bg-purple-900 rounded-full h-2 overflow-hidden">
    <div className="bg-purple-400 h-full animate-progress w-2/3"></div>
  </div>
  <p className="text-xs text-green-400 mt-2">🔥 Traffic is active right now — be part of the momentum</p>
</div>

<div className="w-full h-64 mb-6">
  <ResponsiveContainer width="100%" height="100%">
    <BarChart data={chartData}>
      <XAxis dataKey="name" stroke="#ccc" />
      <YAxis stroke="#ccc" />
      <Tooltip wrapperStyle={{ backgroundColor: "#333", border: "none" }} cursor={false} />
      <Bar dataKey="value" fill="#8B5CF6" radius={[6, 6, 0, 0]} />
    </BarChart>
  </ResponsiveContainer>
</div>

<div className="text-center mb-8">
  <p className="text-lg font-medium text-yellow-300 mb-2">🚧 Campaign strategy includes:</p>
  <ul className="text-sm text-white/80 space-y-1">
    <li>🔹 Paid traffic from targeted gaming pages</li>
    <li>🔹 Reddit, Discord, and Twitch ad rotation</li>
    <li>🔹 Viewer retention optimization tactics</li>
    <li>🔹 Organic reach via social share amplifiers</li>
  </ul>
</div>

<a
  href="https://www.twitch.tv/m00n_rav3n"
  target="_blank"
  rel="noopener noreferrer"
  className="inline-block bg-pink-600 hover:bg-pink-700 text-white font-semibold py-3 px-6 rounded-2xl transition drop-shadow-md text-lg"
>
  🔴 View Stream Now
</a>

<p className="text-sm text-gray-500 mt-6">Generated in real-time for campaign review purposes only.</p>

</div> </main>

); }