import { motion } from "framer-motion";

export default function HomePage() {
  return (
    <div className="min-h-screen text-white" style={{
      background: "radial-gradient(circle at 20% 20%, #0f172a, #020617 60%)",
      fontFamily: "Inter, sans-serif"
    }}>

      {/* NAVBAR */}
      <div style={styles.navbar}>
        <div style={styles.logo}>CalistaHost</div>
        <div style={styles.navlinks}>
          <a style={styles.link}>Accueil</a>
          <a style={styles.link}>Offres</a>
          <a style={styles.link}>FAQ</a>
          <button style={styles.primaryBtn}>Panel</button>
        </div>
      </div>

      {/* HERO */}
      <div style={styles.hero}>
        <div>
          <motion.h1
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            style={styles.title}
          >
            Hébergez votre serveur<br />
            en quelques clics
          </motion.h1>

          <p style={styles.subtitle}>
            Minecraft, FiveM, Rust... Déployez en 1 clic avec une puissance maximale.
          </p>

          <div style={{ display: "flex", gap: 15 }}>
            <button style={styles.primaryBtn}>Commencer</button>
            <button style={styles.secondaryBtn}>Voir les offres</button>
          </div>
        </div>

        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.6 }}
          style={styles.heroCard}
        >
          <div style={styles.glow}></div>
          <p style={{ textAlign: "center" }}>⚡ Serveur prêt en 30s</p>
        </motion.div>
      </div>

      {/* FEATURES */}
      <div style={styles.section}>
        <h2 style={styles.sectionTitle}>Pourquoi choisir CalistaHost</h2>
        <div style={styles.grid4}>
          {[
            "⚡ Ultra rapide",
            "🛡️ Anti-DDoS",
            "☁️ Backups auto",
            "🚀 Performance"
          ].map((f, i) => (
            <div key={i} style={styles.card}>
              {f}
            </div>
          ))}
        </div>
      </div>

      {/* GAMES */}
      <div style={styles.section}>
        <h2 style={styles.sectionTitle}>Jeux populaires</h2>
        <div style={styles.grid4}>
          {["Minecraft", "FiveM", "Rust", "Garry's Mod"].map((g, i) => (
            <div key={i} style={styles.gameCard}>{g}</div>
          ))}
        </div>
      </div>

      {/* INFRA */}
      <div style={styles.sectionFlex}>
        <div style={styles.serverBox}></div>
        <div>
          <h2 style={styles.sectionTitle}>Infrastructure</h2>
          <p style={styles.subtitle}>
            CPU Ryzen, NVMe, réseau 10Gbps, protection Anti-DDoS avancée.
          </p>
          <ul style={styles.list}>
            <li>✔ Haute fréquence</li>
            <li>✔ Latence ultra faible</li>
            <li>✔ Sécurité maximale</li>
          </ul>
        </div>
      </div>

      {/* REVIEWS */}
      <div style={styles.section}>
        <h2 style={styles.sectionTitle}>Avis clients</h2>
        <div style={styles.grid3}>
          {[1,2,3].map((_, i) => (
            <div key={i} style={styles.card}>
              "Incroyable service ⭐⭐⭐⭐⭐"
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={styles.cta}>
        <h2>Une question ?</h2>
        <button style={styles.primaryBtn}>Contactez-nous</button>
      </div>

      {/* FOOTER */}
      <div style={styles.footer}>
        © 2026 CalistaHost
      </div>
    </div>
  );
}

const styles = {
  navbar: {
    display: "flex",
    justifyContent: "space-between",
    padding: "20px 40px",
    backdropFilter: "blur(10px)",
    background: "rgba(15,23,42,0.5)",
    position: "sticky",
    top: 0
  },
  logo: { fontWeight: "bold", fontSize: 20 },
  navlinks: { display: "flex", gap: 20, alignItems: "center" },
  link: { opacity: 0.7, cursor: "pointer" },

  hero: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    padding: "100px 40px",
    alignItems: "center",
    gap: 40
  },

  title: {
    fontSize: "48px",
    fontWeight: "bold",
    marginBottom: 20
  },

  subtitle: {
    color: "#94a3b8",
    marginBottom: 30
  },

  primaryBtn: {
    background: "linear-gradient(135deg,#3b82f6,#6366f1)",
    border: "none",
    padding: "12px 20px",
    borderRadius: "10px",
    color: "white",
    cursor: "pointer",
    boxShadow: "0 0 20px rgba(59,130,246,0.5)"
  },

  secondaryBtn: {
    border: "1px solid #334155",
    padding: "12px 20px",
    borderRadius: "10px",
    background: "transparent",
    color: "white"
  },

  heroCard: {
    position: "relative",
    padding: 60,
    borderRadius: 20,
    background: "rgba(15,23,42,0.7)",
    backdropFilter: "blur(20px)",
    border: "1px solid rgba(255,255,255,0.1)"
  },

  glow: {
    position: "absolute",
    inset: 0,
    background: "radial-gradient(circle, rgba(59,130,246,0.3), transparent)",
    filter: "blur(40px)"
  },

  section: { padding: "80px 40px" },
  sectionFlex: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 40,
    padding: "80px 40px"
  },

  sectionTitle: { fontSize: 28, marginBottom: 30 },

  grid4: {
    display: "grid",
    gridTemplateColumns: "repeat(4,1fr)",
    gap: 20
  },

  grid3: {
    display: "grid",
    gridTemplateColumns: "repeat(3,1fr)",
    gap: 20
  },

  card: {
    padding: 30,
    borderRadius: 15,
    background: "rgba(15,23,42,0.6)",
    border: "1px solid rgba(255,255,255,0.1)",
    backdropFilter: "blur(10px)",
    transition: "0.3s"
  },

  gameCard: {
    padding: 40,
    borderRadius: 15,
    background: "linear-gradient(135deg,#1e293b,#020617)",
    textAlign: "center",
    transition: "0.3s"
  },

  serverBox: {
    height: 200,
    borderRadius: 20,
    background: "linear-gradient(135deg,#3b82f6,#6366f1)",
    boxShadow: "0 0 50px rgba(99,102,241,0.4)"
  },

  list: { marginTop: 20, color: "#cbd5f5" },

  cta: {
    textAlign: "center",
    padding: 80
  },

  footer: {
    textAlign: "center",
    padding: 20,
    borderTop: "1px solid #1e293b",
    color: "#64748b"
  }
};