/* Warrior Shadow — Section 05 (The Guide), 06 (The Application), Footer. */
(function () {
  window.WS = window.WS || {};

  /* ---- Section 05 — The Guide (Leo Sun Authority) ------------- */
  function Guide() {
    const { Footnote } = window.TheaCorridorsShadowDesignSystem_46741f;
    const Slot = window.WS.ImageSlot;
    return (
      <section id="clinician" className="on-void" style={{
        background: '#111210', borderTop: '1px solid var(--hairline-on-dark)',
        borderBottom: '1px solid var(--hairline-on-dark)',
      }}>
        <div className="thea-container thea-grid" style={{
          alignItems: 'center', paddingBlock: 'var(--space-36)', rowGap: 'var(--space-12)',
        }}>
          {/* portrait, left half */}
          <div className="thea-reveal" style={{ gridColumn: '1 / span 5' }}>
            <Slot
              id="ws-thea"
              label="Image Insert 04 — Thea Portrait"
              caption="Black-and-white · high-contrast chiaroscuro · calm, unflinching authority · half in shadow"
              height={560}
              tint="stone"
            />
          </div>

          {/* copy, columns 7-11 */}
          <div className="thea-reveal" style={{
            gridColumn: '7 / span 5', display: 'flex', flexDirection: 'column', gap: 'var(--space-6)',
          }}>
            <span className="t-mono" style={{ color: 'var(--text-muted)' }}>[ 05 / The Clinician ]</span>
            <h2 className="t-display" style={{ fontSize: 'var(--text-48)', color: 'var(--sanctuary)', margin: 0 }}>Thea.</h2>
            <p className="t-body" style={{ color: 'var(--text-body)', fontSize: 'var(--text-18)' }}>
              For decades, I served as the Global Head of HR for a major corporate entity. I have sat
              in the boardrooms. I know the exact pressure, the required ruthlessness, and the silent,
              crushing weight carried by men in positions of power.
            </p>
            <p className="t-body" style={{ color: 'var(--text-body)', fontSize: 'var(--text-18)' }}>
              I transitioned from managing the psychology of the corporation to managing the
              architecture of the soul. I do not offer soft platitudes. I offer a profound, structured,
              and uncompromising container for your absolute liberation.
            </p>
            <p className="t-serif-italic" style={{ fontSize: 'var(--text-24)', color: 'var(--ash-light)', marginTop: 'var(--space-4)' }}>
              Thea
            </p>
          </div>
        </div>
      </section>
    );
  }
  window.WS.Guide = Guide;

  /* ---- Section 06 — The Application (the Boundary / CTA) ------ */
  function Application() {
    const { Button, Field, Footnote } = window.TheaCorridorsShadowDesignSystem_46741f;
    const [open, setOpen] = React.useState(false);
    const [sent, setSent] = React.useState(false);
    return (
      <section id="apply" className="on-void thea-section" style={{ background: 'var(--void)' }}>
        <div className="thea-container" style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
          gap: 'var(--space-8)', paddingBlock: 'var(--space-20)',
        }}>
          <span className="t-mono thea-reveal" style={{ color: 'var(--text-muted)' }}>[ 06 / Initiation ]</span>
          <h2 className="t-display thea-reveal" style={{ fontSize: 'var(--text-64)', color: 'var(--sanctuary)', margin: 0 }}>
            Step into the Corridor.
          </h2>
          <p className="t-body thea-reveal" style={{ color: 'var(--text-body)', fontSize: 'var(--text-18)', maxWidth: '600px' }}>
            The Warrior Shadow is a deep-water immersion. It requires courage, accountability, and a
            genuine readiness to lay down the armor. Because of the energetic depth of this work, I
            take on a strictly limited number of private clients.
          </p>

          {!open && !sent && (
            <div className="thea-reveal" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-4)', marginTop: 'var(--space-4)' }}>
              <Button variant="primary" trailing="↗" size="lg" onClick={() => setOpen(true)}>Submit your application</Button>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--ash-light)', opacity: 0.8, marginTop: 'var(--space-4)',
              }}>Applications are reviewed within 48 hours · Acceptance is subject to energetic alignment and current capacity</span>
            </div>
          )}

          {open && !sent && (
            <form
              onSubmit={(e) => { e.preventDefault(); setSent(true); }}
              style={{
                width: '100%', maxWidth: 620, marginTop: 'var(--space-8)', textAlign: 'left',
                display: 'flex', flexDirection: 'column', gap: 'var(--space-8)',
                borderTop: '1px solid var(--line)', paddingTop: 'var(--space-12)',
              }}
            >
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)' }}>
                <Field label="Name" placeholder="Your name" required />
                <Field label="Email" type="email" placeholder="you@example.com" required />
              </div>
              <Field label="What you carry" as="textarea" placeholder="Speak plainly. I read every application myself." required />
              <Button variant="primary" type="submit" trailing="→">Send the application</Button>
            </form>
          )}

          {sent && (
            <div className="thea-reveal" style={{
              width: '100%', maxWidth: 620, marginTop: 'var(--space-8)', textAlign: 'left',
              border: '1px solid var(--hairline-brass)', padding: 'var(--space-12)',
              display: 'flex', flexDirection: 'column', gap: 'var(--space-3)',
            }}>
              <span className="t-phase">Received</span>
              <p className="t-display" style={{ fontSize: 'var(--text-32)', color: 'var(--sanctuary)', margin: 0 }}>
                Held. I will be in touch.
              </p>
              <p className="t-body-sm" style={{ color: 'var(--text-muted)' }}>
                Your application has entered the queue. Expect a reply within 48 hours.
              </p>
            </div>
          )}

          <div className="thea-reveal" style={{ marginTop: 'var(--space-12)', width: '100%' }}>
            <Footnote items={[
              'All correspondence is held in strict confidence and never shared.',
              'A strictly limited cohort is held at any one time; a waitlist may apply.',
            ]} />
          </div>
        </div>
      </section>
    );
  }
  window.WS.Application = Application;

  /* ---- Footer ------------------------------------------------- */
  function SiteFooter() {
    const links = ['Corridors', 'Warrior Shadow', 'The Umbrella'];
    return (
      <footer className="on-void" style={{ background: 'var(--void)', borderTop: '1px solid #1c1d1a' }}>
        <div className="thea-container" style={{
          paddingBlock: 'var(--space-16)', display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 'var(--space-12)', flexWrap: 'wrap',
        }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--ash-light)',
          }}>THEA. © MMXXVI</span>
          <nav style={{ display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap', justifyContent: 'center' }}>
            {links.map((l) => (
              <a key={l} href="#top" className="thea-hover-fade" style={{
                fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--ash-light)', textDecoration: 'none',
              }}>[ {l} ]</a>
            ))}
          </nav>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--ash-light)',
          }}>52.5200° N · 13.4050° E</span>
        </div>
      </footer>
    );
  }
  window.WS.SiteFooter = SiteFooter;
})();