/* global React, IconStar, IconHalfStar, IconArrow, IconWhatsApp, IconDoctify, IconCrown */

function Hero({ onBook }) {
  return (
    <section id="home" className="hero">
      <div className="container hero__grid">
        <div className="hero__copy">
          <div className="crown-ornament">
            <IconCrown size={14} />
            <span>Empire Dental Clinic · Est. Business Bay</span>
          </div>
          <h1 className="hero__title">
            A smile you'll <em>love</em>,<br/>
            from a dentist you'll <em>trust</em>.
          </h1>
          <p className="hero__sub">
            Cosmetic & general dentistry in Business Bay — quietly led by Dr Ammar Kayali for over a decade, with orthodontics by specialist Dr Khaled Rajab. Veneers, Invisalign, implants and whitening, with a near-perfect verified rating.
          </p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg" onClick={onBook}>
              Book a Consultation <IconArrow size={16} />
            </button>
            <a className="btn btn--ghost btn--lg" href="#whatsapp" onClick={e => e.preventDefault()}>
              <IconWhatsApp size={18} /> WhatsApp
            </a>
          </div>

          <div className="hero__meta">
            <div className="hero__metaItem">
              <div className="lbl">Rated on Doctify</div>
              <div className="val serif">4.98<span style={{ fontSize: '14px', color: 'var(--slate)', marginLeft: 6, fontFamily: 'var(--sans)', fontWeight: 400 }}>/ 5 · 20 reviews</span></div>
            </div>
            <div className="hero__metaItem">
              <div className="lbl">DHA-licensed dentists</div>
              <div className="val">2 specialists · 30+ yrs combined</div>
            </div>
            <div className="hero__metaItem">
              <div className="lbl">Location</div>
              <div className="val">Empire Heights · Business Bay</div>
            </div>
          </div>
        </div>

        <div className="hero__visual">
          <div className="hero__photo">
            <img src="media/interior-burj.webp" alt="Treatment room overlooking Burj Khalifa, Empire Heights, Business Bay" />
          </div>
          <div className="hero__badge">
            With a view of the
            <b>Burj Khalifa</b>
          </div>
          <div className="hero__crown">
            <div>
              <div className="stars">
                <IconStar /><IconStar /><IconStar /><IconStar /><IconHalfStar />
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
                <div className="num">4.98</div>
                <div style={{ color: 'var(--slate)', fontSize: 12 }}>/ 5</div>
              </div>
              <div className="sub">20 verified Doctify reviews</div>
            </div>
            <span className="pill">Verified</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;