// Hero.jsx — reusable hero with two layouts: image-led (split) & copy-led (centered)
function Photo({ label, h = '100%', icon = 'heart', src, position = 'center', style = {} }) {
  if (src) {
    return (
      <div className="ph-photo ph-photo-real" style={{ height: h, ...style }}>
        <img src={src} alt={label} style={{ objectPosition: position }} />
      </div>
    );
  }
  return (
    <div className="ph-photo" style={{ height: h, ...style }}>
      <div className="ph-photo-mark"><Icon name={icon} size={40} color="#fff" stroke={1.5} /></div>
      <span className="ph-photo-label">{label}</span>
    </div>
  );
}

const heroTrust = [
  'A provider who knows you',
  'Same-day replies',
  'No surprise bills',
];

function Hero({ layout = 'image' }) {
  const copyBlock = (
    <div className="ph-hero-copy">
      <span className="eyebrow">Direct Primary Care · Orlando, FL</span>
      <h1>Healthcare that feels like it’s actually about you.</h1>
      <p className="lead">At Peaceful Hearts, you get a provider who knows your name, your story, and
        what matters to you. Visits aren’t rushed. You can reach us directly and hear back the same
        day. Pricing is simple, with no insurance hoops or surprise bills.</p>
      <div className="ph-hero-actions">
        <a className="btn btn-primary btn-lg" href="enroll.html">Become a member</a>
        <a className="btn btn-secondary btn-lg" href="what-is-dpc.html">How DPC works</a>
      </div>
      <div className="ph-hero-trust">
        {heroTrust.map(t => (
          <span key={t}><Icon name="check" size={18} color="#506330" /> {t}</span>
        ))}
      </div>
    </div>
  );

  if (layout === 'copy') {
    return (
      <section className="ph-hero is-copyled" id="top">
        <div className="ph-container">
          <div className="ph-hero-centered">{copyBlock}</div>
        </div>
        <div className="ph-hero-band">
          <Photo label="Azra Dhanji with a patient at Peaceful Hearts" src="assets/hero-azra.jpg" position="center 32%" h="clamp(260px, 34vw, 440px)" />
          <div className="ph-hero-badge">
            <div className="ph-hero-badge-ic"><Icon name="heart" size={22} color="#506330" /></div>
            <div>
              <strong>Now accepting new patients</strong>
              <span>Adults across the Orlando metro</span>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="ph-hero" id="top">
      <div className="ph-hero-grid">
        {copyBlock}
        <div className="ph-hero-media">
          <Photo label="Azra Dhanji with a patient at Peaceful Hearts" src="assets/hero-azra.jpg" position="62% 36%" h="440px" />
          <div className="ph-hero-badge">
            <div className="ph-hero-badge-ic"><Icon name="heart" size={22} color="#506330" /></div>
            <div>
              <strong>Now accepting new patients</strong>
              <span>Adults across the Orlando metro</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero, Photo });