// Insights, final CTA, footer

function Insights() {
  const posts = [
    {
      cat: 'Whitepaper',
      date: 'Apr 2026',
      title: 'The case against rip-and-replace, in five charts.',
      read: '12 min read',
      tone: 'sand'
    },
    {
      cat: 'Field note',
      date: 'Mar 2026',
      title: 'How a Lagos operator cut BSS cost by 41% — without changing vendor.',
      read: '7 min read',
      tone: 'mist'
    },
    {
      cat: 'Press',
      date: 'Feb 2026',
      title: '24 Hubs joins the UK–Nigeria Digital Bridge initiative as a founding partner.',
      read: 'Announcement',
      tone: 'sand'
    },
  ];

  return (
    <section id="insights">
      <div className="container">
        <div className="reveal-up" style={{ marginBottom: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <span className="section-badge">011 — Insights & press</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, maxWidth: 700 }}>
              Field notes from the<br /><em>operating layer.</em>
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">All publications <span className="arrow">→</span></a>
        </div>

        <div className="insights-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {posts.map((p, i) => (
            <article key={i} className={`card-hover reveal-scale delay-${i + 1}`} style={{
              border: '1px solid var(--rule)',
              borderRadius: 16,
              overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
              cursor: 'pointer',
              background: 'var(--paper)'
            }}>
              {/* Styled image placeholder */}
              <div style={{
                aspectRatio: '5 / 3',
                background: p.tone === 'mist'
                  ? 'linear-gradient(135deg, oklch(93% 0.025 240) 0%, oklch(88% 0.04 252) 100%)'
                  : 'linear-gradient(135deg, oklch(95% 0.03 85)  0%, oklch(90% 0.05 75)  100%)',
                position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden'
              }}>
                {/* decorative pattern */}
                <div style={{
                  position: 'absolute', inset: 0,
                  backgroundImage: 'radial-gradient(circle, oklch(60% 0.05 255 / 0.12) 1px, transparent 1px)',
                  backgroundSize: '20px 20px'
                }} />
                <div style={{
                  position: 'relative',
                  fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-soft)',
                  letterSpacing: '0.12em', textTransform: 'uppercase',
                  background: 'oklch(100% 0 0 / 0.75)', backdropFilter: 'blur(8px)',
                  padding: '7px 14px', borderRadius: 999,
                  border: '1px solid var(--rule)'
                }}>{p.cat}</div>
              </div>
              <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em',
                    textTransform: 'uppercase', color: 'var(--blue-600)',
                    background: 'var(--blue-50)', border: '1px solid var(--blue-100)',
                    padding: '3px 8px', borderRadius: 999
                  }}>{p.cat}</span>
                  <span className="label">{p.date}</span>
                </div>
                <h3 style={{
                  fontFamily: 'var(--serif)', fontSize: 22, margin: 0, marginBottom: 24,
                  fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.25
                }}>{p.title}</h3>
                <div style={{
                  marginTop: 'auto', fontSize: 12, fontFamily: 'var(--mono)',
                  letterSpacing: '0.06em', textTransform: 'uppercase',
                  color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', gap: 6
                }}>{p.read} <span className="arrow">→</span></div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', type: 'demo' });
  const [state, setState] = React.useState('idle'); // idle | busy | done | err
  const [errMsg, setErrMsg] = React.useState('');

  function setField(k) { return e => setForm(f => ({ ...f, [k]: e.target.value })); }

  async function submit(e) {
    e.preventDefault();
    setState('busy');
    setErrMsg('');
    try {
      const res = await fetch('https://api.24hubs.com/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || 'Submission failed');
      setState('done');
    } catch (ex) {
      setErrMsg(ex.message);
      setState('err');
    }
  }

  const inputStyle = {
    width: '100%', height: 42, padding: '0 14px',
    border: '1px solid oklch(35% 0.04 255)',
    borderRadius: 10, background: 'oklch(20% 0.025 258)',
    color: 'var(--paper)', fontSize: 14, outline: 'none',
    fontFamily: 'var(--sans)',
    transition: 'border-color 150ms',
  };

  return (
    <section id="cta" style={{
      background: 'linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%)',
      paddingBottom: 32
    }}>
      <div className="container">
        <div style={{ position: 'relative', borderRadius: 28, padding: 2 }}>
          <div className="gradient-ring" style={{ borderRadius: 28 }} aria-hidden="true" />
          <div style={{
            borderRadius: 26,
            background: 'var(--ink)',
            color: 'var(--paper)',
            padding: 'clamp(48px, 7vw, 96px)',
            position: 'relative',
            overflow: 'hidden',
            zIndex: 1
          }}>
            <svg viewBox="0 0 600 600" width="600" height="600" style={{
              position: 'absolute', right: -120, top: -120, opacity: 0.12, pointerEvents: 'none'
            }} aria-hidden="true">
              {[100, 160, 220, 290, 360].map(r => (
                <circle key={r} cx="300" cy="300" r={r} fill="none"
                  stroke="oklch(72% 0.13 252)" strokeWidth="1" />
              ))}
              <circle cx="300" cy="300" r="36" fill="oklch(55% 0.18 255)" opacity="0.7" />
            </svg>

            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr minmax(320px, 420px)', gap: 'clamp(40px, 6vw, 80px)', alignItems: 'start' }}>
              {/* Left: headline */}
              <div>
                <div className="reveal-up" style={{ marginBottom: 24 }}>
                  <span className="section-badge" style={{
                    background: 'oklch(28% 0.06 255)', border: '1px solid oklch(38% 0.06 255)',
                    color: 'oklch(72% 0.13 252)'
                  }}>
                    <span className="live-dot" style={{ background: 'oklch(65% 0.18 145)' }} />
                    012 — Start with a 14-day audit
                  </span>
                </div>
                <h2 className="display reveal-up delay-1" style={{
                  fontSize: 'clamp(34px, 4.4vw, 64px)',
                  margin: 0, marginBottom: 24
                }}>
                  Stop managing fragmentation.<br />
                  <em>Start operating at scale.</em>
                </h2>
                <p className="reveal-up delay-2" style={{
                  fontSize: 17, color: 'oklch(78% 0.02 250)',
                  margin: 0, marginBottom: 40, lineHeight: 1.58
                }}>
                  We will sit with your architecture team for two weeks, map every legacy system,
                  and return a 24-page integration plan. No procurement, no commitment, no rip-and-replace.
                </p>

                <div className="reveal-up delay-3" style={{
                  display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
                  paddingTop: 32, borderTop: '1px solid oklch(32% 0.04 255)'
                }}>
                  {[
                    { k: '14 days', v: 'No-touch audit' },
                    { k: 'Free', v: 'Integration plan' },
                    { k: 'NDA', v: 'First conversation' },
                  ].map(s => (
                    <div key={s.k}>
                      <div style={{
                        fontFamily: 'var(--serif)', fontSize: 'clamp(20px, 2.5vw, 28px)',
                        lineHeight: 1, letterSpacing: '-0.02em'
                      }}>{s.k}</div>
                      <div className="label" style={{ color: 'oklch(65% 0.05 250)', marginTop: 6 }}>{s.v}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Right: contact form */}
              <div className="reveal-up delay-2" style={{
                background: 'oklch(16% 0.025 258)',
                border: '1px solid oklch(28% 0.04 255)',
                borderRadius: 20, padding: 'clamp(24px, 4vw, 36px)',
              }}>
                {state === 'done' ? (
                  <div style={{ textAlign: 'center', padding: '32px 0' }}>
                    <div style={{
                      width: 52, height: 52, borderRadius: '50%',
                      background: 'oklch(35% 0.1 145)', margin: '0 auto 20px',
                      display: 'flex', alignItems: 'center', justifyContent: 'center'
                    }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="oklch(72% 0.15 145)" strokeWidth="2.5">
                        <polyline points="20 6 9 17 4 12" />
                      </svg>
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 10 }}>Request received</div>
                    <div style={{ fontSize: 14, color: 'oklch(68% 0.03 250)', lineHeight: 1.55 }}>
                      Your team will hear from us within one business day. We honour every NDA before the first call.
                    </div>
                  </div>
                ) : (
                  <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div style={{ marginBottom: 4 }}>
                      <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>Get your integration plan</div>
                      <div style={{ fontSize: 12.5, color: 'oklch(62% 0.03 250)' }}>Free 14-day audit · No commitment</div>
                    </div>

                    {state === 'err' && (
                      <div style={{
                        background: 'oklch(25% 0.08 25)', border: '1px solid oklch(35% 0.1 25)',
                        color: 'oklch(75% 0.1 25)', borderRadius: 8, padding: '9px 12px', fontSize: 13
                      }}>{errMsg}</div>
                    )}

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                      <div>
                        <label style={{ display: 'block', fontSize: 11.5, color: 'oklch(62% 0.03 250)', marginBottom: 5, letterSpacing: '0.04em' }}>Full name *</label>
                        <input
                          style={inputStyle}
                          required
                          value={form.name}
                          onChange={setField('name')}
                          placeholder="Jane Smith"
                          onFocus={e => e.target.style.borderColor = 'oklch(55% 0.15 255)'}
                          onBlur={e => e.target.style.borderColor = 'oklch(35% 0.04 255)'}
                        />
                      </div>
                      <div>
                        <label style={{ display: 'block', fontSize: 11.5, color: 'oklch(62% 0.03 250)', marginBottom: 5, letterSpacing: '0.04em' }}>Work email *</label>
                        <input
                          style={inputStyle}
                          type="email"
                          required
                          value={form.email}
                          onChange={setField('email')}
                          placeholder="jane@company.com"
                          onFocus={e => e.target.style.borderColor = 'oklch(55% 0.15 255)'}
                          onBlur={e => e.target.style.borderColor = 'oklch(35% 0.04 255)'}
                        />
                      </div>
                    </div>

                    <div>
                      <label style={{ display: 'block', fontSize: 11.5, color: 'oklch(62% 0.03 250)', marginBottom: 5, letterSpacing: '0.04em' }}>Company</label>
                      <input
                        style={inputStyle}
                        value={form.company}
                        onChange={setField('company')}
                        placeholder="Organisation name"
                        onFocus={e => e.target.style.borderColor = 'oklch(55% 0.15 255)'}
                        onBlur={e => e.target.style.borderColor = 'oklch(35% 0.04 255)'}
                      />
                    </div>

                    <div>
                      <label style={{ display: 'block', fontSize: 11.5, color: 'oklch(62% 0.03 250)', marginBottom: 5, letterSpacing: '0.04em' }}>I am looking for</label>
                      <select
                        style={{ ...inputStyle, paddingRight: 32,
                          backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23aaa' d='M0 0h10L5 6z'/%3E%3C/svg%3E\")",
                          backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center',
                          appearance: 'none', cursor: 'pointer'
                        }}
                        value={form.type}
                        onChange={setField('type')}
                      >
                        <option value="demo">Architecture review (Demo)</option>
                        <option value="brief">Private brief / NDA discussion</option>
                        <option value="contact">General enquiry</option>
                      </select>
                    </div>

                    <button
                      type="submit"
                      disabled={state === 'busy'}
                      style={{
                        height: 44, borderRadius: 10, border: 'none', cursor: state === 'busy' ? 'default' : 'pointer',
                        background: state === 'busy' ? 'oklch(42% 0.1 255)' : 'oklch(55% 0.18 255)',
                        color: '#fff', fontSize: 14, fontWeight: 600,
                        fontFamily: 'var(--sans)', transition: 'background 160ms',
                        marginTop: 4
                      }}
                    >
                      {state === 'busy' ? 'Submitting…' : 'Request your audit →'}
                    </button>

                    <div style={{ fontSize: 11.5, color: 'oklch(52% 0.03 250)', textAlign: 'center', lineHeight: 1.5 }}>
                      Your data is processed under UK GDPR. We never share contact details.
                    </div>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: 'Platform', items: ['Overview', 'The 24 hubs', 'Adapter library', 'Architecture', 'Security'] },
    { h: 'Sectors', items: ['Government', 'Financial services', 'Telecommunications', 'Real estate', 'Education'] },
    { h: 'Company', items: ['About', 'Leadership', 'Careers', 'Press', 'Contact'] },
    { h: 'Resources', items: ['Whitepapers', 'Case studies', 'Compliance', 'Engineering blog', 'Status'] },
  ];
  return (
    <footer style={{ background: 'var(--paper-warm)', borderTop: '1px solid var(--rule)' }}>
      <div className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(200px, 1.4fr) repeat(4, 1fr)',
          gap: 48,
          marginBottom: 80
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <img src="assets/logo.png" alt="" style={{ width: 36, height: 36, borderRadius: '50%' }} />
              <span style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.01em' }}>
                24 Hubs<sup style={{ fontFamily: 'var(--mono)', fontSize: 9, top: '-1em' }}>™</sup>
              </span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)', maxWidth: 320, lineHeight: 1.55, margin: 0, marginBottom: 24 }}>
              The unified digital infrastructure company powering the modern, borderless enterprise.
            </p>
            <div className="label" style={{ marginBottom: 8 }}>Headquarters</div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>
              24 St James's Square<br />London SW1Y 4JH<br />United Kingdom
            </div>
          </div>

          {cols.map(c => (
            <div key={c.h}>
              <div className="label" style={{ marginBottom: 16 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                {c.items.map(it => (
                  <li key={it}>
                    <a href="#" style={{ fontSize: 14, color: 'var(--ink-soft)' }}
                      onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'}
                      onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-soft)'}
                    >{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
          paddingTop: 28, borderTop: '1px solid var(--rule)'
        }}>
          <div className="label">© 2026 24 Hubs Holdings Ltd · Registered in England & Wales · 11023487</div>
          <div style={{ display: 'flex', gap: 20 }}>
            {['Privacy', 'Terms', 'Cookies', 'Modern Slavery Statement'].map(l => (
              <a key={l} href="#" className="label" style={{ color: 'var(--ink-soft)' }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Insights, FinalCta, Footer });