const { useState, useEffect } = React;

function Calculator() {
  const [minutes, setMinutes] = useState(400);
  const perMinute = 0.15;
  const cost = (minutes * perMinute).toFixed(2);
  const calls = Math.round(minutes / 2.5);

  return (
    <div className="pricing-card">
      <h2>Minutes calculator</h2>
      <p className="desc">Most calls last 1–3 minutes. Drag to estimate your monthly spend.</p>

      <div className="calc-slider-row">
        <div className="calc-val">
          <span className="calc-val-num mono">{minutes.toLocaleString()}</span>
          <span className="calc-val-label">minutes / month</span>
        </div>
        <input
          type="range"
          min="50"
          max="10000"
          step="50"
          value={minutes}
          onChange={(e) => setMinutes(parseInt(e.target.value))}
        />
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--text-subtle)", marginTop: 6, fontFamily: "var(--font-mono)" }}>
          <span>50</span><span>2,500</span><span>5,000</span><span>10,000</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, padding: "16px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div>
          <div style={{ fontSize: 11, color: "var(--text-subtle)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500, marginBottom: 4 }}>Calls (approx)</div>
          <div className="mono" style={{ fontSize: 20, fontWeight: 600, fontFamily: "var(--font-display)" }}>{calls.toLocaleString()}</div>
        </div>
        <div>
          <div style={{ fontSize: 11, color: "var(--text-subtle)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500, marginBottom: 4 }}>Per minute</div>
          <div className="mono" style={{ fontSize: 20, fontWeight: 600, fontFamily: "var(--font-display)" }}>€0.15</div>
        </div>
      </div>

      <div className="calc-result">
        <div>
          <div className="calc-result-label">Estimated monthly cost</div>
          <div style={{ fontSize: 11, color: "var(--text-subtle)", marginTop: 4 }}>EU / US destinations · ex. VAT</div>
        </div>
        <div className="calc-result-val mono">€{cost}</div>
      </div>
    </div>
  );
}

function PricingCard() {
  return (
    <div className="pricing-card primary">
      <span className="pricing-tag">Pay as you go</span>
      <h2>Usage-based</h2>
      <p className="desc">One rate. Top up any amount. No subscription.</p>
      <div className="pricing-price">
        <span className="currency mono">€</span>
        <span className="mono">0.15</span>
        <span className="unit">/minute</span>
      </div>
      <div className="pricing-topup">
        Top up from <strong style={{ color: "var(--text)" }}>€10 minimum</strong>. Credit never expires.
      </div>

      <a href="signup.html" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center" }}>
        Start with 5 free minutes
      </a>

      <div className="pricing-features">
        {[
          "Unlimited campaigns & leads",
          "All 32 voice options",
          "Voicemail detection & smart retries",
          "Live transcripts + full recordings",
          "Excel & CSV import/export",
          "GDPR compliance + EU data residency",
          "API access (from 5,000 min/mo)",
          "No seats, no setup fees, ever"
        ].map((t, i) => (
          <div key={i} className="pricing-feature">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <span>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function RatesTable() {
  const rates = [
    { flag: "🇺🇸", country: "United States", code: "+1", rate: "€0.15" },
    { flag: "🇨🇦", country: "Canada", code: "+1", rate: "€0.15" },
    { flag: "🇬🇧", country: "United Kingdom", code: "+44", rate: "€0.15" },
    { flag: "🇩🇪", country: "Germany", code: "+49", rate: "€0.15" },
    { flag: "🇫🇷", country: "France", code: "+33", rate: "€0.15" },
    { flag: "🇳🇱", country: "Netherlands", code: "+31", rate: "€0.15" },
    { flag: "🇪🇸", country: "Spain", code: "+34", rate: "€0.16" },
    { flag: "🇮🇹", country: "Italy", code: "+39", rate: "€0.16" },
    { flag: "🇦🇺", country: "Australia", code: "+61", rate: "€0.18" },
    { flag: "🇯🇵", country: "Japan", code: "+81", rate: "€0.22" },
    { flag: "🇸🇬", country: "Singapore", code: "+65", rate: "€0.22" },
    { flag: "🇧🇷", country: "Brazil", code: "+55", rate: "€0.24" },
  ];
  return (
    <div className="rates-table">
      <div className="rates-row head">
        <div></div>
        <div>Country</div>
        <div>Code</div>
        <div style={{ textAlign: "right" }}>Per minute</div>
      </div>
      {rates.map((r, i) => (
        <div key={i} className="rates-row">
          <div className="flag">{r.flag}</div>
          <div>{r.country}</div>
          <div className="code mono">{r.code}</div>
          <div className="rate">{r.rate}</div>
        </div>
      ))}
    </div>
  );
}

function PricingFAQ() {
  const qs = [
    { q: "Is there a monthly subscription?", a: "No. You top up credit (€10 minimum) and spend it on calls. What you don't use rolls over indefinitely." },
    { q: "What if I need enterprise volume?", a: "Custom rates apply from 20,000 minutes/month. Email sales@ringlist.io for a quote — usually 30-50% lower per-minute." },
    { q: "Do I need to buy phone numbers?", a: "No. We provide caller IDs in 40 countries included. You can also bring your own via Twilio, SignalWire, or Telnyx." },
    { q: "What counts as a minute?", a: "Connected talk time, rounded up to the nearest 6 seconds. We don't charge for ringing, voicemails you hang up on, or failed connections." },
    { q: "Any overage fees?", a: "Never. If your credit runs out mid-campaign, calls pause. Top up and they resume automatically." }
  ];
  const [open, setOpen] = useState(0);
  return (
    <div className="faq" style={{ maxWidth: 760, margin: "0 auto" }}>
      {qs.map((q, i) => (
        <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
            <span>{q.q}</span>
            <span className="faq-plus">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
          <div className="faq-a"><div>{q.a}</div></div>
        </div>
      ))}
    </div>
  );
}

function App() {
  useEffect(() => {
    window.Ringlist.renderNav('pricing');
    window.Ringlist.renderFooter();
  }, []);

  return (
    <>
      <header id="nav" className="nav"></header>
      <main>
        <section className="pricing-hero container">
          <div className="eyebrow" style={{ marginBottom: 14 }}>Pricing</div>
          <h1>One rate. Every feature.<br/>Pay only for minutes.</h1>
          <p>No seats. No subscription. Top up €10 to start — credit never expires.</p>
        </section>

        <section style={{ padding: "40px 0" }}>
          <div className="container">
            <div className="pricing-main">
              <PricingCard />
              <Calculator />
            </div>
          </div>
        </section>

        <section style={{ padding: "56px 0" }}>
          <div className="container" style={{ maxWidth: 1080 }}>
            <div className="compare-row">
              <div className="compare-cell">
                <h4>How it compares</h4>
                <div className="big">~€0.30</div>
                <div className="sub">Typical 2-minute call, fully handled by AI.</div>
              </div>
              <div className="compare-cell">
                <h4>Human SDR equivalent</h4>
                <div className="big">~€4.20</div>
                <div className="sub">Loaded cost per call, incl. dialer + base pay.</div>
              </div>
              <div className="compare-cell">
                <h4>Break-even</h4>
                <div className="big">1 demo</div>
                <div className="sub">Ringlist pays for itself after a single booked demo.</div>
              </div>
            </div>
          </div>
        </section>

        <section className="rates-section">
          <div className="container" style={{ maxWidth: 900 }}>
            <div className="section-head" style={{ marginBottom: 32 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Destinations</div>
              <h2 style={{ fontSize: "2rem" }}>Per-minute rates by country.</h2>
              <p style={{ fontSize: 16, color: "var(--text-muted)", marginTop: 8 }}>130+ countries supported. These are the most common — see the full list in the app.</p>
            </div>
            <RatesTable />
          </div>
        </section>

        <section className="section" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-head" style={{ textAlign: "center", margin: "0 auto 48px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Pricing FAQ</div>
              <h2 style={{ fontSize: "2rem" }}>The obvious questions.</h2>
            </div>
            <PricingFAQ />
          </div>
        </section>
      </main>
      <footer id="footer" className="footer"></footer>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);