// scenes-ethos.jsx — "Software got loud. We're making it quieter."
// A single-column editorial manifesto. Words are revealed in waves as the
// section enters the viewport — each word fades and lifts on its own timing,
// like ink finding paper. Below: three pillar columns.

const { useEffect: useEffectEthos, useRef: useRefEthos, useState: useStateEthos } = React;

function useInView(ref, opts = { threshold: 0.2 }) {
  const [seen, setSeen] = useStateEthos(false);
  useEffectEthos(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setSeen(true); });
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return seen;
}

// Reveal a string word-by-word with a stagger.
function RevealWords({ text, delay = 0, stagger = 0.05, italic = [], em = [], style }) {
  const ref = useRefEthos(null);
  const seen = useInView(ref, { threshold: 0.25 });
  const words = text.split(' ');
  return (
    <span ref={ref} style={style}>
      {words.map((w, i) => (
        <span key={i} style={{ display: 'inline-block', verticalAlign: 'baseline', marginRight: '0.28em',
          transform: seen ? 'translateY(0)' : 'translateY(40px)',
          opacity: seen ? 1 : 0,
          filter: seen ? 'blur(0)' : 'blur(8px)',
          transition: `transform 1.2s cubic-bezier(.2,.7,.2,1) ${delay + i * stagger}s, opacity 1s ${delay + i * stagger}s, filter 1s ${delay + i * stagger}s`,
          fontStyle: italic.includes(i) ? 'italic' : 'inherit',
          color: em.includes(i) ? 'var(--gold)' : 'inherit',
        }}>{w}</span>
      ))}
    </span>
  );
}

function EthosPillar({ num, title, body, delay }) {
  const ref = useRefEthos(null);
  const seen = useInView(ref, { threshold: 0.3 });
  return (
    <div ref={ref} style={{
      borderTop: '1px solid currentColor',
      paddingTop: 22,
      opacity: seen ? 1 : 0,
      transform: seen ? 'translateY(0)' : 'translateY(40px)',
      transition: `opacity 1s ${delay}s, transform 1.2s cubic-bezier(.2,.7,.2,1) ${delay}s`,
      color: 'currentColor',
    }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.3em', opacity: 0.7, display: 'block', marginBottom: 14 }}>{num}</span>
      <h4 style={{ fontFamily: 'var(--serif)', fontSize: 32, fontStyle: 'italic', marginBottom: 14, fontWeight: 400 }}>{title}</h4>
      <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.78, fontFamily: 'var(--serif)' }}>{body}</p>
    </div>
  );
}

function Ethos() {
  return (
    <section id="ethos" style={{
      position: 'relative',
      padding: '180px 8vw 200px',
      color: 'var(--ink)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.5em', textTransform: 'uppercase',
          color: 'var(--sepia)', marginBottom: 56, display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <span style={{ fontSize: 9 }}>◆</span>
          <span>Est. MMXXVI &nbsp;·&nbsp; Manchester &nbsp;·&nbsp; A studio of four small things</span>
        </div>

        <h2 style={{
          fontFamily: 'var(--serif)',
          fontSize: 'clamp(64px, 9vw, 140px)',
          lineHeight: 0.95,
          fontWeight: 300,
          letterSpacing: '-0.03em',
          marginBottom: 80,
          maxWidth: 1200,
        }}>
          <RevealWords
            text="Software got loud."
            italic={[1, 2]}
            em={[1, 2]}
            style={{ display: 'block' }}
          />
          <RevealWords
            text="We are making it quieter,"
            delay={0.4}
            italic={[4]}
            em={[4]}
            style={{ display: 'block' }}
          />
          <RevealWords
            text="one small tool at a time."
            delay={0.9}
            italic={[1, 2]}
            style={{ display: 'block', color: 'var(--sepia-2)' }}
          />
        </h2>

        <div className="ethos-cols" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 60,
          color: 'var(--ink)',
        }}>
          <EthosPillar num="01 · Local" title="Local-first, always"
            body="Every Ari runs on your device by default. Cloud is a tool we use when it helps you — never the place your day lives."
            delay={0} />
          <EthosPillar num="02 · Finished" title="Finished, not platform"
            body="Each tool is small enough to actually finish. No infinite roadmap. No engagement metrics. A book, not a feed."
            delay={0.15} />
          <EthosPillar num="03 · Editorial" title="Editorial by design"
            body="Serif type, generous margins, a single column of attention. Software that respects the reader."
            delay={0.3} />
        </div>
      </div>
    </section>
  );
}

window.Ethos = Ethos;
window.useInView = useInView;
window.RevealWords = RevealWords;