/* cst-home.jsx — the homepage hub. Lifecycle framing + three tool entry points.
   Variations: heroLayout (graph | copy), toolDisplay (cards | list | timeline).
   Exported to window as HomeScreen. */

const { useState: _huS, useEffect: _huE } = React;
const _HC = window.CST;
const { FONT: _hF, TEXT: _hT, HAZE: _hH, HAZE_DIM: _hHD, HAIR: _hHR, GLASS: _hG, GLASS_HI: _hGH, INK: _hI, AMBER: _hAMBER } = _HC;

const _HEADLINES = [
  'What decision\nare you facing\nright now?',
  'What call are\nyou stuck on\ntoday?',
  'What would you\ndecide if you\nhad a strategist?',
  'What are you\nputting off\ndeciding?',
  'What bet are\nyou about to\nmake?',
  'What keeps you\nup at night\nabout your business?',
];

// hue per tool for homepage wayfinding (passed from app)
function ToolCard({ tool, hue, onPick }) {
  const [hover, setHover] = _huS(false);
  return (
    <button onClick={onPick} onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
      style={{
        textAlign: 'left', cursor: 'pointer', borderRadius: 15, padding: '15px 16px', width: '100%',
        background: hover ? _hGH : _hG, border: `1px solid ${hover ? hue : _hHR}`,
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
        display: 'flex', alignItems: 'center', gap: 14, transition: 'all .18s',
      }}>
      <span style={{
        width: 42, height: 42, borderRadius: 11, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: hue + '1c', border: `1px solid ${hue}44`, color: hue, fontFamily: _hF, fontWeight: 800, fontSize: 19,
        boxShadow: hover ? `0 0 18px -4px ${hue}` : 'none', transition: 'box-shadow .2s',
      }}>{tool.glyph}</span>
      <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 3 }}>
        <span style={{ fontFamily: _hF, fontSize: 9, letterSpacing: 1.8, color: hue, fontWeight: 600, textTransform: 'uppercase' }}>{tool.name}</span>
        <span style={{ fontFamily: _hF, fontWeight: 700, fontSize: 16, color: _hT, letterSpacing: -0.3, lineHeight: 1.15 }}>{tool.ask}</span>
        <span style={{ display: 'block', fontFamily: _hF, fontSize: 11.5, color: _hH, lineHeight: 1.35 }}>{tool.tag}</span>
      </span>
      <span style={{ color: hue, fontSize: 17, flexShrink: 0 }}>→</span>
    </button>);
}

function ToolRow({ tool, hue, onPick, last }) {
  const [hover, setHover] = _huS(false);
  return (
    <button onClick={onPick} onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
      style={{
        textAlign: 'left', cursor: 'pointer', width: '100%', padding: '14px 4px',
        background: 'transparent', border: 'none', borderBottom: last ? 'none' : `1px solid ${_hHR}`,
        display: 'flex', alignItems: 'center', gap: 13, transition: 'all .15s',
      }}>
      <span style={{ width: 24, color: hue, fontFamily: _hF, fontWeight: 800, fontSize: 17, textAlign: 'center', flexShrink: 0 }}>{tool.glyph}</span>
      <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{ fontFamily: _hF, fontWeight: 700, fontSize: 14.5, color: hover ? hue : _hT, transition: 'color .15s', letterSpacing: -0.2 }}>{tool.ask}</span>
        <span style={{ fontFamily: _hF, fontSize: 11, color: _hH }}><span style={{ color: hue }}>{tool.name}</span> · {tool.tag}</span>
      </span>
      <span style={{ color: hover ? hue : _hHD, fontSize: 15, flexShrink: 0, transition: 'color .15s' }}>→</span>
    </button>);
}

// lifecycle timeline — STARTING then RUNNING, tools sit on the spine
function ToolTimeline({ tools, hueFor, onPick }) {
  const phases = [
    { key: 'STARTING', items: tools.filter((t) => t.phase === 'STARTING') },
    { key: 'RUNNING', items: tools.filter((t) => t.phase === 'RUNNING') },
  ];
  return (
    <div style={{ position: 'relative', paddingLeft: 20 }}>
      <div style={{ position: 'absolute', left: 5, top: 8, bottom: 8, width: 2, background: `linear-gradient(${_hAMBER}, ${hueFor(tools[1])})`, opacity: 0.5 }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {phases.map((ph) => (
          <div key={ph.key}>
            <div style={{ position: 'relative', marginBottom: 9 }}>
              <span style={{ position: 'absolute', left: -19, top: 3, width: 10, height: 10, borderRadius: 99, background: hueFor(ph.items[0]), boxShadow: `0 0 10px ${hueFor(ph.items[0])}` }} />
              <span style={{ fontFamily: _hF, fontSize: 10, letterSpacing: 2.5, color: _hHD, fontWeight: 700 }}>{ph.key === 'STARTING' ? `WHEN YOU'RE STARTING` : `WHEN YOU'RE RUNNING`}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {ph.items.map((tool) => {
                const hue = hueFor(tool);
                return (
                  <button key={tool.id} onClick={() => onPick(tool.id)} style={{
                    textAlign: 'left', cursor: 'pointer', borderRadius: 12, padding: '11px 13px', width: '100%',
                    background: _hG, border: `1px solid ${_hHR}`, display: 'flex', alignItems: 'center', gap: 11,
                  }}>
                    <span style={{ width: 22, color: hue, fontFamily: _hF, fontWeight: 800, fontSize: 16, textAlign: 'center' }}>{tool.glyph}</span>
                    <span style={{ flex: 1, fontFamily: _hF, fontWeight: 700, fontSize: 14, color: _hT }}>{tool.name}</span>
                    <span style={{ color: hue, fontSize: 15 }}>→</span>
                  </button>);
              })}
            </div>
          </div>
        ))}
      </div>
    </div>);
}

function HomeScreen({ active, hueFor, onPick, heroLayout = 'graph', toolDisplay = 'cards', decisionCtx, setDecisionCtx }) {
  const tools = _HC.TOOLS;
  const graphForward = heroLayout === 'graph';

  const [hlIdx, setHlIdx] = _huS(0);
  _huE(() => {
    if (!active) return;
    const id = setInterval(() => setHlIdx((i) => (i + 1) % _HEADLINES.length), 4000);
    return () => clearInterval(id);
  }, [active]);

  const headline = (
    <h1 key={hlIdx} style={{
      margin: 0, fontFamily: _hF, fontWeight: 700, color: _hT, letterSpacing: -1.4,
      fontSize: graphForward ? 27 : 33, lineHeight: 1.12,
      animation: 'cstFadeIn .5s ease',
    }}>
      {_HEADLINES[hlIdx].split('\n').map((line, i, a) => <React.Fragment key={i}>{line}{i < a.length - 1 && <br />}</React.Fragment>)}
    </h1>
  );

  const toolBlock = toolDisplay === 'list' ? (
    <div style={{ background: _hG, borderRadius: 15, border: `1px solid ${_hHR}`, padding: '4px 14px', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' }}>
      {tools.map((t, i) => <ToolRow key={t.id} tool={t} hue={hueFor(t)} onPick={() => onPick(t.id)} last={i === tools.length - 1} />)}
    </div>
  ) : toolDisplay === 'timeline' ? (
    <ToolTimeline tools={tools} hueFor={hueFor} onPick={onPick} />
  ) : (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
      {tools.map((t) => <ToolCard key={t.id} tool={t} hue={hueFor(t)} onPick={() => onPick(t.id)} />)}
    </div>
  );

  return (
    <StageCard active={active} dir="left" label="Home">
      {/* darken top + bottom, let the graph glow through the middle */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: graphForward
        ? 'linear-gradient(180deg, rgba(15,17,21,0.82) 0%, rgba(15,17,21,0.18) 22%, rgba(15,17,21,0) 44%, rgba(15,17,21,0.45) 60%, rgba(15,17,21,0.98) 82%)'
        : 'linear-gradient(180deg, rgba(15,17,21,0.9) 0%, rgba(15,17,21,0.62) 30%, rgba(15,17,21,0.5) 50%, rgba(15,17,21,0.82) 72%, rgba(15,17,21,0.98) 100%)' }} />

      <div className="cst-scroll" style={{ position: 'relative', height: '100%', overflowY: 'auto' }}>
        <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '64px 22px 8px', gap: 22 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
            {headline}
            <p style={{ margin: 0, fontFamily: _hF, fontSize: 13.5, lineHeight: 1.55, color: _hH, maxWidth: 360 }}>
              An AI advisor that's direct, human-based, and unafraid to disagree. <span style={{ color: _hT, fontWeight: 600 }}>Decide easier, better, faster.</span>
            </p>
            <LiveCounter accent={_hAMBER} noun="decisions pressure-tested" style={{ marginTop: 2 }} />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ flex: 1, height: 1, background: _hHR }} />
              <span style={{ fontFamily: _hF, fontSize: 9.5, letterSpacing: 2, color: _hHD }}>STARTING OR RUNNING — PICK YOUR CALL</span>
              <span style={{ flex: 1, height: 1, background: _hHR }} />
            </div>
            {toolBlock}
            <button onClick={() => onPick('book')} style={{
              background: 'none', border: 'none', color: _hH, fontFamily: _hF, fontSize: 12, cursor: 'pointer',
              padding: '6px 4px 2px', letterSpacing: 0.3, alignSelf: 'center',
            }}>or book a working session →</button>
          </div>
        </div>
      </div>
    </StageCard>);
}

window.HomeScreen = HomeScreen;