// Site hero — the home page hero block (the dashboard mockup) + helpers.
// The TopNav now lives in site-shell.jsx and is shared across all pages.

// The dashboard card — visual proof point in the hero. It's stylized but
// intentionally looks like real software, not a generic 3D illustration.
function HeroDashboard() {
  return (
    <div style={{
      position: 'relative',
      background: 'var(--paper)', borderRadius: 14,
      boxShadow: '0 1px 0 rgba(20,20,20,0.04), 0 30px 60px -20px rgba(20,20,20,0.18), 0 12px 24px -12px rgba(20,20,20,0.10)',
      border: '1px solid var(--line-soft)',
      overflow: 'hidden',
      fontFamily: '"Hanken Grotesk", sans-serif',
    }}>
      {/* App chrome */}
      <div style={{
        height: 38, background: 'var(--bone-deep)', display: 'flex',
        alignItems: 'center', padding: '0 14px', gap: 8,
        borderBottom: '1px solid var(--line-soft)',
      }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#e0a59c' }} />
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#e6d29b' }} />
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#aac9a2' }} />
        <div className="mono" style={{
          marginLeft: 16, fontSize: 11, color: 'var(--muted)', letterSpacing: '0.04em',
        }}>hyperfocus / dashboard · operations</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 360 }}>
        {/* Sidebar */}
        <div style={{
          padding: '20px 14px', borderRight: '1px solid var(--line-soft)',
          background: 'var(--bg-subtle-2)',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <SidebarItem active>Overview</SidebarItem>
          <SidebarItem>Workflows</SidebarItem>
          <SidebarItem>AI assistants</SidebarItem>
          <SidebarItem>Integrations</SidebarItem>
          <SidebarItem>Audit log</SidebarItem>
          <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--line-soft)' }}>
            <SidebarItem>Settings</SidebarItem>
          </div>
        </div>

        {/* Main */}
        <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.015em' }}>Operations overview</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 3, letterSpacing: '0.04em' }}>last 30 days · all environments</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <Chip>30d</Chip>
              <Chip active>90d</Chip>
              <Chip>YTD</Chip>
            </div>
          </div>

          {/* Metrics */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            <Metric label="Uptime" value="99.98%" delta="▲ stable" deltaColor="var(--ok)" />
            <Metric label="Workflows" value="12" sub="live" delta="▲ 3 new" deltaColor="var(--ember)" />
            <Metric label="p95 latency" value="187ms" delta="— flat" deltaColor="var(--muted)" />
          </div>

          {/* Sparkline chart */}
          <div style={{
            background: 'var(--bone)', borderRadius: 10, padding: '14px 16px 12px',
            border: '1px solid var(--line-soft)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{ fontWeight: 600, fontSize: 13 }}>Revenue impact</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ember)' }}>▲ 32% vs last quarter</span>
              </div>
              <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>// auto-generated</span>
            </div>
            <Sparkline />
          </div>

          {/* AI assistant log */}
          <div style={{
            background: 'var(--ink)', color: 'var(--bone)',
            borderRadius: 10, padding: '12px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 8, background: 'var(--ember)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 13,
            }}>ai</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Assistant · Replied to 12 enquiries</div>
              <div className="mono" style={{ fontSize: 11, opacity: 0.65, marginTop: 2 }}>
                4 escalated · 8 resolved · avg 47s to first response
              </div>
            </div>
            <span className="mono" style={{ fontSize: 10, opacity: 0.6 }}>just now</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function SidebarItem({ children, active = false }) {
  return (
    <div style={{
      padding: '8px 10px', borderRadius: 6, fontSize: 13,
      fontWeight: active ? 600 : 500,
      color: active ? 'var(--ink)' : 'var(--muted)',
      background: active ? 'rgba(194,97,31,0.08)' : 'transparent',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      {active && <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--ember)' }} />}
      {!active && <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'transparent' }} />}
      {children}
    </div>
  );
}

function Chip({ children, active = false }) {
  return (
    <span className="mono" style={{
      padding: '4px 10px', borderRadius: 999,
      fontSize: 10, letterSpacing: '0.08em',
      background: active ? 'var(--ink)' : 'transparent',
      color: active ? 'var(--bone)' : 'var(--muted)',
      border: active ? 'none' : '1px solid var(--line)',
    }}>{children}</span>
  );
}

function Metric({ label, value, sub, delta, deltaColor }) {
  return (
    <div style={{
      background: 'var(--bone)', borderRadius: 10, padding: '14px 14px 12px',
      border: '1px solid var(--line-soft)',
      display: 'flex', flexDirection: 'column', gap: 4,
    }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.025em' }}>{value}</span>
        {sub && <span style={{ fontSize: 11, color: 'var(--muted)' }}>{sub}</span>}
      </div>
      <span className="mono" style={{ fontSize: 10, color: deltaColor, letterSpacing: '0.04em' }}>{delta}</span>
    </div>
  );
}

function Sparkline() {
  // Hand-tuned points so the line reads as an organic upward trend.
  const pts = [10, 14, 12, 18, 16, 24, 22, 30, 28, 34, 32, 42, 48, 52, 58];
  const w = 520, h = 60, pad = 4;
  const stepX = (w - pad * 2) / (pts.length - 1);
  const max = Math.max(...pts), min = Math.min(...pts);
  const y = v => h - pad - ((v - min) / (max - min)) * (h - pad * 2);
  const path = pts.map((v, i) => `${i === 0 ? 'M' : 'L'} ${pad + i * stepX} ${y(v)}`).join(' ');
  const area = `${path} L ${pad + (pts.length - 1) * stepX} ${h - pad} L ${pad} ${h - pad} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="emberFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#c2611f" stopOpacity="0.22" />
          <stop offset="100%" stopColor="#c2611f" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#emberFill)" />
      <path d={path} stroke="#c2611f" strokeWidth="2" fill="none" strokeLinejoin="round" />
      {pts.map((v, i) => i === pts.length - 1 && (
        <circle key={i} cx={pad + i * stepX} cy={y(v)} r="3.5" fill="#c2611f" />
      ))}
    </svg>
  );
}

function Hero() {
  const isMobile = window.useIsMobile ? useIsMobile() : false;
  return (
    <header style={{
      position: 'relative', overflow: 'hidden',
      borderBottom: '1px solid var(--line)',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute',
        top: isMobile ? -180 : -180,
        right: isMobile ? -200 : -180,
        width: isMobile ? 420 : 580,
        height: isMobile ? 420 : 580,
        borderRadius: '50%', background: 'var(--ember)', opacity: 0.06,
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ padding: isMobile ? '40px 20px 56px' : '64px 32px 72px', position: 'relative' }}>
        <SectionLabel accent="//">IT solutions, powered by AI</SectionLabel>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr 0.95fr',
          gap: isMobile ? 36 : 56,
          marginTop: isMobile ? 20 : 28,
          alignItems: 'center',
        }}>
          <div>
            <FadeUp delay={80}>
              <h1 style={{
                fontSize: 'clamp(40px, 8vw, 72px)',
                fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.0,
                margin: 0, textWrap: 'balance',
              }}>
                Practical technology that moves your business <span style={{ color: 'var(--ember)' }}>forward.</span>
              </h1>
            </FadeUp>
            <FadeUp delay={180}>
              <p style={{
                fontSize: isMobile ? 17 : 19, lineHeight: 1.5, color: 'var(--fg-muted)',
                maxWidth: 520, marginTop: isMobile ? 18 : 26, textWrap: 'pretty',
              }}>
                Senior IT professionals — <b style={{ color: 'var(--fg)' }}>20+ years per project lead</b> — pairing deep engineering with modern AI to ship solutions that are dependable, measurable, and built to last.
              </p>
            </FadeUp>
            <FadeUp delay={260}>
              <div style={{ display: 'flex', gap: 10, marginTop: isMobile ? 24 : 32, flexWrap: 'wrap' }}>
                <Btn className="hf-btn" size="lg" as="a" href="contact.html">Start a project <Arrow /></Btn>
                <Btn className="hf-btn" size="lg" variant="ghost" as="a" href="services.html">Explore services</Btn>
              </div>
            </FadeUp>

            {/* Trust strip */}
            <div style={{
              marginTop: isMobile ? 32 : 40, paddingTop: 22, borderTop: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', gap: 18,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 999, background: 'var(--ink)', color: 'var(--bone)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 13, letterSpacing: '-0.02em', flex: '0 0 40px',
              }}>HF</div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>20+ years per lead · trusted globally</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2, letterSpacing: '0.04em' }}>
                  startup → enterprise · same accountable lead, start to finish
                </span>
              </div>
            </div>
          </div>

          {/* Dashboard — hidden on mobile; the copy carries the hero alone */}
          {!isMobile && (
            <FadeUp delay={140}>
              <HeroDashboard />
            </FadeUp>
          )}
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { HeroDashboard, Hero });