/* Educators page */

const PROGRAMS = [
  {
    n: "01",
    title: "School-day reset",
    duration: "45 min",
    size: "Faculty meeting / PD block",
    where: "Your campus",
    description: "A quick somatic reset built into a faculty meeting or PD slot. No mats required — done at desks if needed. The exact medicine for the Tuesday after parent-teacher conferences.",
  },
  {
    n: "02",
    title: "Half-day educator retreat",
    duration: "3.5 hours",
    size: "20–60 educators",
    where: "Off-campus venue",
    description: "Sound bath, restorative yoga, integration writing, real lunch. The shape that schools and districts book to actually move the needle on retention and morale.",
    featured: true,
  },
  {
    n: "03",
    title: "End-of-year ritual",
    duration: "90 min",
    size: "Whole department or grade level",
    where: "On- or off-campus",
    description: "A closing arc to the academic year — naming what was held, what's being released, what wants to come next. Especially powerful before summer.",
  },
];

function PageHero() {
  return (
    <section className="page-hero">
      <div className="wrap">
        <span className="eyebrow">For Educators & Schools</span>
        <h1 className="display" style={{ marginTop: 16 }}>
          Built by a teacher,<br /><em>for the people</em><br />still in the classroom.
        </h1>
        <p className="lede">
          Fifteen years as a public school band director taught me what teacher
          burnout actually looks like — and what kind of rest moves the needle.
          Sound healing programs designed specifically for school staff,
          districts, and educator networks.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
          <a href="contact.html" className="btn btn-primary">Bring this to your school</a>
          <a href="#programs" className="btn btn-ghost">See programs</a>
        </div>
      </div>
    </section>
  );
}

function WhyMe() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="grid-2" style={{ alignItems: "center", gap: 64 }}>
          <div>
            <span className="eyebrow">Why this is different</span>
            <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", marginTop: 16 }}>
              I'm not a wellness consultant <em>visiting</em> your faculty.
            </h2>
            <p className="lede" style={{ marginTop: 28 }}>
              I was your faculty. Fifteen years in Metro Nashville Public Schools.
              Band rooms with eighty kids. The IEP meetings, the parent emails at
              10pm, the faculty meeting where someone cried.
            </p>
            <p className="body" style={{ marginTop: 20 }}>
              I left the classroom in part because I learned what sound and somatic
              practice could do — and now I bring it back to the people who held it
              all alongside me. The work is rooted in the same room you stand in.
            </p>
          </div>
          <div className="grid-2" style={{ gap: 16 }}>
            <div className="edu-stat">
              <div className="edu-stat-num">15<span style={{ fontSize: 24, color: "var(--moss)", fontStyle: "italic" }}>yrs</span></div>
              <div className="cred-label" style={{ marginTop: 12 }}>Public school<br />educator</div>
            </div>
            <div className="edu-stat">
              <div className="edu-stat-num">Ed.D.</div>
              <div className="cred-label" style={{ marginTop: 12 }}>Lipscomb University<br />2025</div>
            </div>
            <div className="edu-stat">
              <div className="edu-stat-num">L2</div>
              <div className="cred-label" style={{ marginTop: 12 }}>Sound Healing Academy<br />Groups Diploma</div>
            </div>
            <div className="edu-stat">
              <div className="edu-stat-num">400<span style={{ fontSize: 22, color: "var(--moss)", fontStyle: "italic" }}>hr</span></div>
              <div className="cred-label" style={{ marginTop: 12 }}>Yoga teacher<br />training</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Programs() {
  return (
    <section className="section" id="programs" style={{ background: "var(--bone-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="section-header">
          <div>
            <span className="eyebrow">Programs</span>
            <h2 className="display section-title">Three <em>shapes</em> for school staff.</h2>
          </div>
        </div>
        <div className="grid-3">
          {PROGRAMS.map((p) => (
            <article key={p.n} className={`corp-package ${p.featured ? "featured" : ""}`}>
              <div className="corp-package-num">{p.n}</div>
              <h3 className="format-title">{p.title}</h3>
              <dl className="format-specs">
                <div><dt>Length</dt><dd>{p.duration}</dd></div>
                <div><dt>Group</dt><dd>{p.size}</dd></div>
                <div><dt>Where</dt><dd>{p.where}</dd></div>
              </dl>
              <p className="small">{p.description}</p>
              <a href="contact.html" className={`btn ${p.featured ? "btn-brass" : "btn-ghost"}`} style={{ marginTop: "auto", alignSelf: "flex-start" }}>Inquire</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section style={{ padding: "120px 0", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap" style={{ maxWidth: 980 }}>
        <div className="quote-mark">"</div>
        <p className="display" style={{ fontSize: "clamp(28px, 4vw, 48px)", lineHeight: 1.15 }}>
          Jazmin's soundbaths are a truly transformative experience. Knowing her background as a former band teacher, I expect it to be musical, but she always takes it to an entirely different level. She doesn't just play instruments. She composes a soundscape that moves through your body. The way she layers the sounds of all the instruments with her musical knowledge and pacing is incredible. <em>It wasn't just noise—it was a deeply resonant, professional grade musical journey that perfectly guided me into a state of profound relaxation.</em> If you're looking for a sound bath that bridges the gap between musical artistry and deep wellness, you must experience hers!
        </p>
        <div className="quote-attr">
          <div className="quote-line"></div>
          <div>
            <div style={{ fontWeight: 500, color: "var(--forest)" }}>Anonymous</div>
            <div className="small muted">Middle school teacher · Metro Nashville Public Schools</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Partner() {
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 880, textAlign: "center" }}>
        <span className="eyebrow">Partner with me</span>
        <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", marginTop: 16 }}>
          A note for <em>fellow teachers & studio owners</em>.
        </h2>
        <p className="lede" style={{ marginTop: 24, marginLeft: "auto", marginRight: "auto" }}>
          If you're a yoga teacher, somatic practitioner, or studio owner who wants
          to co-create a meaningful healing experience — workshop, retreat, ongoing
          series — I'd love to hear what you're holding. The strongest work I've
          done has been alongside other practitioners.
        </p>
        <a href="contact.html" className="btn btn-brass" style={{ marginTop: 32 }}>Send a partnership note</a>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav active="educators" />
      <PageHero />
      <WhyMe />
      <Programs />
      <Quote />
      <Partner />
      <Footer />
    </>
  );
}

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