import { Helmet } from 'react-helmet-async';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { HiHeart, HiUserGroup, HiHand, HiSparkles } from 'react-icons/hi';

const ways = [
  {
    icon: <HiHeart size={32} />,
    title: 'Make a Donation',
    desc: 'Donate securely via our donation page or use UPI / Bank Transfer. Every contribution creates real impact.',
    link: '/donate',
    btnText: 'Donate Now',
    color: '#EC4899',
    bg: '#fdf2f8',
  },
  {
    icon: <HiUserGroup size={32} />,
    title: 'Become a Volunteer',
    desc: 'Contact us to contribute your time or expertise. Together, we can make a difference on the ground.',
    link: '/volunteer',
    btnText: 'Join Us',
    color: '#2D6A4F',
    bg: '#ecfdf5',
  },
  {
    icon: <HiHand size={32} />,
    title: 'Request Help',
    desc: 'In need of support? Submit a help request and our team will reach out.',
    link: '/help-request',
    btnText: 'Get Help',
    color: '#3B82F6',
    bg: '#eff6ff',
  },
  {
    icon: <HiSparkles size={32} />,
    title: 'Corporate Partnership',
    desc: 'Corporate CSR partnerships aligned with the Companies Act. Let\'s create large-scale impact together.',
    link: '/contact',
    btnText: 'Partner With Us',
    color: '#F59E0B',
    bg: '#fffbeb',
  },
];

export default function GetInvolved() {
  return (
    <>
      <Helmet>
        <title>Get Involved — Social Share and Care Foundation</title>
      </Helmet>

      <section className="about-hero">
        <div className="about-hero__bg" />
        <div className="container">
          <motion.div className="about-hero__content" initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }}>
            <span className="section-header__tag">🤝 Get Involved</span>
            <h1 className="about-hero__title">Join the Movement</h1>
            <p className="about-hero__subtitle">
              There are many ways to make a difference. Choose what works for you.
            </p>
          </motion.div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
            {ways.map((item, i) => (
              <motion.div
                key={item.title}
                className="card"
                style={{ padding: '2.5rem', textAlign: 'center' }}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
              >
                <div style={{
                  width: 72, height: 72, borderRadius: '16px', background: item.bg,
                  color: item.color, display: 'inline-flex', alignItems: 'center',
                  justifyContent: 'center', marginBottom: '1.25rem'
                }}>
                  {item.icon}
                </div>
                <h3 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>{item.title}</h3>
                <p style={{ color: '#6B7280', lineHeight: '1.7', marginBottom: '1.5rem' }}>{item.desc}</p>
                <Link to={item.link} className="btn btn--primary btn--sm">
                  {item.btnText}
                </Link>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}