'use client';

import { useTranslation } from 'react-i18next';
import { Card } from '@/components/ui/card';
import {useTheme} from "next-themes";
import {useState} from "react";

export default function AboutPage() {
  const { t } = useTranslation();

  const { theme, setTheme } = useTheme();
  const logoSrc = theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg';

  return (
    <div className="w-full max-w-5xl mx-auto space-y-8">
      {/* Header */}
      <div className="text-center space-y-4">
          <img
              src={logoSrc}
              alt="Liquidity Party Logo"
              className="mx-auto h-24 w-auto"
          />
        <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
          Multi-asset AMM based on Party Game Theory
        </p>
      </div>

      {/* Introduction */}
      <Card className="p-8 space-y-4">
        <h2 className="text-2xl font-semibold">Introduction</h2>
        <p className="text-muted-foreground leading-relaxed">
          Liquidity Party is a new game-theoretic multi-asset AMM based on the groundbreaking paper:{' '}
          <a
            href="https://mason.gmu.edu/~rhanson/mktscore.pdf"
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary hover:underline italic"
          >
            Logarithmic Market Scoring Rules for Modular Combinatorial Information Aggregation (R. Hanson, 2002)
          </a>.
        </p>
        <p className="text-muted-foreground leading-relaxed">
            Our formulation and implementation is described in the{' '}
            <a href="https://github.com/Liquidity-Party/lmsr-amm/blob/main/doc/whitepaper.md"
                target='liqp_whitepaper'
                rel="noopener noreferrer"
                className="text-primary hover:underline italic"
            >
                Liquidity Party whitepaper.
            </a>
        </p>
        <p className="text-muted-foreground leading-relaxed">
          A Logarithmic Market Scoring Rule (LMSR) is a pricing formula for AMMs that know only their current asset
          inventories and no other information, naturally supporting multi-asset pools.
        </p>
      </Card>

      {/* Key Advantages */}
      <Card className="p-8 space-y-4">
        <h2 className="text-2xl font-semibold">Advantages Over Constant Product Markets</h2>
        <div className="grid md:grid-cols-2 gap-4">
          <div className="p-4 bg-muted rounded-lg">
            <h3 className="font-semibold text-primary mb-2">Less Slippage</h3>
            <p className="text-sm text-muted-foreground">
              Reduced slippage for small and medium trade sizes
            </p>
          </div>
          <div className="p-4 bg-muted rounded-lg">
            <h3 className="font-semibold text-primary mb-2">Multi-Asset Pools</h3>
            <p className="text-sm text-muted-foreground">
              Trade long-tail pairs in a single hop with multi-asset support
            </p>
          </div>
          <div className="p-4 bg-muted rounded-lg">
            <h3 className="font-semibold text-primary mb-2">Lower Fees</h3>
            <p className="text-sm text-muted-foreground">
              Smaller spread means more cost-effective trading
            </p>
          </div>
          <div className="p-4 bg-muted rounded-lg">
            <h3 className="font-semibold text-primary mb-2">Deeper Liquidity</h3>
            <p className="text-sm text-muted-foreground">
              Enhanced liquidity depth for better trading execution
            </p>
          </div>
        </div>
        <p className="text-muted-foreground leading-relaxed mt-4">
          According to game theory, the initial price slope of a Constant Product AMM is too steep, overcharging takers
          with too much slippage at small and medium trade sizes. LMSR pools offer less slippage and cheaper
          liquidity for the small and medium trade sizes used by real traders.
        </p>
          <div className="mt-6">
              <img
                  src="/slippage-comparison.png"
                  alt="Slippage Comparison Chart"
                  className="w-full rounded-lg"
              />
          </div>
      </Card>

      {/* Multi-Asset */}
      <Card className="p-8 space-y-6">
        <div className="space-y-4">
          <h2 className="text-2xl font-semibold">Multi-Asset Capabilities</h2>
          <p className="text-muted-foreground leading-relaxed">
            Naturally multi-asset, Liquidity Party altcoin pools provide direct, one-hop swaps on otherwise
            illiquid multi-hop pairs. Pools will quote any pair combination available in the pool:
          </p>
        </div>

        {/* Performance Table */}
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr className="border-b">
                <th className="text-left p-3 font-semibold">Assets</th>
                <th className="text-left p-3 font-semibold">Pairs</th>
                <th className="text-left p-3 font-semibold">Swap Gas</th>
                <th className="text-left p-3 font-semibold">Mint Gas</th>
              </tr>
            </thead>
            <tbody className="text-muted-foreground">
              <tr className="border-b hover:bg-muted/50 transition-colors">
                <td className="p-3">2</td>
                <td className="p-3">1</td>
                <td className="p-3">131,000</td>
                <td className="p-3">143,000</td>
              </tr>
              <tr className="border-b hover:bg-muted/50 transition-colors">
                <td className="p-3">2*</td>
                <td className="p-3">1</td>
                <td className="p-3">118,000</td>
                <td className="p-3">143,000</td>
              </tr>
              <tr className="border-b hover:bg-muted/50 transition-colors">
                <td className="p-3">10</td>
                <td className="p-3">45</td>
                <td className="p-3">142,000</td>
                <td className="p-3">412,000</td>
              </tr>
              <tr className="border-b hover:bg-muted/50 transition-colors">
                <td className="p-3">20</td>
                <td className="p-3">190</td>
                <td className="p-3">157,000</td>
                <td className="p-3">749,000</td>
              </tr>
              <tr className="border-b hover:bg-muted/50 transition-colors">
                <td className="p-3">50</td>
                <td className="p-3">1,225</td>
                <td className="p-3">199,000</td>
                <td className="p-3">1,760,000</td>
              </tr>
              <tr className="hover:bg-muted/50 transition-colors">
                <td className="p-3">100</td>
                <td className="p-3">4,950</td>
                <td className="p-3">269,000</td>
                <td className="p-3">2,684,000</td>
              </tr>
            </tbody>
          </table>
          <p className="text-xs text-muted-foreground mt-2">* Stablecoin pair optimization</p>
        </div>

        <p className="text-muted-foreground leading-relaxed">
          Liquidity Party aggregates scarce, low market cap assets into a single pool, providing one-hop liquidity
          for exotic pairs without fragmenting LP assets. Constant Product pools would need 190x the LP assets to provide the
          same pairwise liquidity as a single 20-asset Liquidity Party pool, due to asset fragmentation.
        </p>
      </Card>

      {/* Lower Fees & Minimized IL */}
      <Card className="p-8 space-y-6">
        <div className="space-y-4">
          <h2 className="text-2xl font-semibold">Lower Fees</h2>
          <p className="text-muted-foreground leading-relaxed">
            Since market makers offer the option to take either side of the market, they must receive a subsidy
            or charge a fee (spread) to compensate for adverse selection (impermanent loss). By protecting LPs
            against common value-extraction scenarios, LMSR pools have a reduced risk premium resulting in lower
            fees for takers.
          </p>
        </div>

        <div className="space-y-4 border-t pt-6">
          <h2 className="text-2xl font-semibold">Minimized Impermanent Loss</h2>
          <h3 className="text-xl font-semibold text-primary">Adverse Selection Protection</h3>
          <p className="text-muted-foreground leading-relaxed">
            All AMM's suffer from Impermanent Loss (IL), also known as adverse selection or toxic order flow. Liquidity
              Party uses game theory to minimize IL for LPs, by charging lower fees to small legitimate traders, and
              higher fees to large adversarial traders during market dislocation. This means a higher effective rate
              for LP's and cheaper swaps for legitimate small traders.
          </p>
          <p className="text-muted-foreground leading-relaxed">
              Liquidity Party swaps guarantee a bounded maximum loss of <code>κ*S*ln(N)</code> where <code>κ</code> is
              the pool's liquidity parameter, <code>S</code> is the total size of the pool, and <code>N</code> is the
              number of assets in the pool.
          </p>
          <h3 className="text-xl font-semibold text-primary">No Intra-Pool Arbitrage</h3>
          <p className="text-muted-foreground leading-relaxed">
              Other multi-asset systems can provide inconsistent price quotes, allowing arbitragers to
              extract value from LP's by <i>trading assets inside the same pool against each other.</i> With Liquidity
              Party, no intra-pool arbitrage is possible, because the mathematics guarantee fully consistent price
              quotes on all pairs in the pool.
          </p>
        </div>
      </Card>

      {/* Open Source Development */}
      <Card className="p-8 space-y-4">
        <h2 className="text-2xl font-semibold">Transparent Open Source</h2>
        <p className="text-muted-foreground leading-relaxed">
          The Liquidity Party contract source code fully transparent to the public and verified by Etherscan.
        </p>
        <p className="text-muted-foreground leading-relaxed">
          View our contracts on{' '}
          <a
            href="https://github.com/Liquidity-Party/lmsr-amm"
            target="liqp_github"
            rel="noopener noreferrer"
            className="text-primary hover:underline"
          >
              GitHub
          </a>
        </p>
        <p className="text-muted-foreground leading-relaxed">
          Verify our contracts on{' '}
          <a
            href="https://etherscan.io/address/0x42977f565971F6D288a05ddEbC87A17276F71A29#code"
            target="liqp_etherscan"
            rel="noopener noreferrer"
            className="text-primary hover:underline"
          >
              Etherscan (Sepolia)
          </a>
        </p>
      </Card>

      {/* Footer */}
      <div className="text-center py-8 border-t">
        <p className="text-sm text-muted-foreground">
          Liquidity Party is offered by Dexorder Trading Services, Ltd. (British Virgin Islands)
        </p>
      </div>
    </div>
  );
}