// Screen 3 — Estimate / Close-out (tech presents Good-Better-Best on phone)

function EstimateCloseout() {
  const [selected, setSelected] = React.useState('better');

  const options = [
    {
      key: 'good', label: 'Good', title: 'Standard Repair',
      sub: 'Replace the failed capacitor.',
      price: 480, warranty: '1 yr parts',
      includes: ['Capacitor replacement', 'Refrigerant top-off', '1 yr warranty'],
    },
    {
      key: 'better', label: 'Better', title: 'Repair + Protect',
      sub: 'Fix the fault, prevent the next three.',
      price: 720, warranty: '3 yr parts · 1 yr labor',
      badge: 'RECOMMENDED',
      includes: ['Hard-start kit upgrade', '21-point tune-up', '1 yr Silver membership', 'Priority service'],
    },
    {
      key: 'best', label: 'Best', title: 'Full Replacement',
      sub: 'Cut energy bills 40%. 16-yr unit at end-of-life.',
      price: 8200, monthly: 149,
      warranty: '10 yr parts · 2 yr labor',
      includes: ['Carrier 16 SEER2 system', 'Smart thermostat', '$820 rebate applied', '0% APR 18 mo'],
    },
  ];

  const sel = options.find(o => o.key === selected);

  return (
    <IOSDevice dark={false}>
      <div style={{
        paddingTop: 54, paddingBottom: 100, height: '100%', overflow: 'hidden',
        fontFamily: '-apple-system, system-ui',
        background: '#F2F2F7',
      }}>
        {/* Header */}
        <div style={{ padding: '6px 16px 4px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button style={{
            background: 'rgba(255,255,255,0.9)', border: '1px solid rgba(0,0,0,0.08)',
            width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <I.Chevron size={17} style={{ transform: 'rotate(180deg)' }} />
          </button>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: '#6B7280', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>Estimate · #EST-2104</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#111', letterSpacing: -0.3 }}>Sarah Johnson</div>
          </div>
          <button style={{
            background: 'rgba(255,255,255,0.9)', border: '1px solid rgba(0,0,0,0.08)',
            width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <I.FileText size={15} />
          </button>
        </div>

        {/* Headline */}
        <div style={{ padding: '14px 20px 0' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#0F766E', textTransform: 'uppercase', letterSpacing: 0.6 }}>
            Three ways forward
          </div>
          <div style={{ fontSize: 22, fontWeight: 700, color: '#111', letterSpacing: -0.5, lineHeight: 1.15, marginTop: 4, textWrap: 'pretty' }}>
            Pick the option that fits your plan for the house.
          </div>
        </div>

        {/* Diagnosis chip */}
        <div style={{ padding: '12px 16px 0' }}>
          <div style={{
            background: '#fff', borderRadius: 12, border: '1px solid rgba(0,0,0,0.06)',
            padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8, background: '#E0F2FE',
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0369A1',
              flexShrink: 0,
            }}>
              <I.Snowflake size={18} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#111' }}>Failed run capacitor · low charge</div>
              <div style={{ fontSize: 11, color: '#6B7280' }}>Carrier 24ACC636 · 16 yrs old · diagnosed by Jake</div>
            </div>
          </div>
        </div>

        {/* Options as stacked cards */}
        <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {options.map(opt => {
            const isSel = selected === opt.key;
            return (
              <div key={opt.key}
                onClick={() => setSelected(opt.key)}
                style={{
                  position: 'relative', cursor: 'pointer',
                  background: '#fff',
                  border: isSel ? '2px solid #0F766E' : '1px solid rgba(0,0,0,0.06)',
                  borderRadius: 14, padding: 14,
                  boxShadow: isSel ? '0 6px 18px rgba(15,118,110,0.12)' : '0 1px 2px rgba(0,0,0,0.03)',
                  transition: 'all 150ms',
                }}>
                {opt.badge && (
                  <div style={{
                    position: 'absolute', top: -8, right: 14,
                    background: '#0F766E', color: '#fff',
                    fontSize: 9, fontWeight: 700, letterSpacing: 0.6,
                    padding: '3px 8px', borderRadius: 999,
                  }}>{opt.badge}</div>
                )}
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%', flexShrink: 0, marginTop: 2,
                    border: `2px solid ${isSel ? '#0F766E' : '#D1D5DB'}`,
                    background: isSel ? '#0F766E' : 'transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
                  }}>
                    {isSel && <I.Check size={12} stroke={3} />}
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
                      <span style={{ fontSize: 10, fontWeight: 700, color: '#6B7280', textTransform: 'uppercase', letterSpacing: 0.6 }}>{opt.label}</span>
                    </div>
                    <div style={{ fontSize: 16, fontWeight: 700, color: '#111', letterSpacing: -0.2, lineHeight: 1.2 }}>
                      {opt.title}
                    </div>
                    <div style={{ fontSize: 12, color: '#6B7280', marginTop: 2, lineHeight: 1.4 }}>
                      {opt.sub}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', flexShrink: 0 }}>
                    <div style={{ fontSize: 20, fontWeight: 700, color: '#111', letterSpacing: -0.4, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
                      ${opt.price.toLocaleString()}
                    </div>
                    {opt.monthly && (
                      <div style={{ fontSize: 10, color: '#0F766E', fontWeight: 600, marginTop: 2 }}>
                        or ${opt.monthly}/mo
                      </div>
                    )}
                  </div>
                </div>

                {/* Expanded includes — only on selected */}
                {isSel && (
                  <div style={{
                    marginTop: 12, paddingTop: 12, borderTop: '1px dashed #E5E7EB',
                    display: 'flex', flexDirection: 'column', gap: 7,
                  }}>
                    {opt.includes.map((inc, i) => (
                      <div key={i} style={{ display: 'flex', gap: 8, fontSize: 12.5, color: '#374151', lineHeight: 1.4 }}>
                        <I.Check size={13} stroke={2.5} style={{ color: '#0F766E', marginTop: 2, flexShrink: 0 }} />
                        <span>{inc}</span>
                      </div>
                    ))}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: '#6B7280', marginTop: 4 }}>
                      <I.Shield size={11} /> {opt.warranty}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Member discount note */}
        <div style={{ padding: '14px 16px 0' }}>
          <div style={{
            background: '#FFFBEB', border: '1px solid #FDE68A',
            borderRadius: 10, padding: '10px 12px',
            display: 'flex', gap: 8, alignItems: 'center',
          }}>
            <I.Star size={14} style={{ color: '#B45309', flexShrink: 0 }} />
            <div style={{ flex: 1, fontSize: 12, color: '#78350F', lineHeight: 1.4 }}>
              <strong>Gold member 10% off</strong> — saves Sarah ${Math.round(sel.price * 0.1).toLocaleString()} on this estimate.
            </div>
          </div>
        </div>

        {/* Send CTA card */}
        <div style={{ padding: '14px 16px 0' }}>
          <div style={{
            background: '#111', borderRadius: 16, padding: 16, color: '#fff',
          }}>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>
              Total · {sel.label}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <span style={{ fontSize: 32, fontWeight: 700, letterSpacing: -0.8, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
                ${sel.price.toLocaleString()}
              </span>
              {sel.monthly && (
                <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>or ${sel.monthly}/mo</span>
              )}
            </div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
              Estimate valid 14 days · No deposit required
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <button style={{
                flex: 1, background: 'rgba(255,255,255,0.12)',
                border: '1px solid rgba(255,255,255,0.18)',
                color: '#fff', padding: '12px 0', borderRadius: 11,
                fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>
                <I.FileText size={14} /> Preview
              </button>
              <button style={{
                flex: 1.4, background: '#0F766E',
                border: 'none', color: '#fff', padding: '12px 0', borderRadius: 11,
                fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                boxShadow: '0 4px 14px rgba(15,118,110,0.45)',
              }}>
                <I.Message size={14} /> Send to Sarah
              </button>
            </div>
          </div>
        </div>

        {/* Sign-on-glass option */}
        <div style={{ padding: '12px 16px 0' }}>
          <button style={{
            width: '100%', background: '#fff', border: '1px solid rgba(0,0,0,0.08)',
            borderRadius: 12, padding: '12px 14px',
            display: 'flex', alignItems: 'center', gap: 10,
            cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8, background: '#F0FDFA',
              color: '#0F766E', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <I.CreditCard size={16} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: '#111' }}>Approve & sign on glass</div>
              <div style={{ fontSize: 11, color: '#6B7280' }}>Hand the phone to Sarah · she signs to approve</div>
            </div>
            <I.Chevron size={14} style={{ color: '#9CA3AF' }} />
          </button>
        </div>
      </div>
    </IOSDevice>
  );
}

Object.assign(window, { EstimateCloseout });