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

// Prominent Maryland Medicaid band (continues the sun-yellow wave from the hero)
function LPMedicaid({ onCta }) {
  return (
    <section style={{ background: 'var(--sun)', padding: '34px 24px 64px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--coral-600)', marginBottom: 12 }}>
          Cost should never be the reason you wait
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--navy)', fontSize: 'clamp(2rem, 4vw, 3rem)', lineHeight: 1.08, letterSpacing: '-0.02em', margin: '0 0 16px' }}>
          Maryland Medicaid is accepted here.
        </h2>
        <p style={{ color: 'var(--navy)', fontSize: 18.5, lineHeight: 1.6, maxWidth: 640, margin: '0 auto 24px', opacity: 0.9 }}>
          For families who qualify, in-home ABA therapy is covered with little to no out-of-pocket cost. On your free call, we will help you understand exactly what your plan covers.
        </p>
        <Btn variant="secondary" size="lg" onClick={onCta}>Check My Coverage</Btn>
      </div>
    </section>
  );
}

// Why families choose us: 2x2 grid, full brand-color boxes, no icons
function LPValue() {
  const boxes = [
    { bg: 'var(--coral)', img: 'assets/Autism-Therapy-Icon.png', title: 'Therapy in your home', body: 'Your child learns in the place they feel most comfortable, so new skills become part of everyday life.' },
    { bg: 'var(--teal)', img: 'assets/Early-Intervention-Icon.png', title: 'Learning through play', body: 'Sessions are warm and playful, built around the things your child already loves to do.' },
    { bg: 'var(--blue)', img: 'assets/Parent-Mediated-Icon.png', title: "You are never on your own", body: 'We work right alongside you, sharing practical strategies you can use between sessions.' },
    { bg: 'var(--navy)', img: 'assets/Verbal-Behavior-Icon.png', title: 'Careful, certified care', body: 'Every program is designed and supervised by a Board Certified Behavior Analyst (BCBA).' },
  ];
  return (
    <section style={{ background: 'var(--cream)', padding: '74px 24px' }}>
      <div style={{ maxWidth: 960, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--coral)', marginBottom: 12 }}>What makes us different</div>
          <h2 style={{ fontSize: 'clamp(1.8rem,3vw,2.5rem)', color: 'var(--navy)', margin: 0, lineHeight: 1.12, letterSpacing: '-0.02em' }}>Why families choose A Gem of Joy</h2>
        </div>
        <div className="cards-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          {boxes.map((b) => (
            <div key={b.title} style={{ background: b.bg, borderRadius: 'var(--r-lg)', padding: '34px 32px', color: '#fff', boxShadow: 'var(--sh-md)', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}></div>
              <div style={{ position: 'absolute', bottom: -30, right: 30, width: 70, height: 70, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }}></div>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <img src={b.img} alt="" style={{ width: 34, height: 34, objectFit: 'contain', filter: 'brightness(0) invert(1)' }} />
              </div>
              <h3 style={{ margin: '0 0 10px', fontSize: 22, color: '#fff', position: 'relative' }}>{b.title}</h3>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.94)', position: 'relative' }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// In-Home vs Center-Based comparison
function LPCompare({ onCta }) {
  const inHome = [
    "Therapy in your child's familiar, everyday surroundings",
    "Skills practiced in real home routines, where they are actually used",
    "Parents coached in the moment, during real situations",
    "No commute and no waiting rooms",
    "True one-on-one attention every session",
    "Scheduling that works around your family",
  ];
  const center = [
    "An unfamiliar clinic to adjust to",
    "Skills that may not carry back home",
    "Less parent involvement during sessions",
    "A daily commute and time in waiting rooms",
    "Attention often shared between children",
    "Fixed center hours to work around",
  ];
  useLucide();
  return (
    <section style={{ background: '#fff', padding: '78px 24px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 4 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--coral)', marginBottom: 12 }}>In-home vs. center-based</div>
          <h2 style={{ fontSize: 'clamp(1.8rem,3vw,2.5rem)', color: 'var(--navy)', margin: 0, lineHeight: 1.12, letterSpacing: '-0.02em' }}>Why in-home works best for young children</h2>
        </div>
        <p style={{ textAlign: 'center', maxWidth: 660, margin: '16px auto 0', color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.6 }}>
          For young children, the goal is not just to learn a skill. It is to use it in real life. In-home therapy builds skills in the same place your child lives and plays, so progress carries into everyday routines.
        </p>

        <img src="assets/photo-therapy.jpg" alt="In-home ABA therapy session" style={{ display: 'block', width: '100%', height: 300, objectFit: 'cover', margin: '36px 0 8px', borderRadius: 22, boxShadow: 'var(--sh-md)' }} />

        <div className="cards-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 32 }}>
          <div style={{ background: 'var(--cream)', borderRadius: 'var(--r-lg)', padding: '30px 28px', boxShadow: 'var(--sh-md)', border: '2px solid var(--teal)', position: 'relative' }}>
            <div style={{ position: 'absolute', top: -14, left: 24, background: 'var(--teal)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.04em', textTransform: 'uppercase', padding: '6px 14px', borderRadius: 'var(--r-pill)' }}>Our approach</div>
            <h3 style={{ margin: '10px 0 18px', fontSize: 21 }}>In-home ABA</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {inHome.map((x) => (
                <div key={x} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--teal)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', marginTop: 1 }}>
                    <Icon name="check" size={13} color="#fff" strokeWidth={3} />
                  </span>
                  <span style={{ color: 'var(--navy)', fontSize: 15.5, fontWeight: 600, lineHeight: 1.45 }}>{x}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: '30px 28px', border: '1.5px solid var(--line)' }}>
            <h3 style={{ margin: '10px 0 18px', fontSize: 21, color: 'var(--ink-2)' }}>Center-based</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {center.map((x) => (
                <div key={x} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: '#EDE7E2', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', marginTop: 2 }}>
                    <span style={{ width: 9, height: 2, background: 'var(--ink-3)', borderRadius: 2 }}></span>
                  </span>
                  <span style={{ color: 'var(--ink-2)', fontSize: 15.5, lineHeight: 1.45 }}>{x}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div style={{ textAlign: 'center', marginTop: 38 }}>
          <Btn variant="primary" size="lg" onClick={onCta}>See If In-Home ABA Is Right for Your Child</Btn>
        </div>
      </div>
    </section>
  );
}

function LPSteps({ onCta }) {
  const steps = [
    { n: '1', title: 'A free first call', body: 'A friendly, no-pressure conversation. We listen to your concerns and answer your questions.' },
    { n: '2', title: 'A play-based assessment', body: 'Within about 4 weeks of your first call, our BCBA gets to know your child through play, learning their strengths and goals.' },
    { n: '3', title: 'Therapy begins at home', body: 'A dedicated therapist starts one-on-one sessions at home, with you supported the whole way.' },
  ];
  return (
    <section style={{ background: 'var(--cream)', padding: '78px 24px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--coral)', marginBottom: 12 }}>Getting started is simple</div>
          <h2 style={{ fontSize: 'clamp(1.8rem,3vw,2.5rem)', color: 'var(--navy)', margin: 0, lineHeight: 1.12, letterSpacing: '-0.02em' }}>How your child can begin</h2>
        </div>
        <div className="cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {steps.map((s) => (
            <div key={s.n} style={{ position: 'relative', background: '#fff', borderRadius: 'var(--r-lg)', boxShadow: 'var(--sh-sm)', padding: '40px 28px 30px', textAlign: 'center' }}>
              <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', width: 48, height: 48, borderRadius: '50%', background: 'var(--coral)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, boxShadow: 'var(--sh-coral)' }}>{s.n}</div>
              <h3 style={{ margin: '6px 0 10px', fontSize: 20 }}>{s.title}</h3>
              <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.6 }}>{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 44 }}>
          <Btn variant="primary" size="lg" onClick={onCta}>Book a Free Consultation</Btn>
        </div>
      </div>
    </section>
  );
}

// Brand promise (real mission language) + family photo slot
function LPPromise() {
  return (
    <section style={{ background: 'var(--navy)', padding: '74px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/Blue-Pattern-Background.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.3 }}></div>
      <div style={{ position: 'absolute', width: 260, height: 260, borderRadius: '50%', background: 'rgba(63,176,184,0.16)', top: -90, right: '8%' }}></div>
      <div className="hero-grid" style={{ maxWidth: 1040, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 44, alignItems: 'center', position: 'relative' }}>
        <img src="assets/photo-about.jpg" alt="A Gem of Joy ABA family" style={{ display: 'block', width: 260, height: 260, objectFit: 'cover', borderRadius: '50%', margin: '0 auto', boxShadow: 'var(--sh-lg)' }} />
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--sun)', marginBottom: 14 }}>Our promise</div>
          <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: '#fff', fontSize: 'clamp(1.4rem,2.4vw,2rem)', lineHeight: 1.34, letterSpacing: '-0.01em', margin: '0 0 18px' }}>
            We use the science of ABA to help children reach their full potential, through an experience <span style={{ color: 'var(--sun)' }}>infused with joy.</span>
          </p>
          <div style={{ color: 'rgba(255,255,255,0.7)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5 }}>The A Gem of Joy ABA Team</div>
        </div>
      </div>
    </section>
  );
}

// Kennedy Krieger referral trust highlight + real team portrait
function LPReferral() {
  return (
    <section style={{ background: 'var(--surface-alt)', padding: '78px 24px' }}>
      <div className="hero-grid" style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 48, alignItems: 'center' }}>
        <div style={{ textAlign: 'center' }}>
          <img src={(window.__resources && window.__resources.team) || 'assets/team-yaffa.png'} alt="A Gem of Joy clinician" style={{ width: '100%', maxWidth: 320, height: 'auto' }} />
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--coral)', marginBottom: 12 }}>A reputation clinicians trust</div>
          <h2 style={{ fontSize: 'clamp(1.7rem,2.8vw,2.3rem)', color: 'var(--navy)', margin: '0 0 16px', lineHeight: 1.15, letterSpacing: '-0.02em' }}>
            Families are referred to us directly by <span className="hl-teal">Kennedy Krieger Institute</span>.
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.6, margin: '0 0 22px', maxWidth: 560 }}>
            When one of the country's leading institutions for childhood development sends families your way, quality is not just a claim. It is a standard our local Maryland team works hard to earn every day.
          </p>
          <div style={{ display: 'flex', gap: 30, flexWrap: 'wrap' }}>
            {[['Local', 'Maryland-based team'], ['1-on-1', 'Personalized attention'], ['BCBA', 'Supervised programs']].map(([big, small]) => (
              <div key={small}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, color: 'var(--coral)', lineHeight: 1 }}>{big}</div>
                <div style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 5 }}>{small}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function LPFaq() {
  const faqs = [
    ['Is in-home therapy as effective as a center?', 'For young children, in-home therapy is often more effective. Skills are taught in the exact setting where they are used, so progress carries into daily life and the whole family is part of it.'],
    ['Do you accept Maryland Medicaid?', 'Yes. We proudly accept Maryland Medicaid, so for families who qualify, in-home ABA therapy comes at little to no out-of-pocket cost.'],
    ['What areas do you serve?', 'We provide in-home ABA therapy across Baltimore, Howard, and Montgomery counties. Call us and we will confirm availability in your area.'],
    ['What age group do you focus on?', 'Our in-home programs are especially effective for young children, and we see the strongest outcomes with kids in the 2 to 6 age range. That said, every child is different. The best first step is a free consultation, where our BCBA can talk through the right fit for your family.'],
    ['Do I need a diagnosis to start?', 'A diagnosis helps us tailor care, and many families come to us after an assessment. If you have questions about next steps, we are happy to guide you on a free call.'],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: 'var(--cream)', padding: '78px 24px' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--coral)', marginBottom: 12 }}>Questions parents ask us</div>
          <h2 style={{ fontSize: 'clamp(1.8rem,3vw,2.5rem)', color: 'var(--navy)', margin: 0, lineHeight: 1.12, letterSpacing: '-0.02em' }}>Good to know before you call</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map(([q, a], i) => (
            <div key={q} style={{ background: '#fff', borderRadius: 'var(--r-md)', boxShadow: 'var(--sh-sm)', overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '18px 22px', display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, color: 'var(--navy)' }}>
                <span style={{ flex: 1 }}>{q}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--coral)', lineHeight: 1, width: 18, textAlign: 'center' }}>{open === i ? '\u2013' : '+'}</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 22px 20px', color: 'var(--ink-2)', fontSize: 15.5, lineHeight: 1.6 }}>{a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LPFinalCta({ t, onCta }) {
  return (
    <section style={{ background: 'var(--coral)', padding: '84px 24px', 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: 280, height: 280, borderRadius: '50%', background: 'rgba(255,216,78,0.16)', top: -90, left: '12%' }}></div>
      <div style={{ position: 'absolute', width: 200, height: 200, borderRadius: 'var(--r-blob)', background: 'rgba(255,255,255,0.10)', bottom: -70, right: '8%' }}></div>
      <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <h2 style={{ color: '#fff', fontSize: 'clamp(2rem,3.6vw,3rem)', margin: '0 0 14px', lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          Ready to see your child <span style={{ color: 'var(--sun)' }}>shine?</span>
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.95)', fontSize: 18, margin: '0 auto 30px', maxWidth: 520 }}>
          Your free, no-obligation consultation is one quick call away. Let us talk about how we can help your family.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={'tel:' + t.phone.replace(/[^0-9]/g, '')}><Btn variant="white" size="lg" icon="phone">Call {t.phone}</Btn></a>
          <Btn variant="secondary" size="lg" onClick={onCta}>Request a Callback</Btn>
        </div>
      </div>
    </section>
  );
}

// Trust badges — BHCOE, CASP, BACB ACE
function LPBadges() {
  const badges = [
    { src: 'assets/BHCOE-2026-Badge.png', alt: 'BHCOE Accredited Practice 2026-2028', width: 110 },
    { src: 'assets/CASP-Member-Logo.png', alt: 'CASP Member — Council of Autism Service Providers', width: 100 },
    { src: 'assets/image-1.png', alt: 'BACB Authorized Continuing Education Provider', width: 90 },
  ];
  return (
    <section style={{ background: 'var(--cream)', padding: '48px 24px 56px', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 24 }}>Accreditations &amp; Memberships</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 48, flexWrap: 'wrap' }}>
          {badges.map((b) => (
            <img key={b.alt} src={b.src} alt={b.alt} style={{ height: b.width, width: 'auto', objectFit: 'contain', filter: 'none' }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function LPFooter({ t }) {
  return (
    <footer style={{ background: 'var(--navy)', color: '#fff', padding: '40px 24px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ 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: 36, filter: 'brightness(0) invert(1)' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--sun)' }}>Shining Brighter, Together.</span>
        </div>
        <a href={'tel:' + t.phone.replace(/[^0-9]/g, '')}><Btn variant="primary" size="sm" icon="phone">{t.phone}</Btn></a>
      </div>
      <div style={{ maxWidth: 1100, margin: '24px auto 0', paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.14)', fontSize: 12.5, color: 'rgba(255,255,255,0.6)', textAlign: 'center', lineHeight: 1.6 }}>
        © 2026 A Gem of Joy ABA. In-home ABA therapy across Baltimore, Howard, and Montgomery counties, Maryland. BHCOE accredited.
      </div>
      <div style={{ maxWidth: 600, margin: '16px auto 0', fontSize: 11, color: 'rgba(255,255,255,0.4)', textAlign: 'center', lineHeight: 1.5 }}>
        This site is not a part of the Facebook website or Facebook Inc. Additionally, this site is NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.
      </div>
    </footer>
  );
}

function LPStickyCall({ t, onCta }) {
  useLucide();
  return (
    <div className="sticky-call" style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 80, display: 'none',
      background: '#fff', boxShadow: '0 -6px 20px rgba(24,40,80,0.14)', padding: '10px 14px', gap: 10,
    }}>
      <a href={'tel:' + t.phone.replace(/[^0-9]/g, '')} style={{ flex: 1 }}>
        <Btn variant="primary" icon="phone" style={{ width: '100%', justifyContent: 'center' }}>Call now</Btn>
      </a>
      <Btn variant="ghost" onClick={onCta} style={{ flex: 1, justifyContent: 'center' }}>Free consult</Btn>
    </div>
  );
}

Object.assign(window, { LPMedicaid, LPValue, LPCompare, LPSteps, LPPromise, LPReferral, LPFaq, LPFinalCta, LPBadges, LPFooter, LPStickyCall });
