frontend/src/sections/vardig/Pricing.jsx

import React, { useState, useRef, useEffect } from "react";
import styled from "styled-components";

// Styled Components
const PricingSection = styled.div`
  padding: 4rem 2rem;
  text-align: center;
`;

const SectionTitle = styled.h2`
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  background: #3267B9;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

const ToggleWrapper = styled.div`
  display: flex;
  justify-content: center;
  max-width: 14rem;
  margin: 0 auto 2rem;
  background: #fff;
  border-radius: 9999px;
  padding: 0.25rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
`;

const ToggleButton = styled.button`
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border: none;
  border-radius: 9999px;
  background: ${({ active }) =>
    active ? "#3267B9" : "transparent"};
  color: ${({ active }) => (active ? "#fff" : "#6b7280")};
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px #c7d2fe;
  }
`;

const PricingGrid = styled.div`
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
`;

const Card = styled.div`
  background: #fff;
  border: ${({ highlighted }) =>
    highlighted ? "2px solid transparent" : "1px solid #e5e7eb"};
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: ${({ highlighted }) =>
    highlighted
      ? "0 4px 15px rgba(16, 185, 129, 0.3)"
      : "0 2px 5px rgba(0, 0, 0, 0.05)"};
  background: ${({ highlighted }) =>
    highlighted ? "#3267B9" : "#fff"};

  &:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
  }
`;

const PopularBadge = styled.div`
  position: absolute;
  top: -10px;
  right: -10px;
  background: #10b981;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
`;

const Title = styled.h3`
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: ${({ highlighted }) => (highlighted ? "#fff" : "#1f2937")};
`;

const Price = styled.div`
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: ${({ highlighted }) => (highlighted ? "#fff" : "#1f2937")};

  span {
    font-size: 1rem;
    font-weight: 500;
    color: ${({ highlighted }) =>
      highlighted ? "rgba(255,255,255,0.7)" : "#6b7280"};
  }
`;

const Description = styled.p`
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  color: ${({ highlighted }) => (highlighted ? "#d1fae5" : "#6b7280")};
`;

const Button = styled.a`
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  ${({ highlighted }) =>
    highlighted
      ? `
    background: #fff;
    color: #3f7ad3;
    &:hover {
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
  `
      : `
    background: #3267B9;
    color: #fff;
    &:hover {
      background: #3f7ad3;
      box-shadow: 0 0 15px rgba(14, 168, 182, 0.5);
    }
  `}
`;

const FeatureList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  color: ${({ highlighted }) => (highlighted ? "#d1fae5" : "#6b7280")};
`;

const FeatureItem = styled.li`
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;

  svg {
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: ${({ highlighted }) => (highlighted ? "#fff" : "#10b981")};
  }
`;

const Pricing = () => {
  const [isAnnual, setIsAnnual] = useState(true);
  const pricingRef = useRef(null);

  // UseEffect hook to handle smooth scrolling on initial load only
  useEffect(() => {
    // Scroll into view with smooth behavior
    if (pricingRef.current) {
      pricingRef.current.scroll({ behavior: "smooth" });
    }
  }, []);

  const plans = [
    {
      title: "Academia",
      monthly: "Free",
      yearly: "Free",
      description: "For research purposes. Institutional E-MailID required.",
      features: [
        "Limited VCF's",
        "Size: <5MB",
        "For research use only",
      ],
    },
    {
      title: "Silver",
      monthly: 30, 
      yearly: 330, 
      description: "Mostly Ideal for small teams and startups.",
      features: [
        "Up to 5 VCF's per month",
        "Size: <5MB",
        "Save $30 /year",
      ],
    },
    {
      title: "Gold",
      monthly: 250,
      yearly: 2700,
      description: "For growing businesses with higher needs.",
      features: [
        "Up to 50 VCF's per month",
        "Size: <5MB",
        "Save $300 /year",
      ],
    },
    {
      title: "Platinum",
      monthly: 1500,
      yearly: 15000,
      description: "For large organizations with high volume.",
      features: [
        "Up to 500 VCF's per month",
        "Size: <5MB",
        "Save $3000 /year",
      ],
    },
  ];

  // Handle Toggle Button Clicks
  const handleToggle = (value) => {
    setIsAnnual(value);
    if (pricingRef.current && typeof pricingRef.current.scroll === 'function') {
      pricingRef.current.scroll({ behavior: "smooth" });
    }
  };

  return (
    <div className="bg-zinc">
      <PricingSection ref={pricingRef}>
        <SectionTitle>Our Pricing Plans</SectionTitle>

        {/* Toggle */}
        <ToggleWrapper>
          <ToggleButton active={isAnnual} onClick={() => handleToggle(true)} aria-label="Yearly">
            Yearly <span></span>
          </ToggleButton>
          <ToggleButton active={!isAnnual} onClick={() => handleToggle(false)} aria-label="Monthly">
            Monthly
          </ToggleButton>
        </ToggleWrapper>

        {/* Pricing Grid */}
        <PricingGrid className="items-center">
          {plans.map((plan, index) => (
            <Card key={index} highlighted={plan.highlighted} data-testid="pricing-card">
              {plan.highlighted && <PopularBadge>Most Popular</PopularBadge>}
              <Title highlighted={plan.highlighted}>{plan.title}</Title>
              <Price highlighted={plan.highlighted}>
                ${isAnnual ? plan.yearly : plan.monthly}
                <span>{isAnnual ? "/year" : "/mo"}</span>
              </Price>
              <Description highlighted={plan.highlighted}>{plan.description}</Description>
              <Button highlighted={plan.highlighted} href="#0">
                {plan.highlighted ? "Get Started" : "Purchase Plan"}
              </Button>
              <FeatureList highlighted={plan.highlighted}>
                {plan.features.map((feature, i) => (
                  <FeatureItem key={i} highlighted={plan.highlighted}>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="#3f7ad3"
                      width="16"
                      height="16"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 4.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 11.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                    {feature}
                  </FeatureItem>
                ))}
              </FeatureList>
            </Card>
          ))}
        </PricingGrid>
      </PricingSection>
    </div>
  );
};

export default Pricing;