const { useState } = React;

function FAQ() {
  const [open, setOpen] = useState(0);

  const faqs = [
    {
      q: 'What is Olympus Asteroid ($OAM)?',
      a: 'OAM is an Ethereum ERC-20 named Olimpus Asteroid. It uses a Uniswap V2 style router for the WETH pair. Buy and sell taxes apply only when trading against the pair (not on ordinary transfers). The owner can update tax rates within a hard cap defined in the contract.',
    },
    {
      q: 'How does staking work?',
      a: 'A separate contract, OamStakingLocked, holds OAM while you stake. You choose a tier (lock duration and APR). The contract reserves your reward from rewardReserve at stake time. If the pool is too small, the stake reverts. After the lock, you call exit to receive principal plus reward. There is no early unlock.',
    },
    {
      q: 'Where do staking rewards come from?',
      a: 'Rewards are paid in OAM from the staking contract balance. The rewardReserve tracks tokens earmarked for open positions. Anyone can call fundRewards to deposit OAM into the pool (after approving the staking contract). Plan funding before opening large stakes.',
    },
    {
      q: 'What are the risks?',
      a: 'Smart contracts can have bugs. Tax and router behaviour depend on DEX configuration. APR tiers and reward accounting are on-chain — read the Solidity. Market price is not guaranteed. Only use funds you can afford to lose.',
    },
    {
      q: 'How do I use this website?',
      a: 'Contract addresses are baked into frontend/config.js. Connect MetaMask (or another injected wallet), switch to Ethereum mainnet, approve OAM for the staking contract, then stake or fund rewards. Always double-check the addresses on Etherscan before signing.',
    },
    {
      q: 'Is there a DAO or rebase?',
      a: 'This deployment is token plus locked staking only. There is no rebasing sToken in these contracts. Governance or treasury products would be separate workstreams.',
    },
  ];

  return (
    <section id="docs" style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '0.4fr 0.6fr', gap: 80 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 12, color: 'var(--gold)', letterSpacing: '0.15em', marginBottom: 16 }}>
              ∇ TRANSMISSIONS · 05
            </div>
            <h2 className="font-display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 500, lineHeight: 1, letterSpacing: '-0.02em', marginBottom: 24 }}>
              Signals <span style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 400 }}>from</span> mission control.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-1)', lineHeight: 1.55, marginBottom: 32 }}>
              Straight answers about $OAM and the staking vault — in plain English.
            </p>
            <div style={{
              padding: 24,
              background: 'rgba(18, 19, 31, 0.6)',
              border: '1px solid var(--line)',
              borderRadius: 16,
            }}>
              <div style={{ fontSize: 13, color: 'var(--ink-1)', marginBottom: 14, lineHeight: 1.5 }}>
                Question not listed? Reach the team on your usual channels after launch.
              </div>
              <a
                href={typeof window !== 'undefined' && window.OAM_SOCIAL && window.OAM_SOCIAL.telegram ? window.OAM_SOCIAL.telegram : '#'}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: 'inline-block',
                  background: 'transparent',
                  color: 'var(--gold)',
                  border: '1px solid var(--line-strong)',
                  padding: '12px 20px',
                  borderRadius: 10,
                  fontSize: 13,
                  fontWeight: 500,
                  cursor: 'pointer',
                  fontFamily: 'JetBrains Mono, monospace',
                  letterSpacing: '0.06em',
                  textDecoration: 'none',
                }}
              >
                JOIN TELEGRAM →
              </a>
            </div>
          </div>

          <div style={{
            background: 'rgba(10, 11, 20, 0.6)',
            border: '1px solid var(--line)',
            borderRadius: 20,
            overflow: 'hidden',
            backdropFilter: 'blur(20px)',
          }}>
            {faqs.map((f, i) => (
              <div key={i} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid var(--line)' : 'none',
              }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%',
                    padding: '24px 28px',
                    background: 'transparent',
                    border: 'none',
                    color: 'var(--ink-0)',
                    textAlign: 'left',
                    cursor: 'pointer',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    gap: 20,
                  }}>
                  <span className="font-display" style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>
                    {f.q}
                  </span>
                  <span style={{
                    color: 'var(--gold)',
                    fontSize: 20,
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 0.3s',
                    flexShrink: 0,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 400 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.4s ease',
                }}>
                  <div style={{
                    padding: '0 28px 24px',
                    fontSize: 14.5,
                    color: 'var(--ink-1)',
                    lineHeight: 1.6,
                    maxWidth: 620,
                  }}>
                    {f.a}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });