/* INTERACTIVE ROI CALCULATOR */

function Calculator() {
  const isMobile = useWindowWidth() < 768;
  const [monthlyRev,   setMonthlyRev] = useState(18000);    // $
  const [cvr,          setCvr]        = useState(1.4);      // %
  const [adSpend,      setAdSpend]    = useState(6000);     // $
  const [aov,          setAov]        = useState(65);       // $

  // Modeling: typical ecomlifters lift
  const cvrLift = 2.4;      // 2.4× cvr after CRO
  const roasLift = 1.9;     // 1.9× return on ad spend
  const aovLift = 1.32;     // bundles + upsells

  const newCvr   = +(cvr * cvrLift).toFixed(2);
  const newAov   = Math.round(aov * aovLift);
  const baseRoas = monthlyRev / adSpend;
  const newRoas  = +(baseRoas * roasLift).toFixed(2);
  const newRevenue = Math.round(monthlyRev * cvrLift * (aovLift / 1.05));
  const annualLift = (newRevenue - monthlyRev) * 12;
  const breakeven = Math.max(1, Math.ceil(15000 / ((newRevenue - monthlyRev) || 1)));

  return (
    <section data-screen-label="11 ROI Calculator" id="calculator" style={{ paddingTop: 64, paddingBottom: 64, background: 'var(--dark)', color: 'white' }} className="dark-canvas">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr', gap: 56, alignItems: 'start' }}>
          {/* Left — intro */}
          <div>
            <span className="eyebrow"><span className="dot"></span>ROI calculator</span>
            <h2 className="h2" style={{ marginTop: 16, color: 'white' }}>
              How much lift could<br />
              <span style={{ color: 'var(--green-bright)' }}>we ship for you?</span>
            </h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Drag the sliders to model your store. The estimate uses our 7-year average lift across 85+ DTC brands — your mileage may vary by vertical and starting point.
            </p>

            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 22 }}>
              <Slider label="Monthly revenue"    value={monthlyRev} min={3000}  max={150000} step={1000} format={v => '$' + v.toLocaleString()} onChange={setMonthlyRev} />
              <Slider label="Site conversion rate" value={cvr}        min={0.5}  max={5}      step={0.1}  format={v => v.toFixed(1) + '%'} onChange={setCvr} />
              <Slider label="Monthly ad spend"   value={adSpend}    min={500}   max={50000}  step={500}  format={v => '$' + v.toLocaleString()} onChange={setAdSpend} />
              <Slider label="Average order value" value={aov}         min={15}    max={300}    step={5}    format={v => '$' + v} onChange={setAov} />
            </div>
          </div>

          {/* Right — result panel */}
          <div style={{
            background: 'var(--dark-2)', borderRadius: 22, padding: 28,
            border: '1px solid var(--dark-line)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div aria-hidden style={{
              position: 'absolute', top: -100, right: -120, width: 360, height: 360,
              background: 'radial-gradient(circle, rgba(15,191,97,0.4), transparent 60%)',
              filter: 'blur(50px)', pointerEvents: 'none',
            }}></div>

            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
                <span className="mono-label" style={{ color: 'rgba(255,255,255,.55)' }}>YOUR PROJECTED LIFT · 6 MONTHS</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                  <span className="pulse-dot"></span> updating
                </span>
              </div>

              {/* Hero number — Annual revenue lift */}
              <div style={{ borderBottom: '1px dashed rgba(255,255,255,.12)', paddingBottom: 22, marginBottom: 22 }}>
                <div className="mono-label" style={{ color: 'rgba(255,255,255,.55)' }}>NEW ANNUAL REVENUE LIFT</div>
                <div className="num" style={{ fontSize: 'clamp(56px, 7vw, 92px)', fontWeight: 400, letterSpacing: '-0.04em', lineHeight: 0.95, marginTop: 6, color: 'var(--green-bright)' }}>
                  ${(annualLift / 1000).toFixed(0)}K
                </div>
                <div style={{ marginTop: 8, fontSize: 13, color: 'rgba(255,255,255,.7)' }}>
                  Net new revenue you could realistically generate over the next 12 months.
                </div>
              </div>

              {/* Metric grid */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
                <ResultMetric
                  label="CONVERSION RATE"
                  before={`${cvr.toFixed(1)}%`}
                  after={`${newCvr.toFixed(1)}%`}
                  delta={`${Math.round((cvrLift - 1) * 100)}%`}
                />
                <ResultMetric
                  label="BLENDED ROAS"
                  before={`${baseRoas.toFixed(1)}×`}
                  after={`${newRoas.toFixed(1)}×`}
                  delta={`${Math.round((roasLift - 1) * 100)}%`}
                />
                <ResultMetric
                  label="AVG ORDER VALUE"
                  before={`$${aov}`}
                  after={`$${newAov}`}
                  delta={`${Math.round((aovLift - 1) * 100)}%`}
                />
                <ResultMetric
                  label="NEW MONTHLY REV"
                  before={`$${(monthlyRev/1000).toFixed(0)}K`}
                  after={`$${(newRevenue/1000).toFixed(0)}K`}
                  delta={`${Math.round(((newRevenue - monthlyRev) / monthlyRev) * 100)}%`}
                  emphasize
                />
              </div>

              {/* Breakeven */}
              <div style={{
                marginTop: 18, padding: 16,
                background: 'rgba(15,191,97,0.1)',
                border: '1px solid rgba(15,191,97,0.3)',
                borderRadius: 12,
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <span style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--green)', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon.TrendUp size={18} />
                </span>
                <div style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(255,255,255,.85)' }}>
                  Estimated <strong style={{ color: 'white' }}>breakeven on engagement</strong> in{' '}
                  <strong style={{ color: 'var(--green-bright)' }}>~{breakeven} month{breakeven > 1 ? 's' : ''}</strong>.
                  Most clients see compounding gains for 18+ months after.
                </div>
              </div>

              <div style={{ marginTop: 18, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <button className="btn btn-green">
                  <span>Get full audit</span>
                  <span className="ico"><Icon.Arrow size={12} /></span>
                </button>
                <button className="btn" style={{ background: 'transparent', color: 'white', border: '1px solid rgba(255,255,255,.2)' }}>
                  Download model
                  <Icon.ArrowDown size={14} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Slider({ label, value, min, max, step, format, onChange }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,.7)' }}>{label}</span>
        <span className="num" style={{ fontFamily: 'var(--font-mono)', fontSize: 15, color: 'white', fontWeight: 500 }}>{format(value)}</span>
      </div>
      <div style={{ position: 'relative', height: 24, display: 'flex', alignItems: 'center' }}>
        <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 4, transform: 'translateY(-50%)' }}></div>
        <div style={{ position: 'absolute', left: 0, width: `${pct}%`, top: '50%', height: 4, background: 'var(--green)', borderRadius: 4, transform: 'translateY(-50%)', transition: 'width .15s var(--ease)' }}></div>
        <input
          type="range" min={min} max={max} step={step} value={value}
          onChange={e => onChange(Number(e.target.value))}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            opacity: 0, cursor: 'grab', margin: 0,
          }}
        />
        <div style={{
          position: 'absolute', left: `calc(${pct}% - 10px)`, top: '50%',
          width: 20, height: 20, borderRadius: '50%',
          background: 'white', border: '4px solid var(--green)',
          transform: 'translateY(-50%)', pointerEvents: 'none',
          boxShadow: '0 4px 14px rgba(15,191,97,.4)',
          transition: 'left .15s var(--ease)',
        }}></div>
      </div>
    </div>
  );
}

function ResultMetric({ label, before, after, delta, emphasize }) {
  return (
    <div style={{
      padding: 14,
      background: emphasize ? 'rgba(15,191,97,0.08)' : 'rgba(255,255,255,0.025)',
      border: `1px solid ${emphasize ? 'rgba(15,191,97,0.2)' : 'rgba(255,255,255,0.05)'}`,
      borderRadius: 12,
    }}>
      <div className="mono-label" style={{ color: 'rgba(255,255,255,.55)', fontSize: 10, marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="num" style={{ fontSize: 24, fontWeight: 500, color: 'white', letterSpacing: '-0.02em' }}>{after}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--green-bright)' }}>+{delta}</span>
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,.4)', marginTop: 4 }}>
        was {before}
      </div>
    </div>
  );
}

window.Calculator = Calculator;