/* About Denice - using official intake copy */
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 Denice</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              A daughter God delights in.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Still seeking His presence.</span>
            </h2>
            <Placeholder label="Sunrise breaking over a misty valley" src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?q=80&w=1400&auto=format&fit=crop" alt="Sunrise breaking over a misty valley" 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 }}>
                "Be strong and courageous. Do not be frightened, and do not be dismayed, for the Lord your God is with you wherever you go."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Joshua 1:9</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 }}>
                "I sincerely want to help people find truthful answers to their questions — using Scripture, experience, and compassion — to find a path restored for the remainder of their lives. Answers can be discovered by sincerely seeking God. He wants to be found. Let's reveal His path together."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>I accepted Jesus Christ as my Savior at six years old. And for a long time afterward, I lived the way a lot of us do: I went to God in my times of crisis or need, and kept Him out of control in between. I acted like a Christian — a good teenager, church work, religious activities, a law-abiding citizen, mother, and wife — but I was not Spirit-led.</p>
              <p>A few times in my life I came to the end of myself. One of those was as I approached my thirtieth birthday. I had achieved so many of my goals and dreams, and something was still missing. I got right with God, and He graciously restored our relationship. Years later came a harder crisis: my first marriage was falling apart, and I knew I could not live a double life — one of them so far away from God. In 2011 we divorced. <span className="serif-italic" style={{ color: "var(--walnut)" }}>From that time on, I chose to follow hard after God.</span></p>
              <p>Then God gave me a gift I hadn't dared expect: shortly after the divorce I met and married a Godly man, and we had ten years together. I got to see God's design for marriage, and to let Him heal the hurts of the first one. It was a second chance I will always be grateful for.</p>
              <p>And then, suddenly, my husband died. Sudden death of someone you love that much sends your world into chaos. I had witnessed death as a nurse; I had lost older relatives. But no one this close. I cried a lot. My body went on, but my heart was heavy and torn. I studied Scripture, theology, grief books — I prayed and tried to understand God's plan in it. Many people offered comfort, but most could not comprehend what I was feeling. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>I still believed in God's goodness. I just didn't want to live through whatever it was going to take, for however long it was going to take.</span></p>
              <p>God's presence is what has carried me through — through the grief, and through the fears that came with it: financial security, loneliness, church ministry, family life in a multigenerational home. I attended a GriefShare group, and eventually began facilitating those sessions. Helping others has helped me. My questions about grief and suffering have changed along the way: I no longer encourage myself or others to demand "why" from God. We need time, and perspective, and most of all His presence.</p>
              <p>That is what Restoring Paths is. Not a program I read about — the road I am still walking. I rely on God, and He is faithful. His presence is the most valuable thing in the world to me now, and helping you find yours restored is the work I believe He has given me.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Denice</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "His presence over explanations.", body: "I don't push anyone to ask God 'why.' It wouldn't change the circumstance, and often we're not yet ready to understand the answer. What we can have — today — is His presence. God's presence is the most valuable thing in the world to me, and helping you sense it, whatever is going on in your life, is the heart of this work." },
    { n: "II", title: "Truth can be found.", body: "God reveals Himself to those who seek — He wants to be found. I believe God's will can be known, and that He has plans for you. So we seek: honest questions, Scripture searched sincerely, lies gently exchanged for truth. When you discover His plan and purpose, peace comes — even in circumstances that haven't changed." },
    { n: "III", title: "Grief doesn't follow a schedule.", body: "Therapy and coaching often expect progress in a timely manner, in tidy steps and stages. But in grief and loss, progress ebbs and flows — and you deserve to know that is normal and okay. I leave results to God and His sovereign ways. My job is to come alongside you patiently, for as long as the road takes." },
  ];
  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 }}>
            Firm, but inviting. Warm, and honest. Every conversation I have rests on these three convictions about God, grief, and the path He restores.
          </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: "A Nurse's Eyes", t: "A career spent at the bedside", d: "I spent my working life as a nurse. I have sat with bodies in pain and families in fear; I have witnessed death up close. Nursing taught me to notice what people can't say, to stay calm in chaos, and to care for the whole person — habits that walked straight into this coaching work." },
    { tag: "GriefShare Facilitator", t: "First a griever · then a guide", d: "After my husband's sudden death, I attended a GriefShare session — and eventually began facilitating them. Helping others has helped me. I've walked with grievers as their questions changed, watched them become comforters themselves, and learned that coming alongside people is transformational." },
    { tag: "A Student of Grief & Scripture", t: "3½ years of searching for truthful answers", d: "Since becoming a widow I have studied Scripture, theology, biographies, and counseling teachings in earnest. The voices that shaped me: the Holy Spirit first, my mother, aunts and grandmother, Billy Graham, Anne Graham Lotz, Joyce Meyer, Henry & Richard Blackaby, John Piper, Nancy Guthrie, John Eldredge, Lina Abujamra, and more." },
    { tag: "Church Prayer Ministry & Mentoring", t: "Life Group · prayer ministry · young adults", d: "I serve in prayer ministry with a group at my church, walk closely with my Life Group, and have mentored teenagers and young adults for years — helping them identify what's really going on and take truthful, practical next steps. Decades of quiet, faithful, person-by-person ministry." },
  ];
  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)" }}>
      <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: "var(--cream)", lineHeight: 0.98, fontWeight: 500 }}>
              Lived, studied, 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(238,241,245,0.7)" }}>
              I'm not going to hand you a certificate wall. What I bring is a nursing career, years of grief ministry, a life anchored in Scripture — and a road I have actually walked. It is a circumstance that is irreversible, and I understand that from the inside.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(238,241,245,0.18)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "32px 28px 32px 0", borderBottom: i < 2 ? "1px solid rgba(238,241,245,0.18)" : "none", borderRight: i % 2 === 0 ? "1px solid rgba(238,241,245,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: "var(--cream)", lineHeight: 1.2, marginBottom: 10 }}>{it.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "rgba(238,241,245,0.7)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="My Story"
          title="I know what it is to lose the path."
          italic="And to watch God restore it."
          subtitle="Saved at six. Rededicated at thirty. Divorced in 2011, and choosing that day to follow hard after God. Ten years of a second-chance Godly marriage — then suddenly widowed. A nurse, a GriefShare facilitator, a daughter God delights in. This is the road I've walked, and the one I now walk with others."
          verse="For my thoughts are not your thoughts, neither are your ways my ways, declares the Lord."
          verseRef="Isaiah 55:8"
        />
        <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 }}>
              {[["6", "yrs old", "When I said yes to Jesus"], ["2011", "", "The year I chose to follow hard after God"], ["10", "yrs", "Of a God-given second marriage"], ["3½", "yrs", "Walking my own grief road"]].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 seek"
          headlineItalic="Him together?"
          checklist={[
            "The season you're in — grief, disappointment, or something you can't name yet",
            "What a restored relationship with God could look like for you",
            "Which Restoring Paths doorway fits — 1:1, the grief group, or self-paced",
            "Whether we're the right fit for the road ahead — I'll be honest either way",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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