// Calculator.jsx — Section E
const fmt = (n) => '$' + Math.round(n).toLocaleString();

const Counter = ({ value, set, min, max, label }) => (
  <div style={{ border:`1px solid ${T.border}`, borderRadius:8, padding:'10px 12px',
                display:'flex', alignItems:'center', justifyContent:'space-between', gap:8, background: T.white }}>
    <span style={{ fontSize:13, color: T.inkSoft }}>{label}</span>
    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
      <button onClick={() => set(Math.max(min, value-1))} style={{
        width:28, height:28, borderRadius:6, border:`1px solid ${T.border}`,
        background: T.white, color: T.ink, cursor:'pointer', fontSize:16,
      }}>–</button>
      <span className="numeral" style={{ minWidth:18, textAlign:'center', fontWeight:700 }}>{value}</span>
      <button onClick={() => set(Math.min(max, value+1))} style={{
        width:28, height:28, borderRadius:6, border:`1px solid ${T.border}`,
        background: T.white, color: T.ink, cursor:'pointer', fontSize:16,
      }}>+</button>
    </div>
  </div>
);

const Calculator = ({ onQuote }) => {
  const [guests, setGuests]   = React.useState(120);
  const [savory, setSavory]   = React.useState(2);
  const [sweet,  setSweet]    = React.useState(1);
  const [drinks, setDrinks]   = React.useState(false);

  // PLACEHOLDER MATH — illustrative only. Real pricing logic lives in the quote
  // builder's cpqCalcTotals / _emRoughTotal (Softr). Do not treat as real quotes;
  // swap in the real formula once Tony hands it over.
  const trucks = savory + sweet;
  const low  = (trucks * 700) + (guests * 14) + (drinks ? 350 : 0) + 400;
  const high = low * 1.28;

  return (
    <section id="calculator" style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.bgAlt }}>
      <div style={{ maxWidth:1100, margin:'0 auto' }}>
        <div style={{ marginBottom:36 }}>
          <div className="eyebrow" style={{ marginBottom:8 }}>Calculator</div>
          <h2 style={{ margin:0 }}>Estimate your event in 30 seconds.</h2>
        </div>
        <div className="calc-card" style={{
          background: T.white, borderRadius:16, padding:'clamp(20px, 3vw, 36px)',
          boxShadow: T.shadowRest, display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:'clamp(20px, 3vw, 40px)',
        }}>
          <div>
            <label style={{ display:'block', marginBottom:24 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:8 }}>
                <span style={{ fontSize:13, fontWeight:600, color: T.ink }}>Guests</span>
                <span className="numeral" style={{ color: T.ink, fontWeight:700, fontSize:18 }}>{guests}</span>
              </div>
              <input type="range" min="25" max="1000" step="5" value={guests} onChange={e => setGuests(+e.target.value)}
                style={{ accentColor: T.red, width:'100%' }} />
              <div style={{ display:'flex', justifyContent:'space-between', color: T.inkMute, fontSize:11, marginTop:4 }}>
                <span>25</span><span>1,000</span>
              </div>
            </label>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:14 }}>
              <Counter value={savory} set={setSavory} min={0} max={5} label="Savory trucks" />
              <Counter value={sweet}  set={setSweet}  min={0} max={3} label="Sweet trucks" />
            </div>
            <label style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
                            border:`1px solid ${T.border}`, borderRadius:8, padding:'10px 12px', background:T.white, cursor:'pointer' }}>
              <span style={{ fontSize:13, color: T.inkSoft }}>Drinks station</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:8 }}>
                <span style={{
                  width:40, height:22, borderRadius:999, position:'relative',
                  background: drinks ? T.red : T.border, transition:'.15s',
                  display:'inline-block',
                }}>
                  <span style={{
                    position:'absolute', top:2, left: drinks ? 20 : 2,
                    width:18, height:18, borderRadius:999, background: T.white, transition:'.15s',
                    boxShadow:'0 1px 2px rgba(0,0,0,.2)',
                  }}/>
                </span>
                <input type="checkbox" checked={drinks} onChange={e => setDrinks(e.target.checked)} style={{ display:'none' }} />
              </span>
            </label>
          </div>
          <div style={{ background: T.redTint, borderRadius:12, padding:'clamp(20px,2.5vw,28px)', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
            <div>
              <div className="micro" style={{ marginBottom:10, color: T.red }}>Estimated range · rough ballpark</div>
              <div className="numeral" style={{ fontSize:'clamp(28px, 3.4vw, 40px)', fontWeight:700, color: T.ink, letterSpacing:'-0.025em', lineHeight:1.1 }}>
                {fmt(low)} – {fmt(high)}
              </div>
              <p style={{ marginTop:12, fontSize:13, lineHeight:1.55, color: T.ink, opacity:.7 }}>
                Ballpark only — not a quote. Assumes 3 hours of service and bundles vendor cost, FTOTM coordination, and basic permits. Your real quote depends on menu, venue, and travel, and can land higher or lower.
              </p>
            </div>
            <button onClick={onQuote} className="btn btn-primary" style={{ marginTop:20, justifyContent:'center' }}>
              Get a real quote from our team →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Calculator });