/* Hero — full-bleed, dot-gridded, with the mark anchored right */

/* Typewriter — cycles taglines in the protocol voice */
function useTypewriter(phrases, {
  typeMs = 95, deleteMs = 45, holdMs = 3200, pauseMs = 700, waitMs = 2000, loop = true,
} = {}) {
  const [idx, setIdx] = React.useState(0);
  const [text, setText] = React.useState('');
  const [phase, setPhase] = React.useState('wait'); // wait | type | hold | delete | pause | done

  React.useEffect(() => {
    const full = phrases[idx];
    let t;
    if (phase === 'wait') {
      t = setTimeout(() => setPhase('type'), waitMs);
    } else if (phase === 'type') {
      if (text.length < full.length) {
        t = setTimeout(() => setText(full.slice(0, text.length + 1)), typeMs);
      } else {
        t = setTimeout(() => setPhase('hold'), 0);
      }
    } else if (phase === 'hold') {
      // Last phrase + non-looping → stay forever.
      if (!loop && idx === phrases.length - 1) {
        t = setTimeout(() => setPhase('done'), holdMs);
      } else {
        t = setTimeout(() => setPhase('delete'), holdMs);
      }
    } else if (phase === 'delete') {
      if (text.length > 0) {
        t = setTimeout(() => setText(text.slice(0, -1)), deleteMs);
      } else {
        t = setTimeout(() => setPhase('pause'), 0);
      }
    } else if (phase === 'pause') {
      t = setTimeout(() => {
        const next = idx + 1;
        if (next >= phrases.length) {
          if (loop) {
            setIdx(0);
            setPhase('type');
          } else {
            setPhase('done');
          }
        } else {
          setIdx(next);
          setPhase('type');
        }
      }, pauseMs);
    }
    return () => clearTimeout(t);
  }, [text, phase, idx, phrases, typeMs, deleteMs, holdMs, pauseMs, loop]);

  return [text, phase];
}

function Hero() {
  const phrases = [
    'What if using a rented asset\ndidn\u2019t take it off the market?',
    'The market\nwould never close.',
    'Rented assets\nwould be liquid.',
    'The answer\nis usufruct.',
  ];
  const [typed, phase] = useTypewriter(phrases, {loop: false});
  // Reveal the descriptor as soon as the final phrase is fully typed (not after the hold).
  const lastPhrase = phrases[phrases.length - 1];
  const revealed = typed === lastPhrase;
  // After typing is done, blink 3 times then hide the cursor.
  const [cursorVisible, setCursorVisible] = React.useState(true);
  React.useEffect(() => {
    if (phase === 'done') {
      const t = setTimeout(() => setCursorVisible(false), 500);
      return () => clearTimeout(t);
    }
  }, [phase]);
  return (
    <section id="top" className="section" style={{
      minHeight:'92vh',
      paddingTop: 120,
      position:'relative',
      overflow:'hidden',
    }}>
      <div className="container" style={{position:'relative', paddingBottom:64}}>
        <div style={{
          display:'flex',
          alignItems:'center',
          minHeight: '64vh',
        }}>
          <div style={{maxWidth: 1100, margin: '0 auto'}}>
            <h1 style={{
              fontFamily:'var(--font-sans)',
              fontWeight:500,
              fontSize:'clamp(68px, 8.2vw, 132px)',
              lineHeight:0.94,
              letterSpacing:'-0.035em',
              margin:0,
              color:'var(--fg-0)',
              textWrap:'balance',
              whiteSpace:'pre-line',
            }}>
              {(() => {
                // Find which phrase we're currently rendering based on what 'typed' matches.
                const current = phrases.find(p => p.startsWith(typed)) || phrases[0];
                const lastWord = current.trim().split(/\s+/).pop();
                const tailStart = current.length - lastWord.length;
                const head = typed.slice(0, Math.min(typed.length, tailStart));
                const tail = typed.slice(Math.min(typed.length, tailStart));
                return (
                  <React.Fragment>
                    {head}
                    <span style={{color:'var(--signal)'}}>{tail}</span>
                    <span className="cursor" style={{
                      opacity: cursorVisible ? 1 : 0,
                      animation: cursorVisible ? undefined : 'none',
                      transition: 'opacity 320ms var(--ease-out)',
                    }}/>
                  </React.Fragment>
                );
              })()}
            </h1>
            <p style={{
              maxWidth:640,
              fontFamily:'var(--font-sans)',
              fontSize:'24px',
              lineHeight:1.45,
              color:'var(--fg-1)',
              margin:'36px auto 0',
              textAlign:'center',
              textWrap:'pretty',
              opacity: revealed ? 1 : 0,
              transform: revealed ? 'translateY(0)' : 'translateY(8px)',
              transition: 'opacity 500ms var(--ease-out), transform 500ms var(--ease-out)',
              pointerEvents: revealed ? 'auto' : 'none',
            }}>
              A new market layer for Sui — where the right of use trades
              independently from ownership, and rented assets stay liquid.
            </p>
            <div style={{
              display:'flex', alignItems:'center', justifyContent:'center', gap:8,
              marginTop:20,
              opacity: revealed ? 1 : 0,
              transform: revealed ? 'translateY(0)' : 'translateY(8px)',
              transition: 'opacity 600ms var(--ease-out) 120ms, transform 600ms var(--ease-out) 120ms',
            }}>
              <span style={{fontFamily:'var(--font-mono)', fontSize:16, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--fg-2)'}}>Built on Sui</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;