// Benefits — why tint + savings calculator

function Benefits() {
  const { t, lang } = useLang();
  const b = t.benefits;
  const c = b.calc;

  const [bill, setBill] = React.useState(450);
  const [climate, setClimate] = React.useState('nyc');
  const [area, setArea] = React.useState('medium');

  // back-of-envelope: cooling = ~40% of bill in summer; tint cuts cooling 25-35%
  // climate factor: nyc ~ 4 months, pr ~ 12 months
  // area factor scales effect
  const months = climate === 'pr' ? 12 : 4;
  const areaFactor = area === 'small' ? 0.5 : area === 'large' ? 1.2 : 1.0;
  const cutPct = 0.30 * areaFactor;
  const annual = Math.round((bill * 0.40 * cutPct * months) / 50) * 50;
  // payback assuming ~$1,500 install for medium
  const installCost = area === 'small' ? 700 : area === 'large' ? 3200 : 1500;
  const payback = annual > 0 ? (installCost / annual).toFixed(1) : '—';

  const fmt = (n) => '$' + n.toLocaleString(lang === 'es' ? 'es-PR' : 'en-US');

  return (
    <section className="section benefits" id="benefits">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{b.eyebrow}</span>
            <h2 style={{ marginTop: 16 }}>
              {b.title} <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)', fontWeight: 500 }}>{b.titleEm}</em>
            </h2>
          </div>
          <p>{b.sub}</p>
        </div>

        <div className="bn-grid">
          {b.cards.map((card, i) => <BenefitCard key={i} {...card} idx={i} />)}
        </div>

        <div className="bn-calc">
          <div className="bn-calc-head">
            <div>
              <div className="eyebrow" style={{ color: 'var(--sun-deep)' }}>$ → $$$</div>
              <h3 className="bn-calc-h">{c.title}</h3>
              <p className="bn-calc-sub">{c.sub}</p>
            </div>
          </div>

          <div className="bn-calc-body">
            <div className="bn-calc-controls">
              <div className="bn-field">
                <label className="bn-field-l">{c.label1}</label>
                <div className="bn-slider-row">
                  <input type="range" min="100" max="2500" step="25" value={bill}
                    onChange={e => setBill(+e.target.value)} className="bn-slider" />
                  <div className="bn-slider-val mono">{fmt(bill)}</div>
                </div>
              </div>

              <div className="bn-field">
                <label className="bn-field-l">{c.label2}</label>
                <div className="bn-seg">
                  {c.climateOpts.map(o => (
                    <button key={o.v}
                      className={"bn-seg-btn " + (climate === o.v ? 'bn-seg-btn-on' : '')}
                      onClick={() => setClimate(o.v)}>
                      {o.l}
                    </button>
                  ))}
                </div>
              </div>

              <div className="bn-field">
                <label className="bn-field-l">{c.label3}</label>
                <div className="bn-seg bn-seg-3">
                  {c.areaOpts.map(o => (
                    <button key={o.v}
                      className={"bn-seg-btn " + (area === o.v ? 'bn-seg-btn-on' : '')}
                      onClick={() => setArea(o.v)}>
                      {o.l}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <div className="bn-calc-result">
              <div className="bn-result-label mono">{c.result}</div>
              <div className="bn-result-num">{fmt(annual)}</div>
              <div className="bn-result-foot">
                <span className="mono">{c.payback}</span>
                <span className="bn-result-payback">~{payback} {c.years}</span>
              </div>
              <div className="bn-result-rays" aria-hidden="true" />
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .bn-grid {
          display: grid; grid-template-columns: 1fr; gap: 16px;
          margin-bottom: 64px;
        }
        @media (min-width: 700px) { .bn-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
        @media (min-width: 1000px) { .bn-grid { grid-template-columns: repeat(4, 1fr); } }

        .bn-card {
          padding: 20px 18px 22px;
          border: 1px solid var(--hairline);
          border-radius: var(--r-lg);
          background: var(--card);
          display: flex; flex-direction: column; gap: 12px;
          position: relative;
          overflow: hidden;
        }
        @media (min-width: 700px) {
          .bn-card { padding: 28px 24px 32px; gap: 14px; }
        }
        .bn-card::before {
          content: ""; position: absolute;
          top: -40px; right: -40px;
          width: 120px; height: 120px;
          border-radius: 50%;
          background: radial-gradient(circle, color-mix(in srgb, var(--sun) 30%, transparent), transparent 70%);
          opacity: 0.6;
        }
        .bn-stat {
          font-family: var(--display);
          font-size: 56px; font-weight: 600;
          letter-spacing: -0.04em; line-height: 1;
          background: linear-gradient(120deg, var(--ink), var(--sun-deep));
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .bn-stat-l {
          font-size: 13px;
          letter-spacing: 0.04em;
          color: var(--ink);
          font-weight: 500;
          text-transform: lowercase;
        }
        .bn-card-body {
          font-size: 14px;
          color: var(--ink-soft);
          line-height: 1.5;
          margin-top: auto;
        }

        .bn-calc {
          background: var(--card);
          border: 1px solid var(--hairline-strong);
          border-radius: var(--r-xl);
          overflow: hidden;
          box-shadow: var(--shadow);
        }
        .bn-calc-head { padding: 22px 20px 0; }
        @media (min-width: 700px) {
          .bn-calc-head { padding: 28px 32px 0; }
        }
        .bn-calc-h {
          font-family: var(--display);
          font-size: clamp(24px, 3vw, 34px);
          font-weight: 600; letter-spacing: -0.02em;
          margin: 12px 0 6px;
        }
        .bn-calc-sub { color: var(--ink-soft); font-size: 14.5px; max-width: 56ch; margin: 0; }
        .bn-calc-body {
          display: grid; grid-template-columns: 1fr; gap: 0;
          padding: 22px 20px 24px;
        }
        @media (min-width: 700px) {
          .bn-calc-body { padding: 28px 32px 32px; }
        }
        @media (min-width: 880px) {
          .bn-calc-body { grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: stretch; }
        }
        .bn-calc-controls { display: flex; flex-direction: column; gap: 24px; }

        .bn-field { display: flex; flex-direction: column; gap: 10px; }
        .bn-field-l {
          font-size: 12px; letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--ink-soft);
          font-weight: 500;
        }
        .bn-slider-row { display: flex; gap: 16px; align-items: center; }
        .bn-slider {
          flex: 1; appearance: none; -webkit-appearance: none;
          height: 4px; background: var(--hairline-strong);
          border-radius: 999px; outline: none;
        }
        .bn-slider::-webkit-slider-thumb {
          appearance: none; -webkit-appearance: none;
          width: 22px; height: 22px;
          border-radius: 50%; background: var(--ink);
          border: 3px solid var(--bg);
          box-shadow: 0 2px 6px rgba(0,0,0,0.2);
          cursor: pointer;
        }
        .bn-slider::-moz-range-thumb {
          width: 22px; height: 22px;
          border-radius: 50%; background: var(--ink);
          border: 3px solid var(--bg);
        }
        .bn-slider-val {
          font-family: var(--display); font-size: 24px; font-weight: 600;
          letter-spacing: -0.02em;
          width: 92px; text-align: right;
        }
        .bn-seg {
          display: grid; grid-template-columns: 1fr 1fr;
          gap: 6px; padding: 4px;
          background: var(--bg-2);
          border: 1px solid var(--hairline);
          border-radius: 12px;
        }
        .bn-seg-3 { grid-template-columns: 1fr 1fr 1fr; }
        .bn-seg-btn {
          padding: 10px 12px;
          border: 0; background: transparent;
          border-radius: 8px;
          font: inherit; font-size: 13.5px; font-weight: 500;
          color: var(--ink-soft);
          transition: background .15s, color .15s;
        }
        .bn-seg-btn-on {
          background: var(--ink);
          color: var(--bg);
        }
        [data-theme="dark"] .bn-seg-btn-on { background: var(--sun); color: #15110a; }

        .bn-calc-result {
          background: var(--ink);
          color: var(--bg);
          border-radius: 18px;
          padding: 22px 20px;
          position: relative; overflow: hidden;
          display: flex; flex-direction: column; justify-content: center;
        }
        @media (min-width: 700px) {
          .bn-calc-result { padding: 28px; }
        }
        [data-theme="dark"] .bn-calc-result { background: var(--glass); }
        .bn-result-rays {
          position: absolute; inset: 0;
          background:
            radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sun) 50%, transparent), transparent 50%),
            radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sun) 25%, transparent), transparent 60%);
          opacity: 0.55;
          pointer-events: none;
        }
        .bn-result-label {
          font-size: 10.5px; letter-spacing: 0.18em;
          opacity: 0.7; text-transform: uppercase;
          margin-bottom: 8px;
          position: relative;
        }
        .bn-result-num {
          font-family: var(--display);
          font-size: clamp(56px, 9vw, 88px);
          font-weight: 600; letter-spacing: -0.04em;
          line-height: 1; color: var(--sun);
          position: relative;
        }
        .bn-result-foot {
          margin-top: 24px;
          padding-top: 16px;
          border-top: 1px solid rgba(255,255,255,0.15);
          display: flex; align-items: center; justify-content: space-between;
          font-size: 12.5px; opacity: 0.85;
          position: relative;
        }
        .bn-result-payback { font-family: var(--display); font-weight: 600; font-size: 18px; }
      `}</style>
    </section>
  );
}

function BenefitCard({ stat, label, body, idx }) {
  return (
    <div className="bn-card" style={{ animationDelay: (idx * 60) + 'ms' }}>
      <div className="bn-stat">{stat}</div>
      <div className="bn-stat-l">{label}</div>
      <div className="bn-card-body">{body}</div>
    </div>
  );
}

Object.assign(window, { Benefits, BenefitCard });