/* Audience.jsx — #audience — who self-files with TaxTrail */
const AUDIENCE = [
  ['graduation-cap', 'First-Time & Simple Filers',
   'Students, employees, and anyone with a straightforward return. One T4 and a couple of slips? You can be done in minutes — at a low, flat price with no surprises.'],
  ['home', 'Families',
   'Spouses, dependents, childcare, and tuition transfers handled together. TaxTrail coordinates the whole household and finds family credits you’re owed.'],
  ['briefcase', 'Self-Employed & Gig Workers',
   'Freelancers, rideshare and delivery drivers, and side-hustlers. Report business income and expenses (T2125) with guidance built for real self-employment.'],
];

function AudienceCard({ icon, name, desc }) {
  return (
    <article style={{
      background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 16, padding: '30px 28px',
      boxShadow: 'var(--shadow-sm)', position: 'relative', display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: 12, background: 'var(--teal-50)',
        display: 'grid', placeItems: 'center', color: 'var(--teal-600)',
      }}>
        <Icon name={icon} size={26} />
      </div>
      <h3 style={{ font: 'var(--t-h3)', margin: 0, color: 'var(--fg-1)', letterSpacing: '-0.008em' }}>{name}</h3>
      <p style={{ font: 'var(--t-small)', color: 'var(--fg-2)', margin: 0 }}>{desc}</p>
    </article>
  );
}

function Audience() {
  return (
    <Section id="audience" tint={true}>
      <Container>
        <div style={{ maxWidth: 680, marginBottom: 'clamp(36px, 5vw, 52px)' }}>
          <Eyebrow>Who It’s For</Eyebrow>
          <SectionHeading style={{ marginTop: 18 }}>Built for Canadians Filing Their Own Return</SectionHeading>
          <p style={{ font: 'var(--t-lead)', color: 'var(--fg-2)', marginTop: 20 }}>
            Whether your taxes are simple or a little more involved, TaxTrail meets you where you are —
            guiding you through exactly what applies to you, and nothing that doesn’t.
          </p>
        </div>
        <div className="audience-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {AUDIENCE.map((a) => <AudienceCard key={a[1]} icon={a[0]} name={a[1]} desc={a[2]} />)}
        </div>

        <p style={{ font: 'var(--t-small)', color: 'var(--fg-3)', marginTop: 28, display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="info" size={15} style={{ color: 'var(--teal-600)' }} />
          Are you a professional tax preparer? You’re looking for <a href="#company" style={{ color: 'var(--teal-600)', textDecoration: 'none', fontWeight: 600 }}>TaxAim</a>, our platform for firms and offices.
        </p>
      </Container>
    </Section>
  );
}

window.Audience = Audience;