// Shared UI primitives used across all three Automate directions.
// Theme tokens, icons, inline calendar placeholder, case-study cards,
// trust strip, ROI calculator, and footer chrome.

const AX = {
  // Axiom IT palette carried over + bolder sub-brand accents
  navy: '#0B1E3F',
  navyDeep: '#07152E',
  navyMid: '#13305C',
  teal: '#1FA8A8',
  cyan: '#22D3EE',
  amber: '#F59E0B',
  coral: '#F97316',
  ink: '#0A1628',
  slate: '#334155',
  mute: '#64748B',
  line: '#E2E8F0',
  bone: '#F6F4EE',
  paper: '#FBFAF6',
  white: '#FFFFFF',
};

// ── Logo lockup — "Motion" standalone brand ────────────────────
function AxiomLogo({ color = AX.navy, accent = AX.teal, scale = 1 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, lineHeight: 1 }}>
      <svg width={28 * scale} height={28 * scale} viewBox="0 0 40 40" fill="none">
        {/* forward-motion chevrons */}
        <path d="M6 10 L18 20 L6 30" stroke={color} strokeWidth="3.4" strokeLinejoin="round" strokeLinecap="round" fill="none" />
        <path d="M20 10 L32 20 L20 30" stroke={accent} strokeWidth="3.4" strokeLinejoin="round" strokeLinecap="round" fill="none" />
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 20 * scale, color, letterSpacing: -0.6 }}>Motion</span>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 9 * scale, color, opacity: 0.55, letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 500 }}>
          An Axiom IT Company
        </div>
      </div>
    </div>
  );
}

// ── Tiny SVG icons (custom, not recreating any brand) ──────────
const Icon = {
  clock: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" />
    </svg>
  ),
  dollar: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v18M16 7H10a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6H7" />
    </svg>
  ),
  zap: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M13 2 3 14h8l-1 8 10-12h-8l1-8z" />
    </svg>
  ),
  grow: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 17l6-6 4 4 8-8M14 7h7v7" />
    </svg>
  ),
  arrow: (c = 'currentColor') => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  check: (c = 'currentColor') => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12l5 5L20 6" />
    </svg>
  ),
  cross: (c = 'currentColor') => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round">
      <path d="M6 6l12 12M18 6L6 18" />
    </svg>
  ),
  spark: (c = 'currentColor') => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" />
    </svg>
  ),
  ms: (c = '#737373') => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill={c}>
      <rect x="2" y="2" width="9" height="9" /><rect x="13" y="2" width="9" height="9" opacity=".6" />
      <rect x="2" y="13" width="9" height="9" opacity=".8" /><rect x="13" y="13" width="9" height="9" opacity=".4" />
    </svg>
  ),
};

// ── ROI Calculator ─────────────────────────────────────────────
function ROICalculator({ theme = 'dark', accent = AX.cyan }) {
  const [hours, setHours] = React.useState(15);
  const [staff, setStaff] = React.useState(8);
  const [rate, setRate] = React.useState(60);

  const weekly = hours * staff;
  const annual = weekly * 48;
  const dollars = Math.round(annual * rate);
  // Animated values so the figures tween when sliders move.
  const tweenedDollars = useTween(dollars, { duration: 450 });
  const tweenedWeekly = useTween(weekly, { duration: 450 });
  const tweenedAnnual = useTween(annual, { duration: 450 });
  const fmt = (n) => '$' + Math.round(n).toLocaleString('en-AU');

  const dark = theme === 'dark';
  const bg = dark ? 'rgba(255,255,255,0.03)' : '#fff';
  const bd = dark ? 'rgba(255,255,255,0.08)' : AX.line;
  const fg = dark ? '#fff' : AX.ink;
  const sub = dark ? 'rgba(255,255,255,0.55)' : AX.mute;

  const Slider = ({ label, value, set, min, max, step = 1, suffix }) => (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontSize: 14, color: sub, fontFamily: 'Inter, sans-serif' }}>{label}</span>
        <span style={{ fontSize: 22, fontFamily: 'Space Grotesk, sans-serif', fontWeight: 600, color: fg, fontVariantNumeric: 'tabular-nums' }}>
          {value}<span style={{ fontSize: 13, color: sub, marginLeft: 4, fontWeight: 400 }}>{suffix}</span>
        </span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => set(+e.target.value)}
        style={{
          width: '100%', height: 4, WebkitAppearance: 'none', appearance: 'none',
          background: `linear-gradient(to right, ${accent} 0%, ${accent} ${((value - min) / (max - min)) * 100}%, ${dark ? 'rgba(255,255,255,0.1)' : AX.line} ${((value - min) / (max - min)) * 100}%, ${dark ? 'rgba(255,255,255,0.1)' : AX.line} 100%)`,
          borderRadius: 2, outline: 'none',
        }} />
    </div>
  );

  return (
    <Reveal>
    <div style={{
      background: bg, border: `1px solid ${bd}`, borderRadius: 16, padding: 36,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center',
    }}>
      <style>{`
        input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:${accent};cursor:pointer;border:3px solid ${dark ? AX.navyDeep : '#fff'};box-shadow:0 0 0 1px ${accent}}
        input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:${accent};cursor:pointer;border:3px solid ${dark ? AX.navyDeep : '#fff'};box-shadow:0 0 0 1px ${accent}}
      `}</style>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        <div style={{ fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: accent, fontFamily: 'Inter, sans-serif', fontWeight: 600 }}>
          ROI Calculator
        </div>
        <Slider label="Hours/week lost to manual work per person" value={hours} set={setHours} min={2} max={40} suffix="hrs" />
        <Slider label="People affected" value={staff} set={setStaff} min={1} max={50} suffix="people" />
        <Slider label="Blended hourly cost" value={rate} set={setRate} min={30} max={150} suffix="/hr" />
      </div>
      <div style={{
        background: dark ? 'rgba(34,211,238,0.08)' : AX.paper, borderRadius: 12, padding: 32,
        border: `1px solid ${dark ? 'rgba(34,211,238,0.2)' : AX.line}`,
      }}>
        <div style={{ fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase', color: sub, marginBottom: 8, fontFamily: 'Inter, sans-serif', fontWeight: 500 }}>
          You could recover
        </div>
        <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 56, fontWeight: 700, color: fg, letterSpacing: -2, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
          {fmt(tweenedDollars)}
        </div>
        <div style={{ fontSize: 15, color: sub, marginTop: 8, fontFamily: 'Inter, sans-serif' }}>per year, or <span style={{ color: fg, fontWeight: 500 }}>{Math.round(tweenedWeekly).toLocaleString()} hours</span> of your team back weekly.</div>

        <div style={{ height: 1, background: bd, margin: '24px 0' }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', color: sub, fontFamily: 'Inter, sans-serif' }}>Hours/week</div>
            <div style={{ fontSize: 22, fontWeight: 600, color: fg, fontFamily: 'Space Grotesk, sans-serif', fontVariantNumeric: 'tabular-nums' }}>{Math.round(tweenedWeekly).toLocaleString()}</div>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', color: sub, fontFamily: 'Inter, sans-serif' }}>Annual hours</div>
            <div style={{ fontSize: 22, fontWeight: 600, color: fg, fontFamily: 'Space Grotesk, sans-serif', fontVariantNumeric: 'tabular-nums' }}>{Math.round(tweenedAnnual).toLocaleString()}</div>
          </div>
        </div>
      </div>
    </div>
    </Reveal>
  );
}

// ── Calendar placeholder (Calendly-style) ──────────────────────
function CalendarBooking({ theme = 'light', accent = AX.teal }) {
  return (
    <div style={{ background: '#fff', borderRadius: 16, overflow: 'hidden', minHeight: 700 }}>
      <CalendlyEmbed url="https://calendly.com/jo-axiomit/30min" />
    </div>
  );
}

// Calendly inline widget that waits for the script to load and manually inits
// (the auto-scan runs before React mounts our node, so we call initInlineWidget
// ourselves after mount).
function CalendlyEmbed({ url }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const init = () => {
      if (window.Calendly && ref.current) {
        window.Calendly.initInlineWidget({ url, parentElement: ref.current });
      }
    };
    if (window.Calendly) { init(); return; }
    // Poll briefly while the async script loads.
    let tries = 0;
    const id = setInterval(() => {
      tries++;
      if (window.Calendly) { clearInterval(id); init(); }
      else if (tries > 40) { clearInterval(id); }
    }, 100);
    return () => clearInterval(id);
  }, [url]);
  return <div ref={ref} style={{ minWidth: 320, width: '100%', height: 700 }} />;
}

// ── Trust strip ────────────────────────────────────────────────
function TrustStrip({ theme = 'light' }) {
  const dark = theme === 'dark';
  const fg = dark ? 'rgba(255,255,255,0.6)' : AX.mute;
  const bd = dark ? 'rgba(255,255,255,0.08)' : AX.line;
  const items = [
    { k: '15+', v: 'Years in business' },
    { k: '80+', v: '5★ Google reviews' },
    { k: 'Partner', v: 'Microsoft certified' },
    { k: 'AU', v: 'Melbourne-based team' },
  ];
  return (
    <Reveal>
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
      border: `1px solid ${bd}`, borderRadius: 12, overflow: 'hidden',
    }}>
      {items.map((it, i) => (
        <div key={i} style={{
          padding: '20px 24px', borderRight: i < 3 ? `1px solid ${bd}` : 'none',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 26, fontWeight: 600, color: dark ? '#fff' : AX.ink, letterSpacing: -0.8 }}>{it.k}</div>
          <div style={{ fontSize: 12, color: fg, fontFamily: 'Inter, sans-serif', letterSpacing: 0.3 }}>{it.v}</div>
        </div>
      ))}
    </div>
    </Reveal>
  );
}

// ── Case study card ────────────────────────────────────────────
function CaseCard({ client, industry, headline, before, after, savings, quote, author, role, logo, pdf, avatar, metric, metricUnit, metricCaption, theme = 'dark', accent = AX.teal }) {
  const dark = theme === 'dark';
  const bg = dark ? AX.navy : '#fff';
  const bd = dark ? 'rgba(255,255,255,0.08)' : AX.line;
  const fg = dark ? '#fff' : AX.ink;
  const sub = dark ? 'rgba(255,255,255,0.55)' : AX.mute;

  return (
    <Reveal>
    <div style={{
      background: bg,
      border: dark ? 'none' : `1px solid ${bd}`,
      borderRadius: 20,
      padding: '44px 44px 0',
      display: 'flex', flexDirection: 'column',
      minHeight: 460,
      position: 'relative',
      overflow: 'hidden',
      boxShadow: dark ? '0 30px 80px -20px rgba(11,30,63,0.4)' : 'none',
    }}>
      {/* Ambient teal glow top-right */}
      {dark && (
        <div aria-hidden="true" style={{
          position: 'absolute', top: -120, right: -120,
          width: 360, height: 360, borderRadius: '50%',
          background: `radial-gradient(circle, ${accent}30 0%, transparent 65%)`,
          pointerEvents: 'none',
        }} />
      )}

      {/* HERO METRIC — the moment */}
      <div style={{ position: 'relative', paddingBottom: 28, borderBottom: `1px solid ${bd}`, marginBottom: 28 }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
          color: accent, fontWeight: 600, marginBottom: 12,
        }}>
          {before} → {after}
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
          <span style={{
            fontFamily: 'Space Grotesk, sans-serif',
            fontSize: 92, fontWeight: 700,
            color: fg, letterSpacing: -4,
            lineHeight: 0.9,
          }}>{metric}</span>
          {metricUnit && (
            <span style={{
              fontFamily: 'Space Grotesk, sans-serif',
              fontSize: 28, fontWeight: 500,
              color: accent, letterSpacing: -0.5,
              lineHeight: 1,
            }}>{metricUnit}</span>
          )}
        </div>
        {metricCaption && (
          <div style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: 15, color: sub, lineHeight: 1.45,
            marginTop: 14, maxWidth: 420,
          }}>{metricCaption}</div>
        )}
      </div>

      {/* Quote — supporting */}
      <div style={{
        fontFamily: 'Space Grotesk, sans-serif',
        fontSize: 19, fontWeight: 400, fontStyle: 'italic',
        color: dark ? 'rgba(255,255,255,0.82)' : AX.slate,
        letterSpacing: -0.3,
        lineHeight: 1.45, textWrap: 'pretty',
        flex: 1,
      }}>
        &ldquo;{quote}&rdquo;
      </div>

      {/* Attribution row */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, marginTop: 24, paddingBottom: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%', flexShrink: 0,
            background: dark ? 'rgba(255,255,255,0.08)' : AX.paper,
            border: `1px solid ${bd}`, overflow: 'hidden',
            backgroundImage: avatar ? `url(${avatar})` : 'none',
            backgroundSize: 'cover', backgroundPosition: 'center',
          }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600, color: fg, letterSpacing: -0.1 }}>{author}</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: sub, lineHeight: 1.4 }}>{role}</div>
          </div>
        </div>
        {logo && (
          <div style={{
            height: 40, display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
            flexShrink: 0,
            background: dark ? '#fff' : 'transparent',
            padding: dark ? '6px 12px' : '0',
            borderRadius: 6,
          }}>
            <img src={logo} alt={client} style={{ maxHeight: 28, maxWidth: 140, display: 'block', objectFit: 'contain' }} />
          </div>
        )}
      </div>

      {/* Read case study link — full-bleed footer */}
      {pdf && (
        <a href={pdf} target="_blank" rel="noopener" download
          style={{
            margin: '0 -44px',
            padding: '18px 44px',
            background: dark ? 'rgba(255,255,255,0.04)' : AX.paper,
            borderTop: `1px solid ${bd}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
            color: accent, textDecoration: 'none', letterSpacing: 0.1,
          }}>
          <span>Read full case study</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      )}
    </div>
    </Reveal>
  );
}

// ── Footer ─────────────────────────────────────────────────────
function SiteFooter({ theme = 'light' }) {
  const dark = theme === 'dark';
  const fg = dark ? 'rgba(255,255,255,0.85)' : AX.ink;
  const sub = dark ? 'rgba(255,255,255,0.5)' : AX.mute;
  const bd = dark ? 'rgba(255,255,255,0.08)' : AX.line;
  return (
    <footer style={{ borderTop: `1px solid ${bd}`, padding: '48px 80px 32px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, color: fg, fontFamily: 'Inter, sans-serif' }}>
      <div>
        <AxiomLogo color={dark ? '#fff' : AX.navy} accent={dark ? AX.cyan : AX.teal} />
        <div style={{ fontSize: 13, color: sub, marginTop: 16, lineHeight: 1.6 }}>
          Automation consulting for small businesses running on Microsoft 365.
        </div>
      </div>
      <div>
        <div style={{ fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: sub, fontWeight: 600, marginBottom: 14 }}>Contact</div>
        <div style={{ fontSize: 14, lineHeight: 1.9 }}>1300 991 992<br/>Level 18, 1 Nicholson St<br/>East Melbourne VIC 3002</div>
      </div>
      <div style={{ gridColumn: '1 / -1', borderTop: `1px solid ${bd}`, paddingTop: 20, marginTop: 8, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: sub }}>
        <div>© 2026 Axiom IT · Motion is a division of Axiom IT</div>
      </div>
    </footer>
  );
}

Object.assign(window, { AX, AxiomLogo, Icon, ROICalculator, CalendarBooking, TrustStrip, CaseCard, SiteFooter });