// Technology stack + Contact terminal
const TECH = [
  { name: "GPU-Accelerated Compute", meta: "NVIDIA · CUDA", status: "ONLINE" },
  { name: "Multi-Model Inference Pipeline", meta: "ENSEMBLE · 6 MODELS", status: "ONLINE" },
  { name: "Autonomous Agent Orchestration", meta: "15+ AGENTS", status: "ONLINE" },
  { name: "Decentralised CLOB Integration", meta: "ON-CHAIN", status: "ONLINE" },
  { name: "Regulated Exchange Connectivity", meta: "FIX · REST · WS", status: "ONLINE" },
  { name: "Autonomous Agents", meta: "24/7 · CONTINUOUS", status: "ONLINE" },
];

function Technology() {
  return (
    <section id="technology" className="tech">
      <div className="section-head">
        <div>
          <div className="label" style={{ marginBottom: 24 }}>Technology</div>
          <h2>Built on <span className="italic">frontier</span> infrastructure, running continuously.</h2>
        </div>
        <div className="section-head-meta">
          SIX PRIMITIVES · ALWAYS ON<br/>
          STATUS SAMPLED EVERY 250MS
        </div>
      </div>
      <div className="tech-list">
        {TECH.map((t, i) => (
          <div key={i} className="tech-row">
            <div className="tech-idx">/ {String(i + 1).padStart(2, '0')}</div>
            <div className="tech-name">{t.name}</div>
            <div className="tech-meta">{t.meta}</div>
            <div className="tech-status"><span className="dot" />{t.status}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ContactTerminal() {
  const [submitted] = React.useState(() => {
    try {
      return new URLSearchParams(window.location.search).get('submitted') === '1';
    } catch (err) {
      return false;
    }
  });
  const [focus, setFocus] = React.useState(null);
  return (
    <section id="contact" className="contact">
      <div className="section-head" style={{ borderTop: '1px solid var(--line)' }}>
        <div>
          <div className="label" style={{ marginBottom: 24 }}>Contact</div>
          <h2>We work with a small <span className="italic">number</span> of partners.</h2>
        </div>
        <div className="section-head-meta">
          INSTITUTIONAL INQUIRIES ONLY<br/>
          RESPONSES WITHIN 72 HOURS
        </div>
      </div>
      <div className="contact-grid">
        <div className="contact-left">
          <h3>Direct <span className="italic">line.</span></h3>
          <p>Institutional inquiries only. We will respond when a fit is clear. No mailing list, no decks — just conversation.</p>
          <a className="contact-email" href="mailto:admin@obsidianventures.xyz">admin@obsidianventures.xyz</a>
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr', gap: 32, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>
            <div>
              <div style={{ color: 'var(--ink-dim)', marginBottom: 6 }}>LOCATION</div>
              <div>Remote · Distributed</div>
            </div>
          </div>
        </div>
        <div className="terminal">
          <div className="terminal-header">
            <div className="terminal-dots"><span /><span /><span /></div>
            <div>OBSIDIAN :: SECURE_CHANNEL</div>
            <div style={{ color: 'var(--accent)' }}>● ENCRYPTED</div>
          </div>
          <div className="terminal-body">
            {submitted ? (
              <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)', lineHeight: 1.8 }}>
                <div style={{ color: 'var(--accent)' }}>$ submit --inquiry</div>
                <div className="dim">&gt; encrypting payload...</div>
                <div className="dim">&gt; routing via secure channel...</div>
                <div className="dim">&gt; delivered.</div>
                <div style={{ color: 'var(--accent)', marginTop: 16 }}>✓ Inquiry received. Expect a response within 72 hours.<span className="caret" style={{ display: 'inline-block', width: 8, height: 14, background: 'var(--accent)', verticalAlign: 'middle', marginLeft: 4 }} /></div>
              </div>
            ) : (
              <form action="https://formsubmit.co/b27afc8244963fcf4f5de165314f84fc" method="POST">
                <input type="hidden" name="_subject" value="New Obsidian Ventures inquiry" />
                <input type="hidden" name="_captcha" value="false" />
                <input type="hidden" name="_template" value="table" />
                <input type="hidden" name="_next" value="https://obsidianventures.xyz/?submitted=1#contact" />
                <div className="field">
                  <label><span className="prompt">$</span>NAME {focus === 'name' && <span className="caret" style={{ height: 8, width: 5 }} />}</label>
                  <input type="text" name="name" required onFocus={() => setFocus('name')} onBlur={() => setFocus(null)} placeholder="Your name" />
                </div>
                <div className="field">
                  <label><span className="prompt">$</span>ORGANISATION {focus === 'org' && <span className="caret" style={{ height: 8, width: 5 }} />}</label>
                  <input type="text" name="organisation" required onFocus={() => setFocus('org')} onBlur={() => setFocus(null)} placeholder="Institution name" />
                </div>
                <div className="field">
                  <label><span className="prompt">$</span>EMAIL {focus === 'email' && <span className="caret" style={{ height: 8, width: 5 }} />}</label>
                  <input type="email" name="email" required onFocus={() => setFocus('email')} onBlur={() => setFocus(null)} placeholder="you@firm.com" />
                </div>
                <div className="field">
                  <label><span className="prompt">$</span>INQUIRY {focus === 'inq' && <span className="caret" style={{ height: 8, width: 5 }} />}</label>
                  <textarea rows="3" name="message" required onFocus={() => setFocus('inq')} onBlur={() => setFocus(null)} placeholder="What brings you here?" />
                </div>
                <button type="submit" className="submit-btn">— Submit —</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Technology, ContactTerminal });