// Header (single-purpose) + kit-style Hero with lead form
const PHOTOS = {
  mural:       { src: '../../assets/photos/keep-rising.jpg',  cap: 'Our \u201cKeep Rising\u201d lounge' },
  lounge:      { src: '../../assets/photos/mam-lounge.jpg',   cap: 'The MAM community lounge' },
  affirmation: { src: '../../assets/photos/affirmation.jpg',  cap: 'Our affirmation room' },
  counseling:  { src: '../../assets/photos/counseling.jpg',   cap: 'A private therapy room' },
};
// two-tone headlines: [lead phrase, faded trailing phrase]
const HEADLINES = {
  burleson: ['Intensive care, ', 'right here in Burleson.'],
  whole:    ['Closer to whole, ', 'closer to home.'],
  address:  ['Healing has an ', 'address in Burleson.'],
  belongs:  ['Care belongs ', 'where you do.'],
};

function LpHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f);
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 80,
      background: scrolled ? 'rgba(253,245,234,.88)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--line)' : 'transparent'),
      transition: 'all .3s var(--ease)'
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 78 }}>
        <img src="../../assets/logos/mam-wordmark-forest.png" alt="Mind Above Matter" style={{ height: 46 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <a href="tel:8176626179" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: '600 16px var(--font-display)', color: 'var(--forest)', whiteSpace: 'nowrap' }}>
            <i data-lucide="phone" style={{ width: 16, height: 16, color: 'var(--accent)' }}></i>
            817-662-6179
          </a>
          <a href="#apply" className="btn btn-accent btn-caps">verify coverage</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ t }) {
  const photo = PHOTOS[t.heroPhoto] || PHOTOS.mural;
  const headline = HEADLINES[t.heroHeadline] || HEADLINES.burleson;
  const callFirst = t.heroLayout === 'call';
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section id="top" className="sec" style={{ paddingTop: 36, paddingBottom: 52 }}>
      <div className="wrap hero-grid">
        {/* left: pitch */}
        <div>
          <p className="h-eyebrow">partial hospitalization program &middot; burleson, tx</p>
          <h1 className="h-display">{headline[0]}<span className="faded">{headline[1]}</span></h1>
          <p className="lead" style={{ margin: '22px 0 26px', maxWidth: '46ch' }}>
            Our PHP gives you intensive, full-day care for depression, anxiety, trauma, and dual diagnosis &mdash; for adults and teens ages 9 and up &mdash; in our welcoming Burleson center, while you go home to your own bed each night.
          </p>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', marginBottom: 30 }}>
            {callFirst ? (
              <React.Fragment>
                <a href="tel:8176626179" className="btn btn-primary btn-caps"><i data-lucide="phone" style={{ width: 15, height: 15 }}></i> Call 817-662-6179</a>
                <a href="#apply" className="btn btn-ghost btn-caps">request a callback</a>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <a href="#apply" className="btn btn-primary btn-caps">check your coverage</a>
                <a href="tel:8176626179" className="btn btn-ghost btn-caps"><i data-lucide="phone" style={{ width: 15, height: 15 }}></i> Call 817-662-6179</a>
              </React.Fragment>
            )}
          </div>
          <div className="trust-row">
            <span className="trust-item"><i data-lucide="shield-check"></i> JCAHO accredited</span>
            <span className="trust-item"><i data-lucide="badge-check"></i> Medicaid &amp; commercial plans</span>
            <span className="trust-item"><i data-lucide="users"></i> Ages 9 &amp; up</span>
          </div>
        </div>

        {/* right: form card OR building photo + call card */}
        {callFirst ? (
          <div id="apply" style={{ scrollMarginTop: 90 }}>
            <div className="illo-tile tint-mint" style={{ padding: 14 }}>
              <div style={{ borderRadius: 'var(--r-md)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', width: '100%', height: 340 }}>
                <img src={photo.src} alt={photo.cap} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </div>
            <div className="card card-md" style={{ marginTop: 16, textAlign: 'center' }}>
              <div style={{ font: '600 22px var(--font-display)', color: 'var(--forest)' }}>Talk to a care advocate today.</div>
              <p style={{ font: '400 14px/1.5 var(--font-body)', color: 'var(--fg2)', margin: '8px 0 16px' }}>Free, confidential, no obligation. We answer in person.</p>
              <a href="tel:8176626179" className="btn btn-accent btn-caps btn-block" style={{ padding: '15px 26px' }}><i data-lucide="phone" style={{ width: 15, height: 15 }}></i> Call 817-662-6179</a>
            </div>
          </div>
        ) : (
          <div id="apply" className="card card-md" style={{ scrollMarginTop: 90, padding: '28px 28px 26px' }}>
            <div style={{ textAlign: 'center', marginBottom: 18 }}>
              <p className="h-eyebrow" style={{ margin: '0 0 8px' }}>free &amp; confidential</p>
              <div style={{ font: '600 26px var(--font-display)', color: 'var(--forest)', letterSpacing: '-.01em' }}>Start in 3 simple steps.</div>
              <p style={{ font: '400 14.5px/1.5 var(--font-body)', color: 'var(--fg2)', margin: '8px 0 0' }}>Tell us a little, and a Burleson care advocate will verify your benefits and walk you through next steps.</p>
            </div>
            <LeadForm />
          </div>
        )}
      </div>

      {/* building photo strip — proof of the real space, just under the fold */}
      <div className="wrap hero-photo-strip" style={{ display: 'flex', gap: 16, marginTop: 44 }}>
        {['affirmation', 'mural', 'lounge', 'counseling'].map(k => (
          <figure key={k} style={{ margin: 0, flex: 1, height: 132, borderRadius: 'var(--r-md)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
            <img src={PHOTOS[k].src} alt={PHOTOS[k].cap} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </figure>
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { LpHeader, Hero, PHOTOS, HEADLINES });