import { motion } from "framer-motion";
import { FaCode, FaCreditCard, FaBolt, FaServer, FaExchangeAlt, FaBrain } from "react-icons/fa";
import { SiStripe } from "react-icons/si";
import { useTranslation } from "react-i18next";

const containerVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.1 } },
};

const cardVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease: "easeOut" as const } },
};

export default function WebDevSection() {
  const { t } = useTranslation("home");

  const FEATURES = [
    {
      icon: <FaCode />,
      color: "#87a9da",
      title: t("webdev.features.customWebDev.title"),
      desc:  t("webdev.features.customWebDev.desc"),
    },
    {
      icon: <FaCreditCard />,
      color: "#70A288",
      title: t("webdev.features.paymentGateways.title"),
      desc:  t("webdev.features.paymentGateways.desc"),
    },
    {
      icon: <FaBolt />,
      color: "#CAF0F8",
      title: t("webdev.features.realTimeApps.title"),
      desc:  t("webdev.features.realTimeApps.desc"),
    },
    {
      icon: <FaServer />,
      color: "#24719f",
      title: t("webdev.features.serverHosting.title"),
      desc:  t("webdev.features.serverHosting.desc"),
    },
    {
      icon: <FaExchangeAlt />,
      color: "#70A288",
      title: t("webdev.features.easyMigration.title"),
      desc:  t("webdev.features.easyMigration.desc"),
    },
    {
      icon: <FaBrain />,
      color: "#87a9da",
      title: t("webdev.features.recommendationEngine.title"),
      desc:  t("webdev.features.recommendationEngine.desc"),
    },
  ];

  return (
    <section id="webdev" className="section" style={{ background: "var(--c-background)" }}>
      <div className="container">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          viewport={{ once: true }}
          style={{ textAlign: "center", marginBottom: "3.5rem" }}
        >
          <span style={{
            display: "inline-block",
            padding: "0.3em 0.9em",
            borderRadius: "9999px",
            background: "color-mix(in hsl, var(--c-boxes), transparent 75%)",
            border: "1px solid color-mix(in hsl, var(--c-lines), transparent 55%)",
            color: "var(--c-lines)",
            fontSize: "0.78rem",
            fontWeight: 700,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            marginBottom: "1rem",
          }}>
            {t("webdev.badge")}
          </span>
          <h2 style={{ fontSize: "clamp(1.9rem, 4.5vw, 3rem)", fontWeight: 800, margin: "0 0 1rem" }}>
            {t("webdev.title")} <span className="text-rainbow">{t("webdev.titleHighlight")}</span>
          </h2>
          <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 35%)", maxWidth: "520px", margin: "0 auto", lineHeight: 1.7 }}>
            {t("webdev.subtitle")}
          </p>
        </motion.div>

        {/* Grid */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))",
            gap: "1.2rem",
          }}
        >
          {FEATURES.map(({ icon, color, title, desc }) => (
            <motion.div
              key={title}
              variants={cardVariants}
              whileHover={{ scale: 1.03, y: -4 }}
              transition={{ type: "spring", stiffness: 280, damping: 22 }}
              className="glass"
              style={{ padding: "1.8rem", display: "flex", flexDirection: "column", gap: "1rem", cursor: "default" }}
            >
              <div style={{
                width: "2.8rem",
                height: "2.8rem",
                borderRadius: "0.75rem",
                background: `color-mix(in hsl, ${color}, transparent 80%)`,
                border: `1px solid color-mix(in hsl, ${color}, transparent 55%)`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: "1.25rem",
                color: color,
              }}>
                {icon}
              </div>
              <div>
                <h3 style={{ margin: "0 0 0.5rem", fontSize: "1.05rem", fontWeight: 700 }}>{title}</h3>
                <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 35%)", fontSize: "0.9rem", lineHeight: 1.65 }}>{desc}</p>
              </div>
            </motion.div>
          ))}
        </motion.div>

        {/* Payment logos strip */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          viewport={{ once: true }}
          style={{
            marginTop: "3rem",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: "2rem",
            flexWrap: "wrap",
          }}
        >
          <span style={{ color: "color-mix(in hsl, var(--c-text), transparent 50%)", fontSize: "0.85rem" }}>{t("webdev.paymentIntegrations")}</span>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", color: "#635bff" }}>
            <SiStripe style={{ fontSize: "1.5rem" }} />
            <span style={{ fontWeight: 700, fontSize: "1rem" }}>Stripe</span>
            <span style={{ color: "color-mix(in hsl, var(--c-text), transparent 50%)", fontSize: "0.78rem" }}>{t("webdev.international")}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", color: "var(--c-other)" }}>
            <span style={{ fontWeight: 700, fontSize: "1rem", fontFamily: "monospace" }}>ČSOB</span>
            <span style={{ color: "color-mix(in hsl, var(--c-text), transparent 50%)", fontSize: "0.78rem" }}>{t("webdev.czechMarket")}</span>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
