/* global React, Icon */

function PhilosophyPage({ navigate }) {
  const stages = [
    {
      title: "Innerstanding",
      sub: "Awareness",
      headline: "The beginning of change is self-awareness.",
      copy: "Developing awareness of your thoughts, emotions, patterns, and internal experiences. This stage focuses on recognizing what is happening within and building clarity around your inner world.",
      Sigil: Icon.SigilInner,
    },
    {
      title: "Overstanding",
      sub: "Perspective",
      headline: "Wisdom applied through intentional living.",
      copy: "Stepping beyond immediate reactions to gain a broader, more objective perspective. This stage helps you observe patterns, reduce reactivity, and understand your experiences more clearly.",
      Sigil: Icon.SigilOver,
    },
    {
      title: "Understanding",
      sub: "Integration",
      headline: "Once awareness grows, insight becomes possible.",
      copy: "Applying awareness and perspective to create meaningful change. This stage focuses on aligned decisions, intentional behavior, and integrating growth into everyday life.",
      Sigil: Icon.SigilUnder,
    },
  ];

  return (
    <div className="page">
      <section style={{ padding: "180px 0 80px", position: "relative", overflow: "hidden" }}>
        <div className="container">
          <div className="reveal" style={{ maxWidth: "20ch" }}>
            <h1 style={{ fontSize: "clamp(36px, 5vw, 76px)", lineHeight: 1.05, letterSpacing: "-0.03em", fontFamily: "var(--serif)", fontWeight: 400 }}>
              InnerStanding, OverStanding, <em className="serif-italic">UnderStanding</em>
            </h1>
          </div>
          <div style={{ position: "absolute", right: -100, top: 60, opacity: .55, color: "var(--sage-500)", width: 700, height: 600, pointerEvents: "none" }}>
            <Icon.Squiggle />
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          {stages.map((s, i) => (
            <div key={i} className={`stage-card reveal delay-${i+1}`}>
              <div>
                <h3>{s.title} <em>({s.sub})</em></h3>
                <div className="stage-card__big">{s.headline}</div>
                <p className="stage-card__copy">{s.copy}</p>
              </div>
              <div className="stage-card__sigil flex-center"><s.Sigil size={220} /></div>
            </div>
          ))}
        </div>
      </section>

      {/* Slogan */}
      <section className="section section--cream">
        <div className="container text-center">
          <div className="reveal flex-center" style={{ flexDirection: "column", gap: 24 }}>
            <span style={{ color: "var(--sage-600)" }}>
              <Icon.Logo size={64} color="currentColor" />
            </span>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 56px)" }}>IOU Is Not Simply A Slogan.</h2>
            <div className="tag-row mt-32">
              <span className="tag-pill">InnerStanding</span>
              <span className="tag-pill">OverStanding</span>
              <span className="tag-pill">UnderStanding</span>
              <span className="tag-pill">Integration</span>
            </div>
            <p className="section__lede" style={{ margin: "24px auto 0", maxWidth: "60ch" }}>
              It is a model of transformation, one that helps people move from internal awareness, to meaningful insight, to integrated living.
            </p>
            <a className="btn btn-primary mt-32" href="#/contact" onClick={(e) => { e.preventDefault(); navigate("/contact"); }}>New Patient Inquiry</a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PhilosophyPage = PhilosophyPage;