page.js

'use client'
import { useRef } from "react"
import { motion, useScroll, useTransform } from "framer-motion"
import styles from "./page.module.css"
import Hero3D from "@/components/Hero3D"
import LiveTerminal from "@/components/LiveTerminal"
import ServerStatus from "@/components/ServerStatus"
import PricingSection from "@/components/PricingSection"
import ContactForm from "@/components/ContactForm"
import ServicesSection from "@/components/ServicesSection"
import PartnersSection from "@/components/PartnersSection"

const fadeUp = {
  initial: { opacity: 0, y: 60 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-100px" },
  transition: { duration: 0.7, ease: [0.4, 0, 0.2, 1] },
}

export default function Home() {
  const heroRef = useRef(null)
  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ["start start", "end start"],
  })
  const heroScale = useTransform(scrollYProgress, [0, 1], [1, 1.1])
  const heroOpacity = useTransform(scrollYProgress, [0, 0.8], [1, 0])

  return (
    <>
      {/* HERO */}
      <section ref={heroRef} className={styles.hero}>
        <motion.div className={styles.heroBg} style={{ scale: heroScale }}>
          <Hero3D />
        </motion.div>
        <motion.div className={styles.heroOverlay} style={{ opacity: heroOpacity }} />

        <motion.div
          className={styles.heroContent}
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, ease: [0.4, 0, 0.2, 1] }}
        >
          <motion.span
            className="holo-badge"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.3, duration: 0.5 }}
          >
            <span className="pulse-dot" />
            SISTEMA OPERACIONAL — ANO 2150
          </motion.span>

          <motion.h1
            className={styles.heroTitle}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.8 }}
          >
            Infraestrutura
            <br />
            <span className={styles.heroTitleAccent}>do Futuro</span>
          </motion.h1>

          <motion.p
            className={styles.heroSubtitle}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.8, duration: 0.8 }}
          >
            Hospedagem de próxima geração com{" "}
            <span>servidores quânticos</span>, cloud neural e
            infraestrutura hiperconectada.
          </motion.p>

          <motion.div
            className={styles.heroActions}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1, duration: 0.6 }}
          >
            <a href="#precos" className="btn btn-primary">
              Explorar Planos
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <path d="M5 12h14m-7-7 7 7-7 7" />
              </svg>
            </a>
            <a href="#terminal" className="btn btn-ghost">
              Terminal ao Vivo
            </a>
          </motion.div>

          <motion.div
            className={styles.heroStats}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1.3, duration: 0.6 }}
          >
            {[
              { value: "99.98%", label: "Uptime" },
              { value: "<5ms", label: "Latência" },
              { value: "∞", label: "Escalabilidade" },
              { value: "24/7", label: "Suporte IA" },
            ].map((stat, i) => (
              <div key={i} className={styles.heroStat}>
                <div className={styles.heroStatValue}>{stat.value}</div>
                <div className={styles.heroStatLabel}>{stat.label}</div>
              </div>
            ))}
          </motion.div>
        </motion.div>
      </section>

      {/* LIVE TERMINAL */}
      <section id="terminal" className={styles.section}>
        <div className="container">
          <motion.h2 className="section-title" {...fadeUp}>
            Terminal ao Vivo
          </motion.h2>
          <motion.p className="section-subtitle" {...fadeUp}>
            Monitoramento em tempo real do cluster GhzHost. Dados atualizados a cada 5 segundos.
          </motion.p>
        </div>
        <motion.div {...fadeUp}>
          <LiveTerminal />
        </motion.div>
      </section>

      {/* SERVICES */}
      <motion.div {...fadeUp}>
        <ServicesSection />
      </motion.div>

      {/* PRICING */}
      <motion.div {...fadeUp}>
        <PricingSection />
      </motion.div>

      {/* SERVER STATUS */}
      <motion.div {...fadeUp}>
        <ServerStatus />
      </motion.div>

      {/* PARTNERS */}
      <motion.div {...fadeUp}>
        <PartnersSection />
      </motion.div>

      {/* CTA */}
      <section className={styles.cta}>
        <div className={`glass-card hud-corners ${styles.ctaBox}`}>
          <motion.h2
            className={styles.ctaTitle}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            Pronto para o Futuro?
          </motion.h2>
          <motion.p
            className={styles.ctaDesc}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2, duration: 0.6 }}
          >
            Junte-se a centenas de projetos que já rodam na infraestrutura
            mais avançada do Brasil.
          </motion.p>
          <motion.div
            className={styles.ctaActions}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4, duration: 0.6 }}
          >
            <a href="#precos" className="btn btn-primary">
              Começar Agora
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <path d="M5 12h14m-7-7 7 7-7 7" />
              </svg>
            </a>
            <a href="#contato" className="btn btn-ghost">
              Falar Conosco
            </a>
          </motion.div>
        </div>
      </section>

      {/* CONTACT */}
      <motion.div {...fadeUp}>
        <ContactForm />
      </motion.div>
    </>
  )
}