// Pricing summary — ranges by service category (no per-property breakdown).
// Data derived from the rate cards, reduced to min/max across all properties.

function Pricing() {
  const groups = [
    {
      group: 'Carpet',
      rows: [
        { s: 'Vacant carpet cleaning',          note: 'Pre-condition, extraction, deodorizer. 1–3 bed.',           range: '$55 – $150' },
        { s: 'Occupied / renewal cleaning',     note: 'Same inclusions, renewal turns.',                            range: '$65 – $130' },
        { s: 'Deep cleaning · stains · repair', note: 'Stretch, re-seam, deep stain treatment.',                   range: '$35 – $95' },
        { s: 'Pet damage / urine treatment',    note: 'Enzymatic treatment and re-clean.',                          range: '$75 – $150' },
      ],
    },
    {
      group: 'Hard floors',
      rows: [
        { s: 'Tile & grout cleaning',       note: 'Degrease, extract, seal on request.',                 range: '$145 – $250' },
        { s: 'Vinyl cleaning & stripping',  note: 'Strip and re-coat. Wax removal quoted separately.',   range: '$145 – $250' },
      ],
    },
    {
      group: 'Air',
      rows: [
        { s: 'A/C duct cleaning',   note: 'Supply / return + grille paint + deodorizer.', range: '$135 – $225' },
        { s: 'Dryer vent cleaning', note: 'Per unit. Roof-side vents from $200.',         range: '$65 – $200' },
      ],
    },
    {
      group: 'Water damage · 24/7',
      accent: true,
      rows: [
        { s: 'Emergency water extraction',     note: 'Includes mildewcide, deodorizer, sanitizing.', range: 'from $85' },
        { s: 'Blowers',                        note: 'Per day on-site.',                             range: '$35 – $45' },
        { s: 'Dehumidifier',                   note: 'Per day on-site.',                             range: '$150 – $250' },
        { s: 'Ozone / air scrubber',           note: 'Per day on-site.',                             range: '$100 – $225' },
        { s: 'Remove & re-install padding',    note: 'Priced by affected area.',                     range: 'from $85' },
      ],
    },
    {
      group: 'Property-wide',
      rows: [
        { s: 'A/C lines — full property',     note: 'Quoted flat after walk-through.', range: 'Estimate' },
        { s: 'Dryer vents — full property',   note: 'Quoted flat after walk-through.', range: 'Estimate' },
        { s: 'Pool / deck furniture',         note: 'Quoted flat after walk-through.', range: 'Estimate' },
      ],
    },
  ];

  return (
    <section id="pricing" style={{ padding: '88px 0 96px', background: 'var(--bg-soft)' }}>
      <div className="wrap-wide" style={{ marginBottom: 32 }}>
        <div className="eyebrow">Price ranges</div>
        <h2 className="h-1" style={{ margin: '8px 0 14px', maxWidth: 900 }}>
          Transparent pricing. <span style={{ color:'var(--muted)' }}>Final quote after walk-through.</span>
        </h2>
        <p className="sub" style={{ maxWidth: 720, margin: 0 }}>
          Ranges reflect our active rate cards across South Florida multifamily.
          The exact number depends on unit size, bedroom count and scope.
          Property-wide work is always quoted flat in writing.
        </p>
      </div>

      <div className="wrap-wide">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 16,
        }} className="price-grid">
          {groups.map(g => (
            <div key={g.group} style={{
              background: g.accent ? 'linear-gradient(180deg, #0f2735 0%, #18465e 100%)' : '#fff',
              color: g.accent ? '#fff' : 'var(--ink)',
              borderRadius: 'var(--radius-xl)',
              border: g.accent ? 'none' : '1px solid var(--line-soft)',
              padding: '28px 30px 22px',
              gridColumn: g.accent ? '1 / -1' : 'auto',
            }}>
              <div style={{
                fontSize: 12, fontWeight: 600,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                color: g.accent ? 'rgba(255,255,255,0.7)' : 'var(--muted)',
                marginBottom: 18,
              }}>{g.group}</div>

              <div style={{ display: g.accent ? 'grid' : 'block', gridTemplateColumns: g.accent ? 'repeat(auto-fill, minmax(240px, 1fr))' : undefined, gap: g.accent ? 10 : 0 }}>
                {g.rows.map((r, i) => (
                  <div key={r.s} style={{
                    display: 'grid',
                    gridTemplateColumns: g.accent ? '1fr' : '1.3fr 2fr auto',
                    gap: g.accent ? 4 : 20,
                    alignItems: 'baseline',
                    padding: g.accent ? '14px 16px' : '16px 0',
                    background: g.accent ? 'rgba(255,255,255,0.06)' : 'transparent',
                    borderRadius: g.accent ? 10 : 0,
                    borderTop: (!g.accent && i > 0) ? '1px solid var(--line-soft)' : 'none',
                  }} className="price-row">
                    <div style={{
                      fontWeight: 500,
                      letterSpacing: '-0.01em',
                      fontSize: g.accent ? 15 : 16,
                      color: g.accent ? '#fff' : 'var(--ink)',
                    }}>{r.s}</div>
                    <div style={{
                      fontSize: g.accent ? 12 : 14,
                      color: g.accent ? 'rgba(255,255,255,0.6)' : 'var(--muted)',
                      lineHeight: 1.4,
                    }}>{r.note}</div>
                    <div style={{
                      fontFamily: 'var(--mono)',
                      fontSize: g.accent ? 14 : 14,
                      fontWeight: 500,
                      color: g.accent ? '#7dd3fc' : 'var(--ink)',
                      whiteSpace: 'nowrap',
                      marginTop: g.accent ? 4 : 0,
                    }}>{r.range}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Footer CTA */}
        <div style={{
          marginTop: 24,
          background: '#fff',
          border: '1px solid var(--line-soft)',
          borderRadius: 'var(--radius-xl)',
          padding: '22px 28px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 16, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 17, letterSpacing: '-0.015em' }}>Want a precise number?</div>
            <div style={{ color: 'var(--muted)', fontSize: 14, marginTop: 2 }}>Send the unit list and we'll return a line-itemized quote within the business day.</div>
          </div>
          <a href="#quote" className="btn btn-primary">Request a quote <Icon.Chevron/></a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .price-grid { grid-template-columns: 1fr !important; }
          .price-grid > div { grid-column: auto !important; }
        }
        @media (max-width: 640px) {
          .price-row { grid-template-columns: 1fr !important; gap: 4px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Pricing });