/* About.jsx — #how — "How It Works" 3-step guided flow + value intro */
const STEPS = [
  ['download-cloud', 'Import your slips', 'Sign in and pull your T4s, T5s, and other slips straight from the CRA with Auto-Fill my Return. No typing, no digging through paper.'],
  ['list-checks', 'Answer plain questions', 'No tax jargon. TaxTrail asks simple questions about your year and fills in the right forms — federal and provincial — as you go.'],
  ['send', 'Review & NETFILE', 'TaxTrail double-checks your return, flags anything that looks off, and surfaces credits you may have missed. When it looks right, file directly with the CRA in one click.'],
];

function StepCard({ icon, title, desc, n }) {
  return (
    <article style={{ position: 'relative', background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 16, padding: 28, boxShadow: 'var(--shadow-sm)' }}>
      <span style={{ position: 'absolute', top: 22, right: 24, font: '700 40px/1 var(--font-display)', color: 'var(--navy-100)' }}>{n}</span>
      <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--teal-50)', display: 'grid', placeItems: 'center', color: 'var(--teal-600)' }}>
        <Icon name={icon} size={24} />
      </div>
      <h3 style={{ font: 'var(--t-h3)', margin: '18px 0 9px', color: 'var(--fg-1)', letterSpacing: '-0.008em' }}>{title}</h3>
      <p style={{ font: 'var(--t-small)', color: 'var(--fg-2)', margin: 0 }}>{desc}</p>
    </article>
  );
}

function About() {
  return (
    <Section id="how" tint={true}>
      <Container>
        <div style={{ maxWidth: 680, marginBottom: 'clamp(36px, 5vw, 52px)' }}>
          <Eyebrow>How It Works</Eyebrow>
          <SectionHeading style={{ marginTop: 18 }}>Your Whole Return, Three Simple Steps</SectionHeading>
          <p style={{ font: 'var(--t-lead)', color: 'var(--fg-2)', marginTop: 20 }}>
            Filing your own taxes shouldn’t mean guesswork or expensive software. TaxTrail brings the
            same accuracy professionals rely on to your own return — guided start to finish.
          </p>
        </div>

        <div className="features-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {STEPS.map((s, i) => <StepCard key={s[1]} icon={s[0]} title={s[1]} desc={s[2]} n={i + 1} />)}
        </div>

        {/* Pull quote */}
        <figure style={{
          margin: 'clamp(48px, 7vw, 80px) 0 0', paddingTop: 'clamp(40px, 5vw, 56px)',
          borderTop: '1px solid var(--line)',
        }}>
          <blockquote style={{ font: 'var(--t-quote)', color: 'var(--teal-600)', margin: 0, letterSpacing: '-0.01em', fontStyle: 'italic', textWrap: 'balance' }}>
            &ldquo;You handle the living. TaxTrail handles the math.&rdquo;
          </blockquote>
        </figure>
      </Container>
    </Section>
  );
}

window.About = About;