// phone-value.jsx — "What would the same phone time cost as a person?"
// Companion section to PricingSection. Shows OpenLines monthly cost side-by-side
// with the fully-burdened cost of a person doing the same phone-handling hours.
//
// Same fonts + PALETTE + brutalist controls as pricing.jsx; uses the live
// /api/public/landing-config so margin + vendor cost stay in sync with
// pricing.yaml (no fallback drift).
//
// Intent: anchor the OpenLines price against a familiar P&L line item — hourly
// labor — without claiming to "replace" anyone. The lede is honest about that.

(function () {
  const { PALETTE, SectionLabel } = window;

  const serif = `"Iowan Old Style", "Hoefler Text", "Georgia", "Times New Roman", serif`;
  const sans = `"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif`;
  const mono = `ui-monospace, SFMono-Regular, Menlo, monospace`;

  // Burdened-cost multiplier — captures payroll taxes (~8%), workers' comp,
  // sick/PTO (~10%), and modest after-hours premium. Industry conventional
  // wisdom is "1.25× to 1.4× the wage" — we go with 1.3.
  const BURDENED_MULT = 1.3;

  // Plan presets correspond to common quote points; bucket is computed live
  // from pricing.yaml so the comparison stays accurate if margin changes.
  const PLAN_OPTIONS = [
    { value: 80,  label: "Light",    sub: "~5 hr/mo of calls" },
    { value: 120, label: "Standard", sub: "~9 hr/mo of calls" },
    { value: 200, label: "Busy",     sub: "~15+ hr/mo of calls" },
  ];

  // Compute bucket minutes from price + margin + overhead + vendor cost.
  // Identical formula to wizard_handlers_new_production._compute_tier_cap
  // and the operator-side pricing-ladder UI on the dashboard.
  function computeBucketMinutes({ price, marginPercent, sharedOverhead, vendorPerMin }) {
    if (!vendorPerMin || vendorPerMin <= 0) return 0;
    const margin = marginPercent / 100;
    const cap = (price * (1 - margin) - sharedOverhead) / vendorPerMin;
    return Math.max(0, Math.floor(cap));
  }

  // Inject only the styles we need; reuse the slider class from pricing.jsx
  // (already injected by it) to avoid duplicate keyframes.
  if (typeof document !== "undefined" && !document.getElementById("v1-phonevalue-styles")) {
    const s = document.createElement("style");
    s.id = "v1-phonevalue-styles";
    s.textContent = `
      .v1-phonevalue-savings-pos { color: ${PALETTE.accent}; }
      .v1-phonevalue-card {
        padding: 28px 32px;
        background: ${PALETTE.bg2};
        border: 1px solid ${PALETTE.line};
      }
      .v1-phonevalue-card-label {
        font-family: ${mono};
        font-size: 10.5px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        font-weight: 600;
        color: ${PALETTE.sub};
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .v1-phonevalue-card-num {
        font-family: ${serif};
        font-size: 56px;
        line-height: 0.95;
        letter-spacing: -1.6px;
        font-weight: 500;
        color: ${PALETTE.ink};
        font-variant-numeric: tabular-nums;
        margin-bottom: 6px;
      }
      .v1-phonevalue-card-meta {
        font-family: ${sans};
        font-size: 13px;
        color: ${PALETTE.sub};
        margin-top: 14px;
        line-height: 1.5;
      }
      .v1-phonevalue-divider {
        font-family: ${serif};
        font-size: 22px;
        color: ${PALETTE.sub};
        text-align: center;
        font-style: italic;
        padding: 2px 0;
      }
      /* Tablet breakpoint aligns to --bp-tablet-landscape (1024px) from foundation tokens */
      @media (max-width: 1023px) {
        .v1-phonevalue { padding: 100px 32px 80px !important; }
        .v1-phonevalue h2 { font-size: 46px !important; letter-spacing: -1.2px !important; }
        .v1-phonevalue-grid { gap: 56px !important; }
        .v1-phonevalue-cards { padding-left: 40px !important; }
      }
      /* Mobile breakpoint aligns to --bp-mobile (700px) from foundation tokens */
      @media (max-width: 700px) {
        .v1-phonevalue { padding: 64px 20px 64px !important; }
        .v1-phonevalue h2 { font-size: 36px !important; letter-spacing: -0.8px !important; }
        .v1-phonevalue > p { font-size: 16px !important; margin-bottom: 44px !important; }
        .v1-phonevalue-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        .v1-phonevalue-cards { padding: 32px 0 0 !important; border-left: none !important; }
        .v1-phonevalue-card-num { font-size: 42px !important; letter-spacing: -1.2px !important; }
        .v1-phonevalue-card { padding: 22px 22px !important; }
      }
    `;
    document.head.appendChild(s);
  }

  function PhoneTimeValue() {
    // Live config from API; will be null until first fetch resolves.
    const [cfg, setCfg] = React.useState(null);
    const [hourly, setHourly] = React.useState(20);  // wage slider default
    const [planPrice, setPlanPrice] = React.useState(120); // plan toggle default
    const [includeBurden, setIncludeBurden] = React.useState(true);

    React.useEffect(() => {
      fetch("/api/public/landing-config")
        .then(r => r.ok ? r.json() : null)
        .then(data => { if (data) setCfg(data); })
        .catch(() => { /* leave cfg null — render shows neutral state */ });
    }, []);

    // Until the live config arrives, render the section with neutral
    // placeholders rather than wrong numbers from a stale fallback.
    const margin = cfg ? cfg.target_margin_percent : null;
    const overhead = cfg ? (cfg.marketing_calculator && cfg.marketing_calculator.fixed_overhead) : null;
    // The landing-config endpoint exposes margin + overage but not vendor cost.
    // We derive a "minutes per dollar of price" rate from the calculator constants
    // already exposed, so the comparison stays driven by pricing.yaml without
    // adding new fields to the public API.
    const perMinRate = cfg ? (cfg.marketing_calculator && cfg.marketing_calculator.per_min_rate) : null;

    // Recovered phone-handling minutes for the chosen plan, using the same
    // bucket math the operator-side wizard uses. We approximate vendor_per_min
    // via the published target_margin + overage rate (overage = vendor / (1 - margin)).
    let bucket = 0;
    if (cfg) {
      const overageRate = cfg.overage_rate_usd_per_min;   // e.g. 0.20
      const targetMargin = (cfg.target_margin_percent || 0) / 100;
      const vendorPerMin = overageRate * (1 - targetMargin);
      bucket = computeBucketMinutes({
        price: planPrice,
        marginPercent: cfg.target_margin_percent,
        sharedOverhead: cfg.marketing_calculator?.fixed_overhead ?? 0,
        vendorPerMin,
      });
    }

    const bucketHours = bucket / 60;
    const effectiveWage = includeBurden ? hourly * BURDENED_MULT : hourly;
    const employeeMonthly = bucketHours * effectiveWage;
    const delta = employeeMonthly - planPrice;
    const deltaPct = employeeMonthly > 0 ? Math.round((delta / employeeMonthly) * 100) : 0;
    const savings = delta > 0;

    // Mailto with the comparison the user is looking at — same pattern as
    // PricingSection so the inbound email already has context.
    const mailtoUrl =
      "mailto:lucas@getopenlines.com?subject=" +
      encodeURIComponent(`OpenLines value question — $${planPrice}/mo vs $${hourly}/hr`) +
      "&body=" +
      encodeURIComponent(
        `Hi Lucas,\n\n` +
        `I was on the OpenLines pricing page. For my situation:\n\n` +
        `· OpenLines plan I was looking at: $${planPrice}/mo (~${Math.round(bucketHours * 10) / 10} hr of phone time)\n` +
        `· Hourly rate I'd otherwise pay: $${hourly}/hr ${includeBurden ? "(burdened)" : "(base wage)"}\n` +
        `· Equivalent labor cost: ~$${Math.round(employeeMonthly)}/mo\n\n` +
        `Can we schedule a 15-min call to talk through whether this is a fit?\n\n` +
        `Thanks!`
      );

    return (
      <section
        id="value"
        className="v1-section v1-phonevalue"
        style={{
          position: "relative",
          padding: "120px 80px 100px",
          borderTop: `1px solid ${PALETTE.line}`,
          maxWidth: 1280,
          margin: "0 auto",
        }}
      >
        <SectionLabel style={{ marginBottom: 20 }} accent>
          Value comparison
        </SectionLabel>
        <h2
          style={{
            fontFamily: serif,
            fontSize: 56,
            lineHeight: 1.02,
            letterSpacing: -1.4,
            margin: "0 0 16px",
            maxWidth: 820,
            fontWeight: 500,
            fontStyle: "italic",
          }}
        >
          What would the same phone time cost as a person?
        </h2>
        <p
          style={{
            fontFamily: serif,
            fontSize: 18,
            lineHeight: 1.55,
            maxWidth: 700,
            margin: "0 0 64px",
            opacity: 0.78,
          }}
        >
          Most of our customers aren't paying anyone to answer these calls today &mdash; they're just missing them. But if you were, here's the math: the same phone-handling time billed at a normal hourly wage. OpenLines is the lower line, and you don't pay for the hours nothing happens.
        </p>

        <div
          className="v1-phonevalue-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr",
            gap: 80,
            alignItems: "start",
          }}
        >
          {/* === INPUTS === */}
          <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
            {/* 1 — Hourly wage slider */}
            <div>
              <label
                htmlFor="phonevalue-hourly"
                style={{
                  display: "block",
                  fontFamily: serif,
                  fontSize: 18,
                  lineHeight: 1.35,
                  color: PALETTE.ink,
                  fontWeight: 500,
                  marginBottom: 18,
                  letterSpacing: -0.2,
                }}
              >
                What would you pay someone hourly to answer the phone?
              </label>
              <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
                <div style={{ flex: 1, position: "relative", padding: "10px 0" }}>
                  <input
                    id="phonevalue-hourly"
                    type="range"
                    min="14"
                    max="40"
                    step="1"
                    value={hourly}
                    onChange={(e) => setHourly(parseInt(e.target.value, 10))}
                    className="v1-pricing-slider"
                    aria-label="Hourly wage"
                  />
                  <div
                    aria-hidden="true"
                    className="v1-pricing-slider-fill"
                    style={{
                      width: `${((hourly - 14) / (40 - 14)) * 100}%`,
                      top: "50%",
                      transform: "translateY(-50%)",
                    }}
                  />
                </div>
                <div
                  style={{
                    minWidth: 84,
                    textAlign: "right",
                    fontFamily: serif,
                    fontSize: 34,
                    fontWeight: 500,
                    color: PALETTE.ink,
                    fontVariantNumeric: "tabular-nums",
                    lineHeight: 1,
                  }}
                >
                  ${hourly}/hr
                </div>
              </div>
              <p
                style={{
                  fontFamily: sans,
                  fontSize: 12.5,
                  lineHeight: 1.5,
                  color: PALETTE.sub,
                  margin: "12px 0 0",
                }}
              >
                Slide to your local rate. Front-office hires in Oregon typically run $16&ndash;$25.
              </p>
            </div>

            {/* 2 — Plan preset (segmented) */}
            <div>
              <label
                style={{
                  display: "block",
                  fontFamily: serif,
                  fontSize: 18,
                  lineHeight: 1.35,
                  color: PALETTE.ink,
                  fontWeight: 500,
                  marginBottom: 18,
                  letterSpacing: -0.2,
                }}
              >
                Which OpenLines plan to compare?
              </label>
              <div className="v1-pricing-seg" role="radiogroup" aria-label="OpenLines plan">
                {PLAN_OPTIONS.map((opt) => {
                  const active = planPrice === opt.value;
                  return (
                    <button
                      key={opt.value}
                      type="button"
                      role="radio"
                      aria-checked={active}
                      className={`v1-pricing-seg-btn${active ? " v1-pricing-seg-btn-active" : ""}`}
                      onClick={() => setPlanPrice(opt.value)}
                    >
                      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                        <span>${opt.value}/mo</span>
                        <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: 1, opacity: 0.7 }}>
                          {opt.sub}
                        </span>
                      </div>
                    </button>
                  );
                })}
              </div>
              <p
                style={{
                  fontFamily: sans,
                  fontSize: 12.5,
                  lineHeight: 1.5,
                  color: PALETTE.sub,
                  margin: "12px 0 0",
                }}
              >
                Plans show typical price points. Your actual quote comes from a 15-min call.
              </p>
            </div>

            {/* 3 — Burdened toggle */}
            <div>
              <label
                style={{
                  display: "block",
                  fontFamily: serif,
                  fontSize: 18,
                  lineHeight: 1.35,
                  color: PALETTE.ink,
                  fontWeight: 500,
                  marginBottom: 18,
                  letterSpacing: -0.2,
                }}
              >
                Include payroll taxes &amp; benefits?
              </label>
              <div className="v1-pricing-seg v1-pricing-seg-2" role="radiogroup" aria-label="Burdened cost toggle">
                <button
                  type="button"
                  role="radio"
                  aria-checked={includeBurden}
                  className={`v1-pricing-seg-btn${includeBurden ? " v1-pricing-seg-btn-active" : ""}`}
                  onClick={() => setIncludeBurden(true)}
                >
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    <span>Yes &mdash; the real cost</span>
                    <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: 1, opacity: 0.7 }}>
                      wage &times; 1.3
                    </span>
                  </div>
                </button>
                <button
                  type="button"
                  role="radio"
                  aria-checked={!includeBurden}
                  className={`v1-pricing-seg-btn${!includeBurden ? " v1-pricing-seg-btn-active" : ""}`}
                  onClick={() => setIncludeBurden(false)}
                >
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    <span>No &mdash; base wage only</span>
                    <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: 1, opacity: 0.7 }}>
                      strict apples-to-apples
                    </span>
                  </div>
                </button>
              </div>
            </div>
          </div>

          {/* === OUTPUT === */}
          <div
            className="v1-phonevalue-cards"
            style={{
              padding: "0 0 0 56px",
              borderLeft: `1px solid ${PALETTE.line}`,
              minHeight: 420,
              display: "flex",
              flexDirection: "column",
              gap: 16,
            }}
          >
            {/* OpenLines card */}
            <div className="v1-phonevalue-card">
              <div className="v1-phonevalue-card-label">
                <span style={{ display: "inline-block", width: 14, height: 1, background: PALETTE.accent }} />
                OpenLines &mdash; ${planPrice}/mo
              </div>
              <div className="v1-phonevalue-card-num">${planPrice}</div>
              <div className="v1-phonevalue-card-meta">
                {cfg
                  ? <>Includes about <strong>{Math.round(bucketHours * 10) / 10} hr</strong> of phone time per month
                     &mdash; roughly {Math.floor(bucket / 2)} calls at a 2-min average.
                     Overage runs ${cfg.overage_rate_usd_per_min}/min only when you exceed the bucket.</>
                  : <span style={{ opacity: 0.7 }}>Loading live pricing&hellip;</span>}
              </div>
            </div>

            <div className="v1-phonevalue-divider">vs.</div>

            {/* Employee card */}
            <div className="v1-phonevalue-card">
              <div className="v1-phonevalue-card-label">
                <span style={{ display: "inline-block", width: 14, height: 1, background: PALETTE.hairline }} />
                Hourly hire &mdash; ${hourly}/hr {includeBurden && <span style={{ opacity: 0.7 }}>(burdened ${effectiveWage.toFixed(2)})</span>}
              </div>
              <div className="v1-phonevalue-card-num">
                ${cfg ? Math.round(employeeMonthly).toLocaleString() : "—"}
              </div>
              <div className="v1-phonevalue-card-meta">
                {cfg
                  ? <>For the same {Math.round(bucketHours * 10) / 10} hours of phone-handling time at ${hourly}/hr
                     {includeBurden ? <> with a 1.3&times; burden for taxes, benefits, and after-hours premium</> : null}.
                     This counts only the minutes actually on the phone &mdash; you'd still pay them to be on call
                     for the hours nothing happens.</>
                  : <span style={{ opacity: 0.7 }}>&nbsp;</span>}
              </div>
            </div>

            {/* Delta line */}
            {cfg && (
              <div
                style={{
                  marginTop: 14,
                  paddingTop: 22,
                  borderTop: `1px solid ${PALETTE.line}`,
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                }}
              >
                <div
                  style={{
                    fontFamily: mono,
                    fontSize: 11,
                    letterSpacing: 1.6,
                    textTransform: "uppercase",
                    color: PALETTE.sub,
                    fontWeight: 600,
                  }}
                >
                  {savings ? "OpenLines saves" : "OpenLines costs more"}
                </div>
                <div
                  className={savings ? "v1-phonevalue-savings-pos" : ""}
                  style={{
                    fontFamily: serif,
                    fontSize: 30,
                    fontWeight: 500,
                    color: savings ? PALETTE.accent : PALETTE.ink,
                    fontVariantNumeric: "tabular-nums",
                  }}
                >
                  ${Math.abs(Math.round(delta)).toLocaleString()}/mo
                  <span style={{ fontSize: 16, opacity: 0.7, marginLeft: 8 }}>
                    ({savings ? "" : "+"}{deltaPct}%)
                  </span>
                </div>
              </div>
            )}

            <p
              style={{
                fontFamily: serif,
                fontSize: 14.5,
                lineHeight: 1.55,
                color: PALETTE.sub,
                margin: "26px 0 0",
                fontStyle: "italic",
                maxWidth: 380,
              }}
            >
              We're not here to replace your team. But when you're choosing between missing a call and paying for it, this is the math.
            </p>

            <div style={{ marginTop: 20 }}>
              <a
                href={mailtoUrl}
                style={{
                  fontFamily: sans,
                  fontSize: 14,
                  color: PALETTE.accent,
                  textDecoration: "underline",
                  textUnderlineOffset: 4,
                }}
              >
                Talk through your numbers &rarr;
              </a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  window.PhoneTimeValue = PhoneTimeValue;
})();