const NOTICES = [
  {
    tag: 'NO. 1 RANKED',
    date: 'AUGUST 12, 2025',
    title: <>Nanchang's <em>#1 Inbound</em> Travel Agency, Q2 2025</>,
    body: <>The Nanchang Municipal Bureau of Culture, Radio, Television, and Tourism ranked Jiangxi HeartEase International Travel <strong>first among all Nanchang agencies</strong> for inbound tourist reception volume in Q2 2025. The notice recognizes the top five agencies as "exemplary benchmarks for service quality, tourism integrity, and lawful operation."</>,
    authority: '南昌市文化广电旅游局',
    authoritySub: 'Nanchang Municipal Bureau of Culture, Radio, Television and Tourism · Government Site Code 3601000054'
  },
  {
    tag: 'DOUBLE AWARDED',
    date: 'JANUARY 8, 2026',
    title: <>2025 <em>Inbound + Domestic</em> Tourism Award</>,
    body: <>The bureau's 2025 annual recognition list named HeartEase for excellence in <strong>both inbound and domestic tourism</strong> — one of only a handful of agencies to receive both honors. Following independent audit of operational records, service quality, and compliance, the list was published for public scrutiny.</>,
    authority: '南昌市文化广电旅游局',
    authoritySub: 'Index No. A00290-0403-2026-0001 · Validity: In Effect · Public Disclosure'
  }
];

function Recognition() {
  return (
    <section className="hh-rec">
      <div className="hh-rec__wm" aria-hidden>认官<br />房间</div>
      <div className="hh-rec__inner">
        <div className="hh-rec__head">
          <div className="hh-rec__eyebrow">— OFFICIAL GOVERNMENT RECOGNITION —</div>
          <h2 className="hh-rec__title">
            Vetted, ranked, and <span className="hh-rec__title-em">publicly recognized.</span>
          </h2>
          <p className="hh-rec__sub">
            In China, tourism agencies are evaluated and ranked by municipal authorities — not by self-claim. HeartEase has been officially recognized twice in 2025 by the Nanchang Municipal Bureau of Culture, Radio, Television, and Tourism. Both notices are publicly verifiable on government websites.
          </p>
        </div>
        <div className="hh-rec__grid">
          {NOTICES.map((n) => (
            <article key={n.tag} className="hh-rec__card">
              <span className="hh-rec__tag">{n.tag}</span>
              <div className="hh-rec__card-date">PUBLISHED {n.date}</div>
              <h3 className="hh-rec__card-title">{n.title}</h3>
              <p className="hh-rec__card-body">{n.body}</p>
              <div className="hh-rec__card-foot">
                <div className="hh-rec__card-auth-label">Issuing Authority</div>
                <div className="hh-rec__card-auth"><span className="hh-cn">{n.authority}</span></div>
                <div className="hh-rec__card-auth-sub">{n.authoritySub}</div>
              </div>
              <a className="hh-rec__view" href="#">VIEW ORIGINAL NOTICE <span aria-hidden>→</span></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Recognition = Recognition;