/* Features.jsx — #features — what TaxTrail does for self-filers */
const FEATURES = [
  ['shield-check', 'NETFILE Certified (TY2027 target)',
   'File directly with the CRA — no printing, no mailing, no waiting. NETFILE certification is in active progress for the 2027 filing season.'],
  ['download-cloud', 'Auto-Fill from CRA (AFR)',
   'Pull your T4s, T5s, RRSP and other slips straight from your CRA account. Your numbers arrive accurate — no manual re-entry.'],
  ['list-checks', 'Guided, Jargon-Free',
   'Plain-language questions about your year. TaxTrail picks the right forms and fills them in — you never touch a line number.'],
  ['search-check', 'Built-In Review & Checks',
   'Before you file, TaxTrail checks your return for errors and surfaces credits you may have missed — tuition, medical, and more — so you can file knowing it’s right.'],
  ['map', 'Every Province + Quebec',
   'All 13 provinces and territories supported, including a full Quebec TP-1 return. Wherever you live in Canada, you’re covered.'],
  ['piggy-bank', 'Maximize Your Refund',
   'TaxTrail looks for the credits and deductions people miss — tuition, the Canada Workers Benefit, medical, and more — so you keep what’s yours.'],
  ['tag', 'Simple, Low-Cost Pricing',
   'One flat price per return — the most competitive low-cost filing in Canada. No tiers, no upsells, and no surprise fee waiting for you at checkout.'],
];

function FeatureCard({ icon, name, desc }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 16, padding: 26,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'box-shadow .18s ease, transform .18s ease', height: '100%',
      }}>
      <div style={{
        width: 46, height: 46, borderRadius: 11, background: 'var(--teal-50)',
        display: 'grid', placeItems: 'center', color: 'var(--teal-600)',
      }}>
        <Icon name={icon} size={23} />
      </div>
      <h3 style={{ font: 'var(--t-h4)', margin: '18px 0 9px', color: 'var(--fg-1)', letterSpacing: '-0.005em' }}>{name}</h3>
      <p style={{ font: 'var(--t-small)', color: 'var(--fg-2)', margin: 0 }}>{desc}</p>
    </article>
  );
}

function Features() {
  return (
    <Section id="features">
      <Container>
        <div style={{ maxWidth: 640, marginBottom: 'clamp(36px, 5vw, 56px)' }}>
          <Eyebrow>Features</Eyebrow>
          <SectionHeading style={{ marginTop: 18 }}>Everything You Need to File. Nothing You Don’t.</SectionHeading>
        </div>
        <div className="features-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          {FEATURES.map((f) => <FeatureCard key={f[1]} icon={f[0]} name={f[1]} desc={f[2]} />)}
          {/* 8th cell: closing statement to balance the 3×3 grid */}
          <div style={{
            background: 'var(--navy-800)', borderRadius: 16, padding: 26, color: '#fff',
            display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', overflow: 'hidden',
          }}>
            <TopoBg opacity={0.18} color="var(--teal-300)" />
            <p style={{ position: 'relative', font: '500 18px/1.4 var(--font-serif)', fontStyle: 'italic', color: 'var(--teal-200)', margin: 0 }}>
              One flat price. No surprises at checkout.
            </p>
          </div>
        </div>
      </Container>
    </Section>
  );
}

window.Features = Features;