{{-- resources/views/pages/pricing.blade.php --}}
@extends('layouts.public')

@section('title', (site_name() ?? 'Razcrypto') . ' — Pricing')

@section('content')
@php
  // central colors from site settings (helpers.php)
  $primary = function_exists('primary_color') ? primary_color() : '#4f46e5';
  $primary_light = function_exists('primary_light_color') ? primary_light_color() : '#6366f1';
  $secondary = function_exists('secondary_color') ? secondary_color() : '#10b981';
  $dark = '#1e293b';
  $light = '#f8fafc';
@endphp

@push('styles')
<style>
  :root{
    --primary: {{ $primary }};
    --primary-light: {{ $primary_light }};
    --secondary: {{ $secondary }};
    --dark: {{ $dark }};
    --light: {{ $light }};
    --gray: #94a3b8;
  }

  /* Make page full width but keep inner max width for readability */
  .pricing-hero { background:#fff; padding:28px 12px; }
  .container-full{ width:100%; max-width:1300px; margin:0 auto; padding:0 16px; box-sizing:border-box; }

  .brand-row { display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap; padding:8px 0 18px; }
  .brand-logo { font-weight:800; font-size:clamp(20px,2.2vw,28px); color:var(--primary); display:flex; align-items:center; gap:10px; }
  .brand-logo .icon { font-size:28px; display:inline-flex; align-items:center; justify-content:center; }

  .tagline { text-align:center; color:var(--gray); max-width:900px; margin:6px auto 0; font-size:clamp(14px,1.6vw,18px); }

  /* Section spacing */
  section { padding:28px 0; }
  .section-title { text-align:center; font-size:clamp(20px,2.4vw,28px); margin-bottom:12px; color:var(--dark); }
  .section-sub { text-align:center; color:var(--gray); margin-bottom:18px; }

  /* Comparison table full width responsive */
  .comparison-wrap { background:transparent; padding:12px; }
  .comparison-table { width:100%; border-collapse:collapse; box-shadow:0 6px 20px rgba(0,0,0,0.04); border-radius:10px; overflow:hidden; }
  .comparison-table thead th { background: linear-gradient(90deg,var(--primary),var(--primary-light)); color:#fff; padding:14px; text-align:left; font-weight:700; }
  .comparison-table td, .comparison-table th { padding:14px; border-bottom:1px solid #eef2f7; vertical-align:middle; }
  .comparison-table tbody tr:nth-child(even) { background:#fbfdff; }
  .highlight { color:var(--primary); font-weight:700; }

  /* Features grid */
  .features-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:18px; }
  .feature-card { background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 24px rgba(12,20,40,0.04); transition:transform .18s; border:1px solid rgba(15,23,42,0.03); }
  .feature-card:hover { transform:translateY(-6px); }
  .feature-icon { font-size:22px; color:var(--primary); margin-bottom:8px; }

  /* Calculator + result */
  .calc-wrap { max-width:860px; margin:18px auto 0; display:grid; grid-template-columns:1fr 360px; gap:18px; align-items:start; }
  .calculator-card { background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 24px rgba(12,20,40,0.04); border:1px solid rgba(15,23,42,0.03); }
  .result-card { background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 24px rgba(12,20,40,0.04); border-top:4px solid var(--primary); }

  .input-group { margin-bottom:12px; }
  .input-group label { display:block; margin-bottom:8px; font-weight:700; color:var(--dark); }
  .input { width:100%; padding:12px; border-radius:8px; border:1px solid #e6e9f0; background:#fbfdff; box-sizing:border-box; }

  .btn { display:inline-block; background:var(--primary); color:#fff; padding:12px 18px; border-radius:10px; border:0; cursor:pointer; font-weight:700; width:100%; text-align:center; }
  .btn.secondary { background:#fff; color:var(--primary); border:1px solid rgba(15,23,42,0.06); width:auto; padding:10px 14px; }

  .result-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f1f5f9; }
  .result-row:last-child { border-bottom:none; font-weight:800; color:var(--primary); font-size:1.05rem; }

  /* CTA */
  .cta { padding:28px 16px; border-radius:12px; text-align:center; color:#fff; background:linear-gradient(90deg,var(--primary),var(--primary-light)); margin-top:22px; }
  .cta h3 { margin:0 0 8px; font-size:clamp(18px,2.4vw,26px); }
  .cta p { margin:0 0 14px; color:rgba(255,255,255,0.9); }

  /* Footer small */
  .page-footer { text-align:center; color:var(--gray); margin-top:18px; }

  /* Responsiveness */
  @media (max-width:980px){
    .calc-wrap { grid-template-columns:1fr; }
    .comparison-table thead th, .comparison-table td { padding:12px; }
    .brand-logo { font-size:20px; }
  }

  @media (max-width:520px){
    .brand-logo { font-size:18px; gap:8px; }
    .tagline { padding:0 8px; }
  }
</style>
@endpush

<div class="pricing-hero">
  <div class="container-full">
    {{-- Brand / hero --}}
    <div class="brand-row">
      <div class="brand-logo">
        <span class="icon">💱</span>
        <span>{{ site_name() ?? 'Razcrypto' }}</span>
      </div>
    </div>
    <div class="tagline">The most transparent and cost-effective crypto payment gateway — low settlement fee, fast settlement, easy integration.</div>
  </div>
</div>

<section class="comparison-section">
  <div class="container-full">
    <h2 class="section-title">Fee Comparison</h2>
    <p class="section-sub">See how much you save with {{ site_name() ?? 'Razcrypto' }} compared to other gateways</p>

    <div class="comparison-wrap">
      <table class="comparison-table" role="table" aria-label="Fee comparison">
        <thead>
          <tr>
            <th>Feature</th>
            <th>{{ site_name() ?? 'Razcrypto' }}</th>
            <th>Other Gateways</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Gateway Fee</td>
            <td class="highlight">0.5% only</td>
            <td>1–2% + transaction fees</td>
          </tr>
          <tr>
            <td>Transaction Fee</td>
            <td style="color:var(--secondary);font-weight:700">FREE</td>
            <td style="color:#ef4444;font-weight:700">~1% typically</td>
          </tr>
          <tr>
            <td>Settlement Fee</td>
            <td class="highlight">0.5% only</td>
            <td>1% typically</td>
          </tr>
          <tr>
            <td>Blockchain Gas Fee</td>
            <td>$0.50 fixed</td>
            <td>Varies + markup</td>
          </tr>
          <tr>
            <td>Total Fees on $100</td>
            <td class="highlight">$1.00</td>
            <td>$2.50–$3.50</td>
          </tr>
          <tr>
            <td>Total Fees on $1000</td>
            <td class="highlight">$5.50</td>
            <td>$25–$35</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="features-section">
  <div class="container-full">
    <h2 class="section-title">Why Choose {{ site_name() ?? 'Razcrypto' }}?</h2>
    <p class="section-sub">Built for merchants who want simple, fast and transparent crypto payments.</p>

    <div class="features-grid" role="list">
      <div class="feature-card" role="listitem">
        <div class="feature-icon">🔖</div>
        <h3 class="feature-title">Lowest Fees in Market</h3>
        <p>Only 0.5% gateway fee. No hidden charges or per-transaction markups.</p>
      </div>

      <div class="feature-card" role="listitem">
        <div class="feature-icon">🔒</div>
        <h3 class="feature-title">Secure Transactions</h3>
        <p>Blockchain-powered security and verification for each payment.</p>
      </div>

      <div class="feature-card" role="listitem">
        <div class="feature-icon">⚡</div>
        <h3 class="feature-title">Fast Settlements</h3>
        <p>Optimized processing for faster confirmations and settlements.</p>
      </div>

      <div class="feature-card" role="listitem">
        <div class="feature-icon">♾</div>
        <h3 class="feature-title">No Volume Limits</h3>
        <p>Process unlimited transactions — suitable for small stores to enterprises.</p>
      </div>

      <div class="feature-card" role="listitem">
        <div class="feature-icon">🔌</div>
        <h3 class="feature-title">Easy Integration</h3>
        <p>JavaScript SDK and simple server-side APIs — integrate in minutes.</p>
      </div>

      <div class="feature-card" role="listitem">
        <div class="feature-icon">🎧</div>
        <h3 class="feature-title">24/7 Support</h3>
        <p>Dedicated team to assist with integration and production issues.</p>
      </div>
    </div>
  </div>
</section>

<section class="pricing-section">
  <div class="container-full">
    <h2 class="section-title">Fee Calculator</h2>
    <p class="section-sub">Estimate fees and see how much you keep after settlement.</p>

    <div class="calc-wrap" aria-live="polite">
      <div class="calculator-card" role="region" aria-label="Fee calculator">
        <h3 style="margin-top:0;color:var(--primary)">Calculate Your Savings</h3>

        <div class="input-group">
          <label for="withdrawal-amount">Transaction Amount (USD)</label>
          <input id="withdrawal-amount" class="input" type="number" min="0.01" step="0.01" value="100">
        </div>

        <div class="input-group">
          <label for="gateway-fee-percent">Gateway Fee (%)</label>
          <input id="gateway-fee-percent" class="input" type="number" min="0" step="0.01" value="0.5">
        </div>

        <div class="input-group">
          <label for="fixed-gas">Blockchain Gas Fee (USD)</label>
          <input id="fixed-gas" class="input" type="number" min="0" step="0.01" value="0.50">
        </div>

        <div style="display:flex;gap:12px; margin-top:8px;">
          <button id="calculate-btn" class="btn" type="button">Calculate Fees</button>
          <button id="clear-btn" class="btn secondary" type="button">Reset</button>
        </div>
      </div>

      <div class="result-card" id="result-card" role="status" aria-atomic="true">
        <h3 style="margin-top:0;color:var(--dark)">Your Transaction Details</h3>
        <div class="result-details">
          <div class="result-row"><span>Transaction Amount:</span><span id="original-amount">$0.00</span></div>
          <div class="result-row"><span>Blockchain Gas Fee:</span><span id="gas-fee">$0.00</span></div>
          <div class="result-row"><span>Gateway Fee:</span><span id="gateway-fee-display">$0.00</span></div>
          <div class="result-row"><span>You Will Receive:</span><span id="final-amount">$0.00</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cta">
  <div class="container-full">
    <h3>Ready to Save on Payment Processing?</h3>
    <p>Join thousands of businesses already saving with {{ site_name() ?? 'Razcrypto' }}.</p>
    <a href="{{ route('register.show') }}" class="btn" style="display:inline-block;max-width:260px;margin:0 auto;">Get Started for Free</a>
  </div>
</section>

<div class="page-footer container-full">
  <p>© {{ date('Y') }} {{ site_name() ?? 'Razcrypto' }}. All rights reserved.</p>
</div>

@push('scripts')
<script>
/*
  Fee calculator logic — corrected and safe.
  Centralized values are taken from inputs so admin can change defaults.
*/
(function(){
  const q = (id) => document.getElementById(id);
  const amountInput = q('withdrawal-amount');
  const gatewayInput = q('gateway-fee-percent');
  const gasInput = q('fixed-gas');
  const calculateBtn = q('calculate-btn');
  const clearBtn = q('clear-btn');

  const originalEl = q('original-amount');
  const gasEl = q('gas-fee');
  const gatewayFeeEl = q('gateway-fee-display');
  const finalEl = q('final-amount');
  const resultCard = q('result-card');

  function fmt(n){
    return '$' + Number(n).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
  }

  function calculateFees(){
    const amount = parseFloat(amountInput.value || 0);
    const gatewayPercent = parseFloat(gatewayInput.value || 0);
    const gas = parseFloat(gasInput.value || 0);

    if (isNaN(amount) || amount <= 0){
      alert('Please enter a valid transaction amount.');
      amountInput.focus();
      return;
    }

    const gatewayFee = (amount * (gatewayPercent/100));
    const totalFees = gatewayFee + gas;
    const finalAmount = Math.max(0, amount - totalFees);

    originalEl.textContent = fmt(amount);
    gasEl.textContent = fmt(gas);
    gatewayFeeEl.textContent = fmt(gatewayFee);
    finalEl.textContent = fmt(finalAmount);

    // ensure visible (in case CSS hidden or not)
    resultCard.scrollIntoView({behavior:'smooth', block:'center'});
  }

  function resetAll(){
    amountInput.value = '100';
    gatewayInput.value = '0.5';
    gasInput.value = '0.50';
    calculateFees();
  }

  calculateBtn.addEventListener('click', calculateFees);
  clearBtn.addEventListener('click', resetAll);

  // enter key triggers
  [amountInput, gatewayInput, gasInput].forEach(inp=>{
    inp.addEventListener('keypress', function(e){
      if (e.key === 'Enter'){ e.preventDefault(); calculateFees(); }
    });
  });

  // initial
  window.addEventListener('load', function(){ calculateFees(); });
})();
</script>
@endpush

@endsection