import React from "react";
import { motion } from "framer-motion";

export default function HeroPreview() {
  return (
    <section style={{ position: "relative", height: "100vh", overflow: "hidden" }}>
      <video
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          zIndex: 0,
          filter: "brightness(0.5)",
        }}
        src="https://cdn.videvo.net/videvo_files/video/premium/video0222/large_watermarked/220906_02_Business_Marketing_4K_001_preview.webm"
        autoPlay
        muted
        loop
        playsInline
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundColor: "rgba(0,0,0,0.45)",
          zIndex: 1,
        }}
      />
      <motion.div
        style={{
          position: "relative",
          zIndex: 2,
          color: "white",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          textAlign: "center",
          padding: "0 20px",
        }}
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
      >
        <h1
          style={{
            fontSize: "5vw",
            fontWeight: "900",
            letterSpacing: "0.15em",
            textTransform: "uppercase",
            marginBottom: "0.3em",
          }}
        >
          Nomokraft
        </h1>
        <p style={{ fontSize: "1.5vw", marginBottom: "1.5em" }}>
          Crafting Digital Experiences That Accelerate Your Growth
        </p>
        <div style={{ display: "flex", gap: "2rem" }}>
          <motion.button
            style={{
              padding: "0.85em 3em",
              borderRadius: "40px",
              fontWeight: "700",
              fontSize: "1.1rem",
              cursor: "pointer",
              border: "none",
              background: "linear-gradient(45deg, #00d2ff, #3a47d5)",
              color: "white",
            }}
            whileHover={{ scale: 1.1, boxShadow: "0 0 10px rgb(255 255 255 / 0.8)" }}
          >
            Get Started
          </motion.button>
          <motion.button
            style={{
              padding: "0.85em 3em",
              borderRadius: "40px",
              fontWeight: "700",
              fontSize: "1.1rem",
              cursor: "pointer",
              border: "2px solid white",
              background: "transparent",
              color: "white",
            }}
            whileHover={{ scale: 1.1, boxShadow: "0 0 15px white" }}
          >
            Our Work
          </motion.button>
        </div>
      </motion.div>
    </section>
  );
}