/* A Gem of Joy ABA — Ads Landing Page · Hero (v3 — human copy, minimal icons) */

function LPHeader({ phone }) {
  useLucide();
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60, background: '#fff', boxShadow: 'var(--sh-sm)',
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '12px 24px', display: 'flex', alignItems: 'center', gap: 16 }}>
        <img src={(window.__resources && window.__resources.logo) || 'assets/logo-horizontal.png'} alt="A Gem of Joy ABA" style={{ height: 38 }} />
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 18 }}>
          <span className="hdr-trust" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--teal-600)' }}>
            We accept Maryland Medicaid
          </span>
          <a href={'tel:' + phone.replace(/[^0-9]/g, '')}>
            <Btn variant="primary" size="sm" icon="phone">{phone}</Btn>
          </a>
        </div>
      </div>
    </header>
  );
}

function LPHero({ t, onSubmit }) {
  useLucide();

  return (
    <section style={{ background: 'var(--coral)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/Pattern-Background.png)', backgroundSize: '420px', backgroundRepeat: 'repeat', opacity: 0.07 }}></div>
      <div style={{ position: 'absolute', width: 520, height: 520, borderRadius: '50%', background: 'rgba(255,216,78,0.13)', top: -200, right: '42%' }}></div>
      <div style={{ position: 'absolute', width: 180, height: 180, borderRadius: 'var(--r-blob)', background: 'rgba(63,176,184,0.26)', top: 70, right: 24 }}></div>

      <div className="hero-grid" style={{
        maxWidth: 1180, margin: '0 auto', padding: '62px 24px 80px',
        display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.85fr)', gap: 62, alignItems: 'center', position: 'relative',
      }}>
        <div>
          {t.showUrgency && (
            <div style={{ display: 'inline-block', background: 'var(--sun)', color: 'var(--navy)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, padding: '10px 20px', borderRadius: 'var(--r-pill)', marginBottom: 22 }}>
              Now enrolling new families across Maryland
            </div>
          )}
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: '#fff', fontSize: 'clamp(2.8rem, 5.5vw, 4.5rem)', lineHeight: 1.04, letterSpacing: '-0.025em', margin: '0 0 20px' }}>
            {t.headlineLead} <span style={{ color: 'var(--sun)' }}>{t.headlinePop}</span>
          </h1>
          <p style={{ color: 'rgba(255,255,255,0.96)', fontSize: 21, lineHeight: 1.55, maxWidth: 500, margin: '0 0 28px' }}>
            {t.subhead}
          </p>
          <div style={{ marginBottom: 26 }}>
            <a href={'tel:' + t.phone.replace(/[^0-9]/g, '')}><Btn variant="white" size="lg" icon="phone">Call {t.phone}</Btn></a>
          </div>
          <div style={{ color: '#fff' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, marginBottom: 4 }}>We accept Maryland Medicaid</div>
            <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.9)' }}>Trusted by families in Baltimore, Howard, and Montgomery counties.</div>
          </div>
        </div>

        {/* GHL Embed form card */}
        <div id="lead-form" style={{ background: '#fff', borderRadius: 'var(--r-xl)', boxShadow: 'var(--sh-lg)', overflow: 'hidden', position: 'relative' }}>
          <div style={{ padding: '24px 26px 28px' }}>
            <h3 style={{ margin: '0 0 18px', fontSize: 23 }}>{t.ctaLabel}</h3>
            <iframe src="https://link.lukrah.com/widget/form/w05Kgw5jWBx3xwBA0Ors" style={{ width: '100%', height: '544px', border: 'none', borderRadius: '3px' }} id="inline-w05Kgw5jWBx3xwBA0Ors" data-layout="{'id':'INLINE'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-form-name="Contact Us" data-height="544" data-layout-iframe-id="inline-w05Kgw5jWBx3xwBA0Ors" data-form-id="w05Kgw5jWBx3xwBA0Ors" title="Contact Us"></iframe>
            <script src="https://link.lukrah.com/js/form_embed.js"></script>
          </div>
        </div>
      </div>

      <svg viewBox="0 0 1440 90" preserveAspectRatio="none" style={{ display: 'block', position: 'relative', width: '100%', height: 64, marginBottom: -2 }}>
        <path d="M0,40 C240,90 480,90 720,55 C960,20 1200,20 1440,55 L1440,90 L0,90 Z" fill="var(--sun)"></path>
      </svg>
    </section>
  );
}

Object.assign(window, { LPHeader, LPHero });