/* ============================================================
   Pricing page
   ============================================================ */

const { useState: useStateP } = React;

function PricingPage() {
  const [cycle, setCycle] = useStateP("monthly"); // monthly | annual | triennial
  const mult = { monthly: 1, annual: 0.95, triennial: 0.90 };
  const label = { monthly: "Monthly", annual: "Annual · save 5%", triennial: "3-year · save 10%" };

  const plans = [
    {
      name: "Basic",
      tagline: "A single site, done right.",
      price: 2.95, sites: 15, disk: "Unlimited", bw: "Unlimited", db: "Unlimited", email: 10, ftp: 5,
      features: [
        "LiteSpeed + LSCache",
        "Free SSL (AutoSSL)",
        "Free migration",
        "Daily backups",
        "Softaculous 1-click",
        "cPanel access",
        "Unlimited Disk Space & Bandwidth",
        "Host 15 Domains",
      ],
    },
    {
      name: "Advanced",
      tagline: "For agencies, devs, side-projects.",
      price: 3.95, sites: 30, disk: "Unlimited", bw: "Unlimited", db: "Unlimited", email: 50, ftp: 20,
      features: [
        "LiteSpeed + LSCache",
        "Free SSL (AutoSSL)",
        "Free migration",
        "Daily backups",
        "Softaculous 1-click",
        "cPanel access",
        "Unlimited Disk Space & Bandwidth",
        "Host 30 Domains",
      ],
    },
    {
      name: "Professional",
      tagline: "Unlimited everything, always.",
      price: 5.95, sites: "∞", disk: "Unlimited", bw: "Unlimited", db: "∞", email: "∞", ftp: "∞",
      features: [
        "LiteSpeed + LSCache",
        "Free SSL (AutoSSL)",
        "Free migration",
        "Daily backups",
        "Softaculous 1-click",
        "cPanel access",
        "Unlimited Disk Space & Bandwidth",
        "Unlimited Domains",
      ],
      popular: true,
    },
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ padding: "96px 0 56px", textAlign: "center", position: "relative" }}>
        <div className="wrap">
          <div className="pill" style={{ margin: "0 auto 24px" }}>
            <span className="dot" /> 50% OFF All Packages with the coupon code HALFPRICE
          </div>
          <h1 className="display" style={{ maxWidth: 900, margin: "0 auto" }}>
            One plan for every<br/>
            kind of <em>site.</em>
          </h1>
          <p style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: 580, margin: "28px auto 0", lineHeight: 1.5 }}>
            Every plan includes LiteSpeed, NVMe, free SSL, free migration, and unmetered bandwidth.
            Pay monthly, or save big with longer terms.
          </p>

          {/* Cycle toggle */}
          <div style={{
            display: "inline-flex",
            marginTop: 36,
            background: "#fff",
            border: "1px solid var(--line)",
            borderRadius: 999,
            padding: 4,
          }}>
            {["monthly", "annual", "triennial"].map(c => (
              <button key={c} onClick={() => setCycle(c)} style={{
                padding: "8px 18px",
                borderRadius: 999,
                fontSize: 13,
                fontFamily: "var(--font-sans)",
                border: "none",
                background: cycle === c ? "var(--ink)" : "transparent",
                color: cycle === c ? "#fff" : "var(--ink-2)",
                cursor: "pointer",
                transition: "all 140ms var(--ease)",
              }}>{label[c]}</button>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing cards */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
            {plans.map(p => {
              const price = (p.price * mult[cycle]).toFixed(2);
              return (
                <div key={p.name} style={{
                  background: p.popular ? "var(--ink)" : "#fff",
                  color: p.popular ? "#fff" : "var(--ink)",
                  border: p.popular ? "1px solid var(--ink)" : "1px solid var(--line)",
                  borderRadius: 20,
                  padding: 32,
                  position: "relative",
                }}>
                  {p.popular && (
                    <div style={{
                      position: "absolute", top: -12, left: 32,
                      background: "var(--accent)", color: "#fff",
                      fontFamily: "var(--font-mono)", fontSize: 10,
                      letterSpacing: "0.1em", textTransform: "uppercase",
                      padding: "5px 10px", borderRadius: 999,
                    }}>Most popular</div>
                  )}

                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
                    textTransform: "uppercase", color: p.popular ? "#9a958c" : "var(--ink-3)",
                  }}>{p.name}</div>

                  <div style={{
                    fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.2,
                    letterSpacing: "-0.01em", marginTop: 8, color: p.popular ? "#E8E3D8" : "var(--ink-2)",
                  }}>{p.tagline}</div>

                  <div style={{ marginTop: 28, display: "flex", alignItems: "baseline", gap: 6 }}>
                    <span style={{ fontFamily: "var(--font-serif)", fontSize: 72, lineHeight: 1, letterSpacing: "-0.03em" }}>
                      ${price}
                    </span>
                    <span className="mono" style={{ fontSize: 12, color: p.popular ? "#9a958c" : "var(--ink-3)" }}>/mo</span>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: p.popular ? "#9a958c" : "var(--ink-3)", marginTop: 4 }}>
                    Billed {cycle === "monthly" ? "monthly" : cycle === "annual" ? "annually" : "every 3 years"}
                  </div>

                  <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 24px", display: "grid", gap: 10, fontSize: 14 }}>
                    {p.features.map(f => (
                      <li key={f} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
                          <path d="M5 12l4 4L19 7" stroke={p.popular ? "var(--accent-glow)" : "var(--accent)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                        <span style={{ color: p.popular ? "#E8E3D8" : "var(--ink-2)" }}>{f}</span>
                      </li>
                    ))}
                  </ul>

                  <Link
                    to={WHMCS.signup}
                    className={p.popular ? "btn btn-accent" : "btn btn-primary"}
                    style={{ width: "100%", justifyContent: "center" }}
                  >
                    Choose {p.name} <span className="arrow">→</span>
                  </Link>

                  <div className="mono" style={{
                    fontSize: 10, textAlign: "center", marginTop: 14,
                    color: p.popular ? "#9a958c" : "var(--ink-3)",
                    letterSpacing: "0.04em",
                  }}>
                    Instant Setup · no setup fee
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section style={{ padding: "40px 0 80px" }}>
        <div className="wrap">
          <div className="h-eyebrow" style={{ marginBottom: 12 }}><span className="dot" />Compare</div>
          <h2 style={{
            fontFamily: "var(--font-serif)", fontSize: "clamp(32px, 4vw, 48px)",
            letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 36,
          }}>
            The <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>full</em> feature matrix.
          </h2>

          <div style={{
            background: "#fff",
            border: "1px solid var(--line)",
            borderRadius: 18,
            overflow: "hidden",
          }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
              <thead>
                <tr style={{ background: "var(--bg-2)" }}>
                  <th style={thStyle}></th>
                  <th style={thStyle}>Basic</th>
                  <th style={thStyle}>Advanced</th>
                  <th style={{ ...thStyle, background: "var(--ink)", color: "#fff" }}>Professional</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ["Websites", "15", "30", "Unlimited"],
                  ["Disk (NVMe)", "Unlimited", "Unlimited", "Unlimited"],
                  ["Bandwidth", "Unlimited", "Unlimited", "Unlimited"],
                  ["Databases", "Unlimited", "Unlimited", "Unlimited"],
                  ["Email accounts", "Unlimited", "Unlimited", "Unlimited"],
                  ["Subdomains", "Unlimited", "Unlimited", "Unlimited"],
                  ["Free SSL", "✓", "✓", "✓"],
                  ["Daily backups", "✓", "✓", "✓"],
                  ["LiteSpeed + LSCache", "✓", "✓", "✓"],
                  ["Softaculous 280+ apps", "✓", "✓", "✓"],
                  ["Imunify360", "✓", "✓", "✓"],
                  ["Dedicated IP", "Add-on", "Add-on", "Add-on"],
                  ["Priority support", "✓", "✓", "✓"],
                ].map(([label, a, b, c], i) => (
                  <tr key={i} style={{ borderTop: "1px solid var(--line)" }}>
                    <td style={{ ...tdStyle, color: "var(--ink-2)", fontWeight: 500 }}>{label}</td>
                    <td style={tdStyle}>{a}</td>
                    <td style={{ ...tdStyle, background: "var(--bg-2)", fontWeight: 500 }}>{b}</td>
                    <td style={tdStyle}>{c}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <FAQ />
    </main>
  );
}

const thStyle = {
  textAlign: "left",
  padding: "18px 24px",
  fontFamily: "var(--font-mono)",
  fontSize: 11,
  letterSpacing: "0.12em",
  textTransform: "uppercase",
  color: "var(--ink-3)",
  fontWeight: 500,
};
const tdStyle = {
  padding: "16px 24px",
  fontFamily: "var(--font-mono)",
  fontSize: 13,
  color: "var(--ink)",
};

function FAQ() {
  const [open, setOpen] = useStateP(0);
  const items = [
    { q: "Is there a setup fee?", a: "No. All plans provision instantly with zero setup fees. You pay the quoted monthly rate, nothing else." },
    { q: "Can I migrate my site from another host?", a: "Yes, for free. Our team handles the migration for you on all our hosting plans, including cPanel backups, WordPress sites, and databases. Please contact us via support ticket after signing up." },
    { q: "What payment methods do you accept?", a: "We accept PayPal, credit & debit cards via PayPal and cryptocurrencies including BTC, ETH, USDT, and many more." },
    { q: "Do you offer a refund policy?", a: "Yes, we do offer a 30-day money-back guarantee for all our web hosting plans. Contact us within 30 days of your first payment and we will refund you in full." },
    { q: "Can I upgrade or downgrade later?", a: "Anytime from your client area. Upgrades are instant and prorated; downgrades take effect next billing cycle." },
  ];
  return (
    <section style={{ padding: "40px 0 0" }}>
      <div className="wrap" style={{ maxWidth: 900 }}>
        <div className="h-eyebrow" style={{ marginBottom: 12 }}><span className="dot" />FAQ</div>
        <h2 style={{
          fontFamily: "var(--font-serif)", fontSize: "clamp(32px, 4vw, 48px)",
          letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 36,
        }}>
          Questions, <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>answered.</em>
        </h2>

        <div style={{ borderTop: "1px solid var(--line)" }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: "100%",
                  background: "none",
                  border: "none",
                  padding: "22px 0",
                  textAlign: "left",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  cursor: "pointer",
                  fontFamily: "var(--font-sans)",
                  fontSize: 17,
                  color: "var(--ink)",
                  letterSpacing: "-0.01em",
                }}>
                <span>{it.q}</span>
                <span style={{
                  transform: open === i ? "rotate(45deg)" : "rotate(0)",
                  transition: "transform 200ms var(--ease)",
                  fontSize: 22, color: "var(--ink-3)",
                }}>+</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 22, color: "var(--ink-2)", fontSize: 15, lineHeight: 1.6, maxWidth: 680 }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PricingPage, FAQ });