/* global React, Button, Placeholder, Eyebrow */
// Hero.jsx — emotional hero

function Hero({ onWhatsApp, onVisit }) {
  return (
    <section id="top" className="mr-hero">
      <div className="mr-hero__grid mr-container">
        <div className="mr-hero__copy">
          <Eyebrow>Hogar de acogida · Villa Alegre, Maule</Eyebrow>
          <h1 className="mr-display">Cuando cuidar en casa ya no alcanza, elegir bien importa.</h1>
          <p className="mr-lead" style={{ marginTop: 22, maxWidth: '46ch' }}>
            Mi Refugio en el Campo es un hogar de acogida para adultos mayores donde la
            tranquilidad de la familia y el bienestar de cada residente se cuidan todos los días.
          </p>
          <div className="mr-hero__actions">
            <Button variant="primary" icon="whatsapp" onClick={onWhatsApp}>Hablemos con calma</Button>
            <Button variant="secondary" onClick={onVisit}>Coordinar una visita</Button>
          </div>
          <p className="mr-hero__micro">Resolver tus dudas también es parte del cuidado.</p>
        </div>

        <div className="mr-hero__media">
          <img
            src="assets/photos/patio-arbol-sombra.jpeg"
            alt="Patio con pasto, árboles grandes y espacios de descanso en Mi Refugio en el Campo"
            className="mr-hero__img"
          />
          <div className="mr-hero__chip">
            <span className="mr-hero__chip-dot" />
            Lagunillas, Villa Alegre · Región del Maule
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;