const WONDERS = [
  {
    id: 'lushan',
    eyebrow: 'UNESCO · CULTURAL LANDSCAPE',
    name: 'Lushan',
    cn: '庐山',
    body: 'The "sea of clouds" mountain that inspired 1,500 years of Chinese poetry. Cool summers, dramatic mist, colonial-era stone villas hidden in pine forests.',
    cta: 'VIEW LUSHAN TOURS',
    bg: 'linear-gradient(165deg, #B5C5BE 0%, #4F6760 60%, #28342F 100%)'
  },
  {
    id: 'wuyuan',
    eyebrow: 'MOST BEAUTIFUL COUNTRYSIDE IN CHINA',
    name: 'Wuyuan',
    cn: '婺源',
    body: 'Ancient Hui-style villages of white walls and black tile roofs, terraced canola fields blooming gold in spring, the China of classical paintings.',
    cta: 'VIEW WUYUAN TOURS',
    bg: 'linear-gradient(165deg, #E6C8A8 0%, #BD7D63 55%, #5C3623 100%)'
  },
  {
    id: 'jingdezhen',
    eyebrow: 'PORCELAIN CAPITAL · 1,000+ YEARS',
    name: 'Jingdezhen',
    cn: '景德镇',
    body: 'Where "china" gets its name. Hand-thrown porcelain with masters whose families have been firing kilns since the Ming Dynasty.',
    cta: 'VIEW JINGDEZHEN TOURS',
    bg: 'linear-gradient(165deg, #DCE3DE 0%, #93A5A6 55%, #3F5360 100%)'
  },
  {
    id: 'sanqingshan',
    eyebrow: 'UNESCO WORLD HERITAGE · GEOPARK',
    name: 'Sanqingshan',
    cn: '三清山',
    body: 'Granite spires rising from a sea of cloud — the most surreal landscape in eastern China, a sacred Taoist mountain since the 4th century.',
    cta: 'VIEW SANQINGSHAN TOURS',
    bg: 'linear-gradient(165deg, #C9D1D5 0%, #788995 55%, #2D3C49 100%)'
  },
  {
    id: 'longhu',
    eyebrow: 'BIRTHPLACE OF TAOISM',
    name: 'Mount Longhu',
    cn: '龙虎山',
    body: 'Red sandstone cliffs over the Luxi River, ancient hanging coffins of the Yue people, and the 1,900-year-old Celestial Master sect headquarters.',
    cta: 'VIEW LONGHUSHAN TOURS',
    bg: 'linear-gradient(165deg, #D9B79B 0%, #A87053 55%, #4F2A1D 100%)'
  },
  {
    id: 'tengwang',
    eyebrow: 'NANCHANG · 1,400 YEARS OF HERITAGE',
    name: 'Tengwang Pavilion',
    cn: '滕王阁',
    body: 'One of the Four Great Towers of China. Subject of the most famous prose-poem in Chinese literature. The cultural heart of Jiangxi\u2019s capital.',
    cta: 'VIEW NANCHANG TOURS',
    bg: 'linear-gradient(165deg, #4A5E76 0%, #1F324A 55%, #0A1729 100%)'
  }
];

function WondersGrid() {
  return (
    <section className="hh-wonders">
      <div className="hh-wonders__head">
        <div className="hh-eyebrow">— Six Wonders of Jiangxi</div>
        <h2 className="hh-wonders__title">
          Where most tourists don't go &mdash;<br />
          <span className="hh-place">and that's the point.</span>
        </h2>
        <p className="hh-wonders__sub">
          Jiangxi was the heart of Tang and Song Dynasty China, the birthplace of porcelain, the spiritual home of Taoism. While tour buses crowd Beijing's hutongs, you'll find these landscapes nearly empty.
        </p>
      </div>
      <div className="hh-wonders__grid">
        {WONDERS.map((w) => (
          <article key={w.id} className="hh-wonder" style={{ backgroundImage: w.bg }}>
            <span className="hh-wonder__wm" aria-hidden>{w.cn}</span>
            <div className="hh-wonder__body">
              <div className="hh-wonder__eyebrow">— {w.eyebrow}</div>
              <h3 className="hh-wonder__name">
                {w.name} <span className="hh-wonder__cn">{w.cn}</span>
              </h3>
              <p className="hh-wonder__copy">{w.body}</p>
              <a className="hh-wonder__cta" href="#">{w.cta} <span aria-hidden>→</span></a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.WondersGrid = WondersGrid;