const { Divider, Quote } = window.VoxAwenDesignSystem_e48818;

function VoxLetters({ onNav }) {
  return (
    <section id="letters" style={{ scrollMarginTop: 76 }}>
      <div style={{ padding: "96px 48px 112px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>

          {/* Running head */}
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24,
            paddingBottom: 16, marginBottom: 40, borderBottom: "1px solid var(--border-soft)",
            font: "500 11px/1.2 var(--font-body)", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-faint)",
          }}>
            <span>Vox Letters · No. 01</span>
            <span>Voicing the threshold</span>
          </div>

          {/* Header */}
          <header style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start", marginBottom: 34 }}>
            <Eyebrow>Letter no. 01 · August 2026</Eyebrow>
            <h1 style={{ margin: 0, font: "500 46px/1.08 var(--font-display)", letterSpacing: "0.01em", color: "var(--text-display)" }}>
              Vox — standing in authority
            </h1>
            <p style={{ margin: 0, font: "italic 400 22px/1.5 var(--font-display)", color: "var(--ink-3)", maxWidth: "36em" }}>
              Written from the floor of my kitchen, at the hour when nothing is beautiful yet.
            </p>
          </header>

          {/* Letter body */}
          <div style={{ display: "flex", flexDirection: "column", gap: 34, color: "var(--text-body)" }}>

            <div style={{ display: "flex", flexDirection: "column", gap: 20, font: "400 16px/1.72 var(--font-body)", color: "var(--text-body)" }}>
              <p style={{ margin: 0 }}>
                For three weeks after my grandmother died I sang beautifully. I turned up, I held the room, I made the sound that lets other people cry. And every night I drove home and said nothing to anyone, because I did not have a version of my own grief that was fit to be seen.
              </p>
              <p style={{ margin: 0 }}>
                That is the thing about being the one who holds. You get very good at the shape of it. You learn where to put your hands. You learn the breath that steadies a room. And the same skill that makes you useful becomes the place you hide.
              </p>
            </div>

            <h2 style={{ margin: 0, font: "500 28px/1.3 var(--font-display)", letterSpacing: "0.01em", color: "var(--text-display)" }}>What broke it</h2>

            <div style={{ display: "flex", flexDirection: "column", gap: 20, font: "400 16px/1.72 var(--font-body)", color: "var(--text-body)" }}>
              <p style={{ margin: 0 }}>
                Nothing graceful. I dropped a mug. I sat on the kitchen floor at four in the morning with the pieces beside me and made a sound I would not want recorded — not singing, not language, closer to an animal than a woman. It lasted maybe ninety seconds.
              </p>
              <p style={{ margin: 0 }}>Then it was quiet in a way it had not been quiet in weeks.</p>
            </div>

            <Quote size="md" style={{ maxWidth: "100%", margin: "6px 0" }}>
              I don't think the voice heals us because it is beautiful. I think it heals us because it is true, and truth is often ugly on the way out.
            </Quote>

            <div style={{ display: "flex", flexDirection: "column", gap: 20, font: "400 16px/1.72 var(--font-body)", color: "var(--text-body)" }}>
              <p style={{ margin: 0 }}>
                I have said, for years, that I amplify your inner wisdom. What I have not said as plainly: I need this too. I'm not a trained medical professional. I am a human, like you, and the practices I offer are the ones I use on my own bad nights — the wrapping, the drum, the low hum you can feel in your sternum, the permission to be unlovely out loud.
              </p>
            </div>

            <h2 style={{ margin: 0, font: "500 28px/1.3 var(--font-display)", letterSpacing: "0.01em", color: "var(--text-display)" }}>Why I am writing these</h2>

            <div style={{ display: "flex", flexDirection: "column", gap: 20, font: "400 16px/1.72 var(--font-body)", color: "var(--text-body)" }}>
              <p style={{ margin: 0 }}>
                Because the polished version of this work is not the work. The work is the ninety seconds on the floor. It is the pause before someone speaks the thing they have never said. It is a threshold — and thresholds are not comfortable places; they are doorways, and doorways are narrow.
              </p>
              <p style={{ margin: 0 }}>
                These letters are where I will say the unpolished part. What I am learning at the bedsides. What I get wrong in a room. What the body does when the mouth finally opens. Some will arrive with a recording, because there are things I can only say in sound.
              </p>
              <p style={{ margin: 0 }}>I am not going to make them tidy.</p>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 14, padding: "28px 0 4px", borderTop: "1px solid var(--border-soft)" }}>
              <Eyebrow>A question to sit with</Eyebrow>
              <p style={{ margin: 0, font: "400 24px/1.45 var(--font-display)", color: "var(--text-display)", maxWidth: "32em" }}>
                Where in your life are you making the beautiful sound instead of the true one?
              </p>
              <p style={{ margin: 0, font: "400 16px/1.72 var(--font-body)", color: "var(--text-muted)", maxWidth: "34em" }}>
                You don't have to answer me. Just notice, this week, the moment you reach for the polished version — and let the breath before it be longer than usual.
              </p>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingTop: 12 }}>
              <Divider />
              <div style={{ font: "italic 500 34px/1.1 var(--font-display)", color: "var(--text-display)" }}>Vox</div>
              <div style={{ font: "400 14px/1.6 var(--font-body)", color: "var(--text-muted)" }}>
                Written at home, in the dark, August 2026. Reply to this letter — I read every one.
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VoxLetters });
