// Pricing calculator with dynamic estimator
const SERVICES_PRICING = [
  { id:'web', label:'Website Design', base: 1490, monthly: 0, icon:'browser' },
  { id:'seo', label:'SEO', base: 0, monthly: 690, icon:'search' },
  { id:'gads', label:'Google Ads Management', base: 0, monthly: 490, icon:'target' },
  { id:'mads', label:'Meta Ads Management', base: 0, monthly: 490, icon:'megaphone' },
  { id:'smm', label:'Social Media', base: 0, monthly: 590, icon:'sparkles' },
  { id:'it',  label:'IT Support (per 10 seats)', base: 0, monthly: 390, icon:'server' },
  { id:'dev', label:'Software Development', base: 2900, monthly: 0, icon:'code' },
  { id:'app', label:'Web App', base: 3900, monthly: 0, icon:'device' },
  { id:'brand', label:'Branding / Logo', base: 890, monthly: 0, icon:'pen' },
  { id:'copy', label:'Content & Copy', base: 0, monthly: 490, icon:'spark' },
  { id:'ai',  label:'AI Automation', base: 1490, monthly: 390, icon:'zap' },
];

// Three ready-made packages — tap to pre-select, still editable after
const PACKAGES = [
  {
    id:'starter',
    name:'Starter',
    tag:'Just get online',
    for:'Brand-new businesses, solo operators, tradies',
    services: ['web','brand','seo'],
    adspend: 0,
    summary:'A solid website, a simple logo, and the SEO basics so people can find you.',
  },
  {
    id:'growth',
    name:'Growth',
    tag:'Most popular',
    for:'Small businesses ready to get leads coming in',
    services: ['web','seo','gads','smm'],
    adspend: 1500,
    summary:'A website that converts, Google Ads, SEO and a sensible social cadence.',
    popular: true,
  },
  {
    id:'scale',
    name:'Scale',
    tag:'The lot',
    for:'Established teams who want everything handled',
    services: ['web','seo','gads','mads','smm','it','ai','copy'],
    adspend: 4000,
    summary:'Full-stack: site, paid, organic, content, IT and AI automation — all managed.',
  },
];

const Calculator = () => {
  const [selected, setSelected] = useState(['web','seo','gads','smm']);
  const [adspend, setAdspend] = useState(1500);
  const [activePkg, setActivePkg] = useState('growth');
  const ref = useReveal();

  const toggle = (id) => {
    setActivePkg(null);
    setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  };

  const applyPackage = (pkg) => {
    setSelected(pkg.services);
    setAdspend(pkg.adspend);
    setActivePkg(pkg.id);
  };

  const { setup, monthly, mgmt } = useMemo(() => {
    let setup = 0, monthly = 0;
    selected.forEach(id => {
      const s = SERVICES_PRICING.find(x => x.id === id);
      setup += s.base;
      monthly += s.monthly;
    });
    // mgmt fee is on top of adspend if ads selected
    const hasAds = selected.includes('gads') || selected.includes('mads');
    const mgmt = hasAds ? adspend : 0;
    return { setup, monthly, mgmt };
  }, [selected, adspend]);

  const total12 = setup + (monthly * 12) + (mgmt * 12);

  return (
    <section id="pricing" className="section" style={{ position:'relative' }}>
      <div className="container" style={{ position:'relative' }}>
        <div ref={ref} className="reveal">
          <div style={{ marginBottom: 40, maxWidth: 720 }}>
            <span className="eyebrow">What it'd cost</span>
            <h2 className="h-xl" style={{ marginTop: 20 }}>
              Start with a package, or build your own.
            </h2>
            <p style={{ fontSize: 16, color:'var(--fg-2)', marginTop: 20, lineHeight: 1.55, maxWidth: 560 }}>
              Three common ways small businesses work with us. Pick the closest fit, then tweak below. No "starting from" asterisk traps.
            </p>
          </div>

          {/* Package presets */}
          <div className="grid-3" style={{ gap: 14, marginBottom: 36 }}>
            {PACKAGES.map(pkg => {
              const on = activePkg === pkg.id;
              const pkgSetup = pkg.services.reduce((a, id) => a + (SERVICES_PRICING.find(s => s.id === id)?.base || 0), 0);
              const pkgMonthly = pkg.services.reduce((a, id) => a + (SERVICES_PRICING.find(s => s.id === id)?.monthly || 0), 0);
              return (
                <button key={pkg.id} onClick={() => applyPackage(pkg)}
                  style={{
                    position:'relative', textAlign:'left', cursor:'pointer',
                    padding: 22, borderRadius: 16,
                    background: on ? 'var(--accent-tint)' : 'var(--card-bg)',
                    border: '1px solid ' + (on ? 'var(--accent-tint-strong)' : 'var(--line)'),
                    color:'var(--fg)',
                    transition:'all .25s cubic-bezier(.22,.61,.36,1)',
                    transform: on ? 'translateY(-2px)' : 'none',
                  }}>
                  {pkg.popular && (
                    <span className="mono" style={{
                      position:'absolute', top: -9, right: 16,
                      padding: '3px 8px', fontSize: 9, letterSpacing:'.14em',
                      background:'var(--accent)', color:'var(--bg)', borderRadius: 4,
                    }}>MOST POPULAR</span>
                  )}
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <div className="mono" style={{ fontSize:10, color: on ? 'var(--accent)' : 'var(--fg-3)', letterSpacing:'.16em', textTransform:'uppercase' }}>{pkg.tag}</div>
                  </div>
                  <div style={{ fontFamily:'var(--serif)', fontSize: 'clamp(24px, 3.5vw, 30px)', letterSpacing:'-0.02em', marginTop: 6, lineHeight: 1 }}>
                    {pkg.name}
                  </div>
                  <div style={{ fontSize: 12, color:'var(--fg-3)', marginTop: 6, lineHeight:1.45 }}>{pkg.for}</div>
                  <div style={{ fontSize: 13, color:'var(--fg-2)', marginTop: 14, lineHeight:1.5 }}>{pkg.summary}</div>

                  <div style={{
                    marginTop: 18, paddingTop: 14,
                    borderTop:'1px dashed var(--line-2)',
                    display:'flex', alignItems:'baseline', gap: 10, flexWrap:'wrap',
                  }}>
                    {pkgSetup > 0 && <div>
                      <span style={{ fontSize: 20, fontWeight:500, letterSpacing:'-0.02em' }}>${pkgSetup.toLocaleString()}</span>
                      <span className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginLeft: 4 }}>setup</span>
                    </div>}
                    {pkgMonthly > 0 && <div>
                      <span style={{ fontSize: 20, fontWeight:500, letterSpacing:'-0.02em', color: on ? 'var(--accent)' : 'var(--fg)' }}>${pkgMonthly.toLocaleString()}</span>
                      <span className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginLeft: 4 }}>/mo</span>
                    </div>}
                  </div>

                  <div style={{
                    marginTop: 14, display:'flex', alignItems:'center', gap: 6,
                    fontSize: 12, fontWeight:500,
                    color: on ? 'var(--accent)' : 'var(--fg-2)',
                  }}>
                    {on ? <><Icon name="check" size={12} stroke={2.5}/> Selected · tweak below</> : <>Choose {pkg.name} <Icon name="arrow" size={12}/></>}
                  </div>
                </button>
              );
            })}
          </div>

          <div className="split" style={{ gap: 32 }}>
            {/* services list */}
            <div className="glass" style={{ padding: 'clamp(20px, 3vw, 28px)' }}>
              <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', marginBottom: 14, textTransform:'uppercase' }}>
                01 · {activePkg ? `Tweak your ${PACKAGES.find(p => p.id === activePkg).name} package` : `Build your own (${selected.length} selected)`}
              </div>
              <div className="grid-2" style={{ gap: 8 }}>
                {SERVICES_PRICING.map(s => {
                  const on = selected.includes(s.id);
                  return (
                    <button key={s.id} onClick={() => toggle(s.id)}
                    style={{
                      display:'flex', alignItems:'center', gap: 12,
                      padding: '14px 16px', borderRadius: 12,
                      background: on ? 'var(--accent-tint)' : 'var(--card-bg)',
                      border: '1px solid ' + (on ? 'var(--accent-tint-strong)' : 'var(--line)'),
                      color: 'var(--fg)', textAlign:'left', transition: 'all .2s', cursor:'pointer',
                    }}>
                      <div style={{
                        width: 22, height: 22, borderRadius: 6,
                        background: on ? 'var(--accent)' : 'transparent',
                        border: '1px solid ' + (on ? 'var(--accent)' : 'var(--line-2)'),
                        display:'flex', alignItems:'center', justifyContent:'center',
                        color: 'var(--bg)', flexShrink: 0
                      }}>
                        {on && <Icon name="check" size={14} stroke={2.5}/>}
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 500 }}>{s.label}</div>
                        <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginTop: 2 }}>
                          {s.base ? `from $${s.base.toLocaleString()}` : ''}{s.base && s.monthly ? ' + ' : ''}{s.monthly ? `$${s.monthly.toLocaleString()}/mo` : ''}
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>

              {/* ad spend slider — only if ads selected */}
              {(selected.includes('gads') || selected.includes('mads')) && (
                <div style={{ marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                  <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', marginBottom: 14, textTransform:'uppercase' }}>
                    02 · Monthly ad spend
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap: 20 }}>
                    <input type="range" min={0} max={20000} step={100} value={adspend}
                      onChange={e => { setActivePkg(null); setAdspend(+e.target.value); }}
                      style={{ flex: 1, accentColor: 'oklch(0.72 0.2 290)' }}
                    />
                    <div style={{ fontSize: 'clamp(18px, 3vw, 22px)', fontWeight: 500, letterSpacing:'-0.02em', minWidth: 90, textAlign:'right' }}>
                      ${adspend.toLocaleString()}
                    </div>
                  </div>
                  <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginTop: 6 }}>
                    Passed through at cost. Management fee included in monthly retainer.
                  </div>
                </div>
              )}
            </div>

            {/* total panel */}
            <div className="glass" style={{ padding: 'clamp(20px, 3vw, 28px)', alignSelf:'flex-start' }}>
              <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', textTransform:'uppercase' }}>
                Your estimate
              </div>

              <div style={{ marginTop: 28, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em' }}>ONE-OFF SETUP</div>
                <div style={{ fontSize: 'clamp(34px, 5vw, 44px)', fontFamily:'var(--serif)', letterSpacing:'-0.03em', lineHeight: 1 }}>
                  ${setup.toLocaleString()}
                </div>
              </div>

              <div style={{ marginTop: 24 }}>
                <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em' }}>MONTHLY RETAINER</div>
                <div style={{ fontSize: 'clamp(34px, 5vw, 44px)', fontFamily:'var(--serif)', letterSpacing:'-0.03em', lineHeight: 1, color:'var(--accent)' }}>
                  ${monthly.toLocaleString()}<span style={{ fontSize: 16, color:'var(--fg-3)', fontFamily:'var(--sans)', marginLeft: 6 }}>/mo</span>
                </div>
                {mgmt > 0 && <div className="mono" style={{ fontSize: 11, color:'var(--fg-3)', marginTop: 8 }}>
                  + ${mgmt.toLocaleString()}/mo passed-through ad spend
                </div>}
              </div>

              <div style={{
                marginTop: 28, padding: 16,
                background:'var(--accent-tint)', borderRadius: 12,
                border:'1px solid var(--accent-tint-strong)'
              }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing:'.14em', color:'var(--fg-2)' }}>WHAT HAPPENS NEXT</div>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing:'-0.01em', marginTop: 8, lineHeight: 1.45, color:'var(--fg)' }}>
                  A 20-minute chat, then a written quote by email.
                </div>
                <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginTop: 8, lineHeight: 1.5 }}>
                  No sales pressure · cancel monthlies anytime · no lock-in
                </div>
              </div>

              <a href="#contact" className="btn btn-accent" style={{ width: '100%', justifyContent:'center', marginTop: 20 }}>
                Send this to us <Icon name="arrow" size={14}/>
              </a>
              <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginTop: 14, textAlign:'center' }}>
                Ballpark only — real quote comes after a chat.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Calculator = Calculator;