/* global React */

const JOURNAL_POSTS = [
  {
    id: 'campground',
    num: '01', kicker: 'Field Notes', date: 'Mar 2026', read: '6 min',
    title: 'I closed a $47K deal from a campground last week.',
    dek: "Full video call. Screen sharing the whole time. The client never asked where I was. The signal stayed on. The signature came in before sundown. Here is what that taught me about how we work, and how I want to keep working.",
    feature: true,
  },
  {
    id: 'designing',
    num: '02', kicker: 'Family', date: 'Feb 2026', read: '4 min',
    title: 'Why designing my business around life was the best decision I made.',
    dek: "This morning, my kids asked if we could go to the beach after school. I said yes. The company kept running. That is not luck — that is structure.",
  },
  {
    id: 'early-hire',
    num: '03', kicker: 'Building', date: 'Jan 2026', read: '5 min',
    title: 'Most founders wait too long to hire. I hired before I had revenue.',
    dek: "When I brought on my first team member I didn't have clients yet. I didn't even have a contract. A note on conviction, leverage, and the math of doing it anyway.",
  },
  {
    id: 'desert',
    num: '04', kicker: 'Field Notes', date: 'Dec 2025', read: '5 min',
    title: 'I took a client call from the middle of the Mojave.',
    dek: "Late afternoon. No service for an hour, then full bars for ten minutes. I closed the loop and went back to the fire. That call changed how I think about presence.",
  },
];

function JournalFeature({ post }) {
  return (
    <article className="journal-feature">
      <div className="fk-eyebrow">
        <span>{post.num} —</span>
        <span>{post.kicker}</span>
        <span className="fk-dot" />
        <span>{post.date}</span>
        <span className="fk-dot" />
        <span>{post.read}</span>
      </div>
      <h3>{post.title}</h3>
      <p>{post.dek}</p>
      <a className="fk-link" href={`https://medium.com/@faridkheloco`} target="_blank" rel="noreferrer">
        Read on Medium <span aria-hidden="true">→</span>
      </a>
    </article>
  );
}

function JournalMini({ post }) {
  return (
    <article className="journal-card-mini">
      <div className="fk-eyebrow">
        <span style={{ color: 'var(--accent)' }}>{post.num} — {post.kicker}</span>
        <span className="fk-dot" />
        <span>{post.date}</span>
        <span className="fk-dot" />
        <span>{post.read}</span>
      </div>
      <h4>
        <a href="https://medium.com/@faridkheloco" target="_blank" rel="noreferrer">{post.title}</a>
      </h4>
      <p>{post.dek}</p>
    </article>
  );
}

function Journal() {
  const [feature, ...rest] = JOURNAL_POSTS;
  return (
    <section className="fk-section" id="journal" data-screen-label="04 Journal">
      <div className="fk-section__inner">
        <div className="section-marker">
          <span className="num">03 —</span><span>journal</span>
        </div>
        <div className="fk-section__head">
          <div className="head-row">
            <h2 className="fk-h1" style={{ maxWidth: '14ch' }}>
              field notes <span className="fk-display__caveat">from the work.</span>
            </h2>
            <p>
              Short essays on building Purely Works, raising kids alongside it, and what I learn taking
              business calls in places business calls aren't supposed to happen.
            </p>
          </div>
        </div>
        <div className="journal-grid">
          <JournalFeature post={feature} />
          <div className="journal-side">
            {rest.map((p) => <JournalMini key={p.id} post={p} />)}
          </div>
        </div>
        <div style={{ marginTop: 36, display: 'flex', justifyContent: 'flex-end' }}>
          <a className="fk-btn fk-btn--ghost" href="https://medium.com/@faridkheloco" target="_blank" rel="noreferrer">
            All writing on Medium <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Journal = Journal;