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

import googlePlay from "../assets/gp badge.png";
import appStore from "../assets/apple badge.png";

export default function HeroDownloadSection() {
  return (
    <section
      style={{
        marginTop: 20,
        background: "linear-gradient(135deg, #FFFFFF 0%, #FBE9D8 25%, #FB8A8A 50%, #8A3B6F 75%, #83B9FF 100%)",
        color: "white",
        textAlign: "center",
        padding: "130px 20px",
        borderRadius: "20px",
        boxShadow: "0 10px 30px rgba(0,0,0,0.1)",
        fontFamily: "'Poppins', sans-serif",
      }}
    >
      {/* Hero Title */}
      <motion.h1
        initial={{ opacity: 0, y: -50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        style={{
          fontSize: "64px",
          fontWeight: "900",
          marginBottom: "15px",
          lineHeight: 1.1,
          textTransform: "uppercase",
          letterSpacing: "2px",
          userSelect: "none"
        }}
      >
        YOUR STYLE, <br />
        VISUALIZED
      </motion.h1>

      {/* Sub-Headline */}
      <motion.p
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.4, duration: 0.8 }}
        style={{
          fontSize: "20px",
          fontWeight: "400",
          marginBottom: "40px",
          maxWidth: "600px",
          marginLeft: "auto",
          marginRight: "auto",
          userSelect: "none"
        }}
      >
        Download sekarang dan wujudkan penampilan impianmu!
      </motion.p>

      {/* Download Badges */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.8, duration: 0.6 }}
        style={{
          display: "flex",
          justifyContent: "center",
          gap: "20px",
          flexWrap: "wrap",
          userSelect: "none"
        }}
      >
        <a
          href="https://play.google.com/store/apps/details?id=YOUR_APP_ID"
          target="_blank"
          rel="noreferrer"
        >
          <motion.img
            src={googlePlay}
            alt="Google Play"
            style={{ height: 60 }}
            whileHover={{ scale: 1.05 }}
            transition={{ duration: 0.3 }}
          />
        </a>

        <a
          href="https://apps.apple.com/app/idYOUR_APP_ID"
          target="_blank"
          rel="noreferrer"
        >
          <motion.img
            src={appStore}
            alt="App Store"
            style={{ height: 60 }}
            whileHover={{ scale: 1.05 }}
            transition={{ duration: 0.3 }}
          />
        </a>
      </motion.div>
    </section>
  );
}