import Image from "next/image";

export function PricingSection() {
  const essentialFeatures = [
    "Full Project Management",
    "Basic Time Tracking",
    "Chat & Communication",
    "Data History: Access to the last 6 months",
    "Support: Email Support ",
  ];

  const businessFeatures = [
    "Advanced Financial System",
    "Smart Time Tracking",
    "Guest Access",
    "Data History: Unlimited",
    "Full Project Management",
    "Basic Time Tracking",
    "Chat & Communication",
    "Support: Email Support ",
  ];

  const agencyFeatures = [
    "Full Project Management",
    "Basic Time Tracking",
    "Chat & Communication",
    "Data History: Access to the last 6 months",
    "VIP Support",
    "Dedicated API",
    "Dedicated Onboarding",
  ];

  return (
    <section
      id="pricing-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mt-[60px] md:mt-[100px] mb-[120px]"
    >
      {/* Top Header Block (Text, id: 4193:10401, width: 1010, height: 132) */}
      <div className="relative w-full max-w-[1010px] flex flex-col items-center text-center z-20">
        {/* Glow Aura behind badge (Back, id: 4193:10402: Ellipse 1578 & 1579) */}
        <div className="absolute -top-[50px] left-1/2 -translate-x-1/2 w-[180px] h-[180px] pointer-events-none -z-10">
          <div className="absolute inset-0 bg-[#001ac7] rounded-full blur-[80px] opacity-70" />
          <div className="absolute inset-[20px] bg-[#4e66ff] rounded-full blur-[40px] opacity-80" />
        </div>

        {/* Badge (3, id: 4193:10407, width: 40, height: 40) */}
        <div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
          <Image
            src="/assets/images/pricing_header_badge.svg"
            alt=""
            width={100}
            height={100}
            unoptimized
            className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
          />
        </div>

        {/* Text Container (Frame 2095586188, id: 4193:10410, width: 1010, height: 68, itemSpacing: 12) */}
        <div className="w-full flex flex-col items-center gap-[12px]">
          {/* Title (Title, id: 4193:10411, 32px, Inter Medium, #ffffff) */}
          <h2 className="text-white text-[28px] sm:text-[32px] leading-[34px] sm:leading-[39px] font-medium tracking-tight text-center max-w-[1010px]">
            Pick the plan that fits your workflow.
          </h2>

          {/* Subtitle (Subtitle, id: 4193:10412, 14px, Inter Regular, #6f829e) */}
          <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[1010px]">
            Whether you’re managing tasks or running an agency, TeamBy offers flexible plans that align with how your team actually works.
          </p>
        </div>
      </div>

      {/* Pricing Cards Container (Pricing, id: 4193:10216, width: 1216, height: 624) */}
      <div className="relative w-full max-w-[1216px] min-h-[624px] mt-[48px] md:mt-[56px] flex flex-col lg:flex-row items-center lg:items-end justify-center gap-[24px] lg:gap-[25px] z-20">
        {/* Ambient background glows */}
        <div className="absolute left-[200px] bottom-0 w-[400px] h-[400px] pointer-events-none -z-10 opacity-60">
          <Image
            src="/assets/images/pricing_glow_left.png"
            alt=""
            fill
            unoptimized
            className="object-contain"
          />
        </div>
        <div className="absolute left-1/2 -translate-x-1/2 top-0 w-[500px] h-[500px] pointer-events-none -z-10 opacity-70">
          <Image
            src="/assets/images/pricing_glow_center.png"
            alt=""
            fill
            unoptimized
            className="object-contain"
          />
        </div>
        <div className="absolute right-[100px] bottom-[50px] w-[400px] h-[400px] pointer-events-none -z-10 opacity-60">
          <Image
            src="/assets/images/pricing_glow_right.png"
            alt=""
            fill
            unoptimized
            className="object-contain"
          />
        </div>

        {/* 1. Essential Plan Card (Plan, id: 4193:10322, width: 389, height: 556, x: 1, y: 256) */}
        <div
          id="pricing-plan-essential"
          className="relative w-full sm:w-[389px] h-[556px] rounded-[24px] bg-[#080f1a]/50 p-[32px] flex flex-col justify-between overflow-hidden backdrop-blur-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.4)] flex-shrink-0"
          style={{
            border: "1px solid transparent",
            backgroundImage:
              "linear-gradient(#080f1a, #080f1a), linear-gradient(180deg, rgba(76, 118, 255, 0.6) 0%, rgba(76, 118, 255, 0.6) 19%, rgba(76, 118, 255, 0.42) 41.58%, rgba(62, 71, 253, 0.3) 81.04%, rgba(137, 142, 251, 0) 100%)",
            backgroundOrigin: "border-box",
            backgroundClip: "padding-box, border-box",
          }}
        >
          {/* Top section */}
          <div className="flex flex-col gap-[32px] w-full">
            {/* Header + Subtitle Block */}
            <div className="flex flex-col gap-[24px] w-full">
              {/* Title & Badge Row */}
              <div className="flex items-center justify-between w-full h-[36px]">
                <h3
                  className="text-[20px] leading-[24px] font-medium tracking-tight bg-clip-text text-transparent"
                  style={{
                    backgroundImage: "linear-gradient(180deg, #ffffff 0%, #cadaff 100%)",
                  }}
                >
                  Essential
                </h3>
                <div className="flex items-center gap-[16px]">
                  <div className="w-px h-[36px] bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a]" />
                  <div className="relative w-[36px] h-[36px] flex items-center justify-center flex-shrink-0">
                    <Image
                      src="/assets/images/pricing_cube_badge_purple.svg"
                      alt=""
                      width={96}
                      height={96}
                      unoptimized
                      className="w-[96px] h-[96px] max-w-none flex-shrink-0 pointer-events-none select-none"
                    />
                  </div>
                </div>
              </div>

              {/* Subtitle & Divider */}
              <div className="flex flex-col gap-[16px] w-full">
                <p className="text-[#556680] text-[14px] leading-[17px] font-normal text-left h-[34px]">
                  Professional project management without complexity
                </p>
                <div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
              </div>
            </div>

            {/* Price & Divider */}
            <div className="flex flex-col gap-[16px] w-full">
              <div className="flex items-center gap-[8px] h-[39px]">
                <span
                  className="text-[32px] leading-[39px] font-medium bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(75,128,255,0.8)]"
                  style={{
                    backgroundImage: "linear-gradient(180deg, #ffffff 0%, #a2beff 100%)",
                  }}
                >
                  $12
                </span>
                <span className="text-[#6f829e] text-[12px] leading-[15px] font-normal text-left">
                  per<br />month
                </span>
              </div>
              <div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
            </div>

            {/* Features List (Frame 2095586164: w: 299, h: 132, itemSpacing: 8) */}
            <div className="flex flex-col gap-[8px] w-full">
              {essentialFeatures.map((feature, idx) => (
                <div key={idx} className="flex items-center gap-[4px] h-[20px]">
                  <Image
                    src="/assets/images/pricing_check_blue.svg"
                    alt=""
                    width={20}
                    height={20}
                    unoptimized
                    className="w-[20px] h-[20px] flex-shrink-0 pointer-events-none select-none"
                  />
                  <span className="text-[#cbdaef] text-[14px] leading-[17px] font-normal">
                    {feature}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Button (Button, id: 4193:10357, width: 325, height: 44, radius: 12) */}
          <button
            type="button"
            id="pricing-essential-cta"
            className="btn-primary-gradient w-full h-[44px] rounded-[12px] px-[16px] py-[12px] flex items-center justify-center text-white text-[16px] leading-[20px] font-normal hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer shadow-[0_0_25px_rgba(72,126,255,0.35)]"
          >
            Get Started
          </button>
        </div>

        {/* 2. Business Plan Card (Plan, id: 4193:10220, width: 388, height: 584, x: 414, y: 188 - Elevated & Featured) */}
        <div
          id="pricing-plan-business"
          className="relative w-full sm:w-[388px] h-[584px] rounded-[24px] bg-[#03070d] p-[32px] flex flex-col justify-between overflow-hidden shadow-[0_0_50px_rgba(0,24,103,0.5)] flex-shrink-0 z-10"
          style={{
            border: "1px solid transparent",
            backgroundImage:
              "linear-gradient(#03070d, #03070d), linear-gradient(180deg, rgba(173, 191, 255, 0) 0%, rgba(93, 139, 255, 0.5) 20%, rgba(75, 128, 255, 0.7) 35%, #487eff 50%, #3d6fe5 60%, #255cd9 70%, #0e4acc 80%, #0038bf 90%, #0029b2 100%)",
            backgroundOrigin: "border-box",
            backgroundClip: "padding-box, border-box",
          }}
        >
          {/* Card Internal Glow & Particles Background */}
          <div className="absolute inset-0 pointer-events-none overflow-hidden rounded-[24px] -z-10">
            {/* Top-right subtle glow (Ellipse 1072: w: 138, h: 129, color: #032983, blur: 150) */}
            <div className="absolute -top-[20px] -right-[20px] w-[140px] h-[140px] bg-[#032983] rounded-full blur-[60px] opacity-80" />

            {/* Bottom Multi-layer Gradient Graphic (Background Shape, id: 4193:10221) */}
            <div className="absolute -bottom-[50px] -left-[98px] w-[584px] h-[507px] pointer-events-none select-none opacity-90">
              <Image
                src="/assets/images/pricing_business_bg.png"
                alt=""
                width={584}
                height={507}
                unoptimized
                className="w-full h-full object-contain"
              />
            </div>

            {/* Star Constellation Overlay (Container, id: 4193:10272) */}
            <div className="absolute bottom-0 left-0 w-full h-[298px] pointer-events-none select-none">
              <Image
                src="/assets/images/pricing_business_stars.svg"
                alt=""
                width={388}
                height={298}
                unoptimized
                className="w-full h-full object-cover"
              />
            </div>
          </div>

          {/* Top section */}
          <div className="flex flex-col gap-[32px] w-full relative z-10">
            {/* Header + Subtitle Block */}
            <div className="flex flex-col gap-[24px] w-full">
              {/* Title & Badge Row */}
              <div className="flex items-center justify-between w-full h-[36px]">
                <h3
                  className="text-[20px] leading-[24px] font-medium tracking-tight bg-clip-text text-transparent"
                  style={{
                    backgroundImage: "linear-gradient(180deg, #ffffff 0%, #cadaff 100%)",
                  }}
                >
                  Business
                </h3>
                <div className="flex items-center gap-[16px]">
                  <div className="w-px h-[36px] bg-gradient-to-b from-[rgba(4,25,73,0)] via-[#184cc4] to-[rgba(4,25,73,0)]" />
                  <div className="relative w-[36px] h-[36px] flex items-center justify-center flex-shrink-0">
                    <Image
                      src="/assets/images/pricing_cube_badge_blue.svg"
                      alt=""
                      width={96}
                      height={96}
                      unoptimized
                      className="w-[96px] h-[96px] max-w-none flex-shrink-0 pointer-events-none select-none"
                    />
                  </div>
                </div>
              </div>

              {/* Subtitle & Divider */}
              <div className="flex flex-col gap-[16px] w-full">
                <p className="text-[#556680] text-[14px] leading-[17px] font-normal text-left h-[34px]">
                  Growing companies that want to control profitability and costs
                </p>
                <div className="w-full h-px bg-gradient-to-r from-[rgba(25,59,158,0)] via-[#3260eb] to-[rgba(25,59,158,0)]" />
              </div>
            </div>

            {/* Price & Divider */}
            <div className="flex flex-col gap-[16px] w-full">
              <div className="flex items-center gap-[8px] h-[39px]">
                <span
                  className="text-[32px] leading-[39px] font-medium bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(75,128,255,0.8)]"
                  style={{
                    backgroundImage: "linear-gradient(180deg, #ffffff 0%, #a2beff 100%)",
                  }}
                >
                  $49
                </span>
                <span className="text-[#b4caff] text-[12px] leading-[15px] font-normal text-left">
                  per<br />month
                </span>
              </div>
              <div className="w-full h-px bg-gradient-to-r from-[rgba(48,92,207,0)] via-[#557fff] to-[rgba(48,92,207,0)]" />
            </div>

            {/* Features List (Frame 2095586164: w: 206, h: 216, itemSpacing: 8) */}
            <div className="flex flex-col gap-[8px] w-full">
              {businessFeatures.map((feature, idx) => (
                <div key={idx} className="flex items-center gap-[4px] h-[20px]">
                  <Image
                    src="/assets/images/pricing_check_white.svg"
                    alt=""
                    width={20}
                    height={20}
                    unoptimized
                    className="w-[20px] h-[20px] flex-shrink-0 pointer-events-none select-none"
                  />
                  <span className="text-[#f7faff] text-[14px] leading-[17px] font-normal">
                    {feature}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Button (Button, id: 4193:10270, width: 325, height: 44, radius: 12, fill: #8fb0ff 80%) */}
          <button
            type="button"
            id="pricing-business-cta"
            className="relative z-10 w-full h-[44px] rounded-[12px] px-[16px] py-[12px] flex items-center justify-center text-white text-[16px] leading-[20px] font-normal bg-[#8fb0ff]/80 hover:bg-[#8fb0ff] active:scale-[0.98] transition-all cursor-pointer shadow-[0_0_25px_rgba(143,176,255,0.4)] border border-white/40"
          >
            Get Started
          </button>
        </div>

        {/* 3. Agency Plan Card (Plan, id: 4193:10359, width: 389, height: 557, x: 827, y: 256) */}
        <div
          id="pricing-plan-agency"
          className="relative w-full sm:w-[389px] h-[557px] rounded-[24px] bg-[#080f1a]/50 p-[32px] flex flex-col justify-between overflow-hidden backdrop-blur-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.4)] flex-shrink-0"
          style={{
            border: "1px solid transparent",
            backgroundImage:
              "linear-gradient(#080f1a, #080f1a), linear-gradient(180deg, rgba(76, 118, 255, 0.6) 0%, rgba(76, 118, 255, 0.6) 19%, rgba(76, 118, 255, 0.42) 41.58%, rgba(62, 71, 253, 0.3) 81.04%, rgba(137, 142, 251, 0) 100%)",
            backgroundOrigin: "border-box",
            backgroundClip: "padding-box, border-box",
          }}
        >
          {/* Top section */}
          <div className="flex flex-col gap-[32px] w-full">
            {/* Header + Subtitle Block */}
            <div className="flex flex-col gap-[24px] w-full">
              {/* Title & Badge Row */}
              <div className="flex items-center justify-between w-full h-[36px]">
                <h3
                  className="text-[20px] leading-[24px] font-medium tracking-tight bg-clip-text text-transparent"
                  style={{
                    backgroundImage: "linear-gradient(180deg, #ffffff 0%, #cadaff 100%)",
                  }}
                >
                  Agency
                </h3>
                <div className="flex items-center gap-[16px]">
                  <div className="w-px h-[36px] bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a]" />
                  <div className="relative w-[36px] h-[36px] flex items-center justify-center flex-shrink-0">
                    <Image
                      src="/assets/images/pricing_cube_badge_purple.svg"
                      alt=""
                      width={96}
                      height={96}
                      unoptimized
                      className="w-[96px] h-[96px] max-w-none flex-shrink-0 pointer-events-none select-none"
                    />
                  </div>
                </div>
              </div>

              {/* Subtitle & Divider */}
              <div className="flex flex-col gap-[16px] w-full">
                <p className="text-[#556680] text-[14px] leading-[17px] font-normal text-left h-[34px]">
                  Digital agencies and large organizations that need full control and custom branding
                </p>
                <div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
              </div>
            </div>

            {/* Price & Divider */}
            <div className="flex flex-col gap-[16px] w-full">
              <div className="flex items-center gap-[8px] h-[39px]">
                <span
                  className="text-[32px] leading-[39px] font-medium bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(75,128,255,0.8)]"
                  style={{
                    backgroundImage: "linear-gradient(180deg, #ffffff 0%, #a2beff 100%)",
                  }}
                >
                  $59
                </span>
                <span className="text-[#6f829e] text-[12px] leading-[15px] font-normal text-left">
                  per<br />month
                </span>
              </div>
              <div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
            </div>

            {/* Features List (Frame 2095586164: w: 299, h: 188, itemSpacing: 8) */}
            <div className="flex flex-col gap-[8px] w-full">
              {agencyFeatures.map((feature, idx) => (
                <div key={idx} className="flex items-center gap-[4px] h-[20px]">
                  <Image
                    src="/assets/images/pricing_check_blue.svg"
                    alt=""
                    width={20}
                    height={20}
                    unoptimized
                    className="w-[20px] h-[20px] flex-shrink-0 pointer-events-none select-none"
                  />
                  <span className="text-[#cbdaef] text-[14px] leading-[17px] font-normal">
                    {feature}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Button (Button, id: 4193:10399, width: 325, height: 44, radius: 12) */}
          <button
            type="button"
            id="pricing-agency-cta"
            className="btn-primary-gradient w-full h-[44px] rounded-[12px] px-[16px] py-[12px] flex items-center justify-center text-white text-[16px] leading-[20px] font-normal hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer shadow-[0_0_25px_rgba(72,126,255,0.35)]"
          >
            Get Started
          </button>
        </div>
      </div>
    </section>
  );
}