// Pricing teaser with monthly/annual toggle

function Pricing({ onJoin }) {
  const [annual, setAnnual] = React.useState(true);

  const tiers = [
    {
      name: "Personal",
      tagline: "For one busy life.",
      price: { m: 9.99, a: 99 },
      features: [
        "2 email accounts",
        "1 calendar",
        "Automatic event detection from email",
        "Draft replies in your tone",
        "Read-only access, always",
      ],
      cta: "Start free",
    },
    {
      name: "Family",
      tagline: "For households that share a schedule.",
      price: { m: 24.99, a: 249 },
      features: [
        "Everything in Personal",
        "5 email accounts · 3 calendars",
        "Co-parent sharing — granular & revocable",
        "WhatsApp group monitoring (up to 5)",
        "Monthly insights & priority support",
      ],
      cta: "Start free",
      featured: true,
      badge: "Most popular",
    },
    {
      name: "Professional",
      tagline: "For multi-business operators.",
      price: { m: 49.99, a: 499 },
      features: [
        "Everything in Family",
        "10 email accounts · 5 calendars",
        "Unlimited sharing connections",
        "Unlimited WhatsApp groups",
        "Connect to your own tools · advanced analytics",
        "White-label · dedicated support",
      ],
      cta: "Talk to us",
    },
  ];

  return (
    <section id="pricing" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div
          className="section-head reveal"
          style={{
            textAlign: "center",
            marginLeft: "auto",
            marginRight: "auto",
          }}
        >
          <span className="eyebrow">Pricing</span>
          <h2>Pay for what saves you time.</h2>
          <p>
            <span className="beta-highlight">Free during beta.</span> These are
            the prices we'll launch with.
          </p>
        </div>
        <div
          className="reveal"
          style={{
            display: "flex",
            justifyContent: "center",
            marginBottom: 40,
          }}
        >
          <div
            style={{
              display: "inline-flex",
              padding: 4,
              borderRadius: 999,
              background: "var(--bg-soft)",
              border: "1px solid var(--line)",
              fontSize: 13,
            }}
          >
            {[
              { v: false, label: "Monthly" },
              { v: true, label: "Annual" },
            ].map((opt) => (
              <button
                key={String(opt.v)}
                onClick={() => setAnnual(opt.v)}
                style={{
                  padding: "8px 16px",
                  borderRadius: 999,
                  background:
                    annual === opt.v ? "var(--bg-elev)" : "transparent",
                  color: annual === opt.v ? "var(--ink)" : "var(--muted)",
                  fontWeight: 500,
                  boxShadow: annual === opt.v ? "var(--shadow-sm)" : "none",
                  transition: "all 0.2s ease",
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                {opt.label}
                {opt.v && (
                  <span
                    style={{
                      fontSize: 11,
                      padding: "2px 6px",
                      borderRadius: 4,
                      background: "var(--accent-soft)",
                      color: "var(--accent-ink)",
                      fontWeight: 500,
                    }}
                  >
                    save 17%
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>

        <div
          className="pricing-grid reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 16,
            alignItems: "stretch",
          }}
        >
          {tiers.map((t, i) => (
            <div
              key={i}
              style={{
                padding: 32,
                borderRadius: "var(--radius-lg)",
                border: "1px solid",
                borderColor: t.featured ? "var(--primary)" : "var(--line)",
                background: t.featured ? "var(--primary)" : "var(--bg-elev)",
                color: t.featured ? "#ffffff" : "var(--ink)",
                position: "relative",
                display: "flex",
                flexDirection: "column",
                boxShadow: t.featured ? "var(--shadow-lg)" : "none",
              }}
            >
              {t.badge && (
                <div
                  className="mono"
                  style={{
                    position: "absolute",
                    top: 14,
                    right: 14,
                    fontSize: 10,
                    padding: "4px 8px",
                    borderRadius: 999,
                    background: "var(--tertiary)",
                    color: "white",
                    textTransform: "uppercase",
                    letterSpacing: "0.1em",
                  }}
                >
                  {t.badge}
                </div>
              )}
              <h3 style={{ fontSize: 20, marginBottom: 4 }}>{t.name}</h3>
              <div
                style={{
                  fontSize: 14,
                  color: t.featured ? "rgba(255,255,255,0.65)" : "var(--muted)",
                  marginBottom: 24,
                }}
              >
                {t.tagline}
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "baseline",
                  gap: 6,
                  marginBottom: 24,
                }}
              >
                <span
                  style={{
                    fontSize: 40,
                    fontWeight: 500,
                    letterSpacing: "-0.03em",
                  }}
                >
                  $
                  {annual
                    ? (t.price.a / 12).toFixed(2).replace(".00", "")
                    : t.price.m}
                </span>
                <span
                  style={{
                    fontSize: 13,
                    color: t.featured
                      ? "rgba(255,255,255,0.55)"
                      : "var(--muted)",
                  }}
                >
                  /mo{" "}
                  {annual && (
                    <span
                      style={{ display: "block", fontSize: 11, marginTop: 2 }}
                    >
                      billed ${t.price.a}/yr
                    </span>
                  )}
                </span>
              </div>
              <button
                onClick={onJoin}
                className="btn"
                style={{
                  background: t.featured ? "#ffffff" : "var(--primary)",
                  color: t.featured ? "var(--primary-ink)" : "#ffffff",
                  marginBottom: 24,
                  width: "100%",
                }}
              >
                {t.cta} <IArrow size={14} />
              </button>
              <div
                style={{
                  borderTop: t.featured
                    ? "1px solid rgba(255,255,255,0.15)"
                    : "1px solid var(--line)",
                  paddingTop: 20,
                  display: "flex",
                  flexDirection: "column",
                  gap: 10,
                }}
              >
                {t.features.map((f, fi) => (
                  <div
                    key={fi}
                    style={{
                      display: "flex",
                      gap: 10,
                      alignItems: "flex-start",
                      fontSize: 13.5,
                      lineHeight: 1.45,
                    }}
                  >
                    <ICheck
                      size={14}
                      style={{
                        color: t.featured ? "#ffffff" : "var(--primary)",
                        marginTop: 3,
                        flexShrink: 0,
                      }}
                    />
                    <span
                      style={{
                        color: t.featured
                          ? "rgba(255,255,255,0.85)"
                          : "var(--ink-2)",
                      }}
                    >
                      {f}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div
          className="reveal"
          style={{
            textAlign: "center",
            marginTop: 32,
            fontSize: 13,
            color: "var(--muted)",
          }}
        >
          30-day money-back guarantee · Cancel anytime · Founding members keep
          their plan free for life
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });