function Hero() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);
  return (
    <section className="hh-hero">
      <div className="hh-hero__inner">
        <div className="hh-hero__left">
          <div className="hh-eyebrow">— Jiangxi's Most Trusted Inbound Operator</div>
          <h1 className="hh-hero__title">
            The China beyond Beijing &mdash;<br />
            <span className="hh-place">where mist meets porcelain.</span>
          </h1>
          <p className="hh-hero__script">
            Travel with <em>Heart</em>, Discover with <em>Ease</em> <span className="hh-hero__heart" aria-hidden>♡</span>
          </p>
          <p className="hh-hero__body">
            Jiangxi <span className="hh-cn">江西</span> is China's best-kept secret — home to UNESCO-listed Lushan and Sanqingshan mountains, the 1,000-year porcelain capital of Jingdezhen, and Wuyuan's storybook villages. Officially ranked Nanchang's #1 inbound agency, we craft private journeys for Western travelers who want depth, not crowds.
          </p>
          <div className="hh-hero__cta">
            <a className="hh-btn hh-btn--primary" href="#">Plan My Jiangxi Trip <span aria-hidden>→</span></a>
            <a className="hh-btn hh-btn--ghost" href="#">Explore Jiangxi</a>
          </div>
          <hr className="hh-hero__rule" />
          <div className="hh-hero__stats">
            <Stat top="#1" label="Inbound Agency Nanchang 2025" />
            <Stat top={<span>2<span style={{fontSize: '0.7em', marginLeft: 2}}>×</span></span>} label="Government Awarded 2025" />
            <Stat top={<span>4.9<i data-lucide="star" style={{width: 22, height: 22, marginLeft: 4, color: '#D31515', fill: '#D31515'}}></i></span>} label="Verified Traveler Rating" />
            <Stat top="63%" label="Repeat & Referral" />
          </div>
        </div>
        <div className="hh-hero__right">
          <HeroPoster />
        </div>
      </div>
    </section>
  );
}

function Stat({ top, label }) {
  return (
    <div className="hh-stat">
      <div className="hh-stat__top">{top}</div>
      <div className="hh-stat__label">{label}</div>
    </div>
  );
}

function HeroPoster() {
  return (
    <div className="hh-poster">
      <div className="hh-poster__art" aria-hidden>
        <span className="hh-poster__wm">江西</span>
        <svg viewBox="0 0 480 600" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="ridge1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#9CA89F" />
              <stop offset="1" stopColor="#7A8A82" />
            </linearGradient>
            <linearGradient id="ridge2" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#6E8077" />
              <stop offset="1" stopColor="#4E5E58" />
            </linearGradient>
            <linearGradient id="ridge3" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#3F504A" />
              <stop offset="1" stopColor="#293732" />
            </linearGradient>
            <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#D4D9D2" />
              <stop offset="1" stopColor="#B6BFB7" />
            </linearGradient>
          </defs>
          <rect width="480" height="600" fill="url(#sky)" />
          {/* far ridge */}
          <path d="M0,360 C60,330 120,350 200,330 C280,310 340,340 400,320 C440,308 470,318 480,322 L480,600 L0,600 Z" fill="url(#ridge1)" opacity="0.85"/>
          {/* mid ridge */}
          <path d="M0,420 C80,400 160,440 240,410 C320,380 380,420 480,400 L480,600 L0,600 Z" fill="url(#ridge2)"/>
          {/* fore ridge */}
          <path d="M0,490 C60,470 140,510 220,500 C300,490 360,520 480,500 L480,600 L0,600 Z" fill="url(#ridge3)"/>
        </svg>
        <div className="hh-poster__label">— SANQINGSHAN · UNESCO</div>
      </div>
      <div className="hh-poster__cred">
        <div className="hh-poster__cred-eye"><i data-lucide="star" style={{width:11,height:11,fill:'#E6B655',color:'#E6B655'}}></i> OFFICIAL RECOGNITION</div>
        <div className="hh-poster__cred-title">Nanchang <em>#1</em> —<br />Inbound 2025</div>
        <div className="hh-poster__cred-foot">Issued by <span className="hh-cn">南昌市文化广电旅游局</span> · Municipal Bureau of Culture, Radio, Television &amp; Tourism</div>
      </div>
      <div className="hh-poster__review is-placeholder">
        <div className="hh-poster__placeholder-tag">REVIEW · PLACEHOLDER</div>
        <div className="hh-poster__stars" style={{opacity:0.35}}>★★★★★</div>
        <div className="hh-poster__rev-source">SOURCE · VERIFIED</div>
        <blockquote className="hh-poster__rev-quote">"Replace with a real verified traveler quote (2–3 lines)."</blockquote>
        <div className="hh-poster__rev-byline"><strong>Reviewer Name</strong> · City, Country · Month Year</div>
      </div>
    </div>
  );
}

window.Hero = Hero;