// Winkz Designs 2026, home sections: Cost calculator, Testimonials, Security, FAQ
(function () {
  const { useState, useEffect, useRef } = React;
  const { Icon, Reveal, Eyebrow, SectionHead, Panel, Section, Grad } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  const fmt = (n) => '$' + Math.round(n).toLocaleString();
  function useTween(target, dur = 600) {
    const [v, setV] = useState(target);
    const from = useRef(target);
    useEffect(() => {
      const start = Date.now(); const a = from.current, b = target; let f;
      const loop = () => { const p = Math.min(1, (Date.now() - start) / dur); const e = 1 - Math.pow(1 - p, 3); setV(a + (b - a) * e); if (p < 1) f = requestAnimationFrame(loop); else from.current = b; };
      f = requestAnimationFrame(loop); return () => cancelAnimationFrame(f);
    }, [target]);
    return v;
  }

  function Slider({ label, value, min, max, onChange, fmt: f }) {
    const pct = ((value - min) / (max - min)) * 100;
    return (
      <div style={{ marginBottom: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}><Grad>{f ? f(value) : value}</Grad></span>
        </div>
        <input type="range" min={min} max={max} value={value} onChange={(e) => onChange(+e.target.value)}
          style={{ width: '100%', height: 6, borderRadius: 999, appearance: 'none', outline: 'none', cursor: 'pointer', background: `linear-gradient(90deg, #F23BFE, #2DE3EA ${pct}%, rgba(255,255,255,0.1) ${pct}%)` }} />
      </div>
    );
  }

  /* ── COST CALCULATOR ── */
  function CostCalculator({ onNavigate }) {
    const [seats, setSeats] = useState(10);
    const [tools, setTools] = useState(4);
    const MO = 48, perSeat = 34, hosting = 120;
    const saasMo = seats * perSeat * tools;
    const build = 7500 + tools * 2600;
    const saasTotal = saasMo * MO;
    const winkzTotal = build + hosting * MO;
    const savings = Math.max(0, saasTotal - winkzTotal);
    const breakeven = saasMo > hosting ? Math.ceil(build / (saasMo - hosting)) : MO;

    const tSaas = useTween(saasTotal), tWinkz = useTween(winkzTotal), tSave = useTween(savings);

    // chart
    const W = 520, H = 190, padB = 24, padL = 6;
    const maxY = Math.max(saasMo * MO, winkzTotal) * 1.05;
    const x = (m) => padL + (m / MO) * (W - padL);
    const y = (val) => H - padB - (val / maxY) * (H - padB - 8);
    const saasPts = []; const winkzPts = [];
    for (let m = 0; m <= MO; m += 2) { saasPts.push(`${x(m).toFixed(1)},${y(saasMo * m).toFixed(1)}`); winkzPts.push(`${x(m).toFixed(1)},${y(build + hosting * m).toFixed(1)}`); }
    const beX = x(Math.min(breakeven, MO)), beY = y(build + hosting * Math.min(breakeven, MO));

    return (
      <Section style={{ background: 'linear-gradient(180deg, transparent, rgba(45,227,234,0.04), transparent)' }}>
        <SectionHead eyebrow="Do the math" title={<>Owning beats <Grad>renting.</Grad></>} sub="Drag the sliders. See what stacked monthly subscriptions really cost over four years versus one custom system you own outright." center max={640} />
        <Reveal>
          <div style={{ borderRadius: 24, padding: 1, background: 'linear-gradient(135deg, rgba(242,59,254,0.4), rgba(45,227,234,0.4))', boxShadow: '0 40px 100px -50px rgba(242,59,254,0.5)' }}>
            <div style={{ borderRadius: 23, background: 'linear-gradient(165deg,#111117,#0A0A0D)', padding: 'clamp(24px,3.5vw,40px)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 40, alignItems: 'center' }} className="cc-grid">
                {/* controls + totals */}
                <div>
                  <Slider label="Team size" value={seats} min={2} max={50} onChange={setSeats} f={(v) => v + ' people'} />
                  <Slider label="Tools you'd replace" value={tools} min={1} max={8} onChange={setTools} f={(v) => v + (v === 1 ? ' tool' : ' tools')} />
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 8 }}>
                    <div style={{ padding: '14px 16px', borderRadius: 13, border: '1px solid rgba(255,90,110,0.25)', background: 'rgba(255,90,110,0.06)' }}>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', marginBottom: 5 }}>SaaS · 4 yrs</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: '#FF7A88' }}>{fmt(tSaas)}</div>
                    </div>
                    <div style={{ padding: '14px 16px', borderRadius: 13, border: '1px solid rgba(45,227,160,0.28)', background: 'rgba(45,227,160,0.06)' }}>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', marginBottom: 5 }}>A Winkz system</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: '#2DE3A0' }}>{fmt(tWinkz)}</div>
                    </div>
                  </div>
                </div>
                {/* chart */}
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                    <div><div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>YOU SAVE OVER 4 YEARS</div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(30px,4vw,44px)', lineHeight: 1 }}><Grad>{fmt(tSave)}</Grad></div></div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--winkz-cyan)', border: '1px solid rgba(45,227,234,0.3)', borderRadius: 999, padding: '5px 10px' }}>breaks even · month {Math.min(breakeven, MO)}</span>
                  </div>
                  <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block', overflow: 'visible' }}>
                    <defs><linearGradient id="ccS" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FF5A6E" stopOpacity="0.28" /><stop offset="1" stopColor="#FF5A6E" stopOpacity="0" /></linearGradient></defs>
                    <polygon points={`${x(0)},${H - padB} ${saasPts.join(' ')} ${x(MO)},${H - padB}`} fill="url(#ccS)" style={{ transition: 'all .4s ease' }} />
                    <polyline points={saasPts.join(' ')} fill="none" stroke="#FF5A6E" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'all .4s ease' }} />
                    <polyline points={winkzPts.join(' ')} fill="none" stroke="#2DE3A0" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'all .4s ease' }} />
                    <line x1={beX} y1="6" x2={beX} y2={H - padB} stroke="rgba(255,255,255,0.2)" strokeDasharray="3 3" />
                    <circle cx={beX} cy={beY} r="4.5" fill="#2DE3EA" stroke="#08080A" strokeWidth="2" />
                    <text x={padL} y={H - 6} fill="#667" fontSize="10" fontFamily="var(--font-mono)">now</text>
                    <text x={W - 30} y={H - 6} fill="#667" fontSize="10" fontFamily="var(--font-mono)">yr 4</text>
                  </svg>
                  <div style={{ display: 'flex', gap: 18, marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 12, height: 3, borderRadius: 2, background: '#FF5A6E' }} />Monthly subscriptions</span>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 12, height: 3, borderRadius: 2, background: '#2DE3A0' }} />Your Winkz system</span>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 26, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14 }}>
                <span style={{ fontSize: 14, color: 'var(--text-secondary)', maxWidth: 460 }}>Estimates for illustration, and once it's built, it's yours. No per-seat tax as your team grows.</span>
                <button onClick={() => onNavigate('contact')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 22px', borderRadius: 11, cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, color: '#08080A', background: GRAD, border: 'none' }}>Get a real quote <Icon n="ArrowUpRight" s={15} color="#08080A" /></button>
              </div>
            </div>
          </div>
        </Reveal>
        <style>{`@media (max-width:900px){.cc-grid{grid-template-columns:1fr!important;gap:28px!important}}`}</style>
      </Section>
    );
  }

  /* ── TESTIMONIALS ── */
  const QUOTES = [
    ['Our old site never showed up on Google. The new one books jobs on its own and we’re running two weeks out.', 'Dana Whitfield', 'Owner · Beacon Plumbing', 'DW'],
    ['Winkz replaced four monthly subscriptions with one tool we actually own. It’s cheaper every month and it’s ours.', 'Marcus Lee', 'Founder · Maple & Co.', 'ML'],
    ['The CRM was built around how we sell, not the other way around. Our close rate is up and nothing feels cluttered.', 'Priya Nair', 'Head of Sales · Relay', 'PN'],
    ['Their AI assistant answers after hours and books the job while we sleep. It won us clients we’d have missed.', 'Owen Brooks', 'GM · Copperline Electric', 'OB'],
  ]
  function GoogleRating() {
    const star = (i) => (
      <svg key={i} width="17" height="17" viewBox="0 0 24 24" fill="#FBBC04" aria-hidden="true" style={{ display: 'block' }}>
        <path d="M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.13 6.57L12 17.46l-5.91 3.1 1.13-6.57L2.45 9.34l6.6-.96L12 2.4z" />
      </svg>
    );
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 2 }}>{[0, 1, 2, 3, 4].map(star)}</div>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, color: 'var(--text-primary)' }}>5.0</span>
        <span style={{ width: 1, height: 14, background: 'rgba(255,255,255,0.14)' }} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12.5, color: 'var(--text-muted)' }}>
          <svg width="14" height="14" viewBox="0 0 48 48" aria-hidden="true" style={{ display: 'block' }}>
            <path fill="#4285F4" d="M45.1 24.5c0-1.6-.14-3.16-.42-4.66H24v8.82h11.83c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.1c4.16-3.83 6.56-9.47 6.56-16.32z" />
            <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.32l-7.1-5.52c-1.97 1.32-4.49 2.1-7.46 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" />
            <path fill="#FBBC04" d="M11.69 28.19A13.2 13.2 0 0 1 11 24c0-1.46.25-2.87.69-4.19v-5.7H4.34A22 22 0 0 0 2 24c0 3.55.85 6.91 2.34 9.89l7.35-5.7z" />
            <path fill="#EA4335" d="M24 10.74c3.23 0 6.13 1.11 8.41 3.29l6.3-6.3C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.11l7.35 5.7C13.42 14.61 18.27 10.74 24 10.74z" />
          </svg>
          Google review
        </span>
      </div>
    );
  }

  function Testimonials() {
    return (
      <Section>
        <SectionHead eyebrow="Proof" title={<>Built it. Shipped it. <Grad>They noticed.</Grad></>} center max={620} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }} className="tst-grid">
          {QUOTES.map((q, i) => (
            <Reveal key={i} delay={i * 60}>
              <Panel pad={30} hover style={{ height: '100%' }}>
                <GoogleRating />
                <p style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(17px,1.6vw,21px)', lineHeight: 1.4, letterSpacing: '-0.01em', margin: '0 0 22px', color: 'var(--text-primary)' }}>“{q[0]}”</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 42, height: 42, borderRadius: 999, background: GRAD, color: '#08080A', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, display: 'grid', placeItems: 'center' }}>{q[3]}</span>
                  <div><div style={{ fontWeight: 600, fontSize: 15 }}>{q[1]}</div><div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{q[2]}</div></div>
                </div>
              </Panel>
            </Reveal>
          ))}
        </div>
        <style>{`@media (max-width:760px){.tst-grid{grid-template-columns:1fr!important}}`}</style>
      </Section>
    );
  }

  /* ── SECURITY & DATA OWNERSHIP ── */
  const SEC = [
    ['KeyRound', 'You own the data', 'Everything lives on your accounts and infrastructure, never rented back to you.'],
    ['Lock', 'Encrypted end to end', 'Encryption in transit and at rest, with secrets kept out of the codebase.'],
    ['Users', 'Role-based access', 'Your team sees exactly what they should, nothing more, nothing less.'],
    ['DatabaseBackup', 'Backed up & recoverable', 'Automated backups and a clear recovery path, documented in plain English.'],
    ['FileLock2', 'No lock-in', 'Full source and docs handed over. Walk away anytime, it\u2019s genuinely yours.'],
    ['ShieldCheck', 'Built to comply', 'Structured for the standards your industry answers to, from day one.'],
  ];
  function Security() {
    return (
      <Section style={{ background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'start' }} className="sec-grid">
          <div>
            <Reveal><Eyebrow>Security &amp; ownership</Eyebrow></Reveal>
            <Reveal delay={60}><h2 style={{ fontSize: 'clamp(32px,4vw,50px)', lineHeight: 1.03, margin: '18px 0 0' }}>Your data. Your keys.<br /><Grad>Your software.</Grad></h2></Reveal>
            <Reveal delay={120}><p style={{ fontSize: 17, color: 'var(--text-secondary)', lineHeight: 1.65, margin: '20px 0 0', maxWidth: 380 }}>We build on your accounts, hand over the source, and lock nothing behind us. Secure by default, and yours to keep.</p></Reveal>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="sec-cards">
            {SEC.map((s, i) => (
              <Reveal key={i} delay={i * 40}>
                <div style={{ padding: '22px 20px', borderRadius: 15, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)', height: '100%' }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(45,227,234,0.12)', border: '1px solid rgba(45,227,234,0.24)', display: 'grid', placeItems: 'center', marginBottom: 14 }}><Icon n={s[0]} s={19} color="#2DE3EA" /></span>
                  <h4 style={{ fontSize: 16, margin: '0 0 6px' }}>{s[1]}</h4>
                  <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.55, margin: 0 }}>{s[2]}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <style>{`@media (max-width:900px){.sec-grid{grid-template-columns:1fr!important;gap:32px!important}}@media (max-width:520px){.sec-cards{grid-template-columns:1fr!important}}`}</style>
      </Section>
    );
  }

  /* ── FAQ ── */
  const FAQS = [
    ['How much does a project cost?', 'It depends on scope, but we scope it clearly before you commit, fixed, upfront, no surprises. Discovery is free, and you only pay once you\u2019re happy with each phase.'],
    ['How long does it take?', 'Most websites ship in 3 to 6 weeks; custom software and CRMs typically run 6 to 12 weeks in short, weekly iterations you can see and try.'],
    ['Do I really own everything?', 'Yes. The site, the code, the data and the systems live on your accounts. We hand over full source and plain-English docs, no lock-in.'],
    ['What if I already have a website?', 'We\u2019ll rebuild and migrate it, keep what works, and wire it for modern search and AI so you actually get found.'],
    ['Can you connect to the tools we already use?', 'Almost always. Integrations are part of the build, your CRM, calendar, payments and email talking to each other from day one.'],
    ['What happens after launch?', 'We hand off with training and docs, and stay available for support and iteration, but you\u2019re never dependent on us to keep running.'],
  ];
  function FAQ({ onNavigate }) {
    const [open, setOpen] = useState(0);
    return (
      <Section>
        <SectionHead eyebrow="Questions" title={<>Good to <Grad>know.</Grad></>} center max={560} />
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          {FAQS.map((f, i) => {
            const on = open === i;
            return (
              <Reveal key={i} delay={i * 30}>
                <div onClick={() => setOpen(on ? -1 : i)} style={{ borderRadius: 16, border: '1px solid ' + (on ? 'rgba(45,227,234,0.3)' : 'rgba(255,255,255,0.08)'), background: on ? 'rgba(45,227,234,0.04)' : 'rgba(255,255,255,0.02)', padding: '20px 24px', marginBottom: 12, cursor: 'pointer', transition: 'all .3s' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(16px,1.5vw,19px)', color: 'var(--text-primary)' }}>{f[0]}</span>
                    <span style={{ width: 30, height: 30, borderRadius: 999, flexShrink: 0, display: 'grid', placeItems: 'center', background: on ? GRAD : 'rgba(255,255,255,0.06)', transition: 'all .3s', transform: on ? 'rotate(45deg)' : 'none' }}><Icon n="Plus" s={15} color={on ? '#08080A' : '#889'} /></span>
                  </div>
                  <div style={{ maxHeight: on ? 200 : 0, opacity: on ? 1 : 0, overflow: 'hidden', transition: 'max-height .4s ease, opacity .4s ease, margin .3s' }}>
                    <p style={{ fontSize: 15.5, color: 'var(--text-secondary)', lineHeight: 1.65, margin: '14px 0 0', maxWidth: 640 }}>{f[1]}</p>
                  </div>
                </div>
              </Reveal>
            );
          })}
          <Reveal><div style={{ textAlign: 'center', marginTop: 26, fontSize: 15, color: 'var(--text-secondary)' }}>Still wondering something? <span onClick={() => onNavigate('contact')} style={{ color: 'var(--winkz-cyan)', cursor: 'pointer', fontWeight: 600 }}>Just ask us →</span></div></Reveal>
        </div>
      </Section>
    );
  }

  /* ── VALUE / COST-OF-DOING-NOTHING ── */
  const STATS = [
    ['', 78, '%', 'of buyers go with the business that answers first', 'Lead-response studies'],
    ['', 21, '×', 'more likely to win a lead replying in 5 min vs 30', 'Harvard/MIT lead research'],
    ['', 75, '%', 'judge your credibility on your website alone', 'Design-trust research'],
    ['$', 18, 'k+', 'a typical local business loses a year to missed calls & slow follow-up', 'Directional estimate'],
  ];
  function ValueStats({ onNavigate }) {
    return (
      <Section>
        <SectionHead eyebrow="The cost of doing nothing" title={<>Every leak is a customer <Grad>you never met.</Grad></>} sub="Most businesses quietly bleed revenue, slow replies, a site that doesn't convert, tools that don't talk to each other. It adds up faster than you'd think." center max={680} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="vs-grid">
          {STATS.map((s, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{ padding: '28px 22px', borderRadius: 18, border: '1px solid rgba(255,255,255,0.08)', background: 'linear-gradient(165deg, rgba(255,255,255,0.03), transparent)', height: '100%' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(38px,4.6vw,56px)', lineHeight: 1, letterSpacing: '-0.03em' }}><Grad><Counter to={s[1]} prefix={s[0]} suffix={s[2]} /></Grad></div>
                <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.5, margin: '14px 0 12px' }}>{s[3]}</p>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.06em', color: 'var(--text-muted)', textTransform: 'uppercase', paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.06)' }}>{s[4]}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={80}>
          <div style={{ marginTop: 20, borderRadius: 20, padding: 1, background: GRAD }}>
            <div style={{ borderRadius: 19, background: 'linear-gradient(160deg,#0E0E13,#0A0A0D)', padding: 'clamp(26px,4vw,40px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
              <div style={{ maxWidth: 640 }}>
                <h3 style={{ fontSize: 'clamp(22px,2.6vw,32px)', lineHeight: 1.15, margin: 0 }}>Win back <Grad>two or three clients</Grad>, and <span style={{ display: 'block', marginTop: 10, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px,4.4vw,52px)', lineHeight: 1.02, letterSpacing: '-0.03em', textTransform: 'uppercase' }}><Grad>it's already paid for itself.</Grad></span></h3>
                <p style={{ fontSize: 15, color: 'var(--text-secondary)', margin: '14px 0 0' }}>Everything after that is upside. That's the whole case.</p>
              </div>
              <button onClick={() => onNavigate('contact')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '13px 24px', borderRadius: 11, cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, color: '#08080A', background: GRAD, border: 'none', whiteSpace: 'nowrap' }}>Stop the leaks <Icon n="ArrowUpRight" s={15} color="#08080A" /></button>
            </div>
          </div>
        </Reveal>
        <div style={{ textAlign: 'center', marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>Figures are directional industry benchmarks, shown to illustrate the opportunity.</div>
        <style>{`@media (max-width:820px){.vs-grid{grid-template-columns:1fr 1fr!important}}`}</style>
      </Section>
    );
  }

  Object.assign(window, { CostCalculator, Testimonials, Security, FAQ, ValueStats });
})();
