// Apricus — hero (editorial Compote headline, layered photo cluster)
// Two variants via window.APRICUS_HERO_VARIANT:
//   'lemons' (default) → watercolor lemon branch, no photo background
//   'photo'            → beach-lemons photo backdrop, no watercolor branch
function Hero({ onBook }) {
  const D = 'var(--font-display)';
  const photo = (typeof window !== 'undefined' && window.APRICUS_HERO_VARIANT === 'photo');
  const sectionStyle = photo
    ? { position: 'relative', overflow: 'hidden', marginTop: -78, paddingTop: 78 }
    : { position: 'relative', overflow: 'hidden' };
  return (
    <section id="top" style={sectionStyle}>
      {photo ? (
        <React.Fragment>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 0,
            backgroundImage: 'url(assets/hero-lemons-beach.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 32%' }}></div>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 1,
            backgroundImage: 'url(assets/textures/paper-cream.jpg)', backgroundSize: 'cover', opacity: 0.5 }}></div>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 1,
            background: 'linear-gradient(100deg, var(--apr-cream) 0%, rgba(251,244,230,0.74) 34%, rgba(251,244,230,0.18) 60%, rgba(251,244,230,0.04) 100%)' }}></div>
        </React.Fragment>
      ) : null}
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto',
        padding: photo ? '92px 40px 188px' : '40px 40px 104px', minHeight: photo ? '88vh' : 'auto',
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 72, alignItems: 'center' }}>
        <div>
          <Eyebrow>Séjours bien être · accompagnement ménopause</Eyebrow>
          <h1 style={{ fontFamily: D, margin: '22px 0 0', color: 'var(--apr-ink)', lineHeight: 1.0,
            letterSpacing: '-0.02em', fontSize: 'clamp(46px,5.6vw,82px)' }}>
            <span style={{ fontWeight: 300 }}>L'art de </span>
            <span style={{ fontWeight: 300, fontStyle: 'italic' }}>la</span>
            <br />
            <span style={{ fontWeight: 900 }}>dolce </span>
            <span style={{ fontWeight: 700, fontStyle: 'italic' }}>vita.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.7,
            color: 'var(--apr-ink-soft)', maxWidth: 460, margin: '26px 0 34px' }}>
            Une invitation à goûter à la douceur de vie à l'italienne. Guérir, explorer et transformer
            au travers de séjours en groupe ou d'accompagnement individuel. Conçu par les femmes, pour les
            <span style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: '1.5em', lineHeight: 0.8 }}> femmes</span>.
          </p>
        </div>
        {photo ? (
          <div aria-hidden="true"></div>
        ) : (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <img src="assets/lemons-branch.png" alt="Branche de citronnier à l'aquarelle"
            style={{ width: '100%', maxWidth: 440, height: 'auto', display: 'block' }} />
          </div>
        )}
      </div>
    </section>);

}
window.Hero = Hero;