/* global React, Icon, BeginCTA */
const { useState: useStateAbout } = React;

function AboutPage({ navigate }) {
  const stages = [
  { tag: "InnerStanding", copy: "Self-awareness is where it begins. We trace patterns of thought, emotion, and behavior back to where they took root." },
  { tag: "OverStanding", copy: "Stepping outside the moment to see clearly. Distance creates choice; choice is where transformation lives." },
  { tag: "Understanding", copy: "Insight applied through living. Wisdom is what you do, not what you know." }];


  const whoIWorkWith = [
  "Adults navigating anxiety, stress, and emotional overwhelm",
  "Couples and partners working through communication, trust, and intimacy challenges",
  "LGBTQIA+ individuals exploring identity, relationships, and self-expression",
  "Men seeking healing, accountability, and purpose-driven growth",
  "People in polyamorous or ethically non-monogamous relationship structures",
  "Individuals who recognize recurring relational patterns, have experienced betrayal or relational trauma, and are ready to engage in deeper self-understanding and intentional change."];


  return (
    <div className="page">
      {/* Meet Gene, lede + sticky portrait */}
      <section className="section about-meet">
        <div className="container">
          <div className="about-meet__grid">
            <div className="about-meet__head reveal">
              <div className="eyebrow mb-16">Meet Gene Groves</div>
              <h2 className="about-meet__title">Gene Groves, <em className="serif-italic">LCPC, NCC</em></h2>
            </div>
            <aside className="about-meet__media reveal">
              <div className="about-meet__portrait imgframe imgframe--portrait" style={{ borderRadius: 12 }}>
                <img src="assets/gene-large.jpg" alt="Gene Groves, LCPC, NCC" />
              </div>
              <dl className="about-meet__meta">
                <div><dt>Credentials</dt><dd>LCPC, NCC</dd></div>
                <div><dt>Practice</dt><dd>I.O.U. Counseling Services</dd></div>
                <div><dt>Modality</dt><dd>Telehealth</dd></div>
              </dl>
            </aside>
            <div className="about-meet__body reveal delay-1">
              <p className="section__lede mt-32">
                I work with individuals and couples who are ready to move beyond surface-level insight and engage in meaningful, lasting change. Many of the clients I serve are high-functioning in their daily lives, yet internally navigating stress, relational tension, or patterns that no longer align with who they are becoming.
              </p>
              <p className="section__lede mt-32">
                My approach is structured, direct, and insight-driven. This is not a space for passive conversation; it is a space for clarity, accountability, and intentional growth. Together, we examine how your thoughts, emotions, and experiences intersect, and how those patterns influence your relationships, decisions, and overall sense of self.
              </p>
              <p className="section__lede mt-32">
                My work is grounded in the I.O.U. framework: Innerstanding, Overstanding, and Understanding.
              </p>
              <p className="section__lede mt-16">
                <strong>Innerstanding</strong> develops deep awareness of self, your internal world, emotional responses, and identity.
              </p>
              <p className="section__lede mt-16">
                <strong>Overstanding</strong> brings perspective, helping you recognize patterns, relational dynamics, and the impact of past experiences.
              </p>
              <p className="section__lede mt-16">
                <strong>Understanding</strong> is where change occurs, applying insight to make intentional decisions, strengthen relationships, and move forward with clarity.
              </p>
              <p className="section__lede mt-32">
                I specialize in working with clients navigating relational trauma and maladaptive relationship patterns, life transitions, identity shifts, and complex relationship dynamics. I also provide a dedicated space for men seeking to deepen emotional awareness, strengthen their sense of purpose, and develop more grounded ways of relating.
              </p>
              <p className="section__lede mt-32">
                Clients who choose this work are often seeking more than symptom relief; they are seeking alignment. Therapy here is collaborative, focused, and designed to help you move from confusion and reactivity toward clarity, direction, and a more intentional way of living.
              </p>
              <p className="section__lede mt-32" style={{ fontStyle: "italic" }}>
                If you are ready to invest in deeper self-understanding and meaningful change, I invite you to take the next step.
              </p>
              <a className="btn btn-primary mt-32" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Begin a Consultation</a>
            </div>
          </div>
        </div>
      </section>

      {/* Pull-quote on cloud bg */}
      <section style={{
        position: "relative",
        background: "linear-gradient(180deg, rgba(46,50,49,.86), rgba(46,50,49,.95)), url('assets/clouds.jpg') center/cover no-repeat",
        color: "rgba(255,255,255,.92)",
        padding: "120px 0"
      }}>
        <div className="container reveal" style={{ maxWidth: "900px", textAlign: "center", margin: "0 auto" }}>
          <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.3, fontWeight: 400 }}>
            “My work is grounded in the I.O.U. framework: Innerstanding, Overstanding, and Understanding.”
          </p>
        </div>
      </section>

      {/* I.O.U. framework breakdown */}
      <section className="section">
        <div className="container">
          <div className="text-center reveal" style={{ maxWidth: "720px", margin: "0 auto" }}>
            <div className="eyebrow mb-16">The I.O.U. Framework</div>
            <h2 style={{ fontSize: "clamp(36px, 4.4vw, 56px)" }}>How the work moves forward</h2>
          </div>
          <div className="phil-row" style={{ marginTop: 64 }}>
            <div className="phil-card reveal delay-1">
              <div className="phil-card__sigil flex-center"><Icon.SigilInner size={120} /></div>
              <h3 className="phil-card__title">Innerstanding</h3>
              <p className="phil-card__copy">Develops deep awareness of self, your internal world, emotional responses, and identity.</p>
            </div>
            <div className="phil-card reveal delay-2">
              <div className="phil-card__sigil flex-center"><Icon.SigilOver size={120} /></div>
              <h3 className="phil-card__title">Overstanding</h3>
              <p className="phil-card__copy">Brings perspective, helping you recognize patterns, relational dynamics, and the impact of past experiences.</p>
            </div>
            <div className="phil-card reveal delay-3">
              <div className="phil-card__sigil flex-center"><Icon.SigilUnder size={120} /></div>
              <h3 className="phil-card__title">Understanding</h3>
              <p className="phil-card__copy">Where change occurs, applying insight to make intentional decisions, strengthen relationships, and move forward with clarity.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Specialties + closing */}
      <section className="section section--cream">
        <div className="container">
          <div className="reveal" style={{ maxWidth: "820px", margin: "0 auto", textAlign: "center" }}>
            <div className="eyebrow mb-16">Areas of Specialty</div>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)" }}>For clients seeking alignment, not just relief.</h2>
            <p className="section__lede mt-32">
              I specialize in working with clients navigating relational trauma and maladaptive relationship patterns, life transitions, identity shifts, and complex relationship dynamics. I also provide a dedicated space for men seeking to deepen emotional awareness, strengthen their sense of purpose, and develop more grounded ways of relating.
            </p>
            <p className="section__lede mt-32">
              Clients who choose this work are often seeking more than symptom relief; they are seeking alignment. Therapy here is collaborative, focused, and designed to help you move from confusion and reactivity toward clarity, direction, and a more intentional way of living.
            </p>
            <p className="section__lede mt-32" style={{ fontStyle: "italic" }}>
              If you are ready to invest in deeper self-understanding and meaningful change, I invite you to take the next step.
            </p>
            <a className="btn btn-primary mt-32" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Begin a Consultation</a>
          </div>
        </div>
      </section>

      {/* How I work */}
      <section className="section">
        <div className="container text-center">
          <div className="reveal">
            <h2>How I Work</h2>
            <p className="section__lede" style={{ margin: "24px auto 0" }}>
              My counseling style integrates clinical expertise with a grounded, reflective process. I help clients examine the patterns that shape their lives, drawing from both self-awareness and lived experience. Sessions are honest, direct, a balance of deep listening, reflection, and practical guidance.
            </p>
          </div>
          <a className="btn btn-primary mt-32" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>New Patient Inquiry</a>
        </div>
      </section>

      {/* Who I work with */}
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div className="reveal imgframe imgframe--portrait" style={{ borderRadius: 12 }}>
              <img src="assets/gene-portrait-card.png" alt="Gene Groves" />
            </div>
            <div className="reveal delay-2">
              <h2 style={{ marginBottom: 32 }}>Who I Work With</h2>
              <div className="list-rows">
                {whoIWorkWith.map((w, i) =>
                <div className="list-row" key={i}>
                    <span className="list-row__text">{w}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section section--cream">
        <div className="container text-center">
          <div className="reveal">
            <h2>The Values Behind I.O.U.</h2>
            <p className="section__lede" style={{ margin: "24px auto 0" }}>
              If you are ready to engage in meaningful work that leads to clarity, healing, and intentional living, I welcome the opportunity to work with you.
            </p>
          </div>
          <div className="tag-row mt-48 reveal">
            {stages.map((s, i) =>
            <span key={i} className="tag-pill">{s.tag}</span>
            )}
            <span className="tag-pill">Real Change</span>
          </div>
        </div>
      </section>

      {/* Credentials & Insurance */}
      <section className="section">
        <div className="container text-center">
          <div className="reveal">
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)" }}>Credentials & Licensure</h2>
            <p className="section__lede" style={{ margin: "24px auto 0" }}>
              Gene Groves, LCPC, NCC · Licensed Clinical Professional Counselor · National Certified Counselor · Telehealth available in licensed states.
            </p>
          </div>

          <div className="reveal" style={{ marginTop: 80 }}>
            <h3 style={{ fontSize: "clamp(28px, 3.4vw, 40px)" }}>Accepted Insurance</h3>
            <p className="muted" style={{ margin: "16px auto 0", maxWidth: "60ch" }}>
              Insurance information will be updated soon. If you have questions about coverage or payment options, please reach out directly.
            </p>
            <div className="logos">
              <div className="logos__item">Aetna</div>
              <div className="logos__item">BCBS</div>
              <div className="logos__item">Cigna</div>
              <div className="logos__item">Optum</div>
              <div className="logos__item">United<wbr/>Healthcare</div>
              <div className="logos__item">Anthem</div>
            </div>
          </div>
        </div>
      </section>

      {/* Fees & Payment Options */}
      <section className="section section--cream pricing-section">
        <div className="container">
          <div className="text-center reveal" style={{ maxWidth: 880, margin: "0 auto" }}>
            <div className="eyebrow mb-16">Transparent Pricing</div>
            <h2 className="pricing-section__title">Fees &amp; <em className="serif-italic">Payment Options</em></h2>
            <p className="pricing-section__sub">
              Clear, transparent pricing for each service. Fees vary by service type, session length, and insurance coverage. Private pay, insurance-based services, and limited reduced-fee options may be available. Clients are encouraged to schedule a consultation to discuss fit, availability, and payment.
            </p>
          </div>

          <div className="pricing-grid">
            <article className="pricing-card reveal delay-1">
              <header className="pricing-card__head">
                <h3 className="pricing-card__title"><em className="serif-italic">Individual Counseling</em></h3>
                <p className="pricing-card__sub">Focused support for personal growth.</p>
              </header>
              <div className="pricing-card__rule" />
              <ul className="pricing-card__items">
                <li>
                  <span className="pricing-card__label">50 - 60 min session</span>
                  <span className="pricing-card__price">$150</span>
                </li>
                <li>
                  <span className="pricing-card__label">Extended (75 - 90 min)</span>
                  <span className="pricing-card__price">$200</span>
                </li>
              </ul>
              <a className="btn btn-pill" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Book</a>
            </article>

            <article className="pricing-card reveal delay-2">
              <header className="pricing-card__head">
                <h3 className="pricing-card__title"><em className="serif-italic">Couples &amp; Relationship</em></h3>
                <p className="pricing-card__sub">Support for communication and connection.</p>
              </header>
              <div className="pricing-card__rule" />
              <ul className="pricing-card__items">
                <li>
                  <span className="pricing-card__label">60 min session</span>
                  <span className="pricing-card__price">$175</span>
                </li>
                <li>
                  <span className="pricing-card__label">Extended (75 - 90 min)</span>
                  <span className="pricing-card__price">$225</span>
                </li>
              </ul>
              <a className="btn btn-pill" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Book</a>
            </article>

            <article className="pricing-card reveal delay-3">
              <header className="pricing-card__head">
                <h3 className="pricing-card__title"><em className="serif-italic">Groups &amp; Workshops</em></h3>
                <p className="pricing-card__sub">Shared spaces for reflection and growth.</p>
              </header>
              <div className="pricing-card__rule" />
              <ul className="pricing-card__items">
                <li>
                  <span className="pricing-card__label">Weekly group (90 min)</span>
                  <span className="pricing-card__price">$60</span>
                </li>
                <li>
                  <span className="pricing-card__label">4-session commitment</span>
                  <span className="pricing-card__price">$220</span>
                </li>
                <li>
                  <span className="pricing-card__label">Single workshop (2 - 3 hrs)</span>
                  <span className="pricing-card__price">$120 - $200</span>
                </li>
              </ul>
              <a className="btn btn-pill" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Book</a>
            </article>
          </div>

          <p className="pricing-section__note reveal">
            Sliding scale slots available based on need. Insurance accepted for select services, see above.
          </p>
        </div>
      </section>

      {/* Consultation CTA */}
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div className="reveal">
              <span className="eyebrow">Real People, Real Change</span>
              <h2 style={{ marginTop: 18 }}>Request a Consultation</h2>
              <p className="section__lede mt-32">
                If you are ready to engage in meaningful work that leads to clarity, healing, and intentional living, I welcome the opportunity to work with you.
              </p>
              <a className="btn btn-primary mt-32" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Request a Consultation</a>
            </div>
            <div className="reveal delay-2 imgframe imgframe--portrait" style={{ borderRadius: 12 }}>
              <img src="assets/woman-portrait.jpg" alt="Client" />
            </div>
          </div>
        </div>
      </section>
    </div>);

}

window.AboutPage = AboutPage;