import "./Nosotros.css";
import { motion } from "framer-motion";
import licoria from "../assets/video/LICORERIAVIETICASOFT.mp4";
// Estilos inline para evitar error de CSS no encontrado
const styles = {
  section: {
    background: "#ffffff",
    color: "#000000",
    padding: "80px 20px",
  },
  container: {
    maxWidth: "1100px",
    margin: "auto",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
    gap: "40px",
    alignItems: "center",
  },
  imageBox: {
    position: "relative",
  },
  img: {
    width: "100%",
    borderRadius: "16px",
    boxShadow: "0 10px 30px rgba(0,0,0,0.5)",
  },
  play: {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    background: "#e50914",
    width: "70px",
    height: "70px",
    borderRadius: "50%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "24px",
    cursor: "pointer",
  },
  content: {
    animation: "fadeRight 0.8s ease",
  },
  title: {
    fontSize: "36px",
    marginBottom: "15px",
  },
  red: {
    color: "#e50914",
  },
  text: {
    color: "#000000",
    marginBottom: "25px",
  },
  feature: {
    display: "flex",
    gap: "15px",
    marginBottom: "15px",
  },
  icon: {
    fontSize: "24px",
    color: "#e50914",
  },
};

const Nosotros = () => {
  return (
    <section style={styles.section}>
      <div style={styles.container}>
        {/* IZQUIERDA */}
        <div style={styles.imageBox}>
          <video src={licoria} controls />
          <div style={styles.play}>▶</div>
        </div>

        {/* DERECHA */}
        <div style={styles.content}>
          <h2 style={styles.title}>
            <span style={styles.red}>10 años</span> de experiencia
          </h2>

          <p style={styles.text}>
            En <strong>VIETICASOFT</strong>, desarrollamos soluciones
            tecnológicas modernas para negocios.
          </p>

          <div>
            <div style={styles.feature}>
              <div style={styles.icon}>📄</div>
              <div>
                <h4>Facturación Electrónica</h4>
                <p style={{ color: "#aaa", fontSize: "14px" }}>
                  Integrado con SUNAT.
                </p>
              </div>
            </div>

            <div style={styles.feature}>
              <div style={styles.icon}>🔒</div>
              <div>
                <h4>Seguridad</h4>
                <p style={{ color: "#aaa", fontSize: "14px" }}>
                  Protección de datos.
                </p>
              </div>
            </div>

            <div style={styles.feature}>
              <div style={styles.icon}>👨‍💻</div>
              <div>
                <h4>Soporte</h4>
                <p style={{ color: "#aaa", fontSize: "14px" }}>
                  Asesoría especializada.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Nosotros;
