// Testimonials (multi-up, REAL only) + prominent stats, location, FAQ, CTA, footer

function StatItem({ n, label, accent }) {
  return (
    <div style={{ borderTop: '2px solid rgba(226,227,77,.45)', paddingTop: 18 }}>
      <div style={{ font: '700 clamp(52px,6.4vw,82px)/0.95 var(--font-display)', color: 'var(--chartreuse)', letterSpacing: '-.03em' }}>{n}</div>
      <p style={{ font: '400 15.5px/1.5 var(--font-body)', color: 'var(--fg2-on-dark)', margin: '14px 0 0', maxWidth: '24ch' }}>{label}</p>
    </div>
  );
}

function StatsBand() {
  const stats = [
    ['5000+', 'mental health sessions delivered across the Dallas\u2013Fort Worth area.'],
    ['85%', 'of clients report improvement within the first 8 weeks.'],
    ['150+', 'licensed mental health professionals ready to help.'],
    ['24/7', 'access to resources and emotional support.'],
  ];
  return (
    <section className="sec" style={{ paddingTop: 24 }}>
      <div className="wrap">
        <div className="forest-band" style={{ padding: 'clamp(40px,5vw,64px)' }}>
          <div style={{ maxWidth: 640, marginBottom: 'clamp(36px,4vw,52px)' }}>
            <p className="h-eyebrow on-dark">the numbers</p>
            <h2 className="h-2" style={{ color: 'var(--cream)' }}>Trusted care, <span style={{ color: 'var(--chartreuse)' }}>proven outcomes.</span></h2>
            <p style={{ font: '400 16.5px/1.6 var(--font-body)', color: 'var(--fg2-on-dark)', margin: '14px 0 0', maxWidth: '52ch' }}>
              A decade of intensive, community-based behavioral health care across DFW &mdash; measured in lives changed, not just visits booked.
            </p>
          </div>
          <div className="stat-grid">
            {stats.map(([n, l]) => <StatItem key={n} n={n} label={l} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const reviews = [
    { name: 'Haley Stewart', loc: 'PHP \u00b7 Burleson', text: 'I don\u2019t think I will ever be able to adequately articulate what Mind Above Matter did for me in a time where I needed something so desperately. The program literally saved my life and set me back up for success. If you are thinking about starting this program, or referring someone you love \u2014 don\u2019t hesitate. I promise, you will not regret it.' },
    { name: 'Edna Hussat', loc: 'Parent', text: 'We had the absolute best experience. From the very beginning, they made our entire family feel included \u2014 explained everything clearly, welcomed our questions, and always made us feel heard. Their kindness, patience, and genuine care truly set them apart.' },
    { name: 'H. Searcy', loc: 'PHP & IOP Graduate', text: 'Graduating from the PHP and IOP program has been a life-changing experience for me. The therapists here are absolutely incredible \u2014 compassionate, skilled, and genuinely invested in helping you grow and heal. They made me feel seen, heard, and understood in a way that\u2019s rare to find.' },
    { name: 'Kaylyn Bryner', loc: 'NP Student', text: 'A dedicated and compassionate team of mental health professionals who truly prioritize client well-being and growth. I was particularly impressed by their commitment to individualized treatment, ensuring each client receives tailored and effective care.' },
  ];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec" style={{ background: 'var(--white)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, marginBottom: 36 }}>
          <div style={{ maxWidth: 560 }}>
            <p className="h-eyebrow">testimonials</p>
            <h2 className="h-2">Support that <span className="faded">empowers.</span></h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 3 }}>
              {[0,1,2,3,4].map(s => <i key={s} data-lucide="star" style={{ width: 19, height: 19, color: 'var(--accent)', fill: 'var(--accent)' }}></i>)}
            </div>
            <span style={{ font: '500 14px var(--font-body)', color: 'var(--fg2)' }}>5.0 from real Google reviews</span>
          </div>
        </div>
        <div className="tcols">
          {reviews.map(r => (
            <figure key={r.name} className="tcard">
              <div style={{ display: 'flex', gap: 3, marginBottom: 12 }}>
                {[0,1,2,3,4].map(s => <i key={s} data-lucide="star" style={{ width: 15, height: 15, color: 'var(--accent)', fill: 'var(--accent)' }}></i>)}
              </div>
              <blockquote style={{ margin: 0, font: '400 16px/1.6 var(--font-body)', color: 'var(--forest)' }}>{r.text}</blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18 }}>
                <div style={{ width: 42, height: 42, borderRadius: 999, background: 'var(--chartreuse)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 16px var(--font-display)', color: 'var(--forest)', flex: 'none' }}>{r.name.split(' ').map(w => w[0]).join('').slice(0,2)}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ font: '600 15px var(--font-display)', color: 'var(--forest)' }}>{r.name}</div>
                  <div style={{ font: '400 12.5px var(--font-body)', color: 'var(--fg3)' }}>{r.loc}</div>
                </div>
                <i data-lucide="quote" style={{ width: 22, height: 22, color: 'var(--line)' }}></i>
              </figcaption>
            </figure>
          ))}
          <a href="https://www.google.com/search?q=Mind+Above+Matter+Burleson+reviews" target="_blank" rel="noopener" className="tcard tcard-cta">
            <div style={{ font: '600 19px var(--font-display)', color: 'var(--forest)', marginBottom: 8 }}>Read more reviews</div>
            <p style={{ font: '400 14px/1.5 var(--font-body)', color: 'var(--fg2)', margin: '0 0 16px' }}>See what clients and families across DFW say about Mind Above Matter.</p>
            <span className="btn btn-ghost btn-caps">view on google</span>
          </a>
        </div>
        <p style={{ font: '400 12.5px var(--font-body)', color: 'var(--fg3)', marginTop: 18, textAlign: 'center' }}>Real reviews from Mind Above Matter clients &amp; families.</p>
      </div>
    </section>
  );
}

function Location() {
  const rows = [
    ['map-pin', 'Address', '2915 S. Burleson Blvd, Burleson, TX 76028'],
    ['phone', 'Call', '817-662-6179', 'tel:8176626179'],
    ['clock', 'Hours', 'Mon\u2013Fri, daytime program hours'],
    ['car', 'Parking', 'Free, on-site parking at the door'],
  ];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec" id="location">
      <div className="wrap location-grid">
        <div>
          <p className="h-eyebrow">find us</p>
          <h2 className="h-2">Easy to reach <span className="faded">from across south DFW.</span></h2>
          <p className="lead" style={{ margin: '16px 0 26px', maxWidth: '46ch' }}>
            We&rsquo;re right on Burleson Blvd &mdash; convenient to Burleson, Crowley, Joshua, Alvarado, and south Fort Worth. Come see the space before you decide.
          </p>
          <div style={{ display: 'grid', gap: 14, marginBottom: 28 }}>
            {rows.map(([ic, label, val, href], idx) => (
              <div key={label} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <div className={'illo-tile tint-' + ['mint','lilac','peach','sky'][idx]} style={{ flex: 'none', width: 44, height: 44, borderRadius: 'var(--r-sm)' }}>
                  <i data-lucide={ic} style={{ width: 20, height: 20, color: 'var(--forest)' }}></i>
                </div>
                <div>
                  <div style={{ font: '400 13px var(--font-body)', color: 'var(--fg3)' }}>{label}</div>
                  {href
                    ? <a href={href} style={{ font: '600 17px var(--font-display)', color: 'var(--forest)' }}>{val}</a>
                    : <div style={{ font: '600 16px var(--font-display)', color: 'var(--forest)' }}>{val}</div>}
                </div>
              </div>
            ))}
          </div>
          <a href="https://www.google.com/maps/dir/?api=1&destination=2915+S+Burleson+Blvd+Burleson+TX+76028" target="_blank" rel="noopener" className="btn btn-primary btn-caps"><i data-lucide="navigation" style={{ width: 15, height: 15 }}></i> get directions</a>
        </div>
        <div className="illo-tile tint-mint" style={{ padding: 12, minHeight: 380 }}>
          <iframe
            title="Map to Mind Above Matter Burleson"
            src="https://maps.google.com/maps?q=2915%20S%20Burleson%20Blvd%2C%20Burleson%2C%20TX%2076028&t=&z=14&ie=UTF8&iwloc=&output=embed"
            style={{ width: '100%', height: '100%', minHeight: 356, border: 0, borderRadius: 'var(--r-md)', display: 'block' }}
            loading="lazy"></iframe>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const faqs = [
    ['What\u2019s the difference between PHP and IOP?', 'PHP is more intensive \u2014 5\u20136 days a week, 6\u20138 hours a day \u2014 for when you need significant daily support. IOP is 9\u201320 hours a week and fits around work or school. Many clients step down from PHP to IOP as they stabilize.'],
    ['Where is the Burleson center located?', 'We\u2019re at 2915 S. Burleson Blvd, Burleson, TX 76028 \u2014 with free on-site parking, convenient to Burleson, Crowley, Joshua, and the south DFW area.'],
    ['What insurance do you accept?', 'We accept Medicaid and major commercial insurance plans. We\u2019ll verify your benefits and explain your coverage before you start \u2014 no surprises.'],
    ['What ages do you treat?', 'We serve adolescents ages 9 and up, as well as adults. Programs and spaces are tailored to each age group.'],
    ['How soon can I start?', 'Often within a few days. Reach out and a care advocate will guide you through a quick assessment and scheduling right away.'],
    ['Will I be able to go home each day?', 'Yes. PHP gives you intensive daytime care while you return home each evening \u2014 staying connected to family and your own routines.'],
  ];
  const [open, setOpen] = React.useState(0);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec" style={{ background: 'var(--white)' }}>
      <div className="wrap-narrow">
        <div style={{ textAlign: 'center', marginBottom: 38 }}>
          <p className="h-eyebrow" style={{ justifyContent: 'center' }}>questions</p>
          <h2 className="h-2">Good to know.</h2>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          {faqs.map(([q, a], i) => (
            <div key={q} style={{ border: '1px solid var(--line)', borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--cream)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, padding: '20px 22px', background: 'none', border: 'none', textAlign: 'left' }}>
                <span style={{ font: '600 17.5px var(--font-display)', color: 'var(--forest)' }}>{q}</span>
                <i data-lucide={open === i ? 'minus' : 'plus'} style={{ width: 21, height: 21, color: 'var(--accent)', flex: 'none' }}></i>
              </button>
              {open === i && <div style={{ padding: '0 22px 22px', font: '400 15.5px/1.6 var(--font-body)', color: 'var(--fg2)' }}>{a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section className="sec" id="contact">
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr', maxWidth: 560, margin: '0 auto', textAlign: 'center' }}>
        <p className="h-eyebrow" style={{ justifyContent: 'center' }}>recovery is possible</p>
        <h2 className="h-display" style={{ fontSize: 'clamp(40px,5.5vw,68px)' }}>Healing is <span className="faded">close.</span></h2>
        <p className="lead" style={{ margin: '16px auto 28px', maxWidth: '36ch' }}>
          You deserve the right support, in the right place, at the right time. Reach out and a Burleson care advocate will help you take the first step.
        </p>
        <div className="card card-md" style={{ textAlign: 'left', maxWidth: 440, margin: '0 auto', width: '100%' }}>
          <div style={{ font: '600 22px var(--font-display)', color: 'var(--forest)', textAlign: 'center', marginBottom: 4 }}>Request a callback</div>
          <p style={{ font: '400 13.5px/1.5 var(--font-body)', color: 'var(--fg2)', textAlign: 'center', margin: '0 0 16px' }}>Free, confidential, no obligation.</p>
          <LeadForm compact />
        </div>
        <div style={{ display: 'flex', gap: 22, justifyContent: 'center', marginTop: 24, flexWrap: 'wrap' }}>
          <a href="tel:8176626179" className="trust-item" style={{ fontSize: 15, fontWeight: 600, color: 'var(--forest)' }}><i data-lucide="phone"></i> 817-662-6179</a>
          <span className="trust-item" style={{ fontSize: 15 }}><i data-lucide="map-pin"></i> 2915 S. Burleson Blvd</span>
        </div>
      </div>
    </section>
  );
}

function LpFooter() {
  return (
    <footer style={{ background: 'var(--forest)', color: 'var(--fg2-on-dark)', padding: '44px 0 28px' }}>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18 }}>
        <img src="../../assets/logos/mam-wordmark-cream.png" alt="Mind Above Matter" style={{ height: 46 }} />
        <div style={{ font: '400 13.5px/1.7 var(--font-body)', textAlign: 'right' }}>
          2915 S. Burleson Blvd, Burleson, TX 76028 &middot; <a href="tel:8176626179" style={{ color: 'var(--chartreuse)', fontWeight: 600 }}>817-662-6179</a><br/>
          &copy;2026 Mind Above Matter. All rights reserved. &middot; JCAHO accredited
        </div>
      </div>
    </footer>
  );
}

function CallBar() {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div className="callbar">
      <a href="tel:8176626179" className="btn btn-primary btn-caps"><i data-lucide="phone" style={{ width: 15, height: 15 }}></i> call now</a>
      <a href="#apply" className="btn btn-accent btn-caps">verify coverage</a>
    </div>
  );
}
Object.assign(window, { StatsBand, Testimonials, Location, FAQ, FinalCTA, LpFooter, CallBar });