/* About · Field Notes list · Article reader · Contact */

/* ---------- article bodies (placeholder copy, edit freely) ---------- */
const ARTICLE_BODY = {
  "soc-first-90-days": `
    <p>Every security leader eventually inherits the same sentence: <strong>"We need a SOC."</strong> Sometimes it comes from a board still rattled by a near-miss. Sometimes it's a compliance deadline. Either way, you have ninety days, a thin budget, and a watching audience. Here is the sequence I run, refined across four build-outs, that gets you to defensible operations without lighting money on fire.</p>
    <h2>Days 1–30: Visibility before tooling</h2>
    <p>The instinct is to buy a SIEM. Resist it. You cannot defend what you cannot see, and you cannot see what you have not inventoried. The first month is asset discovery, log-source mapping, and an honest data-flow diagram. I would rather have clean telemetry from twenty critical systems than noisy firehoses from two hundred.</p>
    <p>Pick your <strong>crown jewels</strong> first, identity, endpoints, and the systems that would end up in a breach notification, and instrument those completely before widening the net.</p>
    <blockquote>A SOC is not a room full of screens. It is a decision-making function. Build the decisions first.</blockquote>
    <h2>Days 31–60: One playbook, run for real</h2>
    <p>Do not write forty playbooks. Write one, for the alert type you will see most, and actually run it end to end, including the awkward handoffs. The gaps you find in that single rehearsal are worth more than a binder of theoretical procedures.</p>
    <ul>
      <li><strong>Define severity</strong> in business terms, not CVSS alone.</li>
      <li><strong>Name the escalation path</strong>, with humans and phone numbers, not roles.</li>
      <li><strong>Set the clock</strong>, what is your target time-to-acknowledge, and who is accountable for it?</li>
    </ul>
    <h2>Days 61–90: Prove the loop</h2>
    <p>By the end of the quarter you want a closed loop you can show the board: an alert fired, a human triaged it against a defined process, an action was taken, and the detection was tuned afterward. That loop, small but real, is the seed of everything that comes next. Maturity is just that loop, repeated and widened.</p>
    <p>The mistake I see most often is leaders trying to launch fully formed. You do not need fully formed. You need <strong>true</strong>, one honest, working loop, and then the discipline to grow it.</p>
  `,
  "_default": `
    <p>This is placeholder body copy so you can see how a full Field Note reads on the page, typography, rhythm, and spacing are all production-ready. Replace it with your own writing and the layout will hold.</p>
    <h2>The short version</h2>
    <p>Security leadership lives in the gap between what the tooling promises and what the team can actually operate. My writing tends to live in that gap too: less about the newest product category, more about the operating decisions that determine whether a program is resilient or merely busy.</p>
    <blockquote>Tools don't defend organizations. Teams running good processes against good telemetry do.</blockquote>
    <h2>Why it matters</h2>
    <p>Whether the topic is MDR selection, detection engineering, or governance, the underlying question is the same, how do you turn finite attention into reliable defense? That is the thread through everything here.</p>
    <ul>
      <li>Make the work measurable before you make it bigger.</li>
      <li>Treat detections like product, not paperwork.</li>
      <li>Wire compliance into delivery instead of bolting it on after.</li>
    </ul>
    <p>Swap this copy for the real article. The container, the measure, and the type scale are all set up to make long-form reading comfortable.</p>
  `,
};

/* ---------- ABOUT ---------- */
function AboutPage({ go }) {
  useScrollTop("about");
  return (
    <div>
      <section style={{ paddingTop: "clamp(48px, 6vw, 80px)", paddingBottom: "clamp(32px,4vw,48px)" }}>
        <div className="wrap">
          <div className="grid-2" style={{ gridTemplateColumns: "1.15fr 0.85fr", alignItems: "center" }}>
            <div>
              <p className="eyebrow kicker-line" style={{ marginBottom: 20 }}>About</p>
              <h1 className="display" style={{ fontSize: "clamp(34px, 4.6vw, 58px)" }}>
                I build scalable,<br />mission-oriented teams<br />that deliver impact.
              </h1>
              <p className="lede" style={{ marginTop: 22, maxWidth: 540 }}>
                I'm {SITE.name}, an information security leader who builds, matures, and operates cyber
                defense programs across managed services, the enterprise, and major-event environments.
                Above all, <strong style={{ color: "var(--ink)" }}>I excel at building, training, and operationalizing the security teams</strong> that run them.
              </p>
            </div>
            <figure style={{ margin: 0 }}>
              <Photo src="assets/img/superbowl.jpg" ratio="3 / 4" position="top"
                alt="Richard Vallejo with the cybersecurity operations team at the Super Bowl" />
              <figcaption style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", marginTop: 12, lineHeight: 1.5, letterSpacing: "0.01em" }}>
                On-site leading cybersecurity operations at Super Bowl LVII and LVIII.
              </figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: "clamp(24px,3vw,40px)" }}>
        <div className="wrap">
          <p className="eyebrow kicker-line" style={{ marginBottom: 22 }}>The short story</p>
          <div className="prose" style={{ maxWidth: 720 }}>
            <p>I've built and run cyber defense from nearly every seat, leading a 50-person managed security organization, standing up the security operations behind the NFL's biggest events, and directing the talent and governance programs that make delivery repeatable. That range is the point: I've done the work I now ask of teams.</p>
            <p>My core strength is <strong>building and operationalizing security teams</strong>, recruiting, training, and developing people, then wiring them into the delivery models, processes, and tooling that scale without breaking. I've designed services able to <strong>double a client base</strong> with no loss of quality, and cut operating cost while protecting growth.</p>
            <p>I lead security as a business function: translating technical risk into executive priorities, service economics, and board-ready reporting. I'm equally at home running an incident, standing up a SOC, building an MSSP offering, or briefing the C-suite, and I treat governance (SOC 2 Type II, NIST, ISO/IEC 27001) as something to wire <em>into</em> delivery, not bolt on after.</p>
            <p>I write the Field Notes on this site to share what actually works on the operations floor, the frameworks, the post-mortems, and the unglamorous lessons that don't make it into vendor decks.</p>
          </div>
        </div>
      </section>

      <HomeAchievements go={go} />

      {/* focus areas */}
      <section className="section" style={{ background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead eyebrow="Areas of focus" title="Where I spend my expertise" />
          <div className="grid-3" style={{ gap: 16 }}>
            {SITE.focus.map((f, i) => (
              <div key={i} className="card" style={{ padding: 26 }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 19, margin: "0 0 7px", letterSpacing: "-0.01em" }}>{f.t}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 14, margin: 0, lineHeight: 1.6 }}>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* credentials & education (horizontal) */}
      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow="Credentials" title="Education & certification" />
          <div className="cred-strip">
            <div className="cred-cell cred-cert">
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                <strong style={{ fontSize: 18, fontFamily: "var(--font-display)" }}>{SITE.certs[0].abbr}</strong>
                <Icon d={ICONS.check} size={14} fill="var(--accent-ink)" />
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 3, lineHeight: 1.4 }}>{SITE.certs[0].name}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 6 }}>{SITE.certs[0].org}</div>
            </div>
            {SITE.education.map((e, i) => (
              <div key={i} className="cred-cell">
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: "var(--accent-ink)", marginBottom: 14, paddingTop: 2 }}>{e.abbr}</div>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--ink)", lineHeight: 1.3 }}>{e.name}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 5 }}>{e.org}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <HomeCTA go={go} />
    </div>
  );
}

/* ---------- FIELD NOTES (list) ---------- */
function NotesPage({ go }) {
  useScrollTop("notes");
  return (
    <div>
      <section style={{ minHeight: "62vh", display: "grid", placeItems: "center", paddingTop: "clamp(56px,8vw,96px)", paddingBottom: "clamp(56px,8vw,96px)" }}>
        <div className="wrap" style={{ textAlign: "center", maxWidth: 640 }}>
          <img src="assets/img/logo.png" alt="Richard Vallejo logo"
            style={{ width: 64, height: 64, objectFit: "contain", display: "inline-block", marginBottom: 26 }} />
          <p className="eyebrow" style={{ marginBottom: 18 }}>Field Notes</p>
          <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 72px)" }}>Coming soon.</h1>
          <p className="lede" style={{ marginTop: 18, marginInline: "auto" }}>
            I'm putting together field-tested writing on building and operationalizing security teams, running operations, and leading through incidents. Check back shortly.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 30, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => go("contact")}>Get in touch <Icon d={ICONS.arrow} size={15} /></button>
            <button className="btn btn-ghost" onClick={() => go("about")}>About me</button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- ARTICLE READER ---------- */
function ArticlePage({ id, go }) {
  useScrollTop(id);
  const a = SITE.articles.find(x => x.id === id) || SITE.articles[0];
  const body = ARTICLE_BODY[a.id] || ARTICLE_BODY._default;
  const more = SITE.articles.filter(x => x.id !== a.id).slice(0, 3);
  return (
    <div>
      <article>
        <header style={{ paddingTop: "clamp(40px, 5vw, 68px)", paddingBottom: "clamp(28px,4vw,40px)" }}>
          <div className="wrap" style={{ maxWidth: 760 }}>
            <span className="link-arrow" style={{ marginBottom: 24 }} onClick={() => go("notes")}>
              <Icon d="M19 12H5M11 6l-6 6 6 6" size={15} /> All Field Notes
            </span>
            <div className="article-meta" style={{ margin: "22px 0 18px" }}>
              {a.tags.map(t => <span key={t} className="chip accent">{t}</span>)}
            </div>
            <h1 className="display" style={{ fontSize: "clamp(32px, 4.4vw, 54px)" }}>{a.title}</h1>
            <p className="lede" style={{ marginTop: 18, fontSize: 20 }}>{a.dek}</p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 26, paddingTop: 22, borderTop: "1px solid var(--line)" }}>
              <span style={{ width: 42, height: 42, borderRadius: "50%", background: "var(--ink)", color: "var(--accent)", display: "grid", placeItems: "center", flex: "none" }}>
                <Icon d={ICONS.shield} size={20} />
              </span>
              <div style={{ lineHeight: 1.3 }}>
                <strong style={{ fontSize: 14.5 }}>{SITE.name}</strong>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)", display: "flex", gap: 10, alignItems: "center" }}>
                  <span>{a.date}</span><span className="article-dot" /><span>{a.read} read</span>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <Placeholder label="cover image" style={{ borderRadius: "var(--radius-lg)", marginBottom: 44 }} ratio="16 / 9" />
          <div className="prose" style={{ margin: "0 auto" }} dangerouslySetInnerHTML={{ __html: body }} />
          <div style={{ display: "flex", gap: 12, alignItems: "center", margin: "48px 0 8px", padding: "28px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>Found this useful?</span>
            <span style={{ color: "var(--ink-2)", flex: 1, minWidth: 200 }}>I'm always glad to trade notes with fellow defenders.</span>
            <button className="btn btn-primary" onClick={() => go("contact")}>Get in touch <Icon d={ICONS.arrow} size={15} /></button>
          </div>
        </div>
      </article>

      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow="Keep reading" title="More Field Notes"
            action={<button className="btn btn-ghost" onClick={() => go("notes")}>All notes <Icon d={ICONS.arrow} size={15} /></button>} />
          <div className="grid-3" style={{ gap: 16 }}>
            {more.map(m => (
              <article key={m.id} className="card hover" style={{ padding: 0, overflow: "hidden", cursor: "pointer" }} onClick={() => go("article", m.id)}>
                <Placeholder label="cover" style={{ aspectRatio: "16 / 9" }} />
                <div style={{ padding: 22 }}>
                  <div className="article-meta" style={{ marginBottom: 8, fontSize: 12 }}>
                    <span style={{ color: "var(--accent-ink)" }}>{m.tags[0]}</span><span className="article-dot" /><span>{m.read}</span>
                  </div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 19, margin: 0, letterSpacing: "-0.01em", lineHeight: 1.22 }}>{m.title}</h3>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- CONTACT ---------- */
function ContactPage({ go }) {
  useScrollTop("contact");
  return (
    <div>
      <section style={{ paddingTop: "clamp(48px, 6vw, 88px)", paddingBottom: "clamp(56px,8vw,104px)" }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <p className="eyebrow kicker-line" style={{ marginBottom: 20 }}>Contact</p>
          <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 66px)" }}>Let's talk.</h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 520 }}>
            Advisory work, speaking, a hard problem in your SOC, or just a good security conversation. My inbox is open.
          </p>
          <div className="grid-2" style={{ marginTop: 38, gap: 16 }}>
            <a href={"mailto:" + SITE.email} className="card hover" style={{ padding: 22, display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center", flex: "none" }}><Icon d={ICONS.mail} size={20} /></span>
              <span><strong style={{ fontSize: 15, display: "block" }}>Email</strong><span style={{ color: "var(--ink-3)", fontSize: 13.5, fontFamily: "var(--font-mono)" }}>{SITE.email}</span></span>
            </a>
            <a href={SITE.linkedinUrl} target="_blank" rel="noopener" className="card hover" style={{ padding: 22, display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center", flex: "none" }}><Icon d={ICONS.linkedin} size={20} /></span>
              <span><strong style={{ fontSize: 15, display: "block" }}>LinkedIn</strong><span style={{ color: "var(--ink-3)", fontSize: 13.5, fontFamily: "var(--font-mono)" }}>{SITE.linkedin}</span></span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, NotesPage, ArticlePage, ContactPage });
