/* All EDNI pages — exposed on window for app.jsx */

const { useState, useEffect, useRef } = React;

// =================================================================
// SHARED PRIMITIVES
// =================================================================

const OrganicBlob = ({ color = "#C8674A", style = {}, seed = 1 }) => {
  // Different organic blob shapes
  const paths = [
    "M44.7,-67.5C58.2,-58.4,69.4,-46,75.8,-31.5C82.2,-17,83.7,-0.3,79.3,14.7C74.9,29.7,64.5,43,52,53.4C39.5,63.8,24.8,71.4,8.6,75.5C-7.6,79.5,-25.3,80.1,-39.4,72.8C-53.6,65.5,-64.1,50.5,-71.5,34.4C-78.9,18.3,-83.1,1.1,-80.1,-14.5C-77.2,-30.1,-67.1,-44.1,-54.4,-53.5C-41.7,-62.9,-26.4,-67.7,-10.7,-69.5C5,-71.3,31.2,-76.6,44.7,-67.5Z",
    "M38.5,-65.2C49.6,-56.8,57.4,-44.4,64.7,-31.1C72,-17.8,78.8,-3.5,77.8,10.4C76.7,24.3,67.8,37.8,56.4,48.3C45,58.8,31.1,66.3,15.8,71.1C0.5,75.9,-16.2,78,-31.4,73.4C-46.6,68.7,-60.4,57.4,-67.7,43.1C-75,28.8,-75.9,11.5,-72.6,-4.2C-69.3,-19.9,-61.9,-34,-51.2,-43.7C-40.5,-53.4,-26.5,-58.6,-12.6,-62.8C1.3,-67,27.4,-73.6,38.5,-65.2Z",
    "M42.3,-71.2C53.7,-63.8,60.5,-49.3,67.3,-34.9C74.1,-20.5,80.9,-6.2,79.5,7.4C78.1,21,68.5,33.9,58.1,45.3C47.7,56.7,36.5,66.6,23.3,71.5C10.1,76.4,-5.1,76.3,-20.3,73.2C-35.5,70.1,-50.7,64,-60.6,53.1C-70.5,42.2,-75.1,26.5,-77.4,10.1C-79.7,-6.3,-79.7,-23.4,-72.6,-36.2C-65.5,-49,-51.3,-57.5,-37.3,-63.8C-23.3,-70.1,-9.5,-74.2,3.7,-79.6C16.9,-85,30.9,-78.6,42.3,-71.2Z",
  ];
  const d = paths[seed % paths.length];
  return (
    <svg viewBox="-100 -100 200 200" style={{ width: "100%", height: "100%", ...style }} preserveAspectRatio="xMidYMid slice">
      <path d={d} fill={color} />
    </svg>
  );
};

const SectionDivider = () => (
  <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, margin: "0 auto", width: 80 }}>
    <span style={{ width: 24, height: 1, background: "var(--terracotta)" }}></span>
    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--terracotta)" }}></span>
    <span style={{ width: 24, height: 1, background: "var(--terracotta)" }}></span>
  </div>
);

// =================================================================
// HOME PAGE
// =================================================================

const HomePage = ({ navigate, voice }) => {
  const headlines = {
    warm: { kicker: "Hi there.", main: ["Come on in,", "we're so glad", "you're here."], sub: "You've already taken the first step. Let us walk the rest with you." },
    clinical: { kicker: "EDNI Counseling Services", main: ["Thoughtful mental", "health care for", "families & individuals."], sub: "Licensed clinicians, intensive in-community and outpatient services." },
    poetic: { kicker: "Welcome.", main: ["Steady ground,", "when life feels", "heavy."], sub: "A family-built practice offering counseling that meets you where you are." },
  };
  const h = headlines[voice] || headlines.warm;

  return (
    <div className="page active">
      {/* HERO */}
      <section className="hero-section">
        {/* Organic shapes */}
        <div className="hero-blob-lg" style={{ position: "absolute", top: -80, right: -100, width: 480, height: 480, opacity: 0.85 }}>
          <OrganicBlob color="#E8D5C4" seed={0} />
        </div>
        <div style={{ position: "absolute", bottom: -120, left: -60, width: 280, height: 280, opacity: 0.4 }}>
          <OrganicBlob color="#A8B5A0" seed={2} />
        </div>

        <div className="container">
          <div className="hero-grid">
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                <span style={{ width: 32, height: 1, background: "var(--terracotta)" }}></span>
                <span className="eyebrow">{h.kicker}</span>
              </div>
              <h1 style={{ fontSize: "clamp(48px, 6.5vw, 88px)", lineHeight: 1.02, fontWeight: 350, letterSpacing: "-0.025em" }}>
                {h.main[0]}<br />
                <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)", fontWeight: 300 }}>{h.main[1]}</em><br />
                {h.main[2]}
              </h1>
              <p style={{ fontSize: 18, color: "var(--ink-soft)", maxWidth: 480, marginTop: 32, lineHeight: 1.6 }}>
                {h.sub}
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
                <a className="btn btn-primary" onClick={() => navigate('contact')}>
                  Request a consultation <span className="btn-arrow"></span>
                </a>
                <a className="btn btn-secondary" onClick={() => navigate('outpatient')}>
                  Explore services
                </a>
              </div>

              {/* trust strip */}
              <div className="hero-trust-strip" style={{ display: "flex", gap: 32, marginTop: 56, flexWrap: "wrap" }}>
                {[
                  { n: "Est.", l: "2016\nfamily-built" },
                  { n: "9", l: "NJ counties\nserved" },
                  { n: "0–21", l: "youth\nIIC ages" },
                ].map((s, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <div className="hero-stat-num" style={{ fontFamily: "Fraunces, serif", fontSize: 38, fontWeight: 400, color: "var(--forest)", lineHeight: 1, fontVariationSettings: '"SOFT" 100' }}>{s.n}</div>
                    <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.18em", color: "var(--muted)", whiteSpace: "pre-line", lineHeight: 1.4 }}>{s.l}</div>
                  </div>
                ))}
              </div>

              <a
                href="https://www.psychologytoday.com/us/therapists/edni-counseling-outpatient-services-emerson-nj/1465938"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  marginTop: 32,
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 12,
                  padding: "10px 16px 10px 12px",
                  background: "var(--cream-warm)",
                  border: "1px solid var(--line)",
                  borderRadius: 999,
                  textDecoration: "none",
                  cursor: "pointer",
                  transition: "all 0.2s ease",
                }}
              >
                <span style={{
                  width: 24, height: 24, borderRadius: "50%",
                  background: "var(--forest)", color: "var(--cream)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0,
                }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.75" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </span>
                <span style={{ fontSize: 13, color: "var(--ink-soft)", fontWeight: 500 }}>
                  Verified on Psychology Today <span style={{ color: "var(--terracotta)", marginLeft: 2 }}>→</span>
                </span>
              </a>
            </div>

            {/* Hero image */}
            <div style={{ position: "relative", aspectRatio: "4/5" }}>
              <div style={{ position: "absolute", inset: "-30px -30px auto auto", width: 180, height: 180, opacity: 0.35 }}>
                <OrganicBlob color="#C8674A" seed={1} />
              </div>
              <div style={{
                position: "relative",
                width: "100%", height: "100%",
                borderRadius: "60% 40% 55% 45% / 50% 55% 45% 50%",
                overflow: "hidden",
                background: "linear-gradient(135deg, #2A3D34, #3a5246)",
                boxShadow: "0 30px 60px -20px rgba(30,45,38,0.4)",
              }}>
                <img
                  src="https://images.unsplash.com/photo-1573497019418-b400bb3ab074?w=800&q=80&auto=format"
                  srcSet="https://images.unsplash.com/photo-1573497019418-b400bb3ab074?w=400&q=80&auto=format 400w, https://images.unsplash.com/photo-1573497019418-b400bb3ab074?w=800&q=80&auto=format 800w, https://images.unsplash.com/photo-1573497019418-b400bb3ab074?w=1200&q=80&auto=format 1200w"
                  sizes="(max-width: 640px) 100vw, (max-width: 900px) 90vw, 45vw"
                  alt="Counseling session"
                  style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.92)" }}
                />
              </div>
              {/* annotation card */}
              <div className="hero-annotation" style={{
                position: "absolute", bottom: -30, left: -30,
                background: "var(--cream)",
                padding: "20px 24px",
                borderRadius: 14,
                boxShadow: "0 20px 40px -12px rgba(30,45,38,0.18)",
                maxWidth: 240,
                border: "1px solid var(--line)",
              }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Now accepting</div>
                <div style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.5 }}>
                  New IIC and outpatient referrals across nine NJ counties.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHO WE SERVE */}
      <section className="section-pad">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 64px" }}>
            <span className="eyebrow">Who we serve</span>
            <h2 style={{ fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 14, fontWeight: 350, lineHeight: 1.08 }}>
              Two services, <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>different ages</em>.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 20, lineHeight: 1.65 }}>
              Intensive In-Community (IIC) is for youth ages 0–21 and their families. Outpatient is for adolescents, teens, and adults in our Emerson office.
            </p>
          </div>

          <div className="grid-4">
            {[
              { age: "0–21", t: "Youth (IIC)", d: "Anger management, anxiety, ADHD, school refusal, depression, trauma, autism spectrum, and more — at home, school, or community." },
              { age: "Adolescents", t: "Outpatient", d: "Anxiety, depression, trauma & PTSD, mood disorders, family conflict — in our Emerson office." },
              { age: "Teens", t: "Outpatient", d: "OCD, ODD, ADHD, self-esteem, behavioral issues, adjustment — individual or family therapy." },
              { age: "Adults", t: "Outpatient", d: "Depression, anxiety, work/life stressors, postpartum depression, suicidal ideation." },
            ].map((g, i) => (
              <div key={i} style={{
                padding: "32px 28px",
                background: i % 2 === 0 ? "var(--cream-warm)" : "var(--cream)",
                border: "1px solid var(--line)",
                borderRadius: 16,
                position: "relative",
              }}>
                <div style={{
                  fontFamily: "Fraunces, serif", fontSize: 36, color: "var(--terracotta-deep)",
                  fontWeight: 400, lineHeight: 1, marginBottom: 16,
                }} className="stat-num-md">{g.age}</div>
                <h3 style={{ fontSize: 22, fontWeight: 400 }}>{g.t}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 12, lineHeight: 1.6 }}>{g.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section-pad-lg" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 80 }}>
            <span className="eyebrow">What we do</span>
            <h2 style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 14, fontWeight: 350, lineHeight: 1.05 }}>
              Two paths to <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>support</em>.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 20, maxWidth: 580, marginLeft: "auto", marginRight: "auto" }}>
              Whether you need care that comes to you or a quiet office to think things through, we have a place for you.
            </p>
          </div>

          <div className="grid-2" style={{ gap: 32 }}>
            {[
              {
                tag: "Intensive In-Community",
                title: "Care that comes to you.",
                desc: "Crisis stabilization for youth ages 0–21 and their families. Sessions weekly, up to 2+ hours, in the family's home or community.",
                img: "https://images.unsplash.com/photo-1609220136736-443140cffec6?w=800&q=80&auto=format",
                page: "iic",
                color: "var(--forest)",
              },
              {
                tag: "Outpatient Services",
                title: "A quiet office in Emerson.",
                desc: "Individual, family, group, and play therapy with licensed clinicians. ~60-minute sessions, weekly to monthly.",
                img: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&q=80&auto=format",
                page: "outpatient",
                color: "var(--terracotta-deep)",
              },
            ].map((s, i) => (
              <div key={i} onClick={() => navigate(s.page)} style={{
                position: "relative",
                background: "var(--cream)",
                borderRadius: 20,
                overflow: "hidden",
                cursor: "pointer",
                transition: "transform 0.3s ease, box-shadow 0.3s ease",
                border: "1px solid var(--line)",
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = "0 30px 60px -20px rgba(30,45,38,0.2)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
              >
                <div style={{ height: 280, overflow: "hidden", position: "relative" }}>
                  <img src={s.img} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.85)" }} />
                  <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, transparent 50%, ${s.color}66)` }}></div>
                </div>
                <div style={{ padding: "32px 36px 36px" }}>
                  <span className="eyebrow" style={{ color: s.color }}>{s.tag}</span>
                  <h3 className="h-card" style={{ fontSize: 32, marginTop: 14, fontWeight: 350, lineHeight: 1.15 }}>{s.title}</h3>
                  <p style={{ fontSize: 15, color: "var(--ink-soft)", marginTop: 14, lineHeight: 1.6 }}>{s.desc}</p>
                  <div style={{ marginTop: 24, fontSize: 13, fontWeight: 500, color: s.color, display: "flex", alignItems: "center", gap: 10 }}>
                    Learn more <span className="btn-arrow"></span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW TO GET STARTED */}
      <section className="section-pad-lg" style={{ background: "var(--cream-warm)" }}>
        <div className="container">
          <div className="grid-aside">
            <div className="sticky-side">
              <span className="eyebrow">How to get started</span>
              <h2 className="h-section" style={{ fontSize: 44, marginTop: 14, fontWeight: 350, lineHeight: 1.1 }}>
                Three steps. <em style={{ fontStyle: "italic", color: "var(--terracotta-deep)" }}>That's it.</em>
              </h2>
              <p style={{ marginTop: 20, fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                For outpatient, we ask new clients to start with a free consultation. For IIC, most families come to us through PerformCare.
              </p>
              <a className="btn btn-primary" style={{ marginTop: 32 }} onClick={() => navigate('contact')}>Start now <span className="btn-arrow"></span></a>
            </div>

            <div>
              {[
                { n: "01", t: "Reach out", d: "Call us — Outpatient: 201-546-5634, IIC: 201-575-9458 — or email outpatient@ednicounselingservices.com or nlozano@ednicounselingservices.com." },
                { n: "02", t: "Free consultation", d: "For outpatient clients, we schedule a free consultation so we can get to know you and discuss what you're seeking to achieve in therapy. You can ask any questions you have." },
                { n: "03", t: "First session", d: "Share your concerns, discuss your goals, and work with your therapist to create a personalized treatment plan. Sessions can be hybrid (virtually or in person)." },
              ].map((s, i) => (
                <div key={i} style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr",
                  gap: 32,
                  padding: "32px 0",
                  borderBottom: i < 2 ? "1px solid var(--line)" : "none",
                }}>
                  <div className="stat-num-lg" style={{ fontFamily: "Fraunces, serif", fontSize: 44, color: "var(--terracotta)", fontWeight: 350, lineHeight: 1 }}>{s.n}</div>
                  <div>
                    <h3 style={{ fontSize: 26, fontWeight: 400 }}>{s.t}</h3>
                    <p style={{ marginTop: 12, fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.7 }}>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* WHAT TO EXPECT + INSURANCE */}
      <section className="section-pad-lg">
        <div className="container">
          <div className="grid-2-even">
            {/* What to expect */}
            <div className="card-pad-lg" style={{
              padding: "48px 44px",
              background: "var(--cream)",
              border: "1px solid var(--line)",
              borderRadius: 22,
            }}>
              <span className="eyebrow">What to expect</span>
              <h3 className="h-card" style={{ fontSize: 32, marginTop: 14, fontWeight: 350, lineHeight: 1.15 }}>Your first session</h3>
              <p style={{ marginTop: 16, fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.7 }}>
                Your first session is an opportunity to share your concerns, discuss your goals, and work with your therapist to create a personalized treatment plan.
              </p>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  { k: "60 min", v: "Typical outpatient session length" },
                  { k: "Weekly–monthly", v: "Frequency based on clinician recommendation" },
                  { k: "Hybrid", v: "Virtual or in person — discussed with your clinician" },
                  { k: "24-hour", v: "Cancellation notice required to avoid a fee" },
                ].map((r, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "12px 0", borderBottom: i < 3 ? "1px solid var(--line)" : "none" }}>
                    <div style={{ minWidth: 110, fontFamily: "Fraunces, serif", fontSize: 18, color: "var(--forest)", fontWeight: 400 }}>{r.k}</div>
                    <div style={{ fontSize: 14, color: "var(--ink-soft)" }}>{r.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Insurance & Cost */}
            <div className="card-pad-lg" style={{
              padding: "48px 44px",
              background: "var(--forest)",
              color: "var(--cream)",
              borderRadius: 22,
              position: "relative",
              overflow: "hidden",
            }}>
              <div style={{ position: "absolute", bottom: -80, right: -80, width: 240, height: 240, opacity: 0.18 }}>
                <OrganicBlob color="#C8674A" seed={0} />
              </div>
              <div style={{ position: "relative" }}>
                <span className="eyebrow" style={{ color: "var(--terracotta)" }}>Insurance & cost</span>
                <h3 className="h-card" style={{ fontSize: 32, marginTop: 14, fontWeight: 350, lineHeight: 1.15, color: "var(--cream)" }}>In-network with Aetna.</h3>
                <p style={{ marginTop: 16, fontSize: 15, opacity: 0.85, lineHeight: 1.7 }}>
                  Outpatient: clinicians who are in-network with Aetna, plus clinicians who accept out-of-pocket payments starting at $150. IIC services for youth are referred through PerformCare.
                </p>
                <div style={{ marginTop: 28 }}>
                  <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.2em", opacity: 0.6, marginBottom: 14 }}>Outpatient payment</div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                    {["Aetna (in-network)", "Out-of-pocket from $150"].map((p, i) => (
                      <div key={i} style={{
                        padding: "8px 14px",
                        background: "rgba(244,239,230,0.1)",
                        border: "1px solid rgba(244,239,230,0.2)",
                        borderRadius: 999,
                        fontSize: 13,
                      }}>{p}</div>
                    ))}
                  </div>
                </div>
                <a onClick={() => navigate('contact')} style={{ marginTop: 28, fontSize: 14, color: "var(--terracotta)", display: "inline-flex", alignItems: "center", gap: 10, fontWeight: 500, cursor: "pointer" }}>
                  Verify your benefits <span className="btn-arrow"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "60px 0 0" }}>
        <div className="container">
          <div className="cta-card" style={{
            background: "var(--forest)",
            color: "var(--cream)",
            borderRadius: 28,
            padding: "80px 80px",
            position: "relative",
            overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: -100, right: -100, width: 400, height: 400, opacity: 0.15 }}>
              <OrganicBlob color="#C8674A" seed={2} />
            </div>
            <div style={{ position: "relative", zIndex: 2, maxWidth: 640 }}>
              <span className="eyebrow" style={{ color: "var(--terracotta)" }}>Ready when you are</span>
              <h2 style={{ color: "var(--cream)", fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 16, fontWeight: 350, lineHeight: 1.1 }}>
                There's no perfect time to start. <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>Today works.</em>
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, opacity: 0.85, lineHeight: 1.65 }}>
                Reach out for a no-pressure consultation. We'll figure out together whether we're the right fit.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                <a className="btn btn-primary" onClick={() => navigate('contact')}>Request consultation <span className="btn-arrow"></span></a>
                <a className="btn" style={{ background: "transparent", border: "1px solid rgba(244,239,230,0.3)", color: "var(--cream)" }} onClick={() => navigate('iic-request')}>Request IIC services</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.HomePage = HomePage;
window.OrganicBlob = OrganicBlob;
window.SectionDivider = SectionDivider;