// Get Better Software — landing site
// Honest: nothing has shipped yet. Apps are placeholders ("In progress" / "Sketching").
// One real interactive piece: the practice-loop demo. It uses localStorage so a
// visitor can come back tomorrow and see their streak.

const GB = {
  ink: 'var(--ink)',
  paper: 'var(--paper)',
  fg2: 'var(--fg-2)',
  fg3: 'var(--fg-3)',
  border: 'var(--border)',
  divider: 'var(--divider)',
  stone0: 'var(--stone-0)',
  stone1: 'var(--stone-1)',
  sprout: 'var(--sprout)',
  sproutDeep: 'var(--sprout-deep)',
  sproutSoft: 'var(--sprout-soft)',
  ease: 'var(--ease-standard)',
  font: 'var(--font-sans)',
  mono: 'var(--font-mono)',
};

// ───────────────────────── Nav ─────────────────────────
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(250,250,246,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? `1px solid ${GB.divider}` : '1px solid transparent',
      transition: `background ${GB.ease} 220ms, border-color ${GB.ease} 220ms`,
    }}>
      <nav style={{
        maxWidth: 1120, margin: '0 auto', padding: '20px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: GB.font,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="assets/logo-wordmark.svg" alt="Get Better Software" style={{ height: 26 }}/>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href="#idea" style={navLink}>Idea</a>
          <a href="#try" style={navLink}>Try it</a>
          <a href="#contact" style={navLink}>Contact</a>
        </div>
      </nav>
    </div>
  );
}
const navLink = {
  color: GB.ink, textDecoration: 'none',
  fontFamily: GB.font, fontSize: 14, fontWeight: 500,
  letterSpacing: '-0.005em',
};

// ─────────────────────── Hero ───────────────────────
function Hero() {
  return (
    <section id="top" className="gbs-grid-2" style={{
      maxWidth: 1120, margin: '0 auto', padding: '64px 32px 96px',
      display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 72, alignItems: 'center',
      fontFamily: GB.font,
    }}>
      <div>
        <Eyebrow dot>One person, building quietly</Eyebrow>
        <h1 style={{
          margin: '24px 0 0', fontFamily: GB.font,
          fontSize: 'clamp(56px, 7.2vw, 96px)', fontWeight: 300,
          letterSpacing: '-0.045em', lineHeight: 0.95, color: GB.ink,
        }}>
          Small software<br/>for getting<br/>
          <span style={{ position: 'relative', display: 'inline-block' }}>
            measurably
            <Underline/>
          </span>{' '}
          better.
        </h1>
        <p style={{
          margin: '32px 0 0', maxWidth: 480, fontSize: 18, lineHeight: 1.55,
          color: GB.fg2, fontWeight: 400,
        }}>
          Software for skills worth practicing. A few minutes a day, and a number that goes up.
        </p>
        <div style={{ display: 'flex', gap: 8, marginTop: 36, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="#try" style={primaryBtn}>Try the practice loop</a>
          <a href="#idea" style={ghostBtn}>Read the idea →</a>
        </div>
      </div>

      <HeroDemo/>
    </section>
  );
}

const primaryBtn = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  background: GB.ink, color: '#fff', textDecoration: 'none',
  padding: '14px 22px', borderRadius: 14, fontSize: 16, fontWeight: 600,
  letterSpacing: '-0.01em', fontFamily: GB.font,
};
const ghostBtn = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  color: GB.ink, textDecoration: 'none',
  padding: '14px 18px', borderRadius: 14, fontSize: 16, fontWeight: 500,
  fontFamily: GB.font,
};

function FactNote({ k, v }) {
  return (
    <div>
      <div style={{
        fontFamily: GB.mono, fontSize: 22, fontWeight: 600,
        letterSpacing: '-0.02em', color: GB.ink, fontVariantNumeric: 'tabular-nums',
      }}>{v}</div>
      <div style={{ fontSize: 12, color: GB.fg3, marginTop: 4, letterSpacing: '0.02em' }}>{k}</div>
    </div>
  );
}

function Eyebrow({ children, dot = false }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontSize: 12, fontWeight: 500, letterSpacing: '0.04em', color: GB.fg3,
      padding: '6px 12px', border: `1px solid ${GB.border}`, borderRadius: 9999,
      whiteSpace: 'nowrap', fontFamily: GB.font, background: 'rgba(255,255,255,0.5)',
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 9999, background: GB.sprout }}></span>}
      {children}
    </div>
  );
}

function Underline() {
  return (
    <svg viewBox="0 0 320 18" preserveAspectRatio="none" style={{
      position: 'absolute', left: 0, bottom: '-0.04em', width: '100%', height: '0.18em',
      pointerEvents: 'none',
    }}>
      <path d="M 4 12 C 80 6, 180 4, 316 10" fill="none"
        stroke="var(--sprout)" strokeWidth="4" strokeLinecap="round"/>
    </svg>
  );
}

// ──────────────────── Hero demo (small phone-shaped card) ────────────────────
// A floating "today's session" preview. The real interaction lives in #try.

function HeroDemo() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <div style={{
        width: 320, padding: 28, borderRadius: 28, background: '#fff',
        border: `1px solid ${GB.border}`,
        boxShadow: '0 30px 60px rgba(14,20,17,0.10), 0 2px 6px rgba(14,20,17,0.04)',
        fontFamily: GB.font, color: GB.ink,
        transform: 'rotate(-1.2deg)',
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginBottom: 24,
        }}>
          <div style={{ fontSize: 12, color: GB.fg3, letterSpacing: '0.04em' }}>TODAY</div>
          <div style={{
            fontFamily: GB.mono, fontSize: 11, padding: '4px 10px', borderRadius: 9999,
            background: GB.sproutSoft, color: GB.sproutDeep, fontWeight: 600, letterSpacing: '0.04em',
          }}>DAY 12</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0 16px' }}>
          <StreakRing progress={0.7} size={148} label="6 / 8" sub="today"/>
        </div>
        <div style={{
          marginTop: 8, padding: '14px 16px', borderRadius: 14, background: GB.stone0,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>Keep going</div>
            <div style={{ fontSize: 12, color: GB.fg3, marginTop: 2 }}>a little more</div>
          </div>
          <div style={{
            width: 36, height: 36, borderRadius: 9999, background: GB.ink,
            display: 'grid', placeItems: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8M8 4l3 3-3 3" stroke="#fff" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

// Reusable streak ring (filled arc, no animation loop)
function StreakRing({ progress, size = 140, label, sub, color = GB.sprout }) {
  const stroke = 10;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - Math.max(0, Math.min(1, progress)));
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--stone-1)" strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r}
          stroke={color} strokeWidth={stroke} fill="none"
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
          style={{ transition: `stroke-dashoffset 380ms ${GB.ease}` }}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        fontFamily: GB.font,
      }}>
        <div style={{
          fontFamily: GB.mono, fontSize: 22, fontWeight: 600,
          letterSpacing: '-0.02em', color: GB.ink, fontVariantNumeric: 'tabular-nums',
        }}>{label}</div>
        {sub && <div style={{ fontSize: 12, color: GB.fg3, marginTop: 2 }}>{sub}</div>}
      </div>
    </div>
  );
}

window.GB = GB;
window.Nav = Nav;
window.Hero = Hero;
window.StreakRing = StreakRing;
window.Eyebrow = Eyebrow;