/* global React, Icon, BeginCTA */
const { useEffect, useRef, useState } = React;

function HomePage({ navigate }) {
  // Philosophy cards
  const phil = [
  { title: "InnerStanding", copy: "Self-awareness, recognizing patterns, emotion, memory, triggers, and the internal world.", num: "01", Sigil: Icon.SigilInner },
  { title: "OverStanding", copy: "Wisdom and transparent living. Free yourself, alignment with values, environment, and intention.", num: "02", Sigil: Icon.SigilOver },
  { title: "Understanding", copy: "Insight and clarity. Making meaning of lived experiences, relationships, choices, and recurring cycles.", num: "03", Sigil: Icon.SigilUnder }];


  const focus = [
  { title: "Couples & Relationship Counseling", img: "assets/focus-couples.png", slug: "couples-and-relationship-counseling" },
  { title: "Individual Counseling", img: "assets/focus-individual.png", slug: "individual-counseling" },
  { title: "LGBTQIA+ Affirming Therapy", img: "assets/focus-lgbtq.png", slug: "lgbtqia-affirming-therapy" },
  { title: "Men's Work", img: "assets/focus-mens.png", slug: "men-s-work" },
  { title: "Relational Trauma & Maladaptive Relationship Patterns", img: "assets/focus-narcissistic.png", slug: "relational-trauma-and-maladaptive-relationship-patterns" },
  { title: "Life Transitions & Identity", img: "assets/focus-life.png", slug: "life-transitions-and-identity" }];


  const faqs = [
  { q: "Do you offer in-person or telehealth sessions?", a: "I.O.U. Counseling Services offers telehealth sessions only for clients in licensed states. Sessions are conducted through a secure online platform, allowing you to access care from the comfort and privacy of your own space." },
  { q: "What can I expect in the first session?", a: "Your first session is a conversation. We'll talk about what's bringing you in, what you're hoping for, and how I work, so you can decide whether this feels like the right fit before we go further." },
  { q: "Do you accept insurance?", a: "I am out-of-network for most insurance plans. I can provide a superbill on request, which many clients submit to their insurance for partial reimbursement." },
  { q: "What can I expect in the first session?", a: "Mostly listening. I'll ask about your history, current life, what's working and what isn't. You won't be expected to have it all figured out, that's what the work is for." },
  { q: "Do you work with individuals, couples, and groups?", a: "Yes. I see individuals weekly or bi-weekly, work with couples and partnered systems, and run small healing circles a few times per year." },
  { q: "How long are sessions and how often do we meet?", a: "Standard sessions are 50 minutes; extended sessions run 75-90 minutes. Most clients meet weekly to start, then taper as the work progresses." }];


  const [openFaq, setOpenFaq] = useState(0);

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero">
        <video
          className="hero__bg"
          autoPlay muted loop playsInline preload="auto"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%", position: "absolute", inset: 0, zIndex: 0 }}
          src="assets/hero.mp4" />
        
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,28,24,.45) 0%, rgba(15,28,24,.55) 60%, rgba(15,28,24,.85) 100%)", zIndex: 1 }} />
        <div style={{ position: "absolute", inset: 0, background: "url('assets/grain.png')", opacity: .1, mixBlendMode: "overlay", zIndex: 1, pointerEvents: "none" }} />
        <div className="hero__content">
          <h1 className="hero__title" data-reveal-words>Understand Yourself. Reclaim Your Power. <em>Transform Your Relationships</em><span style={{ color: "var(--sage-500)" }}>.</span></h1>
          <div>
            <p className="hero__lede" data-reveal-words>Therapy that moves beyond coping into clarity,
alignment, and intentional living.</p>
            <div className="hero__cta-row">
              <a className="btn btn-primary" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>BOOK A CONSULTATION</a>
              <a className="btn btn-light" href="#/philosophy" onClick={(e) => {e.preventDefault();navigate("/philosophy");}}>Our Approach</a>
            </div>
            <ul className="hero__pillars" aria-label="Our framework">
              <li><a href="#philosophy" onClick={(e) => {e.preventDefault();const el = document.getElementById("philosophy");if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });}}><span className="hero__pillar-num">I</span><span className="hero__pillar-name">InnerStanding</span></a></li>
              <li aria-hidden="true" className="hero__pillar-sep" />
              <li><a href="#philosophy" onClick={(e) => {e.preventDefault();const el = document.getElementById("philosophy");if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });}}><span className="hero__pillar-num">O</span><span className="hero__pillar-name">OverStanding</span></a></li>
              <li aria-hidden="true" className="hero__pillar-sep" />
              <li><a href="#philosophy" onClick={(e) => {e.preventDefault();const el = document.getElementById("philosophy");if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });}}><span className="hero__pillar-num">U</span><span className="hero__pillar-name">Understanding</span></a></li>
            </ul>
          </div>
        </div>
      </section>

      {/* DIFFERENT APPROACH */}
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div className="reveal">
              <span className="icon-leaf" style={{ marginBottom: 24 }}><Icon.Leaf /></span>
              <h2 style={{ fontSize: "50.284px" }}>A Different Approach to Counseling</h2>
              <p className="section__lede mt-32">
                You may not have all the answers yet, but you know something isn't working. At I.O.U. Counseling Services, the focus is not just on managing symptoms, but on understanding the patterns beneath them and creating meaningful, lasting change. Through the I.O.U. framework (Innerstanding, Overstanding, and Understanding), you move from awareness, to insight, to intentional action.
              </p>
              <p className="section__lede mt-16" style={{ fontStyle: "italic" }}>
                This is where clarity replaces confusion, and change becomes possible.
              </p>
              <a className="btn btn-primary mt-32" href="#/philosophy" onClick={(e) => {e.preventDefault();navigate("/philosophy");}}>View our approach</a>
            </div>
            <div className="reveal delay-2 home-approach__art">
              <img src="assets/home-approach-flower.png" alt="A different approach, a soft, organic depiction of growth" />
            </div>
          </div>
        </div>
      </section>

      {/* MEET GENE */}
      <section className="section section--cream">
        <div className="container">
          <div className="two-col">
            <div className="reveal imgframe imgframe--portrait" style={{ borderRadius: 12 }}>
              <img src="assets/gene-large.jpg" alt="Gene Groves, LCPC, NCC" />
            </div>
            <div className="reveal delay-2">
              <div className="eyebrow mb-16">Meet Gene Groves</div>
              <h2 style={{ fontSize: "50.284px" }}>Gene Groves, LCPC, NCC</h2>
              <p className="section__lede mt-32">
                I work with individuals and couples seeking more than symptom relief; they want clarity, alignment, and meaningful change. Using the I.O.U. framework (Innerstanding, Overstanding, and Understanding), I provide a structured, insight-driven approach that guides clients from awareness to intentional action.
              </p>
              <div className="hero__cta-row mt-32">
                <a className="btn btn-primary" href="#/about" onClick={(e) => {e.preventDefault();navigate("/about");}}>More about Gene</a>
                <a className="btn btn-ghost" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>Begin a Consultation</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY */}
      <section id="philosophy" className="section">
        <div className="container">
          <div className="text-center reveal">
            <h2 style={{ fontSize: "50.284px" }}>The I.O.U. Philosophy</h2>
            <p className="section__lede" style={{ margin: "24px auto 0" }}>
              You're closer than you think. And every step you take makes it clearer.
            </p>
          </div>
          <div className="phil-row">
            {phil.map((p, i) => <div key={i} className={`phil-card reveal delay-${i + 1}`}>
                <div className="phil-card__sigil flex-center"><p.Sigil size={120} /></div>
                <h3 className="phil-card__title">{p.title}</h3>
                <p className="phil-card__copy">{p.copy}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* AREAS OF FOCUS */}
      <section className="section section--cream">
        <div className="container text-center">
          <div className="reveal">
            <div className="eyebrow mb-16">Where the work happens</div>
            <h2 style={{ fontSize: "50.284px" }}>Areas of Focus</h2>
          </div>
          <div className="aof-grid" style={{ textAlign: "left" }}>
            {focus.map((f, i) =>
            <a key={i} href={`#/services?focus=${f.slug}`} onClick={(e) => {e.preventDefault();navigate(`/services?focus=${f.slug}`);}}
            className={`aof-card reveal delay-${i % 3 + 1}`}
            style={{ backgroundImage: `url('${f.img}')` }}>
                <div className="aof-card__overlay" />
                <h3 className="aof-card__title" style={{ fontSize: "25px" }}>{f.title}</h3>
              </a>
            )}
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <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>
              <span>Heal what holds you back</span>
              <span>Find clarity</span>
            </div>
          )}
        </div>
      </div>

      {/* FAQ */}
      <section className="section">
        <div className="container">
          <div className="faq">
            <div className="reveal">
              <div className="faq__title">Your questions.<br />Answered.</div>
              <p className="section__lede mt-32">Not sure what to expect? These answers might help you feel more confident as you begin.</p>
              <p style={{ color: "var(--slate-700)", marginTop: 32, lineHeight: 1.6, maxWidth: "40ch" }}>
                Didn't find your answer? Send us a message, we'll respond with care and clarity.
              </p>
              <a className="btn btn-primary mt-32" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>New Patient Inquiry</a>
            </div>
            <div className="faq__list reveal delay-2">
              {faqs.map((f, i) =>
              <div key={i} className={`faq__item ${openFaq === i ? "is-open" : ""}`}>
                  <button className="faq__head" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="faq__plus" />
                  </button>
                  <div className="faq__body" style={{ maxHeight: openFaq === i ? 400 : 0 }}>
                    <div className="faq__body-inner">{f.a}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>);

}

window.HomePage = HomePage;