likwid/frontend/src/pages/features.astro

---
import PublicLayout from '../layouts/PublicLayout.astro';
---

<PublicLayout title="Features" description="Explore Likwid's governance capabilities: advanced voting methods, liquid delegation, structured deliberation, and transparent moderation.">
  <article class="features-page">
    <header class="page-header">
      <h1>Features</h1>
      <p class="lead">
        A comprehensive governance toolkit designed for complex, distributed organizations.
      </p>
    </header>

    <!-- Voting Methods Section -->
    <section class="feature-section">
      <div class="section-header">
        <h2>Advanced Voting Methods</h2>
        <p>
          Different decisions require different methods. Likwid supports multiple voting systems, 
          each implemented as a plugin that communities can enable based on their needs.
        </p>
      </div>

      <div class="voting-methods">
        <div class="method-card">
          <div class="method-header">
            <h3>Schulze Method</h3>
            <span class="method-tag">Condorcet-consistent</span>
          </div>
          <p>
            Finds the option that would beat every other option in a head-to-head comparison. 
            Ideal for elections and decisions where finding a true consensus winner matters.
          </p>
          <div class="method-details">
            <strong>Best for:</strong> Elections, selecting from many candidates, finding compromise options
          </div>
        </div>

        <div class="method-card">
          <div class="method-header">
            <h3>STAR Voting</h3>
            <span class="method-tag">Score + Runoff</span>
          </div>
          <p>
            Score Then Automatic Runoff. Voters rate each option 0-5, then the top two 
            advance to an instant runoff. Balances preference intensity with broad support.
          </p>
          <div class="method-details">
            <strong>Best for:</strong> Decisions where both passion and consensus matter
          </div>
        </div>

        <div class="method-card">
          <div class="method-header">
            <h3>Quadratic Voting</h3>
            <span class="method-tag">Intensity-weighted</span>
          </div>
          <p>
            Voters spend "voice credits" on options they care about. The cost increases 
            quadratically, so expressing strong preference costs more. Reveals preference intensity.
          </p>
          <div class="method-details">
            <strong>Best for:</strong> Budget allocation, prioritization, decisions where some care more than others
          </div>
        </div>

        <div class="method-card">
          <div class="method-header">
            <h3>Ranked Choice</h3>
            <span class="method-tag">Instant Runoff</span>
          </div>
          <p>
            Voters rank options in order of preference. If no option has a majority, 
            the lowest-ranked is eliminated and votes transfer. Continues until a winner emerges.
          </p>
          <div class="method-details">
            <strong>Best for:</strong> Single-winner elections with multiple candidates
          </div>
        </div>

        <div class="method-card">
          <div class="method-header">
            <h3>Approval Voting</h3>
            <span class="method-tag">Simple multi-select</span>
          </div>
          <p>
            Voters approve or disapprove each option. The option with the most approvals wins. 
            Simple, resistant to strategic voting, good for quick decisions.
          </p>
          <div class="method-details">
            <strong>Best for:</strong> Simple decisions, scheduling, selecting multiple winners
          </div>
        </div>
      </div>
    </section>

    <!-- Delegation Section -->
    <section class="feature-section alt-bg">
      <div class="section-header">
        <h2>Liquid Delegation</h2>
        <p>
          Not everyone can participate in every decision. Liquid delegation lets members 
          delegate their voice while retaining control.
        </p>
      </div>

      <div class="feature-grid">
        <div class="feature-item">
          <h4>Scoped Delegation</h4>
          <p>
            Delegate your voice globally or within a specific community to people you trust.
            You can always vote directly and override your delegation.
          </p>
        </div>
        <div class="feature-item">
          <h4>Transitive Chains</h4>
          <p>
            Your delegate can further delegate to their trusted experts, creating chains 
            of trust. Cycle detection ensures no infinite loops.
          </p>
        </div>
        <div class="feature-item">
          <h4>Always Revocable</h4>
          <p>
            Override any delegation by voting directly. Revoke delegation at any time. 
            Your voice remains under your control.
          </p>
        </div>
        <div class="feature-item">
          <h4>Transparent Networks</h4>
          <p>
            See delegation relationships (with privacy controls). Understand who influences 
            decisions and how trust flows through the community.
          </p>
        </div>
      </div>
    </section>

    <!-- Deliberation Section -->
    <section class="feature-section">
      <div class="section-header">
        <h2>Structured Deliberation</h2>
        <p>
          Good decisions require good discussion. Likwid structures deliberation to ensure 
          informed, inclusive, and productive conversations.
        </p>
      </div>

      <div class="process-visual">
        <div class="process-phase">
          <div class="phase-icon">📖</div>
          <h4>Inform</h4>
          <p>
            Proposals enter an inform phase. Members read the proposal, supporting documents, 
            and context before discussion begins. Optional read-time requirements ensure engagement.
          </p>
        </div>
        <div class="process-arrow">→</div>
        <div class="process-phase">
          <div class="phase-icon">💬</div>
          <h4>Discuss</h4>
          <p>
            Structured discussion with facilitator tools. Comments can be organized, 
            constructive input surfaced, and concerns identified. Small group breakouts for complex topics.
          </p>
        </div>
        <div class="process-arrow">→</div>
        <div class="process-phase">
          <div class="phase-icon">✓</div>
          <h4>Decide</h4>
          <p>
            Voting opens after adequate deliberation. Clear deadlines, reminder notifications, 
            and results calculated using the community's chosen method.
          </p>
        </div>
      </div>

      <div class="feature-grid" style="margin-top: 2rem;">
        <div class="feature-item">
          <h4>Facilitator Tools</h4>
          <p>Designated facilitators can organize discussions, highlight key points, and manage conversation flow.</p>
        </div>
        <div class="feature-item">
          <h4>Configurable Phases</h4>
          <p>Set minimum and maximum durations for each phase. Extend deadlines when needed.</p>
        </div>
        <div class="feature-item">
          <h4>Notification System</h4>
          <p>Members receive timely notifications about proposals, phase transitions, and voting deadlines.</p>
        </div>
        <div class="feature-item">
          <h4>Amendment Process</h4>
          <p>Proposals can be amended during deliberation based on feedback, with clear change tracking.</p>
        </div>
      </div>
    </section>

    <!-- Moderation Section -->
    <section class="feature-section alt-bg">
      <div class="section-header">
        <h2>Transparent Moderation</h2>
        <p>
          Every community needs moderation. Likwid makes moderation visible, accountable, 
          and auditable—building trust through transparency.
        </p>
      </div>

      <div class="moderation-features">
        <div class="mod-feature">
          <h4>Public Moderation Ledger</h4>
          <p>
            Every moderation action is logged with who took it, what rule was violated, 
            what evidence supported the decision, and what content was affected. 
            No shadow banning. No hidden removals.
          </p>
        </div>
        <div class="mod-feature">
          <h4>Cryptographic Audit Trail</h4>
          <p>
            The moderation ledger is cryptographically chained. Each entry references 
            the previous one, making retroactive alteration detectable. Integrity you can verify.
          </p>
        </div>
        <div class="mod-feature">
          <h4>Rule-Based Actions</h4>
          <p>
            Communities define their moderation rules. Actions reference specific rules, 
            creating consistency and enabling appeals based on documented standards.
          </p>
        </div>
        <div class="mod-feature">
          <h4>Separate Identities</h4>
          <p>
            Civic identity (who you are in discussions) and voting identity (how you voted) 
            are separated. Participate openly while maintaining ballot secrecy.
          </p>
        </div>
      </div>
    </section>

    <!-- Plugin System Section -->
    <section class="feature-section">
      <div class="section-header">
        <h2>Plugin Architecture</h2>
        <p>
          Likwid is modular by design. Every major component is a plugin that can be 
          enabled, disabled, or customized per community.
        </p>
      </div>

      <div class="plugin-categories">
        <div class="plugin-category">
          <h4>Voting Plugins</h4>
          <ul>
            <li>Approval Voting</li>
            <li>Ranked Choice</li>
            <li>Schulze Method</li>
            <li>STAR Voting</li>
            <li>Quadratic Voting</li>
          </ul>
        </div>
        <div class="plugin-category">
          <h4>Feature Plugins</h4>
          <ul>
            <li>Liquid Delegation</li>
            <li>Structured Deliberation</li>
            <li>Moderation Ledger</li>
            <li>Federation</li>
            <li>Conflict Resolution</li>
          </ul>
        </div>
        <div class="plugin-category">
          <h4>Integration Plugins</h4>
          <ul>
            <li>GitLab Integration</li>
            <li>Matrix Chat</li>
            <li>Webhook Notifications</li>
            <li>OAuth Providers</li>
            <li>Custom Workflows</li>
          </ul>
        </div>
      </div>

      <div class="plugin-note">
        <p>
          Communities enable only the plugins they need. Platform administrators control 
          which plugins are available. Third-party plugins extend functionality further.
        </p>
      </div>
    </section>

    <!-- Federation Section -->
    <section class="feature-section alt-bg">
      <div class="section-header">
        <h2>Federation</h2>
        <p>
          Connect communities across instances while maintaining autonomy. 
          Share decisions, coordinate actions, and build networks of trust.
        </p>
      </div>

      <div class="feature-grid">
        <div class="feature-item">
          <h4>Cross-Instance Coordination</h4>
          <p>Communities on different Likwid instances can federate, sharing proposals and decisions.</p>
        </div>
        <div class="feature-item">
          <h4>Trust Levels</h4>
          <p>Configure trust levels for federated instances. Control what information is shared and how.</p>
        </div>
        <div class="feature-item">
          <h4>Autonomy Preserved</h4>
          <p>Each community maintains control over its own governance. Federation is cooperative, not hierarchical.</p>
        </div>
        <div class="feature-item">
          <h4>Network Effects</h4>
          <p>Federated communities can coordinate across geographic or functional boundaries.</p>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="features-cta">
      <h2>See It In Action</h2>
      <p>
        The best way to understand Likwid is to experience it. Explore our demo instance 
        with pre-populated communities and governance history.
      </p>
      <div class="cta-buttons">
        <a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
        <a href="/docs" class="ui-btn ui-btn-secondary ui-btn-lg">Read Documentation</a>
      </div>
    </section>
  </article>
</PublicLayout>

<style>
  .features-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .page-header {
    text-align: center;
    padding: 3rem 0 4rem;
    border-bottom: 1px solid var(--color-border);
  }

  .page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .lead {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .feature-section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .feature-section.alt-bg {
    background: var(--color-bg-alt);
    margin: 0 -2rem;
    padding: 4rem 2rem;
  }

  .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .section-header h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .section-header p {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.6;
  }

  /* Voting Methods */
  .voting-methods {
    display: grid;
    gap: 1.5rem;
  }

  .method-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  .method-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }

  .method-header h3 {
    font-size: 1.25rem;
    margin: 0;
  }

  .method-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-primary-muted);
    color: var(--color-primary);
    border-radius: 999px;
    font-weight: 500;
  }

  .method-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .method-details {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
  }

  .method-details strong {
    color: var(--color-text);
  }

  /* Feature Grid */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  @media (max-width: 640px) {
    .feature-grid {
      grid-template-columns: 1fr;
    }
  }

  .feature-item {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .feature-item h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
  }

  .feature-item p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
  }

  /* Process Visual */
  .process-visual {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .process-phase {
    flex: 1;
    max-width: 280px;
    text-align: center;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .phase-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  .process-phase h4 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }

  .process-phase p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
  }

  .process-arrow {
    font-size: 1.5rem;
    color: var(--color-text-muted);
    padding-top: 2.5rem;
  }

  @media (max-width: 768px) {
    .process-visual {
      flex-direction: column;
      align-items: center;
    }

    .process-arrow {
      transform: rotate(90deg);
      padding: 0;
    }

    .process-phase {
      max-width: 100%;
    }
  }

  /* Moderation Features */
  .moderation-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  @media (max-width: 640px) {
    .moderation-features {
      grid-template-columns: 1fr;
    }
  }

  .mod-feature {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-success);
  }

  .mod-feature h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .mod-feature p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
  }

  /* Plugin Categories */
  .plugin-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 768px) {
    .plugin-categories {
      grid-template-columns: 1fr;
    }
  }

  .plugin-category {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .plugin-category h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
  }

  .plugin-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .plugin-category li {
    padding: 0.375rem 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
  }

  .plugin-note {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
  }

  .plugin-note p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0;
  }

  /* CTA Section */
  .features-cta {
    text-align: center;
    padding: 4rem 0;
  }

  .features-cta h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .features-cta p {
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0 auto 2rem;
    font-size: 1.125rem;
  }

  .cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
</style>