/* Bri Hershberger · The Glass Heart — Testimonials page */
const { useState } = React;

const ALL_TESTIMONIALS = [
  {
    quote: "Bri is really intentional about making a person feel safe. She is trustworthy and kind, insightful and a great listener.",
    highlight: "I would recommend her!",
    name: "Ren",
    meta: "Coaching client",
    featured: true,
  },
  {
    quote: "Bri is a kind hearted woman who cares for people around her. I have personally experienced the way she cares for me and is there for me when I am growing through a rough time. She is always willing to offer a listening ear and has offered me wisdom and honest feedback when I needed it.",
    highlight: "I am able to be a better person knowing I have Bri supporting and challenging me to grow and to heal.",
    name: "Janae",
    meta: "Friend · witness to Bri's work",
    featured: false,
  },
  {
    quote: "Bri is someone you can go to talk to if you need a judgment free and safe space to talk about your highs and lows. She is always open to listening and speaking the truth in a loving way when necessary.",
    highlight: "You leave a conversation with her feeling a sense of relief and like your problems weren't as big as before.",
    name: "Essie",
    meta: "Sister · witness to Bri's work",
    featured: false,
  },
];

function FeaturedStory() {
  const f = ALL_TESTIMONIALS[0];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "center" }}>
          <Placeholder label="Bri · portrait" src="https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1200&q=80" alt="A wave rolling in from the sea" objectPosition="center" style={{ aspectRatio: "3 / 4", width: "100%" }} />
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 28 }}>✦ Featured story</div>
            <div aria-hidden style={{ fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, fontSize: 96, color: "var(--terracotta)", opacity: 0.3, lineHeight: 0.8, marginBottom: 16 }}>"</div>
            <blockquote style={{ fontFamily: "'Source Serif 4', serif", fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.35, color: "var(--walnut)", fontWeight: 300, fontStyle: "italic", marginBottom: 24 }}>
              {f.quote}
            </blockquote>
            <p className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)", marginBottom: 32 }}>
              {f.highlight}
            </p>
            <figcaption style={{ display: "flex", alignItems: "center", gap: 16, paddingTop: 24, borderTop: "1px solid var(--rule)" }}>
              <Placeholder label="" style={{ width: 52, height: 52, borderRadius: "50%" }} />
              <div>
                <div className="grotesk" style={{ fontSize: 16, fontWeight: 600, color: "var(--walnut)" }}>{f.name}</div>
                <div className="smallcaps" style={{ color: "var(--walnut-soft)", marginTop: 4 }}>{f.meta}</div>
              </div>
            </figcaption>
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialGrid() {
  const grid = ALL_TESTIMONIALS.slice(1);
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ More voices</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
            Women who felt{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>known.</span>
          </h2>
          <p style={{ marginTop: 16, fontSize: 16.5, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 640 }}>
            More testimonials are on their way. Bri is building her practice with care, one client at a time — and more stories will be added here as they come.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {grid.map((q, i) => (
            <figure key={i} style={{ background: "var(--cream-2)", padding: "36px 32px 32px", display: "flex", flexDirection: "column", position: "relative" }}>
              <div aria-hidden style={{ position: "absolute", top: 12, left: 24, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, fontSize: 90, color: "var(--terracotta)", opacity: 0.25, lineHeight: 1 }}>"</div>
              <blockquote style={{ fontSize: 17, lineHeight: 1.55, color: "var(--walnut-soft)", marginBottom: 18, fontFamily: "'Source Serif 4', serif", flex: 1, position: "relative", zIndex: 1, marginTop: 14 }}>{q.quote}</blockquote>
              <p className="serif-italic" style={{ fontSize: 18, color: "var(--walnut)", marginBottom: 24, lineHeight: 1.4, fontWeight: 400 }}>{q.highlight}</p>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <Placeholder label="" style={{ width: 36, height: 36, borderRadius: "50%" }} />
                <div>
                  <div className="grotesk" style={{ fontSize: 14, fontWeight: 500, color: "var(--walnut)" }}>{q.name}</div>
                  <div className="smallcaps" style={{ color: "var(--walnut-soft)", fontSize: 9 }}>{q.meta}</div>
                </div>
              </figcaption>
            </figure>
          ))}
          <div style={{ background: "var(--terracotta)", padding: "36px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div className="smallcaps" style={{ color: "var(--cream)", opacity: 0.85, marginBottom: 20 }}>✦ Your story next</div>
            <p className="serif-italic" style={{ fontSize: 22, lineHeight: 1.4, color: "var(--cream)", fontWeight: 300, marginBottom: 28 }}>
              "More stories are coming. Bri is building her practice one woman at a time — with care, with presence, and with the kind of witness that changes things."
            </p>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn" style={{ background: "var(--cream)", color: "var(--walnut)", alignSelf: "flex-start" }}>
              Book a Free Call <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="stories" />
      <main>
        <PageHero
          eyebrow="Stories"
          title="Women who were"
          italic="finally seen."
          subtitle="Real voices from real women who experienced what it's like to be witnessed without judgment — and what happened when someone finally sat with them in it."
          verse="In him was life and the life was the light of men."
          verseRef="John 1:4"
        />
        <section style={{ padding: "44px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "var(--cream)" }}>
          <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40 }}>
            {[["5.0", "★★★★★", "Client rating"], ["12+", "yrs", "Bri's healing journey"], ["100%", "", "Judgment-free sessions"], ["1", "", "Framework — Glass Heart Approach"]].map(([n, sub, l], i) => (
              <div key={i} style={{ 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>
                {sub && <div style={{ color: "var(--terracotta)", letterSpacing: "0.18em", fontSize: 13, marginTop: 4 }}>{sub}</div>}
                <div className="smallcaps" style={{ color: "var(--terracotta)", opacity: 0.8, fontSize: 10, marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </section>
        <FeaturedStory />
        <TestimonialGrid />
        <CTA
          eyebrow="✦ Ready to be seen?"
          headline="Your story"
          headlineItalic="starts here."
          checklist={[
            "What you're carrying that you've never said out loud",
            "Where the pattern began and what it would take to uproot it",
            "Whether The Glass Heart Intensive is the right fit for you",
            "What you could look like on the other side of this",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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