/* About Julie Janes · GraceLife Coaching */
const { useState, useEffect } = React;

function StoryBlock() {
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Meet Julie</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              I'm a woman who survived.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Still walking the path.</span>
            </h2>
            <Placeholder
              src="https://assets.cdn.filesafe.space/VUxT5WqlrIHpkaSRllVC/media/6a2227adda24932f1217f987.jpeg"
              alt="Julie Janes"
              objectPosition="center top"
              style={{ marginTop: 32, aspectRatio: "4 / 5", width: "100%" }}
            />
            <div style={{ marginTop: 32, padding: "24px 28px", background: "var(--cream-2)", borderLeft: "2px solid var(--terracotta)" }}>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.5, color: "var(--walnut)", fontWeight: 300 }}>
                "I can do all things through Christ who strengthens me."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Philippians 4:13</div>
            </div>
          </div>
          <div>
            <div style={{ borderLeft: "2px solid var(--terracotta)", paddingLeft: 28, marginBottom: 40 }}>
              <p className="serif-italic" style={{ fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>
                "You don't have a behavior problem. You have a little girl still waiting to be told she's enough — who decided somewhere along the way that love had to be earned. That's where we start. And when we go there together, everything begins to change."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>The Religious Upbringing</div>
                <p>I went to Catholic school. I had questions nobody could answer. At seventeen I refused my confirmation — not out of rebellion, but because I couldn't make a vow I didn't understand yet. That honesty cost me something. But it also preserved something real in me that God would later meet.</p>
              </div>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>The Seeking Years</div>
                <p>I found massage therapy school. I explored new age, chakras, tarot, eastern philosophy. <span className="serif-italic" style={{ color: "var(--walnut)" }}>I felt more and more lost. New age intrigued me, but it still didn't contain the answers I belonged for.</span> I was looking for something real. I just didn't know yet what it was called.</p>
              </div>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>The First Marriage</div>
                <p>I met my first husband at a bar at 31. He had three little girls. I thought my mission was to love him into sobriety. Years of rehabs. Jail. Prison. Through the Salvation Army church I found my first Bible. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>When I started seeing some of the secrets unlocked and saw the answers I'd been waiting for come alive through the Bible, I started feeling more filled up.</span></p>
              </div>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>The Breaking Point</div>
                <p>Financially ruined. Emotionally exhausted. Business falling apart while I went to food pantries and paid my employees first. The lie I was living: <span className="serif-italic" style={{ color: "var(--walnut)" }}>"I felt unloveable. I felt like a failure. I felt like I'd destroyed any pride my parents had for me."</span></p>
              </div>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>The Second Marriage & Sudden Loss</div>
                <p>Tim. 2020. I woke up one morning and found him gone beside me in bed. Pandemic restrictions. A funeral I could barely hold. A grief I had no map for. <span className="serif-italic" style={{ color: "var(--walnut)" }}>The model of grieving I was shown was: you're really sad, you have a funeral, and then it's over. I had loads of questions.</span> I found a Grief Share class. I started getting answers.</p>
              </div>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>The Turning Point</div>
                <p>CrossWay Church. SALT group — Single Adults Living Truth. Deep biblical friendships. I started enjoying being single so much that when someone showed interest, I was oblivious. Kevin — a humble follower of Jesus who shares my vision for coaching — is now my husband. He is evidence that grace doesn't run out.</p>
              </div>
              <div>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>What I Carry Now</div>
                <p>I give Jesus all the glory for what He has done with my faith. He's always been faithful. I'm the one who kept stuffing Him down or running away. What I learned in that long excavation is the work I now bring to every session. Not theory. Not a method I read about. The road I actually walked.</p>
              </div>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Julie</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "Change is the fruit, not the root.", body: "Behavior modification built on guilt or shame eventually collapses. Real transformation happens when the wound is healed — and change flows naturally from the inside out. We don't fix behavior here. We heal what drives it." },
    { n: "II", title: "You were never alone in the darkest moment.", body: "I know this not because I read it — because I lived it. When I was most broken and weak, there is absolutely no way I came out of that in my own strength. Jesus was there. He's in yours too." },
    { n: "III", title: "Grace is a free gift — not a reward for performance.", body: "The Gospel is the most beautiful and transformative story ever told: God provided the perfect sacrifice because you couldn't. You don't earn grace. You receive it. Everything in GraceLife Coaching flows from that reality." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ What I stand for</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            The foundations{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>of this work.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Three convictions that shape every session, every program, and every conversation in GraceLife Coaching.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
          {beliefs.map((b, i) => (
            <div key={b.n} style={{ padding: "44px 36px 48px", borderRight: i < 2 ? "1px solid var(--rule)" : "none" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 24 }}>{b.n}</div>
              <h3 className="display" style={{ fontSize: 26, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.15, marginBottom: 18 }}>{b.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--walnut-soft)" }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Credentials() {
  const items = [
    { tag: "20+ Years as a Business Owner", t: "Survived addiction, collapse & grief", d: "Survived addiction in the home, financial collapse, grief, and staff betrayal while still serving clients and paying employees first. The school of hard life — and the classroom where I learned what real resilience looks like." },
    { tag: "Active Personal Healing Journey", t: "The road I actually walked", d: "Inner child work, attachment theory, identity in Christ, inner healing, grief work — not as theory, but as the road I walked to get from the breaking point to where I stand now. Every tool I bring, I've tested on myself first." },
    { tag: "Alanon & Grief Share", t: "Trained in compassion-based frameworks", d: "Trained in the compassion-based frameworks that helped me understand addiction was never about me — and that grief is a doorway, not a destination. I know what it is to sit in those rooms and find something real." },
    { tag: "Ministry & Community Leadership", t: "Founded SALT · Couples coaching", d: "Founded SALT (Single Adults Living Truth) at CrossWay Church. Couples coaching alongside husband Kevin. Rooted in a local church community I call my second home. The faith is not decorative — it's structural." },
  ];
  return (
    <section className="section" style={{ background: "var(--walnut)", color: "rgba(239,241,232,1)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Background & credentials</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "rgba(239,241,232,1)", lineHeight: 0.98, fontWeight: 500 }}>
              Trained, tested, and{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>still learning.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(239,241,232,0.7)" }}>
              I bring a lifetime of hard-won wisdom, active healing work, and deep faith to every woman I serve. None of this is theory. Most of it cost me something to learn.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(239,241,232,0.18)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "32px 28px 32px 0", borderBottom: i < 2 ? "1px solid rgba(239,241,232,0.18)" : "none", borderRight: i % 2 === 0 ? "1px solid rgba(239,241,232,0.18)" : "none", paddingLeft: i % 2 === 1 ? 28 : 0 }}>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 14 }}>{it.tag}</div>
                <h3 className="display" style={{ fontSize: 21, fontWeight: 500, color: "rgba(239,241,232,1)", lineHeight: 1.2, marginBottom: 10 }}>{it.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "rgba(239,241,232,0.7)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="About Julie"
          title="I didn't find faith."
          italic="It found me — twice."
          subtitle="A massage therapist, a business owner, a wife, a widow, and now a coach. This is the road that made the work."
          verse="Do not conform to the pattern of this world, but be transformed by the renewing of your mind."
          verseRef="Romans 12:2"
        />
        <section style={{ padding: "60px clamp(28px, 6vw, 96px) 0", background: "var(--cream)" }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, borderTop: "1px solid var(--rule)", paddingTop: 36 }}>
              {[["20+", "yrs", "In business & active healing journey"], ["2", "", "Marriages, each teaching grace differently"], ["2020", "", "Year grief became the doorway back"], ["1", "", "Mission: grace-led healing for every woman"]].map(([n, unit, l], i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 38, fontWeight: 500, color: "var(--walnut)", letterSpacing: "-0.03em", display: "flex", alignItems: "baseline", gap: 6, whiteSpace: "nowrap" }}>
                    <span>{n}</span>
                    {unit && <span style={{ fontSize: 18, fontWeight: 400, color: "var(--walnut-soft)", letterSpacing: "0.02em" }}>{unit}</span>}
                  </div>
                  <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
        <StoryBlock />
        <Beliefs />
        <Credentials />
        <CTA
          eyebrow="✦ Your next step"
          headline="Ready to be"
          headlineItalic="truly seen?"
          checklist={[
            "Where the childhood wound is still shaping the way you love and react today",
            "What a grace-led, Holy Spirit-anchored path through the pain looks like for you",
            "Which GraceLife program fits your season — 1:1, circle, or self-paced",
            "Whether we're the right fit for the work ahead",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
