/* Matter Protocol — Section 08 "FAQ" + Section 09 "Footer" */

function FAQ() {
  const t = window.matterTokens;
  const items = [
    {
      q: 'who is matter for?',
      a: 'people who write trading strategies and don\'t want to write everything from scratch. quant devs, on-chain strategists, agent builders. if you read code more often than tweets, you\'re the audience.',
    },
    {
      q: 'does matter custody funds?',
      a: 'no. matter is a sdk and a runtime — it composes strategies and produces a typed agent binary. custody happens wherever you choose to deploy. matter never holds keys or capital.',
    },
    {
      q: 'how is a primitive different from a function?',
      a: 'a primitive is a function with a declared role (entry, risk, rebalance, exit), a typed contract, and an audit trail. it composes with other primitives at the type level. plain functions don\'t.',
    },
    {
      q: 'can i write my own primitives?',
      a: 'yes. matter ships an interface; everything else is a package. you can keep your primitive private, share it inside your org, or publish it. publishing isn\'t open yet — that lands with the marketplace in q1 2027.',
    },
    {
      q: 'what does private alpha mean in practice?',
      a: 'invite-only access to the sdk, a handful of live strategies, and direct line to the team. we\'re scoping by hand to keep feedback loops tight. request access from the top of the page.',
    },
    {
      q: 'fees?',
      a: 'the sdk and runtime are free for the alpha. long-term we expect a small fee on strategies that go to production. we\'ll tell you the number before charging it — never a surprise invoice.',
    },
    {
      q: 'which chains and venues?',
      a: 'evm and major cex perps in the alpha. solana primitives ship in q3 2026 (jupiter, drift, marginfi). venue routing is part of the same primitive interface — no special-casing in your strategy code.',
    },
    {
      q: 'open source?',
      a: 'the primitive interface and the core compose runtime are open. individual primitives are a mix — some open, some source-available. we\'ll be specific per-package.',
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq-section" style={{ padding: '120px 80px', background: t.surface, borderTop: `1px solid ${t.line}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.6fr 1.4fr', gap: 80 }}>
        <div style={{ position: 'sticky', top: 80, alignSelf: 'start' }}>
          <SectionHead
            num="08"
            eyebrow="faq"
            title="real questions, plainly answered."
          />
          <div style={{
            marginTop: 28,
            fontFamily: "'Geist Mono', monospace",
            fontSize: 12.5,
            color: t.muted,
            paddingTop: 20,
            borderTop: `1px solid ${t.line}`,
          }}>
            <div style={{ color: t.ink2, marginBottom: 6 }}>something missing?</div>
            <a href="mailto:hello@matterprotocol.xyz" style={{
              color: t.ink, textDecoration: 'none', borderBottom: `1px dashed ${t.line2}`,
            }}>say hi → <span style={{ color: t.ink }}>hello@matterprotocol.xyz</span></a>
          </div>
        </div>

        <div style={{
          background: t.paper,
          border: `1px solid ${t.line}`,
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: i < items.length - 1 ? `1px solid ${t.line}` : 'none' }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%',
                    padding: '22px 26px',
                    background: 'transparent',
                    border: 'none',
                    cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 24,
                    textAlign: 'left',
                    fontFamily: "'Geist', sans-serif",
                    color: t.ink,
                  }}>
                  <span style={{
                    display: 'flex', alignItems: 'center', gap: 18,
                    fontSize: 17,
                    fontWeight: 500,
                    letterSpacing: '-0.01em',
                  }}>
                    <span style={{
                      fontFamily: "'Geist Mono', monospace",
                      fontSize: 11.5, color: t.soft,
                      letterSpacing: '0.04em',
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    {it.q}
                  </span>
                  <span style={{
                    width: 24, height: 24, borderRadius: '50%',
                    border: `1px solid ${isOpen ? t.ink : t.line2}`,
                    color: isOpen ? t.ink : t.muted,
                    background: isOpen ? t.ink : 'transparent',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, flex: 'none',
                    transition: 'all 0.15s ease',
                  }}>
                    <span style={{
                      color: isOpen ? t.bg : t.muted,
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                      transition: 'transform 0.2s ease',
                      lineHeight: 1, fontWeight: 400,
                    }}>+</span>
                  </span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 26px 24px 64px',
                    fontSize: 15,
                    lineHeight: 1.6,
                    color: t.ink2,
                    maxWidth: 720,
                  }}>{it.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const t = window.matterTokens;
  return (
    <footer style={{
      background: t.ink,
      color: t.bg,
      padding: '90px 80px 40px',
      borderTop: `1px solid ${t.ink}`,
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        {/* Giant wordmark */}
        <div style={{
          fontSize: 'clamp(110px, 14vw, 220px)',
          lineHeight: 0.88,
          letterSpacing: '-0.04em',
          fontWeight: 500,
          textTransform: 'lowercase',
          color: t.bg,
          paddingBottom: 50,
          borderBottom: '1px solid rgba(244,241,234,0.14)',
          display: 'flex',
          alignItems: 'flex-end',
          gap: '0.05em',
        }}>
          <span>matter</span>
          <span style={{ color: 'rgba(244,241,234,0.28)' }}>protocol</span>
          <span style={{ color: t.lime, fontSize: '0.32em', alignSelf: 'flex-end', paddingBottom: '0.18em', marginLeft: '0.1em' }}>.xyz</span>
        </div>

        <div style={{
          padding: '40px 0 24px',
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{
                width: 22, height: 22,
                display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 2.4,
              }}>
                <span style={{ background: t.bg, borderRadius: 1.5 }} />
                <span style={{ background: t.bg, borderRadius: 1.5 }} />
                <span style={{ background: t.lime, borderRadius: 1.5 }} />
                <span style={{ background: t.bg, borderRadius: 1.5 }} />
              </div>
              <span style={{ fontSize: 15, fontWeight: 500, color: t.bg, letterSpacing: '-0.01em' }}>matterprotocol.xyz</span>
            </div>
            <p style={{
              margin: 0,
              fontSize: 15,
              lineHeight: 1.5,
              color: 'rgba(244,241,234,0.55)',
              maxWidth: 320,
              textTransform: 'lowercase',
            }}>matter is what your strategy is made of.</p>
          </div>

          <FooterCol title="product"
            links={[
              { label: 'primitives', href: '#primitives-section' },
              { label: 'composer',   href: '#composer-section' },
              { label: 'sdk',        notice: 'sdk' },
              { label: 'changelog',  notice: 'changelog' },
            ]}
          />
          <FooterCol title="learn"
            links={[
              { label: 'docs',       href: 'docs.html' },
              { label: 'tutorials',  notice: 'tutorials' },
              { label: 'examples',   notice: 'examples' },
              { label: 'glossary',   href: 'docs.html#glossary' },
            ]}
          />
          <FooterCol title="community"
            links={[
              { label: 'github',     notice: 'github' },
              { label: 'telegram',   notice: 'telegram' },
              { label: 'twitter',    notice: 'twitter' },
              { label: 'hello@matterprotocol.xyz', href: 'mailto:hello@matterprotocol.xyz' },
            ]}
          />
        </div>

        <div style={{
          paddingTop: 24,
          borderTop: '1px solid rgba(244,241,234,0.14)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          fontFamily: "'Geist Mono', monospace",
          fontSize: 11.5,
          color: 'rgba(244,241,234,0.4)',
          textTransform: 'uppercase',
          letterSpacing: '0.08em',
        }}>
          <span>© matter protocol · 2026</span>
          <span style={{ display: 'flex', gap: 22 }}>
            <span>v0.4 · private alpha</span>
            <span>built for builders</span>
            <span>matterprotocol.xyz</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  const t = window.matterTokens;
  return (
    <div>
      <div style={{
        fontFamily: "'Geist Mono', monospace",
        fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em',
        color: 'rgba(244,241,234,0.42)',
        marginBottom: 14,
      }}>{title}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
        {links.map(l => {
          const isNotice = !!l.notice;
          const handleClick = isNotice
            ? (e) => { e.preventDefault(); window.matterUI?.openNotice?.(l.notice); }
            : (e) => {
                if (l.href && l.href.startsWith('#')) {
                  e.preventDefault();
                  document.querySelector(l.href)?.scrollIntoView({ behavior: 'smooth' });
                }
              };
          return (
            <li key={l.label}>
              <a href={l.href || '#'} onClick={handleClick} style={{
                color: t.bg,
                textDecoration: 'none',
                fontSize: 14.5,
                letterSpacing: '-0.005em',
                transition: 'color 0.15s ease',
                cursor: 'pointer',
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = t.lime}
              onMouseLeave={(e) => e.currentTarget.style.color = t.bg}
              >{l.label}</a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Object.assign(window, { FAQ, Footer });