/* global React, BeginCTA */

const { useEffect: useEffectSvc } = React;

function ServicesPage({ navigate }) {
  // When the page mounts (or hash changes), if the URL is /services?focus=<slug>,
  // smooth-scroll to that service section after layout settles.
  useEffectSvc(() => {
    const scrollToFocus = () => {
      const m = window.location.hash.match(/^#\/services\?focus=([^&]+)/);
      if (!m) return;
      const slug = decodeURIComponent(m[1]);
      const el = document.getElementById(`svc-${slug}`);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 60;
        window.scrollTo({ top, behavior: "smooth" });
      }
    };
    // Wait one frame so sections are mounted
    const t = setTimeout(scrollToFocus, 80);
    window.addEventListener("hashchange", scrollToFocus);
    return () => {
      clearTimeout(t);
      window.removeEventListener("hashchange", scrollToFocus);
    };
  }, []);
  // Seven service areas, each rendered as a full-bleed photo section with a
  // centered glass card, exactly matching the Figma source. The first item
  // (Individual) is the hero; the rest follow.
  const services = [
  {
    title: "Individual Counseling",
    blurb:
    "Individual counseling provides a space to better understand yourself, your thoughts, your emotions, and the patterns that may be keeping you stuck.",
    bg: "assets/svc-individual.png",
    hero: true,
    help: {
      title: "How Counseling Can Help",
      intro: "Through individual counseling, we will:",
      items: [
      "Identify patterns in behavior, relationships, and decision-making (InnerStanding)",
      "Help you step outside of reactivity and gain perspective (OverStanding)",
      "Develop practical tools and strategies to support change",
      "Apply insight to real-life situations so you can move forward with intention (Understanding)"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "Experiencing anxiety, stress, or emotional disconnection",
      "Working through past trauma or relational patterns",
      "Navigating life transitions",
      "Seeking clarity, direction, or personal growth"]

    }
  },
  {
    title: "Couples & Relationship Counseling",
    blurb:
    "Couples therapy focuses on improving communication, understanding patterns, and strengthening emotional connection.",
    bg: "assets/svc-couples.png",
    help: {
      title: "What to Expect in Session",
      intro: "In our work together, we will:",
      items: [
      "Identify recurring patterns and conflict cycles within the relationship (InnerStanding)",
      "Create space for each person to be heard and understood",
      "Shift from reactive communication to intentional dialogue (OverStanding)",
      "Practice new ways of communicating, repairing, and reconnecting (Understanding)"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "Couples experiencing communication breakdown",
      "Couples seeking meaningful improvement, not just temporary resolution",
      "Couples willing to engage in honest and respectful dialogue",
      "Partners seeking deeper attunement and intimacy",
      "Polyamorous & ethically non-monogamous relationships",
      "Couples navigating trust, transition, or repair"]

    }
  },
  {
    title: "LGBTQIA+ Affirming Therapy",
    blurb:
    "This is a safe, affirming space to explore identity, relationships, and life experiences with authenticity and support.",
    bg: "assets/svc-lgbtq.png",
    help: {
      title: "What This Work Offers",
      intro: "In our work together, we will create:",
      items: [
      "A nonjudgmental, affirming environment",
      "Space to explore identity, relationships, and personal experiences (InnerStanding)",
      "Development of clarity, confidence, and perspective (OverStanding)",
      "Integration of identity into daily, intentional living (Understanding)"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "LGBTQIA+ individuals at any stage of their journey",
      "People navigating coming-out, transition, or family dynamics",
      "Identity exploration",
      "Navigating societal or family challenges"]

    }
  },
  {
    title: "Men's Work",
    blurb:
    "Men's work focuses on emotional awareness, accountability, identity development, and purpose.",
    bg: "assets/svc-mens.png",
    help: {
      title: "What to Expect",
      intro: "In our work together, we will:",
      items: [
      "Surface the patterns under anger, withdrawal, or numbness (InnerStanding)",
      "Challenge avoidance, emotional suppression, and reactive behaviors",
      "Develop perspective, accountability, and self-awareness (OverStanding)",
      "Translate insight into intentional action in relationships and life (Understanding)"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "Men who are ready to be honest about where they are",
      "Men seeking clarity and direction",
      "Fathers, partners, and leaders seeking grounded presence",
      "Navigating life transitions",
      "Seeking clarity, direction, or personal growth"]

    }
  },
  {
    title: "Relational Trauma & Maladaptive Relationship Patterns",
    blurb:
    "This work focuses on understanding and breaking free from harmful relational patterns while rebuilding your sense of self.",
    bg: "assets/svc-narcissistic.png",
    help: {
      title: "What This Work Involves",
      intro: "Our work together will help you:",
      items: [
      "Develop awareness of your emotional responses, triggers, and internal experiences (Innerstanding)",
      "Identify patterns of manipulation, control, or emotional harm",
      "Understand how these experiences have impacted your identity and choices",
      "Gain perspective and clarity about what is happening and why (OverStanding)",
      "Rebuild self-worth and identity (Understanding)"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "Repeated unhealthy relationship patterns",
      "Rebuilding self-worth and identity",
      "Anyone rebuilding trust in themselves and others"]

    }
  },
  {
    title: "Life Transitions & Identity",
    blurb:
    "Life transitions can create uncertainty, stress, and questions about direction and identity.",
    bg: "assets/svc-life.png",
    help: {
      title: "How Counseling Can Help",
      intro: "Together we will:",
      items: [
      "Make sense of what's shifting and why it matters (InnerStanding)",
      "Hold the bigger picture without losing the present moment (OverStanding)",
      "Clarify your values, goals, and identity",
      "Move forward with intention rather than reaction (Understanding)"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "Career or life changes",
      "Relationship transitions",
      "Identity exploration",
      "Anyone in a chapter shift looking for grounding"]

    }
  },
  {
    title: "Group Therapy / Healing Circles",
    blurb:
    "Group therapy provides a shared space for growth, connection, and learning alongside others with similar experiences.",
    bg: "assets/svc-group.jpg",
    help: {
      title: "What to Expect in Group Sessions",
      intro: "Group sessions include:",
      items: [
      "Topical discussion and practice",
      "Group exercises focused on relational patterns (InnerStanding)",
      "Exploration of patterns, communication, and identity (OverStanding)",
      "Sharing perspectives through group interaction (Understanding)",
      "Practicing new ways of relating in a supported space"]

    },
    who: {
      title: "Who This Is For",
      items: [
      "Persons open to shared experiences and perspectives",
      "Individuals seeking both personal insight and collective understanding",
      "Men's development and growth",
      "Adults in recovery",
      "Healing from past experiences",
      "People interested in community-led learning"]

    }
  }];


  return (
    <div className="page services-page">
      {/* Hero strip */}
      <section className="services-top">
        <div className="container">
          <div className="services-top__grid">
            <h1 className="services-top__title reveal" style={{ fontSize: "72px" }}>
              Areas of <em className="serif-italic">Focus</em>
            </h1>
            <p className="services-top__lede reveal delay-2">
              Each client's path is unique. I.O.U. Counseling Services provides specialized
              support across these areas, each rooted in Innerstanding,
              Overstanding, and Understanding.
            </p>
          </div>
        </div>
      </section>

      {/* Service sections */}
      {services.map((s, i) =>
      <ServiceSection key={i} data={s} index={i} navigate={navigate} />
      )}

      {/* Marquee strip */}
      <div className="marquee">
        <div className="marquee__track">
          {[...Array(2)].map((_, k) =>
          <div className="marquee__item" key={k}>
              <span>Increase self-awareness</span>
              <span>Strengthen communication</span>
              <span>Break repetitive patterns</span>
              <span>Live with intention</span>
            </div>
          )}
        </div>
      </div>

      <BeginCTA navigate={navigate} />
    </div>);

}

function slugify(s) {
  return s.toLowerCase().replace(/&/g, "and").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
}

function ServiceSection({ data, index, navigate }) {
  return (
    <section
      id={`svc-${slugify(data.title)}`}
      className="svc-section reveal"
      style={{
        backgroundImage: `linear-gradient(rgba(0,0,0,0.46), rgba(0,0,0,0.46)), url('${data.bg}')`
      }}>
      
      <div className="svc-section__noise" aria-hidden="true" />
      <div className="container">
        <article className="svc-card">
          <header className="svc-card__head">
            <h2 className="svc-card__title" style={{ fontSize: "50.284px" }}>{data.title}</h2>
            <p className="svc-card__blurb">{data.blurb}</p>
          </header>

          <div className="svc-card__cols">
            <div className="svc-col">
              <h3 className="svc-col__title">{data.help.title}</h3>
              {data.help.intro &&
              <p className="svc-col__intro">{data.help.intro}</p>
              }
              <ul className="svc-list">
                {data.help.items.map((it, k) =>
                <li key={k}>
                    <span className="svc-check" aria-hidden="true">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M2 7.5L5.5 11L12 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </span>
                    <span>{renderWithEmphasis(it)}</span>
                  </li>
                )}
              </ul>
            </div>

            <div className="svc-col">
              <h3 className="svc-col__title">{data.who.title}</h3>
              <ul className="svc-list">
                {data.who.items.map((it, k) =>
                <li key={k}>
                    <span className="svc-check" aria-hidden="true">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M2 7.5L5.5 11L12 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </span>
                    <span>{it}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>

          <footer className="svc-card__foot">
            <span className="svc-card__hint">
              Sessions are confidential, judgment-free, and tailored to your goals.
            </span>
            <a
              className="btn btn-light btn-sm"
              href="#/contact"
              onClick={(e) => {e.preventDefault();navigate("/contact");}}>
              
              Inquire about this work
            </a>
          </footer>
        </article>
      </div>
    </section>);

}

// Wrap parenthetical (Innerstanding) (Overstanding) (Understanding) in <em>
// Case-insensitive so both "InnerStanding" and "Innerstanding" match.
function renderWithEmphasis(text) {
  const parts = text.split(/(\((?:Inner[Ss]tanding|Over[Ss]tanding|Understanding)\))/g);
  return parts.map((p, i) =>
  /^\((?:Inner[Ss]tanding|Over[Ss]tanding|Understanding)\)$/.test(p) ?
  <em key={i} className="svc-emph">{p}</em> :
  <React.Fragment key={i}>{p}</React.Fragment>
  );
}

window.ServicesPage = ServicesPage;