/* Subpages: IIC, Outpatient, Team, Join, Contact, IIC-request */

const { useState: useStateP } = React;

// =================================================================
// IIC PAGE
// =================================================================
const IICPage = ({ navigate }) => {
  return (
    <div className="page active">
      {/* HERO */}
      <section className="section-pad-sm" style={{ overflow: "hidden" }}>
        <div className="hero-blob-lg" style={{ position: "absolute", top: -50, right: -150, width: 500, height: 500, opacity: 0.5 }}>
          <OrganicBlob color="#A8B5A0" seed={1} />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 780 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <span style={{ fontSize: 12, color: "var(--muted)" }} onClick={() => navigate('home')} >Home</span>
              <span style={{ fontSize: 12, color: "var(--muted)" }}>›</span>
              <span style={{ fontSize: 12, color: "var(--terracotta-deep)", textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 500 }}>IIC Services</span>
            </div>
            <span className="eyebrow">Intensive In-Community</span>
            <h1 style={{ fontSize: "clamp(48px, 6vw, 84px)", marginTop: 18, fontWeight: 350, lineHeight: 1.02, letterSpacing: "-0.025em" }}>
              Care that comes to <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>where you live</em>.
            </h1>
            <p style={{ fontSize: 19, color: "var(--ink-soft)", marginTop: 32, maxWidth: 620, lineHeight: 1.6 }}>
              IIC provides crisis stabilization for youth (ages 0–21) and their families with emotional or behavioral challenges. Services are short-term, strength-based, and provided within the family's home.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <a className="btn btn-primary" onClick={() => navigate('iic-request')}>Request IIC services <span className="btn-arrow"></span></a>
              <a className="btn btn-secondary" onClick={() => navigate('team')}>Meet our IIC team</a>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT IT LOOKS LIKE */}
      <section className="section-pad" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <div className="grid-aside">
            <div className="sticky-side">
              <span className="eyebrow">What we work on</span>
              <h2 className="h-section" style={{ fontSize: 44, marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>
                Areas our IIC clinicians specialize in.
              </h2>
              <p style={{ marginTop: 20, fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.7 }}>
                EDNI clinicians assist youth and families experiencing emotional and behavioral challenges. Sessions are weekly and up to 2+ hours.
              </p>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {[
                { time: "Anger Management", place: "Behavioral", note: "Skills for emotional regulation and de-escalation in moments of conflict." },
                { time: "Substance Abuse", place: "Behavioral", note: "Support for youth navigating substance use and the family dynamics around it." },
                { time: "School Refusal", place: "Behavioral", note: "Working with families and school counselors to rebuild attendance routines." },
                { time: "ADHD", place: "Clinical", note: "Attention deficit hyperactivity disorder — focus, structure, and family supports." },
                { time: "Depression / Anxiety", place: "Clinical", note: "Mood and anxiety challenges, plus suicidal ideation when present." },
                { time: "Trauma", place: "Clinical", note: "Including sexual abuse and adjustment disorder where relevant." },
                { time: "OCD / ODD", place: "Clinical", note: "Obsessive Compulsive Disorder and Oppositional Defiant Disorder." },
                { time: "Autism Spectrum", place: "Developmental", note: "Plus learning disorders and cognitive developmental delays." },
                { time: "Bullying", place: "Social", note: "Peer relationship work and parent-child communication repair." },
              ].map((s, i) => (
                <div key={i} className="iic-spec-row" style={{
                  background: "var(--cream)",
                  padding: "22px 26px",
                  borderRadius: 14,
                  border: "1px solid var(--line)",
                  display: "grid",
                  gridTemplateColumns: "auto 1fr",
                  gap: 24,
                  alignItems: "center",
                }}>
                  <div style={{ minWidth: 140 }}>
                    <div style={{ fontFamily: "Fraunces, serif", fontSize: 16, color: "var(--forest)", fontWeight: 400 }}>{s.time}</div>
                    <div style={{ fontSize: 11, color: "var(--terracotta-deep)", textTransform: "uppercase", letterSpacing: "0.18em", marginTop: 4 }}>{s.place}</div>
                  </div>
                  <div style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.55, fontStyle: "italic", fontFamily: "Fraunces, serif", fontWeight: 350 }}>
                    "{s.note}"
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* WHO IT'S FOR */}
      <section className="section-pad-lg">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 700, margin: "0 auto 70px" }}>
            <span className="eyebrow">Where we serve</span>
            <h2 style={{ fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 14, fontWeight: 350, lineHeight: 1.08 }}>
              Currently available across nine NJ counties.
            </h2>
          </div>

          <div className="grid-3" style={{ gap: 28 }}>
            {[
              { age: "0–21", t: "Youth", d: "We work with youth and families experiencing emotional or behavioral challenges in the family's home." },
              { age: "9 counties", t: "Counties served", d: "Bergen, Passaic, Hudson, Essex, Union, Monmouth, Ocean, Morris, and Sussex." },
              { age: "Passaic", t: "BPS contract", d: "We are also contracted to provide Bio-Psycho Socials (BPS) to youth in Passaic County." },
            ].map((g, i) => (
              <div key={i} style={{
                padding: "40px 36px",
                background: "var(--cream)",
                border: "1px solid var(--line)",
                borderRadius: 18,
                position: "relative",
              }}>
                <div style={{
                  position: "absolute", top: -14, left: 36,
                  background: "var(--terracotta)", color: "var(--cream)",
                  padding: "6px 14px", borderRadius: 999,
                  fontSize: 11, fontWeight: 600, letterSpacing: "0.1em",
                }}>{g.age}</div>
                <h3 style={{ fontSize: 28, marginTop: 16, fontWeight: 350 }}>{g.t}</h3>
                <p style={{ marginTop: 14, fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.65 }}>{g.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section-pad" style={{ background: "var(--forest)", color: "var(--cream)" }}>
        <div className="container">
          <div className="grid-aside">
            <div>
              <span className="eyebrow" style={{ color: "var(--terracotta)" }}>How it works</span>
              <h2 className="h-section" style={{ color: "var(--cream)", fontSize: 44, marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>
                Referrals come through <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>PerformCare</em>.
              </h2>
            </div>
            <div>
              {[
                { n: "01", t: "Contact PerformCare", d: "Services are referred by contacting PerformCare. You can reach out to us directly first — we can help guide you through the referral." },
                { n: "02", t: "Weekly home sessions", d: "Sessions are scheduled weekly and up to 2+ hours, provided within the family's home." },
                { n: "03", t: "Family-centered work", d: "We help parents and guardians develop and implement effective and consistent parenting skills, and strengthen the family's natural support system." },
                { n: "04", t: "Wraparound coordination", d: "In line with the Wraparound Values, we work closely with community based system partners — schools, DCPP, Juvenile Justice System, PerformCare, etc." },
              ].map((s, i) => (
                <div key={i} style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr",
                  gap: 32,
                  padding: "28px 0",
                  borderBottom: i < 3 ? "1px solid rgba(244,239,230,0.12)" : "none",
                }}>
                  <div className="stat-num-md" style={{ fontFamily: "Fraunces, serif", fontSize: 36, color: "var(--terracotta)", fontWeight: 350, lineHeight: 1 }}>{s.n}</div>
                  <div>
                    <h3 style={{ color: "var(--cream)", fontSize: 22, fontWeight: 400 }}>{s.t}</h3>
                    <p style={{ marginTop: 10, fontSize: 15, opacity: 0.8, lineHeight: 1.65 }}>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-pad-sm" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 350, lineHeight: 1.1 }}>
              Ready to start IIC for your family?
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.6 }}>
              Use our request form to share a few details and we'll be in touch within 1–2 business days.
            </p>
            <a className="btn btn-primary" style={{ marginTop: 32 }} onClick={() => navigate('iic-request')}>Request IIC services <span className="btn-arrow"></span></a>
          </div>
        </div>
      </section>
    </div>
  );
};

// =================================================================
// OUTPATIENT PAGE
// =================================================================
const OutpatientPage = ({ navigate }) => {
  const [openFaq, setOpenFaq] = useStateP(0);
  const faqs = [
    { q: "Will you accept insurance?", a: "We have clinicians who are in-network with Aetna. We also have clinicians who accept out-of-pocket payments, starting at $150." },
    { q: "How long are sessions?", a: "Sessions are typically 60 minutes each." },
    { q: "Will all sessions be held in the office?", a: "Sessions can be hybrid (virtually & in person). You and your clinician will discuss each other's schedule and your clinician will recommend sessions based on your needs and goals." },
    { q: "How do I schedule an appointment?", a: "As a new client, we ask to schedule a free consultation so we can get to know you and discuss what you are seeking to achieve in therapy. This process will also give you the opportunity to ask any questions you may have." },
    { q: "What ages do you work with?", a: "We work with adolescents, teens, and adults." },
    { q: "What should I do if I need to cancel an appointment?", a: "If you need to cancel or reschedule, please provide at least 24 hours' notice to avoid a cancellation fee." },
    { q: "What are your office hours?", a: "We offer flexible hours, including evenings and weekends. Contact us for specific availability." },
    { q: "How long will I need therapy?", a: "There is no specific time frame. Each client has individual challenges and goals. Depending on the treatment goals, you may need additional sessions more than others." },
  ];

  return (
    <div className="page active">
      <section className="section-pad-sm" style={{ overflow: "hidden" }}>
        <div className="hero-blob-lg" style={{ position: "absolute", top: -100, right: -100, width: 500, height: 500, opacity: 0.5 }}>
          <OrganicBlob color="#E8D5C4" seed={0} />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 780 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <span style={{ fontSize: 12, color: "var(--muted)" }}>Home</span>
              <span style={{ fontSize: 12, color: "var(--muted)" }}>›</span>
              <span style={{ fontSize: 12, color: "var(--terracotta-deep)", textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 500 }}>Outpatient</span>
            </div>
            <span className="eyebrow">Outpatient services</span>
            <h1 style={{ fontSize: "clamp(48px, 6vw, 84px)", marginTop: 18, fontWeight: 350, lineHeight: 1.02, letterSpacing: "-0.025em" }}>
              Welcome to <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>Outpatient Services</em>.
            </h1>
            <p style={{ fontSize: 19, color: "var(--ink-soft)", marginTop: 32, maxWidth: 620, lineHeight: 1.6 }}>
              Individual, family, group, and play therapy in our Emerson office. Each client is assessed by a licensed professional to determine the right form of care and length of services. Sessions are approximately 60 minutes each.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <a className="btn btn-primary" onClick={() => navigate('contact')}>Book consultation <span className="btn-arrow"></span></a>
              <a className="btn btn-secondary" onClick={() => navigate('team')}>Browse clinicians</a>
            </div>
          </div>
        </div>
      </section>

      {/* SPECIALTIES TAG CLOUD */}
      <section style={{ padding: "60px 0 100px" }}>
        <div className="container">
          <span className="eyebrow">Specialties</span>
          <h2 className="h-section" style={{ fontSize: 36, marginTop: 12, fontWeight: 350, marginBottom: 36 }}>What we work on, together.</h2>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {["Depression", "Anxiety", "Trauma & PTSD", "Mood Disorders", "Work/Life Stressors", "Oppositional Defiance (ODD)", "Obsessive Compulsive (OCD)", "ADHD", "Self-esteem issues", "Behavioral Issues", "Autism Spectrum Disorders", "Family Conflict", "Anger Management", "Adjustment Disorder", "Suicidal Ideation", "Postpartum Depression"].map((tag, i) => (
              <div key={i} style={{
                padding: "10px 18px",
                background: i % 5 === 2 ? "var(--forest)" : "var(--cream-warm)",
                color: i % 5 === 2 ? "var(--cream)" : "var(--ink)",
                borderRadius: 999,
                fontSize: 14,
                border: i % 5 === 2 ? "none" : "1px solid var(--line)",
                fontWeight: 400,
              }}>{tag}</div>
            ))}
          </div>
        </div>
      </section>

      {/* MODALITIES */}
      <section className="section-pad" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 64px" }}>
            <span className="eyebrow">How we work</span>
            <h2 style={{ fontSize: "clamp(36px, 4vw, 52px)", marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>
              Different problems need <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>different tools</em>.
            </h2>
          </div>

          <div className="grid-3" style={{ gap: 24 }}>
            {[
              { t: "CBT", f: "Cognitive Behavioral Therapy", d: "Identifying the thought patterns that keep you stuck — and gently rewiring them." },
              { t: "ABA", f: "Applied Behavior Analysis", d: "Behavior-focused approach often used with autism spectrum and developmental challenges." },
              { t: "EMDR", f: "Eye Movement Desensitization", d: "An evidence-based approach for processing trauma and difficult memories." },
              { t: "DBT", f: "Dialectical Behavioral Therapy", d: "Skills for emotional regulation, distress tolerance, and interpersonal effectiveness." },
              { t: "Play", f: "Play Therapy", d: "For younger clients — children process and heal through the language of play." },
              { t: "Trauma", f: "Trauma Focused", d: "Specialized work for clients carrying trauma histories — paced, careful, evidence-informed." },
              { t: "Strength", f: "Strength Based", d: "Centering each client's existing capacities and resources, not just what's not working." },
            ].map((m, i) => (
              <div key={i} style={{
                padding: "32px 28px",
                background: "var(--cream)",
                borderRadius: 16,
                border: "1px solid var(--line)",
              }}>
                <div style={{ fontFamily: "Fraunces, serif", fontSize: 28, color: "var(--terracotta-deep)", fontWeight: 400, marginBottom: 4 }}>{m.t}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 14 }}>{m.f}</div>
                <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.65 }}>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-pad-lg">
        <div className="container">
          <div className="grid-aside">
            <div>
              <span className="eyebrow">Common questions</span>
              <h2 className="h-section" style={{ fontSize: 44, marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>
                The things people <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>usually ask</em>.
              </h2>
              <p style={{ marginTop: 20, fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                Don't see yours? Reach out. There are no bad questions when it comes to mental healthcare.
              </p>
            </div>
            <div>
              {faqs.map((f, i) => (
                <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
                  <button
                    onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left", padding: "26px 0",
                      display: "flex", justifyContent: "space-between", alignItems: "center",
                      gap: 24,
                    }}>
                    <span style={{ fontFamily: "Fraunces, serif", fontSize: 22, color: "var(--forest)", fontWeight: 400, lineHeight: 1.3 }}>{f.q}</span>
                    <span style={{
                      width: 32, height: 32, borderRadius: "50%",
                      border: "1px solid var(--line)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      flex: "none",
                      transition: "transform 0.3s ease",
                      transform: openFaq === i ? "rotate(45deg)" : "rotate(0)",
                      background: openFaq === i ? "var(--terracotta)" : "transparent",
                      color: openFaq === i ? "var(--cream)" : "var(--ink)",
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: openFaq === i ? 200 : 0,
                    overflow: "hidden",
                    transition: "max-height 0.4s ease, padding 0.3s ease",
                    paddingBottom: openFaq === i ? 26 : 0,
                  }}>
                    <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.7, maxWidth: 620 }}>{f.a}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// =================================================================
// TEAM PAGE
// =================================================================
const TeamPage = ({ navigate }) => {
  const team = [
    { name: "Nicole Lozano, LPC", role: "Executive Director & Co-Owner", spec: "Crisis stabilization, school refusal, trauma, youth with emotional and behavioral health challenges. 15+ years in the social service field.", color: "#2A3D34", group: "Founders" },
    { name: "Edgar Lozano, MA", role: "Advisor & Co-Owner", spec: "Clinical and social service work for over 30 years — domestic violence, rape survivors, substance abusers, and youth with emotional and behavioral health challenges.", color: "#A64E36", group: "Founders" },
    { name: "Linda Poskanzer, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#C9A961", group: "Clinical Consultants" },
    { name: "Gardan Speights, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#A8B5A0", group: "Clinical Consultants" },
    { name: "Richard Evans, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#C8674A", group: "Clinical Consultants" },
    { name: "Gayle Brown, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#2A3D34", group: "Clinical Consultants" },
    { name: "Danielle Osenbruck, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#A64E36", group: "Clinical Consultants" },
    { name: "Rosalie Cepedes, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#A8B5A0", group: "Clinical Consultants" },
    { name: "Joann Whitmore, LCSW", role: "Clinical Consultant", spec: "Clinical Team", color: "#C9A961", group: "Clinical Consultants" },
    { name: "Melanie Ramirez, BS", role: "Office Manager & Data Analyst", spec: "Administration", color: "#C8674A", group: "Administration" },
    { name: "Ysanil Torres, BA", role: "Intake Coordinator", spec: "Administration", color: "#2A3D34", group: "Administration" },
    { name: "Monica Lozano, MA", role: "Program Coordinator", spec: "Administration", color: "#A64E36", group: "Administration" },
    { name: "Emily Sanchez, BA", role: "Senior Billing Specialist", spec: "Administration", color: "#A8B5A0", group: "Administration" },
    { name: "Danelisa Hernandez, BA", role: "Documentation Clerk", spec: "Administration", color: "#C9A961", group: "Administration" },
    { name: "Bryanna Araujo, BA", role: "Assistant Coordinator", spec: "Administration", color: "#C8674A", group: "Administration" },
  ];

  return (
    <div className="page active">
      <section className="section-pad-sm" style={{ overflow: "hidden", paddingBottom: 60 }}>
        <div className="hero-blob-lg" style={{ position: "absolute", top: -100, left: -150, width: 450, height: 450, opacity: 0.4 }}>
          <OrganicBlob color="#A8B5A0" seed={2} />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow">Our team</span>
            <h1 style={{ fontSize: "clamp(48px, 6vw, 80px)", marginTop: 18, fontWeight: 350, lineHeight: 1.02 }}>
              The people you'd be <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>working with</em>.
            </h1>
            <p style={{ fontSize: 18, color: "var(--ink-soft)", marginTop: 28, lineHeight: 1.6, maxWidth: 580 }}>
              At EDNI, we are dedicated and committed to the well-being of others. Our team is a mix of founders, clinical consultants, and administration.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "60px 0 100px" }}>
        <div className="container">
          {/* filters */}
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 40, alignItems: "center" }}>
            <span style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.18em", marginRight: 12 }}>Filter:</span>
            {["All", "Founders", "Clinical Consultants", "Administration"].map((f, i) => (
              <button key={i} style={{
                padding: "8px 18px",
                borderRadius: 999,
                fontSize: 13,
                border: "1px solid var(--line)",
                background: i === 0 ? "var(--forest)" : "transparent",
                color: i === 0 ? "var(--cream)" : "var(--ink-soft)",
                fontWeight: 500,
              }}>{f}</button>
            ))}
          </div>

          <div className="grid-4">
            {team.map((p, i) => (
              <div key={i} style={{
                background: "var(--cream)",
                borderRadius: 16,
                overflow: "hidden",
                border: "1px solid var(--line)",
                cursor: "pointer",
                transition: "all 0.3s ease",
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 40px -16px rgba(30,45,38,0.18)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
              >
                <div style={{
                  aspectRatio: "1",
                  background: p.color,
                  position: "relative",
                  overflow: "hidden",
                }}>
                  {/* Placeholder portrait — soft gradient + initial */}
                  <div style={{
                    position: "absolute", inset: 0,
                    background: `linear-gradient(135deg, ${p.color}, ${p.color}cc)`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <span style={{
                      fontFamily: "Fraunces, serif", fontSize: 84, color: "rgba(244,239,230,0.95)",
                      fontWeight: 350, fontStyle: "italic",
                    }}>
                      {p.name.replace(/,.*$/, "").split(" ").map(n => n[0]).join("")}
                    </span>
                  </div>
                  {/* organic mask overlay */}
                  <div style={{ position: "absolute", bottom: -40, right: -40, width: 140, height: 140, opacity: 0.2 }}>
                    <OrganicBlob color="#F4EFE6" seed={i % 3} />
                  </div>
                </div>
                <div style={{ padding: "20px 22px 24px" }}>
                  <h3 style={{ fontSize: 20, fontWeight: 400, lineHeight: 1.2 }}>{p.name}</h3>
                  <div style={{ fontSize: 11, color: "var(--terracotta-deep)", textTransform: "uppercase", letterSpacing: "0.16em", marginTop: 6, fontWeight: 500 }}>{p.role}</div>
                  <p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 12, lineHeight: 1.55 }}>{p.spec}</p>
                </div>
              </div>
            ))}
          </div>

          <p style={{ marginTop: 40, fontSize: 13, color: "var(--muted)", textAlign: "center", fontStyle: "italic" }}>
            Names and roles per the live site. Portraits are placeholders — real headshots to come.
          </p>
        </div>
      </section>
    </div>
  );
};

// =================================================================
// JOIN OUR TEAM
// =================================================================
const JoinPage = ({ navigate }) => {
  return (
    <div className="page active">
      <section className="section-pad-sm" style={{ overflow: "hidden", paddingBottom: 100 }}>
        <div className="hero-blob-lg" style={{ position: "absolute", top: -80, right: -80, width: 400, height: 400, opacity: 0.45 }}>
          <OrganicBlob color="#C8674A" seed={1} />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 760 }}>
            <span className="eyebrow">Join our team</span>
            <h1 style={{ fontSize: "clamp(48px, 6vw, 80px)", marginTop: 18, fontWeight: 350, lineHeight: 1.02 }}>
              Do you share our passion for <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>helping others</em>?
            </h1>
            <p style={{ fontSize: 18, color: "var(--ink-soft)", marginTop: 28, lineHeight: 1.6, maxWidth: 640 }}>
              EDNI, an exciting and fast-growing behavioral and mental health organization in Northern New Jersey, is seeking highly motivated, forward-thinking licensed professionals (LSW, LAC, LCSW, LPC, & LMFT).
            </p>
          </div>
        </div>
      </section>

      {/* WHY EDNI */}
      <section style={{ padding: "0 0 100px" }}>
        <div className="container">
          <div className="grid-3" style={{ gap: 28 }}>
            {[
              { t: "Highly qualified colleagues", d: "Become a member of a team of licensed professionals who want to be enriched professionally and personally." },
              { t: "Make a real difference", d: "Work with people experiencing emotional, behavioral or developmental challenges, plus education and support for their families." },
              { t: "Flexible schedule", d: "We offer flexible schedules to fit the way you work best." },
              { t: "Highly competitive pay", d: "Compensation is commensurate with education and work experience." },
              { t: "Centralized records", d: "All licensed professionals maintain a timely, up-to-date electronic record of treatment and progress in a centralized database." },
              { t: "Bilingual encouraged", d: "Bilingual clinicians are strongly encouraged to apply." },
            ].map((b, i) => (
              <div key={i} style={{
                padding: "36px 32px",
                background: i % 3 === 1 ? "var(--forest)" : "var(--cream)",
                color: i % 3 === 1 ? "var(--cream)" : "var(--ink)",
                borderRadius: 18,
                border: i % 3 === 1 ? "none" : "1px solid var(--line)",
              }}>
                <h3 style={{
                  fontSize: 24, fontWeight: 350, lineHeight: 1.2,
                  color: i % 3 === 1 ? "var(--cream)" : "var(--forest)",
                }}>{b.t}</h3>
                <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.65, opacity: i % 3 === 1 ? 0.85 : 1, color: i % 3 === 1 ? "var(--cream)" : "var(--ink-soft)" }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW TO APPLY */}
      <section className="section-pad" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <div className="grid-aside" style={{ gap: 60 }}>
            <div>
              <span className="eyebrow">Open positions</span>
              <h2 className="h-section" style={{ fontSize: 44, marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>Listings on Indeed.</h2>
              <p style={{ marginTop: 20, fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                Listing of open positions can be found on Indeed under <strong>EDNI Counseling Services</strong>.
              </p>
            </div>

            <div style={{
              background: "var(--cream)",
              padding: "40px 44px",
              borderRadius: 18,
              border: "1px solid var(--line)",
            }}>
              <span className="eyebrow">How to apply</span>
              <h3 style={{ fontSize: 28, marginTop: 14, fontWeight: 400, lineHeight: 1.2 }}>
                Send your resume.
              </h3>
              <p style={{ marginTop: 16, fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                Email your resume with the subject line of which position you are interested in to:
              </p>
              <p style={{ marginTop: 14, fontFamily: "Fraunces, serif", fontSize: 22, color: "var(--forest)", fontWeight: 400 }}>
                nlozano@ednicounselingservices.com
              </p>
              <p style={{ marginTop: 18, fontSize: 14, color: "var(--ink-soft)", fontStyle: "italic" }}>
                Be the difference in someone's life.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// =================================================================
// CONTACT PAGE
// =================================================================
const ContactPage = ({ navigate }) => {
  return (
    <div className="page active">
      <section className="section-pad-sm" style={{ paddingBottom: 100 }}>
        <div className="container">
          <div className="grid-aside">
            {/* Left: info */}
            <div>
              <span className="eyebrow">Get in touch</span>
              <h1 style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 14, fontWeight: 350, lineHeight: 1.05 }}>
                <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>Contact</em> us.
              </h1>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 24, lineHeight: 1.65 }}>
                For more information about our IIC or Outpatient counseling services, please call or email us.
              </p>

              <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 24 }}>
                {[
                  { l: "IIC", v: "Tel: 201-575-9458\nFax: 201-880-5058\nnlozano@ednicounselingservices.com", s: "Bergen, Passaic, Hudson, Essex, Union, Monmouth, Ocean, Morris and Sussex Counties" },
                  { l: "Outpatient", v: "Tel: 201-546-5634\noutpatient@ednicounselingservices.com", s: "Free consultation for new clients" },
                  { l: "Office", v: "110 Kinderkamack, Suite 2D\nEmerson, NJ 07630", s: "Hybrid sessions available (virtually & in person)" },
                  { l: "General", v: "mail@ednicounselingservices.com", s: "" },
                ].map((c, i) => (
                  <div key={i} className="contact-row" style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "start", paddingBottom: 24, borderBottom: i < 3 ? "1px solid var(--line)" : "none" }}>
                    <span className="eyebrow" style={{ minWidth: 90 }}>{c.l}</span>
                    <div style={{ minWidth: 0 }}>
                      <div className="body-lg-mobile-wrap" style={{ fontFamily: "Fraunces, serif", fontSize: 19, color: "var(--forest)", fontWeight: 400, lineHeight: 1.4, whiteSpace: "pre-line", wordBreak: "break-word", overflowWrap: "anywhere" }}>{c.v}</div>
                      {c.s && <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{c.s}</div>}
                    </div>
                  </div>
                ))}
              </div>

              <a
                href="https://www.psychologytoday.com/us/therapists/edni-counseling-outpatient-services-emerson-nj/1465938"
                target="_blank"
                rel="noopener noreferrer"
                className="verified-badge"
                style={{
                  marginTop: 36,
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 16,
                  padding: "16px 22px",
                  background: "var(--cream-warm)",
                  border: "1px solid var(--line)",
                  borderRadius: 14,
                  textDecoration: "none",
                  cursor: "pointer",
                  transition: "all 0.2s ease",
                  maxWidth: "100%",
                }}
              >
                <span style={{
                  width: 38, height: 38, borderRadius: "50%",
                  background: "var(--forest)", color: "var(--cream)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0,
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </span>
                <span style={{ minWidth: 0 }}>
                  <span style={{ display: "block", fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.16em", fontWeight: 500 }}>Verified profile</span>
                  <span className="verified-badge-text" style={{ display: "block", fontFamily: "Fraunces, serif", fontSize: 17, color: "var(--forest)", marginTop: 2, fontWeight: 400 }}>
                    Find us on Psychology Today <span style={{ color: "var(--terracotta)", fontSize: 14 }}>→</span>
                  </span>
                </span>
              </a>
            </div>

            {/* Right: form */}
            <div className="card-pad-lg" style={{
              background: "var(--cream-warm)",
              padding: "48px 48px",
              borderRadius: 22,
              border: "1px solid var(--line)",
              position: "relative",
              overflow: "hidden",
            }}>
              <div className="hero-blob-sm" style={{ position: "absolute", top: -50, right: -50, width: 200, height: 200, opacity: 0.4 }}>
                <OrganicBlob color="#C8674A" seed={1} />
              </div>
              <div style={{ position: "relative" }}>
                <h2 style={{ fontSize: 28, fontWeight: 400, marginBottom: 4 }}>Request a consultation</h2>
                <p style={{ fontSize: 14, color: "var(--ink-soft)", marginBottom: 32 }}>All fields are confidential.</p>

                <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                  {[
                    { l: "Your name", t: "text", p: "Full name" },
                    { l: "Email", t: "email", p: "you@email.com" },
                    { l: "Phone (optional)", t: "tel", p: "(   )  -" },
                  ].map((f, i) => (
                    <label key={i} style={{ display: "block" }}>
                      <span style={{ fontSize: 12, color: "var(--ink-soft)", textTransform: "uppercase", letterSpacing: "0.16em", display: "block", marginBottom: 6, fontWeight: 500 }}>{f.l}</span>
                      <input type={f.t} placeholder={f.p} style={{
                        width: "100%", padding: "14px 18px",
                        background: "var(--cream)", border: "1px solid var(--line)",
                        borderRadius: 10, fontSize: 15, fontFamily: "inherit",
                        color: "var(--ink)",
                      }} />
                    </label>
                  ))}

                  <label style={{ display: "block" }}>
                    <span style={{ fontSize: 12, color: "var(--ink-soft)", textTransform: "uppercase", letterSpacing: "0.16em", display: "block", marginBottom: 6, fontWeight: 500 }}>Service interested in</span>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                      {["Outpatient · individual", "Outpatient · couples/family", "Outpatient · child/teen", "IIC services", "Not sure yet"].map((opt, i) => (
                        <label key={i} style={{ cursor: "pointer" }}>
                          <input type="radio" name="service" style={{ display: "none" }} defaultChecked={i === 0} />
                          <span style={{
                            display: "inline-block", padding: "10px 16px",
                            background: i === 0 ? "var(--forest)" : "var(--cream)",
                            color: i === 0 ? "var(--cream)" : "var(--ink-soft)",
                            border: i === 0 ? "none" : "1px solid var(--line)",
                            borderRadius: 999, fontSize: 13, fontWeight: 500,
                          }}>{opt}</span>
                        </label>
                      ))}
                    </div>
                  </label>

                  <label style={{ display: "block" }}>
                    <span style={{ fontSize: 12, color: "var(--ink-soft)", textTransform: "uppercase", letterSpacing: "0.16em", display: "block", marginBottom: 6, fontWeight: 500 }}>What's bringing you here?</span>
                    <textarea rows="4" placeholder="A few sentences is plenty — we'll dig in on the call." style={{
                      width: "100%", padding: "14px 18px",
                      background: "var(--cream)", border: "1px solid var(--line)",
                      borderRadius: 10, fontSize: 15, fontFamily: "inherit",
                      color: "var(--ink)", resize: "vertical",
                    }}></textarea>
                  </label>

                  <button className="btn btn-primary" style={{ marginTop: 8, width: "100%", justifyContent: "center" }}>
                    Send request <span className="btn-arrow"></span>
                  </button>
                  <p style={{ fontSize: 12, color: "var(--muted)", textAlign: "center" }}>
                    By submitting, you agree to our privacy policy. We'll never share your information.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// =================================================================
// IIC REQUEST PAGE — short form variant
// =================================================================
const IICRequestPage = ({ navigate }) => {
  return (
    <div className="page active">
      <section className="section-pad-sm" style={{ paddingBottom: 100 }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <span className="eyebrow">Request IIC services</span>
          <h1 style={{ fontSize: "clamp(40px, 5vw, 60px)", marginTop: 14, fontWeight: 350, lineHeight: 1.08 }}>
            A few details, and we'll be in <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>touch quickly</em>.
          </h1>
          <p style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 24, lineHeight: 1.65, maxWidth: 580 }}>
            Most IIC referrals come through PerformCare. If you've already started that process, share the case number — otherwise we'll guide you.
          </p>

          <div className="card-pad-lg" style={{ marginTop: 48, padding: 40, background: "var(--cream-warm)", borderRadius: 20, border: "1px solid var(--line)" }}>
            <div className="form-grid-2">
              {[
                { l: "Parent/guardian name", w: 1 },
                { l: "Phone", w: 1 },
                { l: "Email", w: 2 },
                { l: "Youth's first name", w: 1 },
                { l: "Youth's age", w: 1 },
                { l: "Town / county", w: 1 },
                { l: "PerformCare case # (if any)", w: 1 },
              ].map((f, i) => (
                <label key={i} style={{ gridColumn: f.w === 2 ? "span 2" : "span 1" }}>
                  <span style={{ fontSize: 12, color: "var(--ink-soft)", textTransform: "uppercase", letterSpacing: "0.16em", display: "block", marginBottom: 6, fontWeight: 500 }}>{f.l}</span>
                  <input style={{ width: "100%", padding: "14px 18px", background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 10, fontSize: 15, fontFamily: "inherit" }} />
                </label>
              ))}

              <label style={{ gridColumn: "span 2" }}>
                <span style={{ fontSize: 12, color: "var(--ink-soft)", textTransform: "uppercase", letterSpacing: "0.16em", display: "block", marginBottom: 6, fontWeight: 500 }}>Tell us briefly what's going on</span>
                <textarea rows="4" style={{ width: "100%", padding: "14px 18px", background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 10, fontSize: 15, fontFamily: "inherit", resize: "vertical" }}></textarea>
              </label>
            </div>

            <button className="btn btn-primary" style={{ marginTop: 28, width: "100%", justifyContent: "center" }}>
              Submit request <span className="btn-arrow"></span>
            </button>
            <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 12, textAlign: "center" }}>
              We typically respond within 1–2 business days.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};

window.IICPage = IICPage;
window.OutpatientPage = OutpatientPage;
window.TeamPage = TeamPage;
window.JoinPage = JoinPage;
window.ContactPage = ContactPage;
window.IICRequestPage = IICRequestPage;

// =================================================================
// ABOUT PAGE
// =================================================================
const AboutPage = ({ navigate }) => {
  return (
    <div className="page active">
      {/* HERO */}
      <section className="section-pad-sm" style={{ overflow: "hidden", paddingBottom: 60 }}>
        <div className="hero-blob-lg" style={{ position: "absolute", top: -80, right: -100, width: 460, height: 460, opacity: 0.5 }}>
          <OrganicBlob color="#E8D5C4" seed={0} />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 780 }}>
            <span className="eyebrow">About EDNI</span>
            <h1 style={{ fontSize: "clamp(48px, 6vw, 84px)", marginTop: 18, fontWeight: 350, lineHeight: 1.02 }}>
              A family-built practice, with room for <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>your family</em>.
            </h1>
            <p style={{ fontSize: 19, color: "var(--ink-soft)", marginTop: 28, lineHeight: 1.6, maxWidth: 620 }}>
              EDNI Counseling Services has provided mental health support to youth, families, and individuals across nine New Jersey counties since 2016.
            </p>
          </div>
        </div>
      </section>

      {/* FOUNDER STORY */}
      <section className="section-pad-sm" style={{ paddingBottom: 100 }}>
        <div className="container">
          <div className="grid-aside" style={{ alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{
                width: "100%", aspectRatio: "1/1.15",
                borderRadius: "50% 50% 48% 52% / 55% 45% 55% 45%",
                overflow: "hidden",
                background: "var(--forest)",
              }}>
                <img src="assets/founder.jpeg" alt="Founder" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "sepia(0.1) saturate(0.9)" }} />
              </div>
              <div style={{
                position: "absolute", top: 30, right: -20,
                background: "var(--terracotta)", color: "var(--cream)",
                padding: "10px 18px", borderRadius: 999, fontSize: 11,
                textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 500,
                transform: "rotate(4deg)",
              }}>
                Est. 2016
              </div>
            </div>

            <div>
              <span className="eyebrow">Our story</span>
              <h2 style={{ fontSize: "clamp(36px, 4vw, 56px)", marginTop: 16, lineHeight: 1.08, fontWeight: 350 }}>
                A father and a daughter, building something together.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 28, lineHeight: 1.7, maxWidth: 540 }}>
                EDNI Counseling Services was founded in 2016 by a father and daughter duo, Edgar and Nicole Lozano. Using their education, expertise, and passion in counseling, Edgar and Nicole came together to create an agency that offers mental health support to anyone in need.
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 18, lineHeight: 1.7, maxWidth: 540 }}>
                Today, EDNI's team consists of licensed professionals from diverse backgrounds and a wide range of areas of expertise and knowledge — across both IIC and outpatient services.
              </p>
              <div style={{
                marginTop: 36,
                padding: "28px 32px",
                borderLeft: "3px solid var(--terracotta)",
                background: "rgba(200,103,74,0.06)",
                borderRadius: "0 12px 12px 0",
              }}>
                <div style={{ fontFamily: "Fraunces, serif", fontStyle: "italic", fontSize: 22, color: "var(--forest)", lineHeight: 1.4, fontWeight: 350 }}>
                  "EDNI" comes from combining <strong style={{ color: "var(--terracotta-deep)", fontStyle: "normal" }}>ED</strong>gar's and <strong style={{ color: "var(--terracotta-deep)", fontStyle: "normal" }}>NI</strong>cole's names.
                </div>
                <div style={{ fontSize: 12, marginTop: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.18em" }}>
                  — A small fact we love
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section className="section-pad" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <div style={{ maxWidth: 720, margin: "0 auto 60px", textAlign: "center" }}>
            <span className="eyebrow">What we believe</span>
            <h2 style={{ fontSize: "clamp(36px, 4vw, 52px)", marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>
              Diverse backgrounds, shared <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>commitment</em>.
            </h2>
          </div>
          <div className="grid-4" style={{ gap: 28 }}>
            {[
              { n: "01", t: "Diverse backgrounds", d: "Our team brings a wide range of experience — from over 30 years in clinical and social service work to over 15 years across crisis stabilization and trauma." },
              { n: "02", t: "Strength-based", d: "We strive to live a healthy and productive life through positive, effective, strength-based, personalized skills." },
              { n: "03", t: "Family-built", d: "EDNI was founded by Edgar and Nicole Lozano — a father and daughter — and the family ethos still shapes how we work." },
              { n: "04", t: "Community partners", d: "In line with the Wraparound Values, we work closely with schools, DCPP, the Juvenile Justice System, PerformCare, and other community partners." },
            ].map((p, i) => (
              <div key={i}>
                <div className="stat-num-md" style={{ fontFamily: "Fraunces, serif", fontSize: 32, color: "var(--terracotta)", fontWeight: 350, marginBottom: 10 }}>{p.n}</div>
                <h4 style={{ fontSize: 20, color: "var(--forest)", fontWeight: 500, fontFamily: "Inter, sans-serif", marginBottom: 10 }}>{p.t}</h4>
                <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.65 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-pad" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 350, lineHeight: 1.1 }}>
              Want to meet the team behind the practice?
            </h2>
            <div style={{ display: "flex", gap: 14, marginTop: 32, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn btn-primary" onClick={() => navigate('team')}>Meet the team <span className="btn-arrow"></span></a>
              <a className="btn btn-secondary" onClick={() => navigate('contact')}>Get in touch</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.AboutPage = AboutPage;