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

import mock1 from "../assets/Mockup1.png";
import mock2 from "../assets/Mockup2.png";
import mock3 from "../assets/Mockup3.png";
import mock4 from "../assets/Mockup4.png";

export default function ShortCopywriting() {
  const sections = [
    {
      title: "Explore your style effortlessly",
      text: "Try every outfit with real-time AR without visiting stores.",
      img: mock1,
      bg: "#FB4868",
      textColor: "#FFF",
    },
    {
      title: "Discover the best fashion from top marketplaces",
      text: "Browse top marketplace products quickly and easily.",
      img: mock2,
      bg: "#46072C",
      textColor: "#FFF",
    },
    {
      title: "Adjust your measurements for accurate visualization",
      text: "Get accurate AR visualization with personalized sizes.",
      img: mock3,
      bg: "#FBE9D8",
      textColor: "#FFF",
    },
    {
      title: "Revisit your favorite tried outfits",
      text: "Easily access your previously tried clothing anytime.",
      img: mock4,
      bg: "#83B9FF",
      textColor: "#FFF",
    },
  ];

  return (
    <section style={{ padding: "50px 20px", fontFamily: "'Poppins', sans-serif" }}>
      {sections.map((sec, index) => {
        const isLeft = index % 2 === 0;

        return (
          <motion.div
            key={index}
            style={{
              display: "flex",
              flexDirection: isLeft ? "row" : "row-reverse",
              alignItems: "center",
              justifyContent: "center",
              padding: "40px 20px",
              backgroundColor: sec.bg,
              borderRadius: 15,
              marginBottom: 30,
              boxShadow: "0 8px 20px rgba(0,0,0,0.06)",
              gap: 30,
              userSelect: "none"
            }}
            // Animasi Fade In/Out saat scroll
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: false, amount: 0.3 }}
            transition={{ duration: 0.7, ease: "easeOut" }}
          >
            {/* Konten (Gambar dan Teks) */}
            <div
              style={{
                display: "flex",
                flexDirection: isLeft ? "row" : "row-reverse",
                alignItems: "center",
                gap: 30,
                maxWidth: 900,
                width: "100%",
                // Responsiveness sederhana
                "@media (max-width: 768px)": {
                  flexDirection: "column",
                  textAlign: "center",
                },
              }}
            >
              {/* Gambar (Ukuran tetap 280px) */}
              <motion.div
                style={{ flex: "0 0 auto", maxWidth: 280, width: "100%", textAlign: "center" }}
                initial={{ scale: 0.9, opacity: 0 }}
                whileInView={{ scale: 1, opacity: 1 }}
                viewport={{ once: false, amount: 0.5 }}
                transition={{ delay: 0.2, duration: 0.6, ease: "easeOut" }}
              >
                <img
                  src={sec.img}
                  alt={sec.title}
                  style={{
                    width: "100%",
                    height: "auto",

                  }}
                />
              </motion.div>

              {/* Teks */}
              <motion.div
                style={{
                  flex: 1,
                  minWidth: 200,
                  textAlign: isLeft ? "left" : "right",
                  color: sec.textColor,
                  "@media (max-width: 768px)": {
                    textAlign: "center",
                  },
                }}
                initial={{ x: isLeft ? 30 : -30, opacity: 0 }}
                whileInView={{ x: 0, opacity: 1 }}
                viewport={{ once: false, amount: 0.5 }}
                transition={{ delay: 0.3, duration: 0.6, ease: "easeOut" }}
              >
                <h2
                  style={{
                    fontSize: 70, // Diperbesar dari 32px
                    fontWeight: "700",
                    marginBottom: 10,
                    lineHeight: 1.2,
                    textTransform: "capitalize",
                    letterSpacing: "0.2px",
                  }}
                >
                  {sec.title}
                </h2>
                <p style={{ opacity: 0.9, fontSize: 24, lineHeight: 1.5 }}>{sec.text}</p>
                 {/* Diperbesar dari 16px */}
              </motion.div>
            </div>
          </motion.div>
        );
      })}
    </section>
  );
}