/* global React */
// Calculator Page — Material Volume Calculator (IS 456)
const { useState: useStateCalc, useMemo: useMemoCalc } = React;

/* ==================== HERO ==================== */
const CalcHero = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ padding: '72px 0 40px', borderBottom: '1px solid var(--ra-border)' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: 48, alignItems: 'end' }}>
        <div>
          <div className="ra-label ra-label-tick" style={{ marginBottom: 16 }}>
            Precision Engineering Tool
          </div>
          <h1 className="ra-display-l" style={{ lineHeight: 0.9 }}>
            Material Volume<br/>
            <span style={{ background: 'var(--ra-yellow)', padding: '0 14px' }}>Calculator.</span>
          </h1>
          <p style={{ fontSize: 18, color: 'var(--ra-muted)', maxWidth: 680, marginTop: 28, lineHeight: 1.6 }}>
            Calculate exact cement, sand and aggregate requirements for your project.
            Based on IS 456 standards.
          </p>
        </div>
        <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, textAlign: 'right', whiteSpace: 'nowrap' }}>
          IS 456 : 2000 COMPLIANT<br/>
          ULTRATECH · PREMIUM GRADE
        </div>
      </div>
    </div>
  </section>
  );
};

/* ==================== DATA ==================== */
// Mix ratios by volume (cement : sand : aggregate)
const GRADES = {
  M15: { ratio: '1 : 2 : 4',       cement: 1, sand: 2,    agg: 4    },
  M20: { ratio: '1 : 1.5 : 3',     cement: 1, sand: 1.5,  agg: 3    },
  M25: { ratio: '1 : 1 : 2',       cement: 1, sand: 1,    agg: 2    },
  M30: { ratio: '1 : 0.75 : 1.5',  cement: 1, sand: 0.75, agg: 1.5  },
  M35: { ratio: '1 : 0.5 : 1',     cement: 1, sand: 0.5,  agg: 1    },
};

// Conversion constants
const FT3_TO_M3     = 0.0283168;
const M3_TO_CFT     = 35.3147;
const DRY_FACTOR    = 1.54;
const CEMENT_DENSITY = 1440;  // kg / m³
const BAG_KG        = 50;

/* ==================== CORE CALC ==================== */
// wetVolM3 is in cubic meters; waste is a % number like 5
function computeMaterials(wetVolM3, gradeKey, wastePct) {
  const g = GRADES[gradeKey] || GRADES.M20;
  const dryVolM3 = wetVolM3 * DRY_FACTOR * (1 + (wastePct || 0) / 100);
  const sumParts = g.cement + g.sand + g.agg;

  const cementVolM3 = (dryVolM3 * g.cement) / sumParts;
  const cementKg    = cementVolM3 * CEMENT_DENSITY;
  const cementBags  = cementKg / BAG_KG;

  const sandVolM3   = (dryVolM3 * g.sand) / sumParts;
  const sandCFT     = sandVolM3 * M3_TO_CFT;

  const aggVolM3    = (dryVolM3 * g.agg) / sumParts;
  const aggCFT      = aggVolM3 * M3_TO_CFT;

  return {
    wet: wetVolM3,
    dry: dryVolM3,
    bags: Math.ceil(cementBags),
    cementKg: Math.round(cementKg),
    sandCFT: Math.round(sandCFT),
    aggCFT: Math.round(aggCFT),
    grade: gradeKey,
    ratio: g.ratio,
  };
}

/* ==================== SHARED FORM PARTS ==================== */
const Field = ({ label, unit, children, subtitle }) => (
  <div style={{ background: 'var(--ra-bg-alt)', padding: 18, border: '1px solid var(--ra-border)' }}>
    <label className="ra-label" style={{ color: 'var(--ra-muted)', display: 'flex', justifyContent: 'space-between' }}>
      <span>{label}</span>
      {unit && <span className="ra-mono" style={{ fontSize: 10, letterSpacing: 1.5 }}>{unit}</span>}
    </label>
    <div style={{ marginTop: 10 }}>{children}</div>
    {subtitle && (
      <div className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1, marginTop: 8 }}>
        {subtitle}
      </div>
    )}
  </div>
);

const NumInput = ({ value, onChange }) => (
  <input
    value={value}
    onChange={e => onChange(e.target.value)}
    inputMode="decimal"
    style={{
      width: '100%', background: 'transparent', border: 0,
      borderBottom: '2px solid var(--ra-ink)',
      padding: '4px 0', fontFamily: 'var(--ra-font-display)', fontWeight: 800,
      fontSize: 28, color: 'var(--ra-ink)', outline: 'none'
    }}
  />
);

const GradePicker = ({ value, onChange }) => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 8 }}>
    {Object.keys(GRADES).map(g => {
      const active = value === g;
      return (
        <button key={g} onClick={() => onChange(g)} type="button" style={{
          padding: '14px 10px',
          border: `2px solid ${active ? 'var(--ra-ink)' : 'var(--ra-border)'}`,
          background: active ? 'var(--ra-ink)' : '#fff',
          color: active ? '#fff' : 'var(--ra-ink)', cursor: 'pointer',
          fontFamily: 'var(--ra-font-display)', textAlign: 'left'
        }}>
          <div style={{ fontWeight: 800, fontSize: 20 }}>{g}</div>
          <div className="ra-mono" style={{
            fontSize: 9.5, color: active ? '#C9BFB2' : 'var(--ra-muted)',
            marginTop: 4, letterSpacing: 1
          }}>{GRADES[g].ratio}</div>
        </button>
      );
    })}
  </div>
);

/* ==================== ESTIMATOR ==================== */
const Estimator = () => {
  const isMobile = useIsMobile();
  const [type, setType] = useStateCalc('Slab');
  const [grade, setGrade] = useStateCalc('M20');
  const [waste, setWaste] = useStateCalc(5);

  // Slab
  const [sL, setSL] = useStateCalc('30');
  const [sW, setSW] = useStateCalc('20');
  const [sT, setST] = useStateCalc(6);  // inches

  // Column
  const [cDia, setCDia] = useStateCalc('12');  // inches
  const [cH, setCH] = useStateCalc('10');      // ft
  const [cN, setCN] = useStateCalc('4');

  // Foundation
  const [fL, setFL] = useStateCalc('10');
  const [fW, setFW] = useStateCalc('6');
  const [fD, setFD] = useStateCalc('3');

  const wetVolM3 = useMemoCalc(() => {
    if (type === 'Slab') {
      const l = parseFloat(sL) || 0;
      const w = parseFloat(sW) || 0;
      const t = (parseFloat(sT) || 0) / 12; // in -> ft
      return l * w * t * FT3_TO_M3;
    }
    if (type === 'Column') {
      const dFt = (parseFloat(cDia) || 0) / 12;
      const h = parseFloat(cH) || 0;
      const n = parseFloat(cN) || 0;
      const area = Math.PI * (dFt / 2) ** 2;
      return area * h * n * FT3_TO_M3;
    }
    // Foundation
    const l = parseFloat(fL) || 0;
    const w = parseFloat(fW) || 0;
    const d = parseFloat(fD) || 0;
    return l * w * d * FT3_TO_M3;
  }, [type, sL, sW, sT, cDia, cH, cN, fL, fW, fD]);

  const r = useMemoCalc(
    () => computeMaterials(wetVolM3, grade, parseFloat(waste) || 0),
    [wetVolM3, grade, waste]
  );

  // WhatsApp message
  const waMessage = encodeURIComponent(
    `Hello Raghuveer Agencies,\n\nPlease send a quotation for the below materials:\n\n` +
    `Structure: ${type}\n` +
    `Grade: ${r.grade} (${r.ratio})\n` +
    `Wet Volume: ${r.wet.toFixed(2)} m³\n` +
    `Cement: ${r.bags} bags (50 kg · UltraTech)\n` +
    `M-Sand: ${r.sandCFT} CFT\n` +
    `20mm Aggregate: ${r.aggCFT} CFT\n\n` +
    `Project location: `
  );
  const waLink = `https://wa.me/919448055225?text=${waMessage}`;

  return (
    <section style={{ padding: '48px 0 80px' }}>
      <div className="ra-container">
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.15fr 1fr',
          border: '1px solid var(--ra-border)', background: '#fff'
        }}>
          {/* ========== LEFT : INPUTS ========== */}
          <div style={{ padding: 40 }}>
            {/* STRUCTURE TYPE TABS */}
            <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 10 }}>
              01 / STRUCTURE TYPE
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
              border: '1px solid var(--ra-border)', marginBottom: 36
            }}>
              {['Slab', 'Column', 'Foundation'].map((opt, i) => {
                const active = type === opt;
                return (
                  <button key={opt} type="button" onClick={() => setType(opt)} style={{
                    padding: '22px 14px',
                    background: active ? 'var(--ra-yellow)' : '#fff',
                    border: 0,
                    borderRight: i < 2 ? '1px solid var(--ra-border)' : 'none',
                    cursor: 'pointer', fontFamily: 'var(--ra-font-display)',
                    fontWeight: 800, textTransform: 'uppercase', fontSize: 14, letterSpacing: 1.5,
                    color: 'var(--ra-ink)', display: 'flex', flexDirection: 'column',
                    alignItems: 'center', gap: 10
                  }}>
                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="2">
                      {opt === 'Slab' && <rect x="4" y="10" width="20" height="8"/>}
                      {opt === 'Column' && <rect x="10" y="4" width="8" height="20"/>}
                      {opt === 'Foundation' && <><rect x="4" y="18" width="20" height="6"/><rect x="9" y="6" width="10" height="12"/></>}
                    </svg>
                    {opt}
                  </button>
                );
              })}
            </div>

            {/* CONCRETE GRADE */}
            <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 10 }}>
              02 / CONCRETE GRADE
            </div>
            <div style={{ marginBottom: 32 }}>
              <GradePicker value={grade} onChange={setGrade}/>
            </div>

            {/* DIMENSIONS  */}
            <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 11, letterSpacing: 2, marginBottom: 10 }}>
              03 / DIMENSIONS
            </div>

            {type === 'Slab' && (
              <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                  <Field label="Length" unit="FT">
                    <NumInput value={sL} onChange={setSL}/>
                  </Field>
                  <Field label="Width" unit="FT">
                    <NumInput value={sW} onChange={setSW}/>
                  </Field>
                </div>
                <div style={{ background: 'var(--ra-bg-alt)', padding: 18, border: '1px solid var(--ra-border)', marginBottom: 14 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                    <label className="ra-label" style={{ color: 'var(--ra-muted)' }}>Thickness</label>
                    <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 32, color: 'var(--ra-ink)' }}>
                      {sT}<span style={{ fontSize: 14, color: 'var(--ra-muted)', marginLeft: 4 }}>IN</span>
                    </div>
                  </div>
                  <input
                    type="range" min="4" max="12" step="0.5"
                    value={sT}
                    onChange={e => setST(parseFloat(e.target.value))}
                    style={{
                      width: '100%', accentColor: 'var(--ra-ink)', cursor: 'pointer'
                    }}
                  />
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                    <span className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1 }}>4"</span>
                    <span className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1 }}>12"</span>
                  </div>
                </div>
              </>
            )}

            {type === 'Column' && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginBottom: 14 }}>
                <Field label="Diameter" unit="IN"><NumInput value={cDia} onChange={setCDia}/></Field>
                <Field label="Height" unit="FT"><NumInput value={cH} onChange={setCH}/></Field>
                <Field label="No. of Columns" unit="NOS"><NumInput value={cN} onChange={setCN}/></Field>
              </div>
            )}

            {type === 'Foundation' && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginBottom: 14 }}>
                <Field label="Length" unit="FT"><NumInput value={fL} onChange={setFL}/></Field>
                <Field label="Width" unit="FT"><NumInput value={fW} onChange={setFW}/></Field>
                <Field label="Depth" unit="FT"><NumInput value={fD} onChange={setFD}/></Field>
              </div>
            )}

            {/* WASTE MARGIN */}
            <div style={{ background: 'var(--ra-bg-alt)', padding: 18, border: '1px solid var(--ra-border)', marginBottom: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                <label className="ra-label" style={{ color: 'var(--ra-muted)' }}>Waste Margin</label>
                <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 28, color: 'var(--ra-ink)' }}>
                  {waste}<span style={{ fontSize: 14, color: 'var(--ra-muted)' }}>%</span>
                </div>
              </div>
              <input
                type="range" min="0" max="15" step="1"
                value={waste}
                onChange={e => setWaste(parseFloat(e.target.value))}
                style={{ width: '100%', accentColor: 'var(--ra-ink)', cursor: 'pointer' }}
              />
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                <span className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1 }}>0%</span>
                <span className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1 }}>Recommended 5%</span>
                <span className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1 }}>15%</span>
              </div>
            </div>

            {/* TECH SPECS */}
            <div style={{ background: 'var(--ra-bg-alt)', padding: 18, borderLeft: '3px solid var(--ra-yellow)' }}>
              <div className="ra-label" style={{ marginBottom: 10 }}>Technical Specs Used</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
                {[
                  ['Dry Volume Multiplier', '1.54'],
                  ['Cement Density', '1440 kg/m³'],
                  ['Standard', 'IS 456 : 2000'],
                ].map(([k, v]) => (
                  <div key={k}>
                    <div className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-muted)', letterSpacing: 1.5 }}>{k}</div>
                    <div style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 16, marginTop: 4, whiteSpace: 'nowrap' }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ========== RIGHT : LIVE RESULTS ========== */}
          <div style={{ background: 'var(--ra-ink)', color: '#fff', padding: 40, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
              <div>
                <div className="ra-label" style={{ color: 'var(--ra-yellow)' }}>Material Summary</div>
                <div className="ra-kn-label" style={{ color: '#8A8A8A', marginTop: 8 }}>ಸಾಮಗ್ರಿ ಸಾರಾಂಶ</div>
              </div>
              <div className="ra-mono" style={{ color: '#8A8A8A', fontSize: 11, letterSpacing: 2, textAlign: 'right', whiteSpace: 'nowrap' }}>
                {type.toUpperCase()} · {r.grade}<br/>
                <span style={{ color: 'var(--ra-yellow)' }}>● LIVE</span>
              </div>
            </div>

            {/* VOLUME SUMMARY */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2,
              background: '#2A2A2A', border: '1px solid #2A2A2A', marginBottom: 20
            }}>
              <div style={{ background: 'var(--ra-ink)', padding: '18px 20px' }}>
                <div className="ra-mono" style={{ fontSize: 10, color: '#8A8A8A', letterSpacing: 2 }}>WET VOLUME</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                  <span style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 32, color: '#fff' }}>
                    {r.wet.toFixed(2)}
                  </span>
                  <span className="ra-mono" style={{ fontSize: 11, color: '#8A8A8A', letterSpacing: 2 }}>M³</span>
                </div>
              </div>
              <div style={{ background: 'var(--ra-ink)', padding: '18px 20px' }}>
                <div className="ra-mono" style={{ fontSize: 10, color: '#8A8A8A', letterSpacing: 2 }}>DRY VOLUME × 1.54</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                  <span style={{ fontFamily: 'var(--ra-font-display)', fontWeight: 800, fontSize: 32, color: 'var(--ra-yellow)' }}>
                    {r.dry.toFixed(2)}
                  </span>
                  <span className="ra-mono" style={{ fontSize: 11, color: '#8A8A8A', letterSpacing: 2 }}>M³</span>
                </div>
              </div>
            </div>

            {/* THREE RESULT CARDS */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2, background: '#2A2A2A', marginBottom: 20 }}>
              {[
                {
                  no: '01',
                  name: 'Cement Requirement',
                  sub: 'UltraTech Premium Grade',
                  val: r.bags,
                  unit: 'BAGS',
                  tail: `${(r.bags * 50).toLocaleString('en-IN')} kg · 50kg bag`,
                },
                {
                  no: '02',
                  name: 'Sand Requirement',
                  sub: 'M-Sand Grade A',
                  val: r.sandCFT,
                  unit: 'CFT',
                  tail: `${(r.sandCFT * 0.0283168).toFixed(2)} m³ equivalent`,
                },
                {
                  no: '03',
                  name: 'Aggregate 20mm',
                  sub: 'Crushed Granite',
                  val: r.aggCFT,
                  unit: 'CFT',
                  tail: `${(r.aggCFT * 0.0283168).toFixed(2)} m³ equivalent`,
                },
              ].map(c => (
                <div key={c.no} style={{
                  background: 'var(--ra-ink)', padding: '20px 22px',
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center'
                }}>
                  <div>
                    <div className="ra-mono" style={{ fontSize: 10, color: 'var(--ra-yellow)', letterSpacing: 2 }}>
                      {c.no} · {c.name.toUpperCase()}
                    </div>
                    <div style={{
                      fontFamily: 'var(--ra-font-display)', fontWeight: 700,
                      textTransform: 'uppercase', fontSize: 18, color: '#fff',
                      marginTop: 6, letterSpacing: 0.5
                    }}>{c.sub}</div>
                    <div className="ra-mono" style={{ fontSize: 10, color: '#8A8A8A', letterSpacing: 1.5, marginTop: 4 }}>
                      {c.tail}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                    <span style={{
                      fontFamily: 'var(--ra-font-display)', fontWeight: 900,
                      fontSize: 44, lineHeight: 1, color: 'var(--ra-yellow)'
                    }}>
                      {isFinite(c.val) ? c.val.toLocaleString('en-IN') : 0}
                    </span>
                    <span className="ra-mono" style={{ fontSize: 11, color: '#8A8A8A', letterSpacing: 2, marginLeft: 8 }}>
                      {c.unit}
                    </span>
                  </div>
                </div>
              ))}
            </div>

            {/* DISCLAIMER */}
            <div style={{
              fontSize: 12, color: '#8A8A8A', lineHeight: 1.55,
              padding: '12px 14px', border: '1px dashed #2A2A2A', marginBottom: 18
            }}>
              Calculations based on IS 456 standards. Quantities may vary ±5%
              depending on site conditions, mix design and material properties.
            </div>

            {/* CTA */}
            <a
              href={waLink}
              target="_blank"
              rel="noopener noreferrer"
              className="ra-btn ra-btn--yellow ra-btn--lg"
              style={{ width: '100%', justifyContent: 'center' }}
            >
              Whatsapp My Estimate
              <RaIcon name="arrow-right" size={14} stroke={2.5}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ==================== TRUST CARDS ==================== */
const CalcTrustCards = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{ padding: '0 0 120px' }}>
    <div className="ra-container">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 24 }}>
        {[
          {
            no: '01',
            t: 'Authorized Dealer',
            s: "Raghuveer Agencies is Mysuru's trusted UltraTech partner since 1972. Batch-traceable, BIS-licensed materials.",
            icon: (
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M20 4L32 10V20C32 27 26 33 20 36C14 33 8 27 8 20V10L20 4Z"/>
                <path d="M14 20L18 24L26 16"/>
              </svg>
            ),
          },
          {
            no: '02',
            t: 'Scheduled Delivery',
            s: 'Materials delivered to your site across Mysuru and Mandya. Coordinated with your project timeline.',
            icon: (
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5">
                <rect x="4" y="14" width="18" height="14"/>
                <path d="M22 18H30L34 24V28H22V18Z"/>
                <circle cx="12" cy="30" r="3"/><circle cx="28" cy="30" r="3"/>
              </svg>
            ),
          },
          {
            no: '03',
            t: 'Expert Support',
            s: "Not sure about mix ratios? Call our team for guidance — 54 years of on-site technical knowledge.",
            icon: (
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5">
                <circle cx="20" cy="14" r="6"/>
                <path d="M8 34C8 28 13 24 20 24C27 24 32 28 32 34"/>
              </svg>
            ),
          },
        ].map((c, i) => (
          <div key={c.no} style={{
            background: i === 0 ? 'var(--ra-yellow)' : '#fff',
            border: '1px solid var(--ra-border)', padding: 36,
            display: 'flex', flexDirection: 'column', gap: 20, minHeight: 260
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div className="ra-mono" style={{
                fontSize: 11, letterSpacing: 2,
                color: i === 0 ? 'var(--ra-yellow-ink)' : 'var(--ra-muted)'
              }}>{c.no}</div>
              <div style={{ color: 'var(--ra-ink)' }}>{c.icon}</div>
            </div>
            <h3 className="ra-h1" style={{ fontSize: 24, marginTop: 'auto' }}>{c.t}</h3>
            <p style={{
              color: i === 0 ? 'var(--ra-yellow-ink)' : 'var(--ra-muted)',
              fontSize: 14.5, lineHeight: 1.65, margin: 0
            }}>{c.s}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { CalcHero, Estimator, CalcTrustCards });