// Notes / Blog

const NOTES = [
  {
    id: 'on-restraint',
    tag: 'THINKING', title: 'On building less.', date: '2026·05·28', read: '4 min',
    excerpt: "Why our roadmap is short on purpose, and how restraint is the feature most software forgets to ship.",
    body: [
      "There's a particular kind of software bloat that creeps in when a team measures progress by features shipped. Every sprint adds a panel, a setting, a tab. The product grows heavier, and the person using it has to carry all of it.",
      "We're trying to do the opposite. The hardest decision in most weeks isn't what to build — it's what to leave out. A narrow product that does one thing precisely is far more useful than a broad one that does ten things adequately.",
      "Restraint shows up everywhere if you look. It's the dashboard we didn't build because an email was enough. It's the configuration option we removed because a good default made the choice for you. It's the notification we suppressed because it wasn't actually urgent.",
      "None of this is glamorous. You can't put 'we removed things' on a launch announcement. But it's the difference between software that respects your attention and software that competes for it.",
      "Our first product is deliberately quiet. It works in the background, surfaces only what matters, and otherwise stays out of your way. That restraint isn't a limitation we're apologizing for — it's the whole point.",
      "If you build software, try this: for one week, measure your progress by what you removed instead of what you added. It's harder than it sounds, and it changes how you think.",
      "More soon.",
    ],
  },
  {
    id: 'hello-world',
    tag: 'COMPANY', title: 'Hello, world.', date: '2026·05·06', read: '2 min',
    excerpt: "Why we started ThinkingOLabs, what we think is broken in current AI tooling, and what we'd like to build instead.",
    body: [
      "We keep coming back to a small, stubborn idea: most software today asks people to adapt to it, when it should be the other way around.",
      "ThinkingOLabs is our attempt to push on that — to build small, opinionated products that sit close to real work, use modern AI where it actually helps, and then get out of the way.",
      "Our first product is in private beta now. We're keeping the details close while it finds its shape, but the principle is simple: catch the moments that matter, deliver them quietly, and ask nothing of your attention in return.",
      "We'll write more as we ship more. If any of this resonates — drop us a line.",
      "— The ThinkingOLabs team",
    ],
  },
];

const Blog = ({ navigate }) => {
  const [openNote, setOpenNote] = React.useState(null);
  const [subscribed, setSubscribed] = React.useState(false);
  const [email, setEmail] = React.useState('');

  const onSubscribe = (e) => {
    e.preventDefault();
    if (!email) return;
    // Open the user's email client with a pre-filled subscribe request to hello@
    const subject = encodeURIComponent('Subscribe to ThinkingOLabs notes');
    const body = encodeURIComponent(
      `Hi — please add me to the notes list.\n\n${email}\n`
    );
    window.location.href = `mailto:hello@thinkingolabs.com?subject=${subject}&body=${body}`;
    setSubscribed(true);
  };

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpenNote(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <main>
      <PageHero
        index="// NOTES"
        eyebrow="WRITING · UPDATES"
        title="Notes from the desk."
        lede="Short essays, build logs, and the occasional opinion. We'll write more as we ship more."
      />
      <section className="section">
        <div className="container">
          <div className="notes-list">
            {NOTES.map((p) => (
              <article key={p.id} className="note-row" onClick={()=>setOpenNote(p)}>
                <div className="note-meta mono">
                  <span style={{color:'var(--accent)'}}>{p.tag}</span>
                  <span>·</span>
                  <span>{p.date}</span>
                  <span>·</span>
                  <span>{p.read}</span>
                </div>
                <h2 className="note-title">{p.title}</h2>
                <p className="note-ex">{p.excerpt}</p>
                <span className="mono note-cta">Read note →</span>
              </article>
            ))}
            <div className="note-empty">
              <span className="mono" style={{color:'var(--muted)', fontSize: 11, letterSpacing:'0.14em'}}>MORE COMING SOON</span>
              <p style={{marginTop: 10}}>We're heads-down on the first prototype. Subscribe below to get notes when they go up.</p>
            </div>
          </div>
          <form className="subscribe" onSubmit={onSubscribe}>
            <span className="mono subscribe-l">SUBSCRIBE TO NOTES</span>
            {subscribed ? (
              <div className="subscribe-thanks">
                <span style={{color:'var(--accent)', fontSize: 18}}>✓</span>
                <span>Got it — we'll send the next note to <strong>{email}</strong>.</span>
              </div>
            ) : (
              <div style={{display:'flex', gap:8}}>
                <input type="email" placeholder="you@company.com"
                       value={email} onChange={(e)=>setEmail(e.target.value)} required />
                <button type="submit" className="btn btn-primary">Subscribe <span className="arrow">→</span></button>
              </div>
            )}
          </form>
        </div>
      </section>

      {openNote && (
        <div className="note-modal" onClick={()=>setOpenNote(null)}>
          <article className="note-modal-card" onClick={(e)=>e.stopPropagation()}>
            <header className="note-modal-head">
              <div>
                <div className="note-meta mono">
                  <span style={{color:'var(--accent)'}}>{openNote.tag}</span>
                  <span>·</span>
                  <span>{openNote.date}</span>
                  <span>·</span>
                  <span>{openNote.read}</span>
                </div>
                <h1 className="note-modal-title">{openNote.title}</h1>
              </div>
              <button className="note-modal-close" onClick={()=>setOpenNote(null)} aria-label="Close">×</button>
            </header>
            <div className="note-modal-scroll">
              <div className="note-modal-body">
                {openNote.body.map((para, i) => <p key={i}>{para}</p>)}
              </div>
            </div>
          </article>
        </div>
      )}
    </main>
  );
};

window.Blog = Blog;