// AudienceCards — photo-led "audience selector" (handoff Direction A).
// Photo on top, white body with name + copy + "Find out more"; clicking scrolls
// to that audience's panel below. Styling lives in colors_and_type.css (.acard*).

function ArrowGlyph() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h9M9 4.5 12.5 8 9 11.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function AudienceCards() {
  const { go } = useRoute();
  const cards = [
    {
      name: "Parents & Caregivers",
      copy: "Supporting kids to participate in activities they want and need to do",
      route: "parents",
      img: "../../assets/images/cards%20-%20Parents.jpg",
    },
    {
      name: "Clinicians",
      copy: "Professional learning grounded in real paediatric practice",
      route: "clinicians",
      img: "../../assets/images/card%20-%20Clinicians.jpg",
    },
    {
      name: "Educators",
      copy: "Services for educational settings",
      route: "educators",
      img: "../../assets/images/card%20-%20Educators.jpg",
    },
    {
      name: "Organisations",
      copy: "Clinical expertise for projects with real-world impact",
      route: "organisations",
      img: "../../assets/images/card%20-%20Organisations.jpg",
    },
  ];

  return (
    <Section scheme="scheme-2" style={{ paddingTop: "4rem" }}>
      <SectionHeader
        title={<>Choose your <span style={{ color: "var(--kl-plum)" }}>starting point</span></>}
        lede="Kid Link works with families, clinicians, educators and organisations, each in a different way."
        mb={48}
        innerMax="48rem"
      />
      <div className="acard-grid">
        {cards.map((c) => (
          <a
            key={c.route}
            href="#"
            className="acard"
            aria-label={`Go to ${c.name}`}
            onClick={(e) => { e.preventDefault(); go(c.route); }}
          >
            <div className="acard__photo"><img src={c.img} alt="" /></div>
            <div className="acard__body">
              <h3 className="acard__name">{c.name}</h3>
              <p className="acard__copy">{c.copy}</p>
              <span className="acard__cta"><span>Find out more</span><ArrowGlyph /></span>
            </div>
          </a>
        ))}
      </div>
    </Section>
  );
}

window.AudienceCards = AudienceCards;