// SufiHost Ultra Premium Theme (Next.js + Tailwind + Framer Motion + Three.js Ready)
import { useEffect, useRef, useState } from "react";
import { motion } from "framer-motion";
import * as THREE from "three";

export default function SufiHost() {
  const mountRef = useRef(null);
  const [open, setOpen] = useState(null);

  // 3D Background (Three.js)
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(renderer.domElement);

    const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
    const material = new THREE.MeshBasicMaterial({ color: 0xff00cc, wireframe: true });
    const knot = new THREE.Mesh(geometry, material);
    scene.add(knot);

    camera.position.z = 30;

    const animate = () => {
      requestAnimationFrame(animate);
      knot.rotation.x += 0.01;
      knot.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();
  }, []);

  const faq = [
    { q: "How do I get started?", a: "Choose a plan and sign up." },
    { q: "Do you offer backups?", a: "Yes, daily backups included." },
    { q: "Is support available?", a: "24/7 support available." }
  ];

  return (
    <div className="relative text-white bg-black min-h-screen overflow-hidden">
      {/* 3D Background */}
      <div ref={mountRef} className="absolute top-0 left-0 w-full h-full opacity-20" />

      {/* Header */}
      <div className="flex justify-between p-6 relative z-10">
        <h1 className="text-xl font-bold">SufiHost</h1>
        <div className="space-x-4">
          <button>Login</button>
          <button className="bg-pink-500 px-4 py-2 rounded">Get Started</button>
        </div>
      </div>

      {/* Hero */}
      <motion.div initial={{opacity:0}} animate={{opacity:1}} className="text-center py-24 relative z-10">
        <h2 className="text-5xl font-bold bg-gradient-to-r from-pink-500 to-purple-500 bg-clip-text text-transparent">
          High Performance Hosting
        </h2>
        <p className="opacity-70 mt-4">Fast • Secure • Global Servers</p>
      </motion.div>

      {/* Server Locations */}
      <div className="flex justify-center gap-10 py-10 relative z-10">
        <div>🇩🇪 Germany</div>
        <div>🇳🇱 Netherlands</div>
      </div>

      {/* Pricing */}
      <div className="grid md:grid-cols-3 gap-6 px-10 relative z-10">
        {["Shared","VPS","Dedicated"].map((plan,i)=>(
          <motion.div whileHover={{scale:1.05}} key={i} className="bg-white/10 backdrop-blur p-6 rounded-xl border border-pink-500/20">
            <h3>{plan} Hosting</h3>
            <p className="text-2xl">${i===0?"0.99":i===1?"4.99":"49"}/mo</p>
            <button className="bg-pink-500 px-4 py-2 rounded mt-4">Buy Now</button>
          </motion.div>
        ))}
      </div>

      {/* Testimonials Slider */}
      <div className="overflow-x-auto flex gap-6 p-10 relative z-10">
        {[1,2,3,4].map(i=>(
          <div key={i} className="min-w-[250px] bg-white/10 p-4 rounded">
            ⭐⭐⭐⭐⭐
            <p>Excellent hosting service!</p>
          </div>
        ))}
      </div>

      {/* FAQ */}
      <div className="px-10 relative z-10">
        <h2 className="text-2xl mb-4">FAQ</h2>
        {faq.map((item,i)=>(
          <div key={i}>
            <button onClick={()=>setOpen(open===i?null:i)} className="w-full bg-white/10 p-3 text-left">
              {item.q}
            </button>
            {open===i && <div className="p-3 bg-white/5">{item.a}</div>}
          </div>
        ))}
      </div>

      {/* Payments (SVG style text) */}
      <div className="text-center py-10 relative z-10">
        <h2>Payments</h2>
        <div className="flex justify-center gap-6">
          <span>💳 Visa</span>
          <span>💳 MasterCard</span>
          <span>🅿️ PayPal</span>
          <span>₿ Crypto</span>
        </div>
      </div>

      {/* Footer */}
      <div className="text-center py-6 opacity-60 relative z-10">
        © 2026 SufiHost - All rights reserved
      </div>
    </div>
  );
}

/* STEP BY STEP SETUP:
1. Install Node.js
2. npx create-next-app sufi-host
3. cd sufi-host
4. npm install tailwindcss framer-motion three
5. Replace page.jsx with this code
6. npm run dev

WHMCS Integration:
- Use WHMCS client area link in Buy buttons
- Example: href="https://yourdomain.com/whmcs/cart.php"
*/