/* Stories / Testimonials - Denice's written endorsements, verbatim */
const { useState } = React;

const FEATURED = {
  name: "Suzie Tjernlund", meta: "Lifelong friend · written endorsement",
  quote: "I have known Denice as long as I can remember. Denice has always followed through with her commitments. If she says she is going to do something, expect it to be done and to be done well. She is faithful to her word. Denice has always carried a deep integrity when it comes to being faithful and committed to her relationships — whether her commitments are to a family member, her coworkers, or within her Life Group at church. Denice has a deep and faithful relationship with God. Daily, she carries out and represents her life as not only how she would like to be treated but as she feels God would expect of her. Full of integrity, solid to her word, displays selflessness. Denice would never bring harm to a situation but rather seek ways to best come alongside another person. She is trustworthy and is confidential with the people that she works with as well as dear friends.",
};

const ALL = [
  { name: "Cindy Knudsen", meta: "Friend of 40+ years · written endorsement", quote: "Denice DeVries is a honest, kind and compassionate person. She's a God fearing, God loving person. I have known her for 40+ years. In all those years she's always been trustworthy and of high integrity." },
  { name: "Polly Lilly", meta: "Friend · written endorsement", quote: "Denice is dependable and loyal to God first, and then to others. She is easy to get to know and a great friend to many. She kindly speaks truth." },
  { name: "Evelyn Napton", meta: "Friend · written endorsement", quote: "Denise embraces all characteristics I believe are important in trusting someone. She is kind and caring, an active listener who does not judge, and a person of her word. Being kind and caring allows people to feel comfortable with Denise knowing she has empathy and compassion for them. She is an active listener that does not judge others which allows others to confide in her. Lastly she is a woman of her word which allows others to know they can rely on her and trust what she says. Denise truly embraces all qualities I believe are important to trust her fully and completely." },
  { name: "Randi's story", meta: "Mentoring moment · as Denice tells it", quote: "Randi needed perspective on time management and getting back into the discipline of a quiet time. She implemented some ideas we talked through in a casual conversation — and got back on track." },
  { name: "Lila's story", meta: "Mentoring moment · as Denice tells it", quote: "Lila and I talked about childhood triggers. When she returned to her hometown, she was able to identify situations she felt had influenced her adult life — and she is addressing them now with the Lord and her husband." },
  { name: "Curt & Sandy's story", meta: "GriefShare · as Denice tells it", quote: "Curt and Sandy had each lost someone very close. A few years on, they felt the desire to come alongside others in grief and helped me facilitate our last GriefShare session. They both became great contributors to the comfort of the group — and were comforted themselves." },
];

function Featured() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Featured endorsement</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, marginBottom: 48 }}>
          A woman of{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>her word.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label="Morning sun over a golden field" src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=1400&auto=format&fit=crop" alt="Morning sun over a golden field" objectPosition="center 40%" style={{ aspectRatio: "4 / 5", width: "100%" }} />
          <div>
            <div aria-hidden style={{ fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, fontSize: 140, color: "var(--terracotta)", opacity: 0.25, lineHeight: 0.5, marginBottom: 14 }}>"</div>
            <p style={{ fontSize: "clamp(20px, 2.2vw, 27px)", lineHeight: 1.45, color: "var(--walnut)", fontFamily: "'Source Serif 4', serif", fontWeight: 300, fontStyle: "italic", marginBottom: 32 }}>
              {FEATURED.quote}
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 24, borderTop: "1px solid var(--rule-strong)", flexWrap: "wrap" }}>
              <div className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)" }}>— {FEATURED.name}</div>
              <div style={{ flex: 1, height: 1, background: "var(--rule)", minWidth: 30 }} />
              <div className="smallcaps" style={{ color: "var(--walnut-soft)" }}>{FEATURED.meta}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Grid() {
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ More voices</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Friends, grievers,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>and fellow travelers.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            An honest note: Restoring Paths is a new practice, so you won't find paid reviews or polished case studies here. What you'll find instead is the written word of women who have known Denice for decades — unedited — and true stories from the mentoring and grief ministry she has already been doing for years.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {ALL.map((t, i) => (
            <figure key={i} style={{ background: "var(--cream-2)", padding: "36px 36px 32px" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>{t.meta.includes("endorsement") ? "Written endorsement" : "A story from the road"}</div>
              <blockquote style={{ fontSize: 18, lineHeight: 1.55, color: "var(--walnut)", marginBottom: 26, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300 }}>"{t.quote}"</blockquote>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 14 }}>
                <Placeholder label="" style={{ width: 44, height: 44, borderRadius: "50%" }} />
                <div>
                  <div className="grotesk" style={{ fontSize: 15, fontWeight: 500, color: "var(--walnut)" }}>{t.name}</div>
                  <div className="smallcaps" style={{ color: "var(--walnut-soft)", fontSize: 9 }}>{t.meta}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  return (
    <section style={{ padding: "48px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "var(--cream)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
        {[["40+ yrs", "Of friendship behind these words"], ["4", "Written endorsements · unedited"], ["0", "Paid reviews · every word freely given"]].map(([n, l], i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderLeft: i === 0 ? "none" : "1px solid rgba(238,241,245,0.18)", paddingLeft: i === 0 ? 0 : 32 }}>
            <div className="display" style={{ fontSize: 44, fontWeight: 500, color: "var(--cream)", letterSpacing: "-0.04em" }}>{n}</div>
            <div className="smallcaps" style={{ color: "var(--terracotta)" }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="stories" />
      <main>
        <PageHero
          eyebrow="Stories & Endorsements"
          title="Kindly speaking"
          italic="truth."
          subtitle="These are the words of people who have known Denice for most of her life — some for more than forty years — alongside true stories from the grief ministry and mentoring she has quietly done for years. Their words, unedited. The next story on this page could be yours."
          verse="Bless the Lord, O my soul, and forget not all his benefits."
          verseRef="Psalm 103:2"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to start"
          headlineItalic="your story?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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