/* Wired CIO marketing site — CTA / assessment form + Footer */
(function () {
  const DS = window.WiredCIODesignSystem_afa0a4;
  const I = window.WCIcons;
  const { Button, Input, Select, Alert, Logo, OUTCOMES } = DS;

  function CTASection() {
    const [sent, setSent] = React.useState(false);
    return (
      <section style={{ position: 'relative', background: 'var(--grad-emerald)', padding: 'var(--section-y) 0', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('../../assets/backgrounds/bg-05.svg')", backgroundSize: 'cover', opacity: 0.5, mixBlendMode: 'soft-light' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="wc-cta-grid">
          <div>
            <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.8125rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>Free security assessment</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2rem, 4vw, 3rem)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '14px 0 0', textWrap: 'balance' }}>
              See where you stand. Then move forward.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.125rem', lineHeight: 1.6, color: 'var(--text-strong)', margin: '18px 0 0', maxWidth: 460 }}>
              A clear, strategic plan for growth and protection, starting with a no-cost review of where you stand today.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28 }}>
              {['Same-day remote support, onsite within 48 hours', 'A full team of specialists at a fraction of in-house cost', 'Monthly reporting on everything we improve'].map((t) => (
                <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 11, fontFamily: 'var(--font-body)', fontWeight: 500, color: 'var(--text-strong)' }}>
                  <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--text-strong)', color: 'var(--wc-emerald)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><I.Check size={15} stroke={3} /></span>
                  {t}
                </span>
              ))}
            </div>
          </div>

          <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-xl)', padding: '34px 32px', boxShadow: 'var(--shadow-xl)' }}>
            {sent ? (
              <div style={{ padding: '12px 0' }}>
                <Alert tone="success" title="Request received" icon={<I.ShieldCheck size={18} />}>
                  Thanks. A Wired CIO strategist will reach out within one business day to schedule your assessment.
                </Alert>
                <Button variant="ghost" size="sm" style={{ marginTop: 16 }} onClick={() => setSent(false)}>← Submit another</Button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.25rem', color: 'var(--text-strong)', margin: '0 0 18px' }}>Request your assessment</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <Input label="Full name" placeholder="Jane Doe" required />
                  <Input label="Work email" type="email" placeholder="jane@company.com" required />
                  <Select label="Company size" placeholder="Select range" options={['1–10', '11–50', '51–200', '200+']} />
                  <Button type="submit" fullWidth size="lg" iconRight={<I.ArrowRight size={18} />}>Get my free assessment</Button>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem', color: 'var(--text-muted)', textAlign: 'center' }}>No spam. No obligation. We respect your inbox.</span>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>
    );
  }

  const COLS = ['grow', 'protect', 'automate', 'align'].map((k) => [(OUTCOMES[k] || {}).label || k, (OUTCOMES[k] || {}).accent || 'var(--wc-emerald)', (OUTCOMES[k] || {}).services || []]);
  const AREAS = ['Chicago, IL', 'Tampa, FL', 'Nashville, TN', 'Cincinnati, OH', 'Indianapolis, IN'];

  function SiteFooter() {
    return (
      <footer style={{ background: 'var(--text-strong)', color: 'var(--wc-ink-100)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px var(--container-pad) 32px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 36 }} className="wc-foot-grid">
          <div>
            <Logo variant="horizontal" theme="dark" height={44} basePath="../../assets/logos" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 22 }}>
              <a href="tel:3122100318" style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--wc-ink-100)', textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: '0.8125rem', whiteSpace: 'nowrap' }}><I.Phone size={16} style={{ color: 'var(--wc-emerald)' }} /> (312) 210-0318</a>
              <a href="mailto:sales@wiredcio.com" style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--wc-ink-100)', textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: '0.8125rem', whiteSpace: 'nowrap' }}><I.Mail size={16} style={{ color: 'var(--wc-emerald)' }} /> sales@wiredcio.com</a>
              <span style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: 'var(--font-body)', fontSize: '0.8125rem', lineHeight: 1.5, color: 'var(--wc-ink-100)' }}><I.MapPin size={16} style={{ color: 'var(--wc-emerald)', flexShrink: 0, marginTop: 2 }} /> <span>2921 N Milwaukee Ave, Suite 1<br />Chicago, IL 60618</span></span>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              {[I.Linkedin, I.Facebook, I.Instagram].map((Ic, i) => (
                <a key={i} href="#" style={{ width: 38, height: 38, borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-on-dark)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--wc-ink-100)' }}><Ic size={17} /></a>
              ))}
            </div>
          </div>
          {COLS.map(([title, accent, links]) => (
            <div key={title}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--wc-white)', marginBottom: 16 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: accent }} />{title}
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {links.map((l) => <li key={l}><a href={'service.html?slug=' + String(l).toLowerCase().replace(/&/g, ' ').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')} style={{ color: 'var(--wc-ink-100)', textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: '0.8125rem' }}>{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--border-on-dark)' }}>
          <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '16px var(--container-pad)', display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center', fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--wc-ink-200)' }}>
            <span style={{ fontWeight: 700, color: 'var(--wc-green-300)', letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: '0.6875rem' }}>Serving</span>
            {AREAS.map((a, i) => <span key={a}>{a}{i < AREAS.length - 1 ? <span style={{ opacity: 0.4, margin: '0 4px' }}>·</span> : null}</span>)}
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--border-on-dark)' }}>
          <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '20px var(--container-pad)', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 12, fontFamily: 'var(--font-body)', fontSize: '0.8125rem', color: 'var(--text-faint)' }}>
            <span>© 2026 Wired CIO. All rights reserved.</span>
            <span style={{ display: 'flex', gap: 20 }}><a href="#" style={{ color: 'var(--text-faint)', textDecoration: 'none' }}>Privacy Policy</a><a href="#" style={{ color: 'var(--text-faint)', textDecoration: 'none' }}>Terms</a><a href="#" style={{ color: 'var(--text-faint)', textDecoration: 'none' }}>Sitemap</a></span>
          </div>
        </div>
      </footer>
    );
  }

  window.WCKit = Object.assign(window.WCKit || {}, { CTASection, SiteFooter });
})();