/* Matter Protocol — Section 02 "What is matter" + Section 03 "How it works" */

function WhatIsMatter() {
  const t = window.matterTokens;
  const quadrants = [
    { cat: 'entry',     name: 'entry',     desc: 'watch the market.',      tagline: 'a primitive that decides when to act.',  hint: 'emaCross · rsiOversold · fundingFlip',  pip: t.pipEntry },
    { cat: 'risk',      name: 'risk',      desc: 'constrain the position.',tagline: 'a primitive that decides how much.',     hint: 'volTarget · drawdownCap · kelly',      pip: t.pipRisk  },
    { cat: 'rebalance', name: 'rebalance', desc: 're-weight on a schedule.',tagline: 'a primitive that decides when to re-balance.', hint: 'timeRebal · thresholdRebal · riskParity', pip: t.pipRebal },
    { cat: 'exit',      name: 'exit',      desc: 'close the position.',    tagline: 'a primitive that decides when to stop.', hint: 'trailStop · takeProfitLadder · timeInTrade', pip: t.pipExit  },
  ];

  return (
    <section id="what-is-matter-section" style={{ padding: '120px 80px', background: t.bg, borderTop: `1px solid ${t.line}` }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '0.85fr 1.15fr',
        gap: 80,
        alignItems: 'start',
        maxWidth: 1440,
        margin: '0 auto',
      }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <SectionHead
            num="02"
            eyebrow="what is matter"
            title="a strategy is four decisions."
            sub="matter ships each one as a typed primitive. write your own, or pull from a library that's been hammered against years of on-chain and CEX data."
          />
          <div style={{
            marginTop: 32,
            fontFamily: "'Geist Mono', monospace",
            fontSize: 13,
            color: t.muted,
            lineHeight: 1.6,
            paddingTop: 24,
            borderTop: `1px solid ${t.line}`,
            maxWidth: 360,
          }}>
            <div style={{ color: t.ink2, marginBottom: 8 }}>// the contract</div>
            <div>type Primitive&lt;In, Out&gt; = (ctx, In) =&gt; Out</div>
            <div style={{ color: t.muted }}>compose([p1, p2, p3]) → Strategy</div>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 14,
        }}>
          {quadrants.map(q => (
            <div key={q.cat} style={{
              background: t.paper,
              border: `1px solid ${t.line}`,
              borderRadius: 14,
              padding: 26,
              minHeight: 220,
              display: 'flex', flexDirection: 'column', gap: 14,
              position: 'relative',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{
                  fontFamily: "'Geist Mono', monospace",
                  fontSize: 11,
                  textTransform: 'uppercase',
                  letterSpacing: '0.1em',
                  color: t.muted,
                  display: 'inline-flex', alignItems: 'center', gap: 7,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: q.pip }} />
                  primitive · {q.name}
                </div>
                <span style={{
                  fontFamily: "'Geist Mono', monospace",
                  fontSize: 11,
                  color: t.soft,
                }}>0{quadrants.indexOf(q) + 1}</span>
              </div>
              <div style={{
                fontSize: 26,
                lineHeight: 1.08,
                letterSpacing: '-0.018em',
                color: t.ink,
                fontWeight: 500,
                textTransform: 'lowercase',
              }}>{q.desc}</div>
              <div style={{
                fontSize: 14.5,
                lineHeight: 1.5,
                color: t.muted,
                marginTop: 'auto',
              }}>{q.tagline}</div>
              <div style={{
                fontFamily: "'Geist Mono', monospace",
                fontSize: 11.5,
                color: t.ink2,
                paddingTop: 12,
                borderTop: `1px dashed ${t.line}`,
              }}>{q.hint}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const t = window.matterTokens;
  const steps = [
    {
      n: '01',
      title: 'pick primitives.',
      desc: 'browse the library, or write your own against the typed interface. types tell you what fits where.',
      diagram: <DiagramPick />,
    },
    {
      n: '02',
      title: 'compose the agent.',
      desc: 'snap primitives in order. matter type-checks the composition, runs the dataflow, and generates the entrypoint.',
      diagram: <DiagramCompose />,
    },
    {
      n: '03',
      title: 'ship it.',
      desc: 'export to a typed agent binary. paper-trade, backtest, or deploy live — all from the same composed object.',
      diagram: <DiagramShip />,
    },
  ];

  return (
    <section id="how-it-works-section" style={{ padding: '120px 80px', background: t.surface, borderTop: `1px solid ${t.line}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <SectionHead
          num="03"
          eyebrow="how it works"
          title="three steps. nothing custodial."
          align="center"
        />
        <div style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr',
          gap: 0,
          background: t.paper,
          border: `1px solid ${t.line}`,
          borderRadius: 16,
          overflow: 'hidden',
        }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '34px 32px 32px',
              borderRight: i < steps.length - 1 ? `1px solid ${t.line}` : 'none',
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative',
            }}>
              <div style={{
                fontFamily: "'Geist Mono', monospace",
                fontSize: 11,
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: t.muted,
              }}>step · {s.n}</div>

              <div style={{
                height: 170,
                background: t.bg,
                border: `1px solid ${t.line}`,
                borderRadius: 10,
                padding: 18,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative',
                overflow: 'hidden',
              }}>{s.diagram}</div>

              <h3 style={{
                margin: 0,
                fontSize: 24,
                lineHeight: 1.1,
                letterSpacing: '-0.018em',
                fontWeight: 500,
                color: t.ink,
                textTransform: 'lowercase',
              }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: t.muted }}>{s.desc}</p>

              {i < steps.length - 1 && (
                <div style={{
                  position: 'absolute',
                  right: -7, top: '50%',
                  width: 14, height: 14, borderRadius: '50%',
                  background: t.paper,
                  border: `1px solid ${t.line}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 9, color: t.muted,
                  fontFamily: "'Geist Mono', monospace",
                  zIndex: 2,
                }}>→</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DiagramPick() {
  const t = window.matterTokens;
  const rows = [
    { name: 'emaCross',    cat: 'entry',     pick: true  },
    { name: 'rsiOversold', cat: 'entry',     pick: false },
    { name: 'volTarget',   cat: 'risk',      pick: true  },
    { name: 'trailStop',   cat: 'exit',      pick: true  },
  ];
  const pip = { entry: t.pipEntry, risk: t.pipRisk, rebalance: t.pipRebal, exit: t.pipExit };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5, width: '100%' }}>
      {rows.map(r => (
        <div key={r.name} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '6px 9px',
          background: t.paper,
          border: `1px solid ${r.pick ? t.limeDeep : t.line}`,
          borderRadius: 6,
          fontFamily: "'Geist Mono', monospace",
          fontSize: 11.5,
          color: t.ink,
          boxShadow: r.pick ? `0 0 0 3px ${t.limeWash}` : 'none',
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 1.5, background: pip[r.cat] }} />
          {r.name}
          <span style={{ marginLeft: 'auto', color: t.muted, fontSize: 10 }}>{r.pick ? '✓' : ''}</span>
        </div>
      ))}
    </div>
  );
}

function DiagramCompose() {
  const t = window.matterTokens;
  const blocks = [
    { name: 'emaCross', cat: 'entry' },
    { name: 'volTarget', cat: 'risk' },
    { name: 'trailStop', cat: 'exit' },
  ];
  const pip = { entry: t.pipEntry, risk: t.pipRisk, rebalance: t.pipRebal, exit: t.pipExit };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, width: '100%', position: 'relative' }}>
      {blocks.map((b, i) => (
        <div key={b.name} style={{
          padding: '7px 10px',
          background: t.paper,
          border: `1px solid ${t.line2}`,
          borderRadius: 6,
          fontFamily: "'Geist Mono', monospace",
          fontSize: 11.5,
          color: t.ink,
          marginTop: i === 0 ? 0 : -1,
          display: 'flex', alignItems: 'center', gap: 8,
          position: 'relative',
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 1.5, background: pip[b.cat] }} />
          {b.name}
          {i < blocks.length - 1 && (
            <span style={{
              position: 'absolute', bottom: -6, left: 16,
              width: 4, height: 4, borderRadius: 1,
              background: t.lime,
              border: `1px solid ${t.limeDeep}`,
              zIndex: 2,
            }} />
          )}
        </div>
      ))}
      <div style={{
        marginTop: 6,
        fontFamily: "'Geist Mono', monospace",
        fontSize: 10,
        color: t.limeDeep,
        textAlign: 'right',
      }}>✓ types match</div>
    </div>
  );
}

function DiagramShip() {
  const t = window.matterTokens;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 7, width: '100%' }}>
      <div style={{
        padding: '10px 12px',
        background: t.ink, color: t.lime,
        borderRadius: 6,
        fontFamily: "'Geist Mono', monospace",
        fontSize: 11.5,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ color: t.soft }}>$</span> matter build --out agent.bin
      </div>
      <div style={{
        padding: '8px 12px',
        background: t.paper,
        border: `1px solid ${t.line}`,
        borderRadius: 6,
        fontFamily: "'Geist Mono', monospace",
        fontSize: 11,
        color: t.muted,
        lineHeight: 1.5,
      }}>
        <div><span style={{ color: t.limeDeep }}>✓</span> typecheck</div>
        <div><span style={{ color: t.limeDeep }}>✓</span> dataflow</div>
        <div><span style={{ color: t.limeDeep }}>✓</span> bundled → agent.bin <span style={{ color: t.soft }}>(284 KB)</span></div>
      </div>
    </div>
  );
}

Object.assign(window, { WhatIsMatter, HowItWorks });