"use client";
import React from "react";
import GsapReveal from "@/components/common/GsapReveal";

const challengesData = [
  {
    num: "01",
    challenge: "Resistance to change from staff",
    approach: "Structured training and phased rollout to build user confidence",
    icon: "fa-users-slash",
  },
  {
    num: "02",
    challenge: "Messy or incomplete legacy data",
    approach: "Data cleansing and validation before migration",
    icon: "fa-database",
  },
  {
    num: "03",
    challenge: "Scope creep and delayed go-live",
    approach: "Fixed-milestone project plans with clear sign-off gates",
    icon: "fa-timeline",
  },
  {
    num: "04",
    challenge: "Poor fit with existing processes",
    approach: "Custom workflow configuration instead of forcing standard templates",
    icon: "fa-puzzle-piece",
  },
  {
    num: "05",
    challenge: "Integration failures with existing tools",
    approach: "API-first integration approach tested before go-live",
    icon: "fa-link-slash",
  },
];

const whyChoose = [
  "End-to-end ownership — from consulting and development through data migration and support",
  "Custom-built modules for businesses that don't fit generic templates",
  "Structured, milestone-based implementation process to protect timelines and budgets",
  "Dedicated post-go-live support instead of a one-time handoff",
  "Experience across manufacturing, retail, distribution, and services industries",
];

const Challenges = () => {
  return (
    <>
      {/* ── Common ERP Challenges — challenge → arrow → approach ── */}
      <section style={{ backgroundColor: "#ffffff", padding: "80px 0" }}>
        <div className="container">
          <GsapReveal y={30} duration={0.8}>
            <h2 className="sec-title__title erp-section-title">
              Common ERP Implementation Challenges — and How We Solve Them
            </h2>

            {/* Column headers */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 40px 1fr", gap: "0", marginBottom: "8px", paddingLeft: "52px" }}>
              <p style={{ fontSize: "0.82rem", fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: "0.06em", margin: 0 }}>Challenge</p>
              <div />
              <p style={{ fontSize: "0.82rem", fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: "0.06em", margin: 0 }}>Our Approach</p>
            </div>
          </GsapReveal>

          {/* Challenge rows */}
          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
            {challengesData.map((item, idx) => (
              <GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.08}>
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr 48px 1fr",
                    alignItems: "center",
                    gap: "0",
                    borderRadius: "12px",
                    padding: "18px 20px",
                    backgroundColor: "#f8f9fb",
                    border: "1px solid #edf0f5",
                    transition: "box-shadow 0.3s ease",
                    cursor: "default",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 6px 20px rgba(0,0,0,0.08)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; }}
                >
                  {/* Challenge */}
                  <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
                    <div style={{
                      width: "34px", height: "34px", borderRadius: "50%",
                      backgroundColor: "#1a2e4a",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: "#ffffff", fontSize: "11px", fontWeight: 800, flexShrink: 0,
                    }}>
                      {item.num}
                    </div>
                    <p style={{ fontSize: "0.93rem", fontWeight: 600, color: "#1a1a2e", margin: 0, lineHeight: "1.45" }}>
                      {item.challenge}
                    </p>
                  </div>

                  {/* Arrow */}
                  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                    <svg width="32" height="14" viewBox="0 0 32 14" fill="none">
                      <line x1="0" y1="7" x2="22" y2="7" stroke="#a8c0d8" strokeWidth="1.8" strokeDasharray="3 2" />
                      <polygon points="22,3 32,7 22,11" fill="#a8c0d8" />
                    </svg>
                  </div>

                  {/* Approach */}
                  <p style={{ fontSize: "0.9rem", color: "#555", margin: 0, lineHeight: "1.55" }}>
                    {item.approach}
                  </p>
                </div>
              </GsapReveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── Why Choose Metatron Cube Solutions ── */}
      <section style={{ backgroundColor: "#f4f6fa", padding: "80px 0" }}>
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-5 mb-4 mb-lg-0">
              <GsapReveal y={30} duration={0.8}>
                <h2 className="sec-title__title erp-section-title">
                  Why Choose Metatron Cube Solutions for ERP Development &amp; Implementation
                </h2>
              </GsapReveal>
            </div>
            <div className="col-lg-7">
              <GsapReveal y={30} duration={0.8} delay={0.15}>
                <ul className="list-unstyled mb-0">
                  {whyChoose.map((point, i) => (
                    <li key={i} className="d-flex align-items-start mb-4">
                      <div
                        className="me-3 mt-1 d-flex align-items-center justify-content-center rounded-circle fw-bold text-white"
                        style={{ width: "30px", height: "30px", backgroundColor: "#1a2e4a", fontSize: "0.82rem", flexShrink: 0 }}
                      >
                        {i + 1}
                      </div>
                      <span style={{ fontSize: "1rem", color: "#444", lineHeight: "1.7" }}>{point}</span>
                    </li>
                  ))}
                </ul>
              </GsapReveal>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Challenges;