// ORACLE · the sealed envelope, answered by a small familiar spirit
function Oracle() {
  const [q, setQ] = React.useState('');
  const [a, setA] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [stamped, setStamped] = React.useState(false);

  const prompts = [
    'what are you best at?',
    'why aurologic?',
    'tell me about the thesis',
    'what do you do for fun?',
    'would you move for the right role?',
    'describe your homelab',
  ];

  const ask = async (question) => {
    const text = (question || q).trim();
    if (!text) return;
    setQ(text);
    setLoading(true); setA(''); setStamped(false);
    try {
      const res = await window.claude.complete({
        messages: [
          {
            role: 'user',
            content:
`You are answering on behalf of Youcef Badaoui (also "Joseph"), a software engineer born in Aïn Bessem (Province of Bouira, Algeria) in 2002.
Born 25 June 2002. Now stationed in Poznań, Poland.
Primary post: Software Engineer at aurologic GmbH in Frankfurt, Germany (since April 2024, working remotely from Poznań) — Vue.js frontends, Golang services, admin dashboards, internal tooling, Jenkins/Docker/Elasticsearch pipelines.
Also: Lead Developer & Sysadmin at CyberFilters (since May 2023, on-premise DDoS mitigation, VPS clusters). Co-founded Virfect Solutions (2020–2023, merged into CyberFilters). Assists Triospare e-commerce.
B.Sc. in Computer Science, Akli Mohand Oulhadj University of Bouira, Algeria (2021–2024). B.Sc. graduation project: Pharmo, a pharmacy-locator app in React Native/NestJS for Algeria.
Currently M.Sc. in ICT · Electronics & Telecommunications at Poznań University of Technology (2025–2026, graduating ~July 2026).
Thesis: "Impact of Machine-Learning Traffic Classification Errors on Multi-Class Capacity Dimensioning in Multirate Loss Systems" — Full Availability Group models, Kaufman–Roberts recursion, OTT/IPTV scenarios, sensitivity analysis on classifier accuracy.
Languages: Arabic native, English fluent, French passable, German in progress.
Likes: anime (watching Classroom of the Elite), empires & history (reading on the Rashidun), fantasy, quiet cosmos, Starfield, LeetCode for sport.
Personality: understated, craft-minded, thoughtful. Answers as a field-journal voice — measured, slightly old-fashioned, honest.

Answer the visitor's question briefly (under 90 words), in first person, in that same field-journal voice. No em dashes. No bullet points. Plain prose.

Question: ${text}`
          }
        ]
      });
      setA(res);
      setStamped(true);
    } catch (err) {
      setA('The oracle sleeps. Try again in a moment, or dispatch a letter by post instead.');
    }
    setLoading(false);
  };

  return (
    <section id="oracle" className="page" style={{ paddingTop: 60, paddingBottom: 60, position:'relative' }}>
      <hr className="rule-thick" />
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding: '18px 0 6px'}}>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85 }}>
          Oracle<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
        <div className="kicker">CHAPTER VII · THE SEALED ENVELOPE</div>
      </div>
      <div>
        <span className="hand" style={{ fontSize: 26, color: 'var(--stamp-dark)' }}>ask what you would ask in person</span>
      </div>
      <hr className="rule" style={{marginTop: 8}}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 36, marginTop: 30 }}>
        <div>
          <p style={{ textAlign:'justify', hyphens:'auto' }}>
            A small familiar spirit lives in the margin of this page. It has been briefed on the subject of this book and will answer
            plainly, in the same voice the volume is set in. Pose your question, or choose a sealed envelope from those offered.
          </p>

          <div style={{ marginTop: 18, display:'flex', gap: 8, flexWrap:'wrap' }}>
            {prompts.map(p => (
              <button key={p} className="btn" onClick={() => ask(p)} style={{ fontSize: 10, padding: '6px 10px', textTransform:'none', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '.05em' }}>
                ✉ {p}
              </button>
            ))}
          </div>

          <form onSubmit={(e) => { e.preventDefault(); ask(); }} style={{ marginTop: 20, border:'1px solid var(--ink)', padding: 16, background:'var(--paper-shade)' }}>
            <label className="mono" style={{ fontSize: 11, letterSpacing:'.2em' }}>YOUR QUESTION, SEALED</label>
            <textarea value={q} onChange={e => setQ(e.target.value)} rows={3}
              placeholder="type freely, then press SEAL &amp; SEND"
              style={{ width:'100%', background:'transparent', border: 0, borderBottom:'1px solid var(--ink)', padding:'8px 0', fontFamily:"'JetBrains Mono', monospace", fontSize: 14, outline: 0, resize:'none', marginTop: 6 }} />
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 12 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing:'.2em', color:'var(--ink-fade)' }}>
                {loading ? '… the oracle considers' : 'the oracle keeps brief counsel'}
              </span>
              <button type="submit" className="btn red" disabled={loading}>
                {loading ? '…' : '✉ SEAL &amp; SEND'}
              </button>
            </div>
          </form>
        </div>

        {/* the reply card */}
        <div className="card oracle-reply" style={{ padding: 28, background:'var(--paper)', position:'relative', minHeight: 360 }}>
          <div className="kicker" style={{ marginBottom: 10 }}>REPLY · PENNED BY THE ORACLE</div>
          <hr className="rule-dash" />
          {!a && !loading && (
            <div style={{ marginTop: 30, color:'var(--ink-fade)', fontStyle:'italic', textAlign:'center' }}>
              <div className="didone" style={{ fontSize: 96, color: 'var(--stamp)' }}>✉</div>
              <p>No letter has been opened yet.<br/>Choose an envelope, or write your own.</p>
            </div>
          )}
          {loading && (
            <div className="caret mono" style={{ marginTop: 40, fontSize: 14, letterSpacing:'.15em' }}>
              dipping the pen
            </div>
          )}
          {a && !loading && (
            <div style={{ marginTop: 14 }}>
              <p className="serif" style={{ fontSize: 17, lineHeight: 1.55 }}>
                {a}
              </p>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop: 22 }}>
                <span className="hand" style={{ fontSize: 26, color: 'var(--stamp-dark)' }}>
                  yours, J.
                </span>
                {stamped && (
                  <div className="stamp" style={{ transform: 'rotate(-8deg)' }}>
                    ✓ SIGNED BY HAND
                  </div>
                )}
              </div>
            </div>
          )}
          {/* corner fold */}
          <div style={{ position: 'absolute', bottom: 0, right: 0, width: 60, height: 60,
            background: 'linear-gradient(-135deg, var(--paper-shade) 50%, var(--paper-deep) 50%)',
            borderLeft: '1px solid var(--ink)', borderTop: '1px solid var(--ink)' }} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Oracle });