// PHP education sections — airy, editorial, kit-aligned (no AI card grids)

function StepInside() {
  const shots = [
    { src: '../../assets/photos/keep-rising.jpg', cap: 'Our \u201cKeep Rising\u201d community lounge', tall: true },
    { src: '../../assets/photos/affirmation.jpg', cap: 'The affirmation room' },
    { src: '../../assets/photos/mam-lounge.jpg',  cap: 'Where groups gather' },
    { src: '../../assets/photos/counseling.jpg',  cap: 'Private therapy rooms' },
    { src: '../../assets/photos/cozy-room.jpg',   cap: 'Calm, light-filled spaces' },
  ];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, marginBottom: 34 }}>
          <div style={{ maxWidth: 620 }}>
            <p className="h-eyebrow">our burleson center</p>
            <h2 className="h-2">A real place, <span className="faded">made to feel like one.</span></h2>
            <p className="lead" style={{ margin: '16px 0 0' }}>
              Care here doesn&rsquo;t happen over a screen or in a sterile waiting room. It happens in a warm, welcoming space &mdash; bright lounges, private therapy rooms, and corners built for teens and adults alike.
            </p>
          </div>
          <a href="#location" className="btn btn-ghost btn-caps">get directions</a>
        </div>
        <div className="gallery">
          {shots.map((s, i) => (
            <figure key={i} className={s.tall ? 'g-tall' : ''}>
              <img src={s.src} alt={s.cap} />
              <figcaption>{s.cap}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhatIsPHP() {
  return (
    <section className="sec-tight">
      <div className="wrap split2">
        <div className="order-img illo-tile tint-sky" style={{ padding: 16 }}>
          <div style={{ borderRadius: 'var(--r-md)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', width: '100%', height: 420 }}>
            <img src="../../assets/photos/cozy-room.jpg" alt="Inside the Mind Above Matter Burleson center" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 60%' }} />
          </div>
        </div>
        <div>
          <p className="h-eyebrow">what is php?</p>
          <h2 className="h-2">More than outpatient. <span className="faded">Without the hospital stay.</span></h2>
          <p className="lead" style={{ margin: '18px 0 20px' }}>
            PHP runs <strong style={{ color: 'var(--forest)' }}>5&ndash;6 days a week, 6&ndash;8 hours a day</strong> &mdash; individual therapy, group sessions, psychiatric medication management, and family counseling, all coordinated in one place.
          </p>
          <p style={{ font: '400 16px/1.6 var(--font-body)', color: 'var(--fg2)', margin: '0 0 26px' }}>
            It&rsquo;s the right fit when you&rsquo;re in crisis, stepping down from a hospital stay, or facing symptoms that disrupt daily life &mdash; and you want intensive help while still going home each evening.
          </p>
          <a href="#apply" className="btn btn-accent btn-caps">see if php is right for you</a>
        </div>
      </div>
    </section>
  );
}

// "Who PHP helps" — editorial: illustration + heading on the left, a flowing
// checklist of conditions (dividers, no boxed cards) on the right.
function WhoFor() {
  const signs = [
    ['Depression that won\u2019t lift', 'Persistent low mood, hopelessness, or loss of interest in the things you used to enjoy.'],
    ['Overwhelming anxiety or panic', 'Constant worry, panic attacks, or stress that\u2019s started taking over your days.'],
    ['Trauma & PTSD', 'Flashbacks, hypervigilance, or memories that keep resurfacing and won\u2019t settle.'],
    ['Stepping down from inpatient', 'You\u2019ve been hospitalized and need structured daily support to stay stable.'],
    ['Co-occurring substance use', 'Mental health and substance use challenges happening together, treated together.'],
    ['Daily life is slipping', 'When work, school, or relationships are being affected and you need more than weekly therapy.'],
  ];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec">
      <div className="wrap value-grid">
        <div className="value-head" style={{ position: 'sticky', top: 100 }}>
          <p className="h-eyebrow">who php helps</p>
          <h2 className="h-2">If any of this sounds familiar, <span className="faded">you&rsquo;re in the right place.</span></h2>
          <p style={{ font: '400 16px/1.6 var(--font-body)', color: 'var(--fg2)', margin: '18px 0 24px', maxWidth: '34ch' }}>
            PHP is built for the moments that feel like too much to carry alone. If you recognize yourself or someone you love here, reach out &mdash; we&rsquo;ll help you figure out the right level of care.
          </p>
          <div className="illo-tile tint-mint" style={{ height: 230, marginBottom: 24 }}>
            <img src="../../assets/illustrations/cut/two-friends.png" alt="" style={{ height: '82%' }} />
          </div>
          <a href="#apply" className="btn btn-primary btn-caps">talk to a care advocate</a>
        </div>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, borderTop: '1px solid var(--line)' }}>
          {signs.map(([t, d]) => (
            <li key={t} style={{ display: 'flex', gap: 18, alignItems: 'flex-start', padding: '22px 4px', borderBottom: '1px solid var(--line)' }}>
              <i data-lucide="check" style={{ width: 24, height: 24, color: 'var(--accent)', strokeWidth: 2.5, flex: 'none', marginTop: 2 }}></i>
              <div>
                <h3 className="h-3" style={{ fontSize: 20, marginBottom: 5 }}>{t}</h3>
                <p style={{ font: '400 15.5px/1.55 var(--font-body)', color: 'var(--fg2)', margin: 0, maxWidth: '50ch' }}>{d}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// "What's included" — real photo + a clean numbered list with dividers.
function Features() {
  const feats = [
    ['Individual therapy', 'One-on-one sessions with a licensed therapist who stays with you throughout your program.'],
    ['Group therapy', 'Heal alongside peers who understand &mdash; skills, connection, and a sense you\u2019re not alone.'],
    ['Psychiatry & medication management', 'On-site psychiatrists evaluate, prescribe, and monitor, coordinated with your therapy and PCP.'],
    ['Family counseling', 'We bring in the people who anchor you, so support continues outside the building.'],
    ['Home every evening', 'Intensive care by day, your own bed at night &mdash; stay close to the routines that matter.'],
  ];
  return (
    <section className="sec" style={{ background: 'var(--white)' }}>
      <div className="wrap split2" style={{ alignItems: 'center' }}>
        <div>
          <p className="h-eyebrow">what&rsquo;s included</p>
          <h2 className="h-2">Comprehensive care, <span className="faded">all in one day.</span></h2>
          <p style={{ font: '400 16px/1.6 var(--font-body)', color: 'var(--fg2)', margin: '18px 0 28px', maxWidth: '40ch' }}>
            Everything your recovery needs, coordinated under one roof &mdash; so the pieces work together instead of pulling you in different directions.
          </p>
          <ol style={{ listStyle: 'none', margin: 0, padding: 0, counterReset: 'feat' }}>
            {feats.map(([t, d], i) => (
              <li key={t} style={{ display: 'flex', gap: 18, alignItems: 'flex-start', padding: i === 0 ? '0 0 18px' : '18px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                <span style={{ flex: 'none', width: 34, height: 34, borderRadius: 999, background: 'var(--cream)', border: '1.5px solid var(--forest-300)', color: 'var(--forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 14px var(--font-display)', marginTop: 1 }}>{i + 1}</span>
                <div>
                  <h3 className="h-3" style={{ fontSize: 19, marginBottom: 4 }}>{t}</h3>
                  <p style={{ font: '400 15px/1.5 var(--font-body)', color: 'var(--fg2)', margin: 0 }} dangerouslySetInnerHTML={{ __html: d }}></p>
                </div>
              </li>
            ))}
          </ol>
        </div>
        <div className="order-img illo-tile tint-peach" style={{ padding: 16, alignSelf: 'stretch', minHeight: 440 }}>
          <div style={{ borderRadius: 'var(--r-md)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', width: '100%', height: '100%', minHeight: 408 }}>
            <img src="../../assets/photos/counseling.jpg" alt="A therapy session at the Burleson center" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

// "How it works" — interactive stepper, crisp numbered tiles (no blurry art).
function Process() {
  const steps = [
    { n: '1', t: 'Reach out', tint: 'mint',  d: 'A quick, confidential call or form. A Burleson care advocate listens, answers your questions, and verifies your insurance benefits for free.' },
    { n: '2', t: 'Find your fit', tint: 'lilac', d: 'A real conversation \u2014 not a 15-minute intake. We review your history, needs, and goals to determine the right level of care.' },
    { n: '3', t: 'Start your plan', tint: 'peach', d: 'You begin a personalized PHP schedule right away: individual therapy, groups, psychiatry, and family support, all in one place.' },
    { n: '4', t: 'Step down & thrive', tint: 'sky', d: 'As you stabilize, we plan your next phase \u2014 into IOP or aftercare \u2014 so the progress you\u2019ve made keeps going for the long run.' },
  ];
  const [active, setActive] = React.useState(0);
  const s = steps[active];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, marginBottom: 34 }}>
          <div>
            <p className="h-eyebrow">how it works</p>
            <h2 className="h-2">Your next step, <span className="faded">simplified.</span></h2>
          </div>
          <p style={{ font: '400 16px/1.6 var(--font-body)', color: 'var(--fg2)', margin: 0, maxWidth: '32ch' }}>
            Starting care should feel like relief, not another hurdle. Here&rsquo;s exactly what to expect.
          </p>
        </div>
        <div className="step-rail" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 20 }}>
          {steps.map((st, i) => (
            <button key={st.n} onClick={() => setActive(i)} style={{
              display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
              background: i === active ? 'var(--forest)' : 'var(--white)',
              color: i === active ? 'var(--cream)' : 'var(--forest)',
              border: '1.5px solid ' + (i === active ? 'var(--forest)' : 'var(--line)'),
              borderRadius: 'var(--r-md)', padding: '15px 17px', transition: 'all .2s var(--ease)'
            }}>
              <span style={{ flex: 'none', width: 30, height: 30, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 14px var(--font-display)', background: i === active ? 'var(--chartreuse)' : 'var(--cream)', color: 'var(--forest)' }}>{st.n}</span>
              <span style={{ font: '600 15px var(--font-display)' }}>{st.t}</span>
            </button>
          ))}
        </div>
        <div key={active} className="step-detail" style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0, alignItems: 'stretch', background: 'var(--white)', borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
          <div className={'illo-tile tint-' + s.tint} style={{ minHeight: 230, flexDirection: 'column', gap: 6 }}>
            <span style={{ font: '700 96px/1 var(--font-display)', color: 'var(--forest)', letterSpacing: '-.03em' }}>{'0' + s.n}</span>
            <span style={{ font: '600 13px var(--font-body)', color: 'var(--forest)', textTransform: 'uppercase', letterSpacing: '.12em', opacity: .7 }}>Step {s.n} of 4</span>
          </div>
          <div style={{ padding: '34px 38px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <h3 style={{ font: '600 30px var(--font-display)', color: 'var(--forest)', margin: '0 0 12px' }}>{s.t}</h3>
            <p style={{ font: '400 17px/1.6 var(--font-body)', color: 'var(--fg2)', margin: '0 0 22px', maxWidth: '52ch' }}>{s.d}</p>
            <div>
              <a href="#apply" className="btn btn-accent btn-caps">start step one</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { StepInside, WhatIsPHP, WhoFor, Features, Process });