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

const pricingTiers = [
  {
    label: "Small business",
    sub: "(1–2 modules)",
    timeline: "6–10 weeks",
    timelineDesc: "Lower end of budget — limited customization",
    icon: "fa-building",
    color: "#3b82f6",
  },
  {
    label: "Mid-size business",
    sub: "(3–5 modules)",
    timeline: "3–5 months",
    timelineDesc: "Moderate — custom workflows + data migration",
    icon: "fa-city",
    color: "#8b5cf6",
  },
  {
    label: "Enterprise",
    sub: "(multi-location/full suite)",
    timeline: "6–12+ months",
    timelineDesc: "Higher — deep customization, integrations, multi-site rollout",
    icon: "fa-globe",
    color: "#0ea5e9",
  },
];

const leftIndustries = [
  {
    title: "Manufacturing",
    desc: "production planning, shop-floor control, and cost accuracy",
    icon: "fa-industry",
  },
  {
    title: "Healthcare",
    desc: "compliance-driven records and resource management",
    icon: "fa-hospital",
  },
  {
    title: "Professional Services",
    desc: "project tracking, billing, and resource allocation",
    icon: "fa-briefcase",
  },
];

const rightIndustries = [
  {
    title: "Retail & E-commerce",
    desc: "inventory accuracy, omnichannel order management",
    icon: "fa-store",
  },
  {
    title: "Distribution & Logistics",
    desc: "warehouse, fulfillment, and supply chain visibility",
    icon: "fa-truck-fast",
  },
  {
    title: "Non-profits",
    desc: "fund tracking, transparency, and donor reporting",
    icon: "fa-hand-holding-heart",
  },
];

const PricingAndIndustries = () => {
  return (
    <>
      {/* ── ERP Implementation Cost & Timeline ── */}
      <section style={{ backgroundColor: "#ffffff", padding: "80px 0" }}>
        <div className="container">
          <GsapReveal y={30} duration={0.8}>
            <h2 className="sec-title__title erp-section-title">
              ERP Implementation Cost &amp; Timeline:
            </h2>
            <h2 className="sec-title__title erp-section-title">
              What to Expect
            </h2>
            <p style={{ fontSize: "0.97rem", color: "#555", lineHeight: "1.7", marginBottom: "40px", maxWidth: "620px" }}>
              Every ERP project is scoped differently, but the table below gives a general planning benchmark based on business size and complexity.
            </p>
          </GsapReveal>

          {/* 3-column pricing cards */}
          <div className="row g-4 mb-4">
            {pricingTiers.map((tier, idx) => (
              <div className="col-lg-4" key={idx}>
                <GsapReveal y={30} duration={0.8} delay={idx * 0.1}>
                  <div
                    style={{
                      borderRadius: "14px",
                      border: "1px solid #e8edf3",
                      padding: "28px 24px",
                      backgroundColor: "#fff",
                      boxShadow: "0 2px 12px rgba(0,0,0,0.05)",
                      transition: "box-shadow 0.3s ease, transform 0.3s ease",
                      cursor: "default",
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.boxShadow = "0 10px 28px rgba(0,0,0,0.1)";
                      e.currentTarget.style.transform = "translateY(-4px)";
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.boxShadow = "0 2px 12px rgba(0,0,0,0.05)";
                      e.currentTarget.style.transform = "translateY(0)";
                    }}
                  >
                    {/* Icon */}
                    <div style={{
                      width: "44px", height: "44px", borderRadius: "50%",
                      backgroundColor: `${tier.color}18`,
                      border: `1.5px solid ${tier.color}55`,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: tier.color, fontSize: "18px", marginBottom: "16px",
                    }}>
                      <i className={`fa-solid ${tier.icon}`} />
                    </div>

                    {/* Label */}
                    <p style={{ fontSize: "1rem", fontWeight: 700, color: "#1a1a2e", margin: "0 0 4px" }}>{tier.label}</p>
                    <p style={{ fontSize: "0.82rem", color: "#888", margin: "0 0 20px" }}>{tier.sub}</p>

                    {/* Divider */}
                    <div style={{ height: "1px", backgroundColor: "#f0f0f0", marginBottom: "20px" }} />

                    {/* Timeline */}
                    <p style={{ fontSize: "1.3rem", fontWeight: 800, color: "#1a1a2e", margin: "0 0 6px" }}>{tier.timeline}</p>
                    <p style={{ fontSize: "0.88rem", color: "#666", lineHeight: "1.55", margin: 0 }}>{tier.timelineDesc}</p>
                  </div>
                </GsapReveal>
              </div>
            ))}
          </div>

          {/* Note */}
          <GsapReveal y={15} duration={0.7} delay={0.3}>
            <div style={{
              display: "flex", alignItems: "flex-start", gap: "12px",
              backgroundColor: "#fff8e6", border: "1px solid #f0d070",
              borderRadius: "10px", padding: "16px 20px",
            }}>
              <i className="fa-solid fa-circle-info" style={{ color: "#c8950a", fontSize: "1rem", flexShrink: 0, marginTop: "2px" }} />
              <p style={{ fontSize: "0.88rem", color: "#555", lineHeight: "1.6", margin: 0 }}>
                <strong>Note:</strong> Actual cost and timeline depend on the number of modules, degree of customization, data volume, and integration complexity. A discovery call is the fastest way to get an accurate estimate for your business.
              </p>
            </div>
          </GsapReveal>
        </div>
      </section>

      {/* ── Industries We Serve — hub and spoke ── */}
      <section style={{ backgroundColor: "#f8f9fb", padding: "80px 0" }}>
        <div className="container">
          <GsapReveal y={30} duration={0.8}>
            <h2 className="sec-title__title erp-section-title">
              Industries We Serve
            </h2>
          </GsapReveal>

          <div style={{ display: "flex", alignItems: "center", gap: "0", justifyContent: "center" }}>

            {/* Left industries */}
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "28px", alignItems: "flex-end", paddingRight: "40px" }}>
              {leftIndustries.map((ind, idx) => (
                <GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.1}>
                  <div style={{ textAlign: "right", maxWidth: "220px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: "10px", justifyContent: "flex-end", marginBottom: "4px" }}>
                      <p style={{ fontSize: "0.95rem", fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{ind.title}</p>
                      <div style={{
                        width: "36px", height: "36px", borderRadius: "50%",
                        backgroundColor: "#eef2f8",
                        border: "1.5px solid #c8d8ec",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        color: "#3b6ea8", fontSize: "14px", flexShrink: 0,
                      }}>
                        <i className={`fa-solid ${ind.icon}`} />
                      </div>
                    </div>
                    <p style={{ fontSize: "0.82rem", color: "#777", lineHeight: "1.5", margin: 0 }}>{ind.desc}</p>
                  </div>
                </GsapReveal>
              ))}
            </div>

            {/* Center ERP hub */}
            <GsapReveal y={0} duration={0.9} delay={0.1}>
              <div style={{
                width: "140px", height: "140px", borderRadius: "50%",
                backgroundColor: "#1a2e4a",
                display: "flex", flexDirection: "column",
                alignItems: "center", justifyContent: "center",
                boxShadow: "0 0 0 16px rgba(26,46,74,0.08), 0 0 0 32px rgba(26,46,74,0.04)",
                flexShrink: 0,
                textAlign: "center",
              }}>
                <i className="fa-solid fa-circle-nodes" style={{ color: "#e8a500", fontSize: "24px", marginBottom: "6px" }} />
                <span style={{ fontSize: "0.75rem", fontWeight: 800, color: "#ffffff", letterSpacing: "0.08em", lineHeight: "1.2" }}>ERP<br />SOLUTION</span>
              </div>
            </GsapReveal>

            {/* Right industries */}
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "28px", alignItems: "flex-start", paddingLeft: "40px" }}>
              {rightIndustries.map((ind, idx) => (
                <GsapReveal key={idx} y={20} duration={0.7} delay={idx * 0.1}>
                  <div style={{ textAlign: "left", maxWidth: "220px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "4px" }}>
                      <div style={{
                        width: "36px", height: "36px", borderRadius: "50%",
                        backgroundColor: "#eef2f8",
                        border: "1.5px solid #c8d8ec",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        color: "#3b6ea8", fontSize: "14px", flexShrink: 0,
                      }}>
                        <i className={`fa-solid ${ind.icon}`} />
                      </div>
                      <p style={{ fontSize: "0.95rem", fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{ind.title}</p>
                    </div>
                    <p style={{ fontSize: "0.82rem", color: "#777", lineHeight: "1.5", margin: 0, paddingLeft: "46px" }}>{ind.desc}</p>
                  </div>
                </GsapReveal>
              ))}
            </div>

          </div>
        </div>
      </section>
    </>
  );
};

export default PricingAndIndustries;