// FeatureTriad, three KxWelcome pillars.
const FeatureTriad = () => {
  const features = [
    {
      key: 'arrivals',
      icon: '⇢',
      eyebrow: 'A R R I V A L S',
      title: 'Every student knows when, where, and who.',
      body: 'Students book a slot that works for them. Your team sees live arrival flow, so nobody waits on the curb and nobody checks in twice.',
      cta: 'See arrivals →',
    },
    {
      key: 'documents',
      icon: '✓',
      eyebrow: 'D O C U M E N T S',
      title: 'Paperwork, done before they land.',
      body: 'Leases, health forms, IDs, emergency contacts, collected, checked, and filed before students arrive. No clipboards, no queues.',
      cta: 'See documents →',
    },
    {
      key: 'keys',
      icon: '⌂',
      eyebrow: 'K E Y S   &   R O O M S',
      title: 'Right room, right key, right away.',
      body: 'Room assignments sync to your housing system. Keys and fobs are matched to each student and issued in seconds at check-in.',
      cta: 'See keys & rooms →',
    },
  ];
  return (
    <section className="k-triad" id="features">
      <div className="k-section__header">
        <div className="k-eyebrow">T H E &nbsp; P L A T F O R M</div>
        <h2 className="k-section__title">One platform, every step of move-in.</h2>
      </div>
      <div className="k-triad__grid">
        {features.map((f) => (
          <article key={f.key} className="k-feat-card">
            <div className="k-feat-card__icon" aria-hidden="true">{f.icon}</div>
            <div className="k-feat-card__eyebrow" dangerouslySetInnerHTML={{__html: f.eyebrow}} />
            <h3 className="k-feat-card__title">{f.title}</h3>
            <p className="k-feat-card__body">{f.body}</p>
            <a href="#" className="k-feat-card__link">{f.cta}</a>
          </article>
        ))}
      </div>
    </section>
  );
};
window.FeatureTriad = FeatureTriad;