// hero.jsx — landing hero
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

function RotatingWord({ words, interval = 2200 }) {
  const [i, setI] = useStateHero(0);
  useEffectHero(() => {
    const t = setInterval(() => setI((x) => (x + 1) % words.length), interval);
    return () => clearInterval(t);
  }, [words.length, interval]);

  return (
    <span style={{
      position: 'relative', display: 'inline-block', verticalAlign: 'baseline',
      color: 'var(--accent)', minWidth: '0'
    }}>
      {words.map((w, idx) =>
      <span key={w} style={{
        display: idx === i ? 'inline-block' : 'none',
        animation: idx === i ? 'wordIn 0.6s cubic-bezier(.2,.8,.2,1)' : 'none'
      }}>{w}</span>
      )}
      <style>{`
        @keyframes wordIn {
          from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
          to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
      `}</style>
    </span>);

}

function Hero({ setPage, tokens }) {
  const isMobileHero = useIsMobile(640);
  return (
    <section style={{
      position: 'relative',
      minHeight: isMobileHero ? 'auto' : '100vh',
      paddingTop: isMobileHero ? 72 : 120,
      overflow: 'hidden',
      background: `radial-gradient(ellipse 1000px 600px at 70% 20%, ${tokens.heroGlow}, transparent 60%)`
    }}>
      <div className="grid-bg" />

      <div className="section" style={{ paddingTop: isMobileHero ? 24 : 60, paddingBottom: isMobileHero ? 16 : 40, position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="tag" style={{ marginBottom: 28 }}>
            <span className="pulse-dot" />
            <span>We give you your time back.</span>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <h1 style={{
            fontSize: 'clamp(44px, 7vw, 92px)',
            fontWeight: 500,
            letterSpacing: '-0.035em',
            lineHeight: 0.98,
            margin: 0,
            maxWidth: 1100,
            textWrap: 'balance'
          }}>
            Give your team back<br />
            the hours they lose to <RotatingWord words={['admin.', 'paperwork.', 'missed calls.', 'data entry.', 'overhead.']} />
          </h1>
        </Reveal>

        <Reveal delay={200}>
          <p style={{
            marginTop: 28,
            fontSize: 'clamp(17px, 1.6vw, 21px)',
            color: 'var(--ink-dim)',
            maxWidth: 680,
            lineHeight: 1.45,
            textWrap: 'pretty'
          }}>
            We help small and mid-size businesses eliminate administrative waste,
            capture missed revenue, and automate manual workflows with AI. Particularly
            effective for operational and field-service teams. 3.5+ years turning
            real-world operational pain into measurable results.
          </p>
        </Reveal>

        <Reveal delay={320}>
          <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Magnetic>
              <button className="btn btn-primary" style={{ fontSize: 15, padding: '14px 24px' }}
              onClick={() => setPage('contact')}>
                Request a demo
                <svg width="14" height="14" viewBox="0 0 12 12"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </button>
            </Magnetic>
            <Magnetic>
              <a className="btn btn-ghost" style={{ fontSize: 15, padding: '14px 24px' }}
              href="mailto:hello@timegainai.com">Email us</a>
            </Magnetic>
          </div>
        </Reveal>

        <Reveal delay={480}>
          <div className="r-hide-mobile" style={{ marginTop: 96, position: 'relative' }}>
            <HeroVignette />
          </div>
        </Reveal>

        {isMobileHero && (
          <Reveal delay={480}>
            <div style={{ marginTop: 36, position: 'relative' }}>
              <HeroVignetteMobile />
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

// Compact mobile version of HeroVignette: keeps the "AI morning routine"
// stat block + a vertical mini-pipeline so the hero doesn't read as an
// empty void below the buttons.
function HeroVignetteMobile() {
  const [step, setStep] = useStateHero(0);
  useEffectHero(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % 5), 1400);
    return () => clearInterval(t);
  }, []);
  const pipeline = [
    { label: 'Inbox swept',    detail: 'priority + drafts' },
    { label: 'Docs reviewed',  detail: 'summaries ready' },
    { label: 'CRM updated',    detail: 'contacts + notes' },
    { label: 'Calendar',       detail: 'rebalanced' },
    { label: 'Daily brief',    detail: 'team ready' },
  ];
  return (
    <div style={{
      border: '1px solid var(--bg-line)',
      borderRadius: 16,
      background: 'linear-gradient(180deg, rgba(20,26,44,0.7), rgba(20,26,44,0.4))',
      backdropFilter: 'blur(10px)',
      padding: 18,
      display: 'grid',
      gap: 16,
      boxShadow: '0 30px 60px -30px rgba(0,0,0,0.6)',
    }}>
      {/* Stat block */}
      <div style={{ padding: 14, background: 'var(--bg)', borderRadius: 12, border: '1px solid var(--bg-line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <div style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent)' }} />
          <span className="mono" style={{ fontSize: 10 }}>engagement sample</span>
        </div>
        <div className="mono" style={{ fontSize: 9, color: 'var(--ink-faint)', marginBottom: 4, letterSpacing: '0.08em' }}>
          ILLUSTRATIVE
        </div>
        <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 2 }}>
          AI morning routine
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginBottom: 14 }}>
          What gets done before 9am
        </div>
        <div style={{ display: 'grid', gap: 8 }}>
          {[
            ['Emails processed', '247'],
            ['Docs reviewed', '12'],
            ['CRM records', '43'],
            ['Hours back', <span key="h" style={{ color: 'var(--accent)' }}>+6.2 / wk</span>],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
              <span style={{ color: 'var(--ink-faint)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</span>
              <span>{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Vertical pipeline — one step lit at a time */}
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <span className="mono" style={{ fontSize: 10 }}>Sample workflow</span>
          <span className="mono" style={{ color: 'var(--accent)', fontSize: 10 }}>● demo</span>
        </div>
        <div style={{ display: 'grid', gap: 8 }}>
          {pipeline.map((p, i) => (
            <div key={p.label} style={{
              padding: '10px 12px',
              border: '1px solid',
              borderColor: i === step ? 'var(--accent)' : 'var(--bg-line)',
              borderRadius: 10,
              background: i === step ? 'rgba(139,233,253,0.08)' : 'var(--bg)',
              transition: 'all 0.3s',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-faint)', minWidth: 28 }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{p.label}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-faint)', fontFamily: 'var(--font-mono)' }}>
                {p.detail}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-faint)', letterSpacing: '0.04em' }}>
        Illustrative scenario. Not actual client data.
      </div>
    </div>
  );
}

function HeroVignette() {
  const [step, setStep] = useStateHero(0);
  // When the user clicks a step we pause auto-advance for 5s.
  // Stored as a timestamp so the interval can check freshness.
  const pausedUntilRef = useRefHero(0);
  useEffectHero(() => {
    const t = setInterval(() => {
      if (Date.now() < pausedUntilRef.current) return;
      setStep((s) => (s + 1) % 5);
    }, 1400);
    return () => clearInterval(t);
  }, []);

  const selectStep = (i) => {
    pausedUntilRef.current = Date.now() + 5000;
    setStep(i);
  };

  const pipeline = [
  { label: 'Inbox swept', detail: 'priority + drafts' },
  { label: 'Docs reviewed', detail: 'summaries ready' },
  { label: 'CRM updated', detail: 'contacts + notes' },
  { label: 'Calendar', detail: 'rebalanced' },
  { label: 'Daily brief', detail: 'team ready' }];


  return (
    <div className="r-stack-960" style={{
      border: '1px solid var(--bg-line)',
      borderRadius: 18,
      background: 'linear-gradient(180deg, rgba(20,26,44,0.7), rgba(20,26,44,0.4))',
      backdropFilter: 'blur(10px)',
      padding: 24,
      display: 'grid',
      gridTemplateColumns: '260px 1fr',
      gap: 24,
      boxShadow: '0 40px 80px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset'
    }}>
      <div style={{ padding: 16, background: 'var(--bg)', borderRadius: 12, border: '1px solid var(--bg-line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
          <div style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent)' }} />
          <span className="mono">engagement sample</span>
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', marginBottom: 6, letterSpacing: '0.08em' }}>
          ILLUSTRATIVE · sample morning
        </div>
        <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 4 }}>
          AI morning routine
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-dim)', marginBottom: 20 }}>
          What gets done before 9am
        </div>
        <div style={{ display: 'grid', gap: 10 }}>
          {[
          ['Emails processed', '247'],
          ['Docs reviewed', '12'],
          ['CRM records', '43'],
          ['Hours back', <span style={{ color: 'var(--accent)' }}>+6.2 / wk</span>]].
          map(([k, v]) =>
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
              <span style={{ color: 'var(--ink-faint)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</span>
              <span>{v}</span>
            </div>
          )}
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <span className="mono">Sample workflow</span>
          <span className="mono" style={{ color: 'var(--accent)' }}>● demo</span>
        </div>
        <div className="hero-pipeline" style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${pipeline.length}, 1fr)`,
          gap: 10
        }}>
          {pipeline.map((p, i) =>
          <div key={p.label}
            role="button"
            tabIndex={0}
            onClick={() => selectStep(i)}
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectStep(i); } }}
            style={{
            padding: 14,
            border: '1px solid',
            borderColor: i === step ? 'var(--accent)' : 'var(--bg-line)',
            borderRadius: 10,
            background: i === step ? 'rgba(139,233,253,0.08)' : 'var(--bg)',
            transition: 'all 0.3s',
            position: 'relative',
            cursor: 'pointer',
            userSelect: 'none',
            outline: 'none'
          }}>
              <div className="mono" style={{ fontSize: 9, marginBottom: 6 }}>STEP {String(i + 1).padStart(2, '0')}</div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{p.label}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-faint)', fontFamily: 'var(--font-mono)', marginTop: 4 }}>
                {p.detail}
              </div>
            </div>
          )}
        </div>
        <div style={{
          marginTop: 16, padding: 14, borderRadius: 10,
          background: 'var(--bg)', border: '1px solid var(--bg-line)',
          fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-dim)',
          display: 'grid', gap: 4, minHeight: 96
        }}>
          {[
            { revealAt: 0, jsx: <><span style={{ color: 'var(--ink-faint)' }}>[08:14:02]</span> <span style={{ color: 'var(--accent)' }}>sweep</span> · 247 unread, 14 priority surfaced</> },
            { revealAt: 1, jsx: <><span style={{ color: 'var(--ink-faint)' }}>[08:14:03]</span> <span style={{ color: 'var(--accent-2)' }}>review</span> · 12 docs summarized for the team</> },
            { revealAt: 2, jsx: <><span style={{ color: 'var(--ink-faint)' }}>[08:14:04]</span> <span style={{ color: 'var(--accent)' }}>CRM</span> · 43 contacts updated, 9 follow-ups queued</> },
            { revealAt: 3, jsx: <><span style={{ color: 'var(--ink-faint)' }}>[08:14:05]</span> <span style={{ color: 'var(--accent-2)' }}>calendar</span> · 3 conflicts resolved, focus blocks held</> },
            { revealAt: 4, jsx: <><span style={{ color: 'var(--ink-faint)' }}>[08:14:06]</span> ✓ daily brief ready · <span style={{ color: 'var(--ink)' }}>6.2 hrs reclaimed this week</span></> },
          ].map((line, i) => {
            const visible = step >= line.revealAt;
            return (
              <div key={i} style={{
                opacity: visible ? 1 : 0,
                transform: visible ? 'translateY(0)' : 'translateY(4px)',
                transition: 'opacity 0.4s ease, transform 0.4s ease',
              }}>
                {line.jsx}
              </div>
            );
          })}
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', marginTop: 10, letterSpacing: '0.04em' }}>
          Illustrative scenario. Not actual client data.
        </div>
      </div>
    </div>);

}

window.Hero = Hero;