/* Stories / Testimonials — Christa Niering · Refined Life Coaching
 * NOTE: This is a new practice. Only real, unedited client words are used here.
 * No testimonials have been invented. Two real reviewers so far: Connie & "B".
 */
const { useState } = React;

const GOOGLE_REVIEW_URL = "https://g.page/r/CbfF5BTWWm3XEAE/review";
const IMG_FEATURED = "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&w=1200&q=80"; // soft misty forest

const FEATURED = {
  name: "Connie", meta: "★★★★★ · Google review",
  quote: "I had a long-time family struggle that resurfaced at an event. I was apprehensive about discussing it, but I decided to use Christa's services. Her gentle guidance and joyful countenance immediately put me at ease and made me very comfortable. She listened and asked some amazing questions, and I was amazed by her insight and the godly wisdom this precious girl has. Her insight and wisdom helped me see things in a unique way, from a different perspective — and that is quite honestly life-changing, in such a positive, fantastic way. She has a heart for people and a heart for Jesus. I am so grateful for my breakthrough — I could sing it from the rooftops!",
};

const ALL = [
  { name: "B.", meta: "After her first session", quote: "Just finished my session with Christa and it went very well! She is so approachable and easy to talk to. I just couldn't believe that so quickly she was able to walk me through some things I've been dealing with. I hope you get a chance to work with her, too!" },
  { name: "Connie", meta: "★★★★★ · Google review", quote: "I remembered Christa's logo of two friends walking together, and it reminded me that the Lord put us on this planet together — to be there for each other, to help each other, and that we should not have to deal with our struggles alone. What a meaningful and special experience." },
];

function Featured() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Featured story</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, marginBottom: 48 }}>
          A struggle she'd carried for years—{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>seen in a whole new light.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label="Soft light" src={IMG_FEATURED} objectPosition="center" 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(21px, 2.3vw, 29px)", 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(--terracotta)" }}>★★★★★</div>
              <div className="smallcaps" style={{ color: "var(--walnut-soft)" }}>Google review</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 }}>✦ In their words</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Real words,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>gently kept.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            Refined Life Coaching is a new practice, and I hold that honestly. What you'll read here is unedited and real — the first women who trusted me with something tender, in their own words.
          </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 }}>★★★★★</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 }}>
                <span style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--terracotta)", color: "var(--cream)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <ButterflyMark size={20} color="var(--cream)" />
                </span>
                <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>
          ))}

          {/* Real Google review link — honest, not a fabricated quote */}
          <a href={GOOGLE_REVIEW_URL} target="_blank" rel="noopener noreferrer" style={{ background: "var(--cream-2)", padding: "36px 36px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between", border: "1px solid var(--rule)" }}>
            <div>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>Read them yourself</div>
              <h3 className="display" style={{ fontSize: 26, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.2, marginBottom: 12 }}>See the reviews on Google</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--walnut-soft)" }}>Every word here is real and unedited. You can read the full reviews — and leave your own once we've worked together — right on Google.</p>
            </div>
            <span className="grotesk" style={{ marginTop: 26, fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)" }}>Open Google reviews →</span>
          </a>

          {/* Invitation — clearly an invitation, not a testimonial */}
          <div style={{ background: "var(--walnut)", color: "var(--cream)", padding: "36px 36px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>Your turn</div>
              <h3 className="display" style={{ fontSize: 26, fontWeight: 500, color: "var(--cream)", lineHeight: 1.2, marginBottom: 12 }}>The next story could be yours.</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "rgba(248,244,237,0.8)" }}>I would count it a gift to walk with you through your fire. When you're ready, the first step is just a gentle conversation — no pressure, no pitch.</p>
            </div>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn" style={{ marginTop: 26, background: "var(--cream)", color: "var(--walnut)", alignSelf: "flex-start" }}>Book a Free Conversation <span className="arrow">→</span></a>
          </div>
        </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 }}>
        {[["5.0", "Every review · ★★★★★"], ["1:1", "Always private, never a group"], ["10 yrs", "The healing behind the work"]].map(([n, l], i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderLeft: i === 0 ? "none" : "1px solid rgba(248,244,237,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"
          title="The first women who"
          italic="said yes."
          subtitle="I'm just beginning this calling, and I hold that with honesty and gratitude. Every word on this page is real and unedited — from the first women who let me walk with them through something tender. The next story could be yours."
          verse="The Lord is close to the brokenhearted and saves those who are crushed in spirit."
          verseRef="Psalm 34:18"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to begin"
          headlineItalic="your story?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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