/* global React, Icon, Btn, Reveal, useCountUp */
/* ──────────────────────────────────────────────────────────────
   tech-footer.jsx — Platform, Cases, About, CTA, Footer
   ────────────────────────────────────────────────────────────── */

// ── Platform · the control plane ─────────────────────────────────
const PILLARS = [
  { icon: 'split', title: 'Agentic orchestration', desc: 'AI agents, robots, and people coordinate work across systems from one control plane.' },
  { icon: 'shield', title: 'Enterprise governance', desc: 'Policy, audit, and access controls keep autonomous work compliant and observable.' },
  { icon: 'globe', title: 'Vendor-neutral integration', desc: 'Connects legacy systems, clouds, and models — no rip-and-replace required.' },
];
const Platform = () => (
  <section id="platform" style={{ padding: 'clamp(32px, 4.5vw, 56px) 0', borderTop: '1px solid var(--border-subtle)' }}>
    <div className="wrap">
      <Reveal style={{ maxWidth: 640 }}>
        <div className="overline" style={{ color: 'var(--accent)' }}>The platform</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--brand-ink)', fontSize: 'clamp(30px, 4.4vw, 48px)', lineHeight: 1.08, letterSpacing: '-0.025em', margin: '16px 0 0' }}>
          One control plane for the entire software lifecycle.
        </h2>
        <p style={{ fontSize: 'clamp(16px,1.4vw,19px)', lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 18 }}>
          Technamics connects every workstream — modernization, QA, mobile, and design — under a single orchestration layer, so automation scales securely without losing the human in the loop.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16, marginTop: 'clamp(36px, 5vw, 56px)' }}>
        {PILLARS.map((p, i) => (
          <Reveal key={p.title} delay={i + 1} className="fcard">
            <div className="ficon"><Icon name={p.icon} size={22}/></div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: 'var(--fg-1)', margin: '0 0 6px' }}>{p.title}</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg-3)', margin: 0 }}>{p.desc}</p>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ── Case studies ─────────────────────────────────────────────────
const CaseMetric = ({ value, suffix, label, decimals = 0 }) => {
  const [ref, display] = useCountUp(value, { decimals });
  return (
    <div>
      <div ref={ref} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(32px,4vw,46px)', letterSpacing: '-0.02em', color: '#fff', lineHeight: 1 }}>
        {display}<span style={{ color: 'var(--primary-300)' }}>{suffix}</span>
      </div>
      <div style={{ fontSize: 13.5, color: 'rgba(248,250,252,0.6)', marginTop: 8 }}>{label}</div>
    </div>
  );
};
const Cases = () => (
  <section id="cases" style={{ background: 'var(--bg-inverse)', color: '#fff', padding: 'clamp(32px, 4.5vw, 56px) 0', overflow: 'hidden', position: 'relative' }}>
    <div style={{ position: 'absolute', top: -120, right: -80, width: 480, height: 480, background: 'radial-gradient(circle, rgba(51,181,245,0.18), transparent 65%)', pointerEvents: 'none' }}/>
    <div className="wrap" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="hero-grid">
        <Reveal>
          <div className="overline" style={{ color: 'var(--primary-300)' }}>Case study · Global financial services</div>
          <blockquote style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(24px,3.2vw,36px)', lineHeight: 1.22, letterSpacing: '-0.02em', margin: '20px 0 0' }}>
            “We retired a 2-million-line mainframe in nine months. Technamics did in weeks what we'd budgeted years for.”
          </blockquote>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 26 }}>
            <div style={{ width: 44, height: 44, borderRadius: 9999, background: 'linear-gradient(135deg,var(--primary-400),var(--primary-700))' }}/>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14.5 }}>VP, Platform Engineering</div>
              <div style={{ fontSize: 13, color: 'rgba(248,250,252,0.55)' }}>Fortune 100 financial institution</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={2} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px 24px' }}>
          <CaseMetric value={2.1} suffix="M" decimals={1} label="Lines of code modernized"/>
          <CaseMetric value={9} suffix=" mo" label="From legacy to cloud-native"/>
          <CaseMetric value={70} suffix="%" label="Reduction in manual QA"/>
          <CaseMetric value={0} suffix=" incidents" label="At cutover"/>
        </Reveal>
      </div>
    </div>
  </section>
);

// ── About · values ───────────────────────────────────────────────
const VALUES = [
  { k: 'Humble', d: 'Open-minded, collaborative, ego-free.' },
  { k: 'Bold', d: 'Courageous, innovative, decisive.' },
  { k: 'Immersed', d: 'Passionate, customer-centric, accountable.' },
  { k: 'Fast', d: 'Agile, proactive, results-oriented.' },
];
const About = () => (
  <section id="about" style={{ padding: 'clamp(32px, 4.5vw, 56px) 0', borderTop: '1px solid var(--border-subtle)' }}>
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'start' }} className="hero-grid">
        <Reveal>
          <div className="overline" style={{ color: 'var(--accent)' }}>About Technamics</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--brand-ink)', fontSize: 'clamp(28px,3.8vw,44px)', lineHeight: 1.1, letterSpacing: '-0.025em', margin: '16px 0 0' }}>
            Accelerating human achievement since 1998.
          </h2>
          <p style={{ fontSize: 'clamp(15px,1.3vw,18px)', lineHeight: 1.6, color: 'var(--fg-2)', marginTop: 18 }}>
            We automate the repetitive so people can focus on creativity, strategy, and judgment — building toward a future where agents, robots, and humans work together.
          </p>
        </Reveal>
        <Reveal delay={2} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {VALUES.map((v) => (
            <div key={v.k} className="fcard">
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--accent)' }}>{v.k}</div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg-3)', margin: '6px 0 0' }}>{v.d}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </div>
  </section>
);

// ── CTA band ─────────────────────────────────────────────────────
const CTA = ({ onGetStarted }) => (
  <section id="cta" style={{ padding: 'clamp(5px, 1vw, 12px) 0 clamp(12px, 1.75vw, 22px)' }}>
    <div className="wrap">
      <Reveal style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-xl)', background: 'var(--bg-inverse)', color: '#fff',
        padding: 'clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px)', textAlign: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px)', backgroundSize: '36px 36px', maskImage: 'radial-gradient(circle at 50% 40%,#000,transparent 72%)', WebkitMaskImage: 'radial-gradient(circle at 50% 40%,#000,transparent 72%)' }}/>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px,4.6vw,52px)', lineHeight: 1.08, letterSpacing: '-0.03em', margin: 0, maxWidth: 700 }}>
            Put your software lifecycle on autopilot.
          </h2>
          <p style={{ fontSize: 'clamp(16px,1.4vw,19px)', color: 'rgba(248,250,252,0.72)', marginTop: 18, maxWidth: 520 }}>
            Start with one workstream — modernization, QA, mobile, or design — and scale across the enterprise.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 32, justifyContent: 'center' }}>
            <Btn size="lg" icon="arrowRight" onClick={onGetStarted}>Get started</Btn>
            <Btn size="lg" variant="inverse">Talk to sales</Btn>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ── Footer ───────────────────────────────────────────────────────
const FOOTER_COLS = [
  { h: 'Solutions', items: ['App Modernization', 'QA Automation', 'Mobile Development', 'UI/UX Design'] },
  { h: 'Platform', items: ['Orchestration', 'Governance', 'Integrations', 'Security'] },
  { h: 'Company', items: ['About', 'Case Studies', 'Careers', 'Contact'] },
];
const Footer = () => (
  <footer style={{ background: 'var(--bg-inverse)', color: 'rgba(248,250,252,0.7)', padding: 'clamp(24px,3vw,36px) 0 20px' }}>
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 'clamp(28px,4vw,56px)' }} className="stats-grid">
        <div>
          <img src="assets/technamics-logo-white.png" alt="Technamics" style={{ height: 30, display: 'block', marginBottom: 16 }}/>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, maxWidth: 248, color: 'rgba(248,250,252,0.55)' }}>AI-powered automation for the entire software lifecycle. Quiet machines, confident answers.</p>
        </div>
        {FOOTER_COLS.map((c) => (
          <div key={c.h}>
            <div className="overline" style={{ color: 'rgba(248,250,252,0.45)', marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {c.items.map((it) => (
                <a key={it} href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 14, color: 'rgba(248,250,252,0.7)', textDecoration: 'none' }}
                  onMouseEnter={(e) => e.currentTarget.style.color = '#fff'} onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(248,250,252,0.7)'}>{it}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', alignItems: 'center', marginTop: 48, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: 13, color: 'rgba(248,250,252,0.45)' }}>
        <span>© 1998–2026 Technamics, Inc. All rights reserved.</span>
        <span style={{ display: 'flex', gap: 22 }}>
          <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'inherit', textDecoration: 'none' }}>Security</a>
        </span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Platform, Cases, About, CTA, Footer });