/* About Steve Wineland - 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 Steve</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              An honest man.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Still on the journey.</span>
            </h2>
            <Placeholder label="Still on the journey" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1100&q=72" objectPosition="center" 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 }}>
                "The thief comes only to steal and kill and destroy; I came that they may have life and have it abundantly."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>John 10:10</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 thought I needed a touch-up. What I needed was a new heart. The day I stopped covering it over was the day God could finally begin the real work — and that's the work I now do with other men."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>As I look back over my life, I realize God has always been there — even in the seasons I didn't seek Him, even when I tried to do everything on my own. Every time I truly needed Him, He was there. I felt His presence most clearly when I was at my lowest.</p>
              <p>I had fallen into the addiction of pornography, and I told myself I had it under control — that I could turn it on and off whenever I wanted. I was very wrong. I came to understand how powerful the enemy was in my life. <span className="serif-italic" style={{ color: "var(--walnut)" }}>Satan is not more powerful than Jesus — but he is a lot more powerful than me.</span> I thought I could hide on my home computer, my phone, even my work computer. Every one of those devices is public. They can be searched. They can be monitored. Seeing the faces of the people who found out my secret was the most humiliating moment of my life.</p>
              <p>My rock bottom came when my wife said, "I want a divorce. I can't do this anymore." We had tried counseling before, but the truth is I was only interested in covering the problem over — not solving it. When she filed, I finally faced the truth about myself. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>I realized I didn't need cosmetic surgery. I needed heart surgery — the kind only God can give.</span></p>
              <p>Through family, friends, and counseling, I was able to recover. My children and my friends stood by me. But I knew my wife was right — I had fallen away from the man God created me to be. It was too late for that marriage. It was not too late for me.</p>
              <p>I have spent most of my life in the church, serving in many capacities — and for much of that time, my heart wasn't in it. I knew, deep down, that I was doing the right things for reasons that weren't true. So I rededicated my life to God. I read my Bible every day. I pray. I lead a men's ministry. I pray daily with my wife and my stepson.</p>
              <p>I've learned how God works: He will send a friend. He will send a song. He will send a verse in the Bible to touch you at exactly the moment you need it. A health scare a few years ago brought me face to face with my own mortality — and I came away knowing my eternity is secure. I'm not too late. Neither are you.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Steve</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "Heart surgery, not a touch-up.", body: "Most men want their behavior cleaned up while their heart stays untouched. It never lasts. Real change is heart-level, and only God performs that surgery. My job isn't to hand you a better willpower plan — it's to walk with you toward the One who actually makes men new." },
    { n: "II", title: "Honesty is the doorway.", body: "Nothing hidden stays hidden — and nothing hidden gets healed. Every device is public; every secret eventually surfaces. So we choose honesty on purpose, gently and without shame. The truth is uncomfortable for a moment and freeing for a lifetime." },
    { n: "III", title: "A servant first, a leader second.", body: "My coaching is called servant leadership for a reason. I follow the ultimate leader, Jesus Christ, who came not to be served but to serve. There are times to lead and times to serve — and a man who learns the difference becomes someone his family can trust." },
  ];
  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 convictions{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>behind the work.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Following Jesus. Acting with integrity. Choosing honesty. Serving others. Everything I do with the men I coach grows out of these three convictions about what really changes a life.
          </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 Life in the Church", t: "Men's ministry leader · lifelong servant", d: "I have spent most of my life in the church, serving in many capacities. Today I lead a men's ministry and pray daily with my wife and my stepson. I know the language of faith from the inside — and I know the quiet ache of a man going through the motions while his heart is somewhere else." },
    { tag: "Lived Healing", t: "Years of recovery & accountability", d: "I have been on a journey of healing and personal accountability for several years — through addiction, divorce, counseling, and a slow, honest return to the man God created me to be. This isn't theory I read in a book. It's the road I've walked, and I'd love the chance to help others walk it too." },
    { tag: "Leadership Experience", t: "Business · ministry · leadership", d: "Alongside my ministry, I bring previous business and leadership experience to the men I coach. I don't pretend to have all the answers — but I have a great deal of experience and knowledge I'm glad to share, and the wisdom to know when to simply listen." },
    { tag: "Shaped By Trusted Voices", t: "Teachers who formed my faith", d: "My thinking has been shaped by teachers like Dr. David Jeremiah, Dr. James Dobson, Josh Wymore, Tim Tebow, and Jack Hibbs — men who anchor everything in Scripture and in the daily, practical work of following Jesus. To me, Jesus is the most important relationship of all: one that has to be communicated, fed, and nourished every single day." },
  ];
  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 & formation</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--cream)", lineHeight: 0.98, fontWeight: 500 }}>
              Real experience.{" "}
              <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 bring a lifetime in the church, years of hard-won healing, and real leadership experience to every man I serve. None of it makes me an expert who has arrived. It makes me a fellow traveler who knows the way back.
            </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 thought I could hide it."
          italic="I was wrong."
          subtitle="A lifetime in the church. An addiction I told myself I controlled. A marriage I lost. And a God who was there the whole time, waiting for me to stop covering it over and finally let Him do heart surgery. This is the road I walked — and the one I now walk with other men."
          verse="Create in me a clean heart, O God, and renew a right spirit within me."
          verseRef="Psalm 51:10"
        />
        <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 }}>
              {[["Daily", "", "In the Word & in prayer"], ["Men's", "ministry", "Leader & servant"], ["Years", "", "Of healing & accountability"], ["1", "", "Mission · walk in integrity"]].map(([n, unit, l], i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 36, 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 for the"
          headlineItalic="real work?"
          checklist={[
            "Where you've been managing the surface instead of healing the heart",
            "What an honest, grace-based path toward integrity looks like for you",
            "Which way of walking together fits your season right now",
            "Whether I'm the right man to walk it with you — I'll tell you honestly",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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