/* Orvio — Teaser landing (direction B). Self-contained. */

const COPY = {
  orbita:      { kicker: 'Ecossistema digital · em breve', head: ['Tudo entra', 'em órbita.'], hi: 1, sub: 'Um novo ecossistema de tecnologia está tomando forma.' },
  movimento:   { kicker: 'Ecossistema digital · em breve', head: ['Algo novo está', 'em movimento.'], hi: 1, sub: 'Você vai querer acompanhar de perto.' },
  ecossistema: { kicker: 'Ecossistema digital · em breve', head: ['Um ecossistema', 'em formação.'], hi: 1, sub: 'Algo novo está tomando forma. Você vai querer acompanhar de perto.' },
  breve:       { kicker: 'Ecossistema digital', head: ['Em breve.', 'Fique de olho.'], hi: 0, sub: 'Algo novo está a caminho.' },
};

const BG = {
  petrol:   { base: '#0B1418', a: '#1F4A6A', b: '#3A2E5C' },
  graphite: { base: '#0C0A14', a: '#3A2E5C', b: '#1F4A6A' },
  ink:      { base: '#070C10', a: '#15364A', b: '#241E36' },
};

/* ---- the mark ------------------------------------------------------ */
function Mark({ size = 420, accent = '#FF6B5C', variant = 'orvio', glow = 34, motion = true }) {
  const uid = React.useId().replace(/:/g, '');
  const g = `s-${uid}`, gl = `g-${uid}`;
  const stops = variant === 'balance'
    ? ['#B6F0DD', '#86E3C9', '#5FD9B8']
    : ['#FFA572', accent, '#FF8A7A'];
  const dot = variant === 'balance' ? '#B6F0DD' : '#FFA572';
  const acc = variant === 'balance' ? '#86E3C9' : accent;
  return (
    <svg className={'mk' + (motion ? ' mk-breathe' : '')} viewBox="-110 -110 220 220" width={size} height={size}>
      <defs>
        <linearGradient id={g} x1="-1" y1="-1" x2="1" y2="1" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor={stops[0]} />
          <stop offset="55%" stopColor={stops[1]} />
          <stop offset="100%" stopColor={stops[2]} />
        </linearGradient>
        <radialGradient id={gl} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={acc} stopOpacity={0.012 * glow} />
          <stop offset="55%" stopColor={acc} stopOpacity={0.0016 * glow} />
          <stop offset="100%" stopColor={acc} stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle r="155" fill={`url(#${gl})`} className="mk-glow" />
      <path className="mk-p1" d="M 0 -70 A 70 70 0 1 1 -49.5 49.5" fill="none" stroke={`url(#${g})`} strokeWidth="14" strokeLinecap="round" />
      <path className="mk-p2" d="M -49.5 49.5 C -30 70, 10 75, 35 55 C 55 38, 62 18, 60 -5" fill="none" stroke={`url(#${g})`} strokeWidth="14" strokeLinecap="round" />
      <circle className="mk-dot" cx="60" cy="-5" r="9" fill={dot} />
    </svg>
  );
}

/* ---- reveal-on-scroll hook ---------------------------------------- */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.2 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useViewport() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1440);
  React.useEffect(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener('resize', on); return () => window.removeEventListener('resize', on);
  }, []);
  return w;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const copy = COPY[t.copy] || COPY.ecossistema;
  const bg = BG[t.background] || BG.petrol;
  const vw = useViewport();
  const markSize = vw <= 920 ? Math.min(300, vw * 0.62) : Math.min(440, vw * 0.26);
  const [ready, setReady] = React.useState(false);
  React.useEffect(() => { const id = setTimeout(() => setReady(true), 1200); return () => clearTimeout(id); }, []);
  useReveal();

  const rootCls = 'app' + (t.motion ? '' : ' no-motion') + (ready ? ' ready' : '');

  return (
    <div className={rootCls} style={{ background: bg.base }}>
      {/* atmosphere */}
      <div className="atmos">
        <div className="atmos-grid" />
        <div className="blob" style={{ width: '70vw', height: '70vw', right: '-22vw', top: '-18vw',
          background: `radial-gradient(circle, ${bg.a} 0%, transparent 70%)`, opacity: 0.4 }} />
        <div className="blob" style={{ width: '60vw', height: '60vw', left: '-20vw', bottom: '-26vw',
          background: `radial-gradient(circle, ${bg.b} 0%, transparent 70%)`, opacity: 0.34 }} />
        <div className="blob" style={{ width: '46vw', height: '46vw', right: '2vw', top: '18vh',
          background: `radial-gradient(circle, ${t.accent}1f 0%, transparent 62%)`, opacity: 0.6 }} />
        <div className="atmos-vignette" />
      </div>

      <div className="shell">
        {/* nav */}
        <nav className="nav">
          <span className="wordmark">orvio</span>
          <span className="mono-lbl">@orvioapp</span>
        </nav>

        {/* hero */}
        <header className="hero">
          <div className="hero-text">
            <p className="kicker enter d1"><span className="chip-dot" />{copy.kicker}</p>
            <h1 className="hero-head enter d2">
              {copy.head.map((l, i) => (
                <span key={i} className={i === copy.hi ? 'accent' : ''} style={i === copy.hi ? { color: t.accent } : null}>{l}</span>
              ))}
            </h1>
            {t.showSub && <p className="hero-sub enter d3">{copy.sub}</p>}
          </div>
          <div className="hero-mark enter d2">
            <div className="rings"><span /><span /><span /></div>
            <Mark size={markSize} accent={t.accent} glow={t.glow} motion={t.motion} />
          </div>

          <div className="scroll-cue enter d4">
            <span className="mono-lbl dim">role</span>
            <span className="line" />
          </div>
        </header>

        {/* balance band */}
        <section className="balance">
          <p className="eyebrow mono-lbl reveal">O primeiro a entrar em órbita</p>
          <div className="balance-mark-row reveal">
            <Mark size={64} variant="balance" glow={22} motion={t.motion} />
            <span className="balance-name">Orvio <b>Balance</b></span>
          </div>
          <span className="balance-tag reveal"><span className="chip-dot" />em breve</span>
          <p className="balance-line reveal">O começo de algo maior. Fique de olho — vem aí.</p>
        </section>

        {/* footer */}
        <footer className="foot">
          <div className="foot-left">
            <span className="wordmark">orvio</span>
            <span className="mono-lbl dim">Ecossistema Digital</span>
          </div>
          <div className="social">
            <a href="https://instagram.com/orvioapp" target="_blank" rel="noopener" className="mono-lbl">@orvioapp</a>
            <span className="social-dot" />
            <a href="https://orvioapp.com" target="_blank" rel="noopener" className="mono-lbl">orvioapp.com</a>
            <span className="social-dot" />
            <span className="mono-lbl dim">MMXXVI</span>
          </div>
        </footer>
      </div>

      {/* tweaks */}
      <TweaksPanel>
        <TweakSection label="Mensagem" />
        <TweakSelect label="Texto" value={t.copy}
          options={[
            { value: 'ecossistema', label: 'Ecossistema em formação' },
            { value: 'orbita', label: 'Tudo entra em órbita' },
            { value: 'movimento', label: 'Algo novo em movimento' },
            { value: 'breve', label: 'Em breve / fique de olho' },
          ]}
          onChange={(v) => setTweak('copy', v)} />
        <TweakToggle label="Subtítulo" value={t.showSub} onChange={(v) => setTweak('showSub', v)} />

        <TweakSection label="Visual" />
        <TweakColor label="Acento Orvio" value={t.accent}
          options={['#FF6B5C', '#FFA572', '#FF8A7A']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Fundo" value={t.background}
          options={['petrol', 'graphite', 'ink']}
          onChange={(v) => setTweak('background', v)} />
        <TweakSlider label="Brilho do símbolo" value={t.glow} min={10} max={70} unit=""
          onChange={(v) => setTweak('glow', v)} />

        <TweakSection label="Movimento" />
        <TweakToggle label="Animações" value={t.motion} onChange={(v) => setTweak('motion', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);