/* Homepage, 3 directions + shared sections. */

/* ============ shared home sections ============ */

function IndustriesStrip({ dark }) {
  return (
    <div className={"ind-strip" + (dark ? " on-dark" : "")} style={{
      border: "1px solid " + (dark ? "var(--navy-line)" : "var(--line)"),
      borderRadius: "var(--radius-lg)", overflow: "hidden",
      background: dark ? "var(--navy-2)" : "var(--white)",
    }}>
      {SITE.industries.map((it, i) => (
        <div key={i} className="ind-cell" style={{ padding: "22px 22px" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "-0.01em", lineHeight: 1.15, color: dark ? "var(--navy-ink)" : "var(--ink)" }}>{it.name}</div>
          <div style={{ fontSize: 12.5, color: dark ? "var(--navy-ink-2)" : "var(--ink-3)", marginTop: 5, lineHeight: 1.5 }}>{it.note}</div>
        </div>
      ))}
    </div>
  );
}

function HomeAchievements({ go }) {
  return (
    <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <SectionHead
          eyebrow="Track record"
          title="Selected achievements"
          intro="Highlights from building and operating cyber defense across managed services, the enterprise, and the NFL's biggest events." />
        <div className="grid-2" style={{ gap: 16 }}>
          {SITE.achievements.map((a, i) => (
            <div key={i} className="card" style={{ padding: "24px 26px", display: "flex", gap: 18, alignItems: "start" }}>
              <span className="ach-num">{String(i + 1).padStart(2, "0")}</span>
              <div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, margin: "0 0 7px", letterSpacing: "-0.01em", lineHeight: 1.22 }}>{a.lead}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 14.5, margin: 0, lineHeight: 1.6 }}>{a.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeFocus({ go }) {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="What I do"
          title="Six places I make defense measurable"
          intro="From the first analyst hire to the detection backlog, the work of turning security from a cost center into a capability." />
        <div className="grid-3" style={{ gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--white)" }}>
          {SITE.focus.map((f, i) => (
            <div key={i} style={{
              padding: "28px 26px",
              borderLeft: (i % 3) ? "1px solid var(--line)" : "none",
              borderTop: i >= 3 ? "1px solid var(--line)" : "none",
            }}>
              <div style={{ width: 34, height: 34, borderRadius: 7, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center", marginBottom: 16 }}>
                <Icon d={ICONS.shield} size={18} />
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, margin: "0 0 7px", letterSpacing: "-0.01em" }}>{f.t}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, margin: 0, lineHeight: 1.6 }}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeNotes({ go, dark }) {
  const featured = SITE.articles.find(a => a.featured);
  const rest = SITE.articles.filter(a => !a.featured).slice(0, 4);
  return (
    <section className="section" style={{ background: dark ? "var(--paper-2)" : "transparent", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <SectionHead
          eyebrow="Field Notes"
          title="Writing from the operations floor"
          intro="Frameworks, post-mortems, and hard-won lessons from building and running security teams."
          action={<button className="btn btn-ghost" onClick={() => go("notes")}>All notes <Icon d={ICONS.arrow} size={15} /></button>} />
        <div className="grid-2" style={{ alignItems: "start" }}>
          <article onClick={() => go("article", featured.id)} style={{ cursor: "pointer" }}>
            <Placeholder label="cover image" style={{ borderRadius: "var(--radius-lg)", marginBottom: 20 }} ratio="16 / 10" />
            <div className="article-meta" style={{ marginBottom: 10 }}>
              <span className="chip accent">Featured</span>
              <span>{featured.date}</span><span className="article-dot" /><span>{featured.read} read</span>
            </div>
            <h3 className="article-title" style={{ fontSize: "clamp(24px, 2.6vw, 32px)" }}>{featured.title}</h3>
            <p className="lede" style={{ marginTop: 10 }}>{featured.dek}</p>
            <span className="link-arrow" style={{ marginTop: 14 }}>Read note <Icon className="arr" d={ICONS.arrow} size={15} /></span>
          </article>
          <div>
            {rest.map((a, i) => (
              <div key={a.id} onClick={() => go("article", a.id)} style={{ cursor: "pointer", padding: "18px 0", borderTop: i ? "1px solid var(--line)" : "none" }}
                   className="note-mini">
                <div className="article-meta" style={{ marginBottom: 6, fontSize: 12 }}>
                  <span style={{ color: "var(--accent-ink)" }}>{a.tags[0]}</span><span className="article-dot" /><span>{a.read}</span>
                </div>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: 19, margin: 0, letterSpacing: "-0.01em", lineHeight: 1.2 }} className="note-mini-title">{a.title}</h4>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeCTA({ go }) {
  const v = window.__voice || {};
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ background: "var(--navy)", borderRadius: "var(--radius-lg)", padding: "clamp(40px, 6vw, 72px)", color: "var(--navy-ink)", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "relative", maxWidth: 620 }}>
            <p className="eyebrow on-dark" style={{ marginBottom: 18 }}>Let's talk</p>
            <h2 className="display" style={{ color: "var(--navy-ink)", fontSize: "clamp(28px, 3.6vw, 44px)", margin: 0 }}>
              {v.ctaTitle || "Building a SOC, choosing an MDR, or steering a program through an incident?"}
            </h2>
            <p className="lede" style={{ color: "var(--navy-ink-2)", marginTop: 16 }}>
              {v.ctaLede || "I partner with leadership teams and advise on detection-and-response strategy. Always glad to compare notes with fellow defenders."}
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 26, flexWrap: "wrap" }}>
              <button className="btn btn-accent" onClick={() => go("contact")}>Start a conversation <Icon d={ICONS.arrow} size={15} /></button>
              <button className="btn btn-ghost on-dark" onClick={() => go("about")}>More about me</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CurrentlyLine({ dark }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: "0.02em", color: dark ? "var(--navy-ink-2)" : "var(--ink-3)" }}>
      <span style={{ width: 7, height: 7, borderRadius: "50%", background: "oklch(0.72 0.17 150)", boxShadow: "0 0 0 3px oklch(0.72 0.17 150 / 0.18)" }} />
      Director of Security Operations · open to advisory
    </div>
  );
}

function HeroChips({ chips, dark, style }) {
  if (!chips) return null;
  return (
    <div style={Object.assign({ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 24 }, style)}>
      {chips.map((c, i) => (
        <span key={i} style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.02em",
          padding: "7px 13px", borderRadius: 100,
          color: dark ? "var(--navy-ink)" : "var(--ink-2)",
          background: dark ? "oklch(1 0 0 / 0.05)" : "var(--white)",
          border: "1px solid " + (dark ? "var(--navy-line)" : "var(--line)"),
        }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", flex: "none" }} />
          {c}
        </span>
      ))}
    </div>
  );
}

/* ============ DIRECTION 1, Editorial (light, restrained) ============ */
function HomeEditorial({ go, v }) {
  return (
    <div>
      <section style={{ paddingTop: "clamp(48px, 7vw, 92px)", paddingBottom: "clamp(40px, 5vw, 64px)" }}>
        <div className="wrap">
          <div className="grid-2" style={{ gridTemplateColumns: "1.25fr 0.85fr", alignItems: "center" }}>
            <div className="fade-up">
              <p className="eyebrow kicker-line" style={{ marginBottom: 22 }}>{v.tagline}</p>
              <h1 className="display" style={{ fontSize: "clamp(38px, 5.8vw, 74px)" }}>
                {v.headline[0]}<br /><em style={{ fontStyle: "italic", color: "var(--accent-ink)" }}>{v.headline[1]}</em>
              </h1>
              <p className="lede" style={{ marginTop: 24, maxWidth: 520 }}>{v.positioning}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 30, 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>
              <HeroChips chips={v.chips} />
            </div>
            <div className="fade-up" style={{ animationDelay: ".1s" }}>
              <div style={{ position: "relative" }}>
                <Photo src="assets/img/portrait.png" alt="Richard Vallejo" position="center 22%" ratio="4 / 5" style={{ borderRadius: "var(--radius-lg)" }} />
                <div style={{ position: "absolute", left: -18, bottom: -18, background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--radius)", padding: "12px 15px", boxShadow: "var(--shadow-md)", display: "flex", alignItems: "center", gap: 11 }}>
                  <span style={{ width: 34, height: 34, borderRadius: 6, background: "var(--ink)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
                    <Icon d={ICONS.shield} size={17} />
                  </span>
                  <span style={{ lineHeight: 1.15 }}>
                    <strong style={{ fontSize: 14 }}>CISSP</strong>
                    <span style={{ display: "block", fontSize: 11.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>ISC² · Certified</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div className="wrap">
        <p className="eyebrow" style={{ marginBottom: 18 }}>Industries served</p>
        <IndustriesStrip />
      </div>
      <HomeAchievements go={go} />
      <HomeFocus go={go} />
      <HomeCTA go={go} />
    </div>
  );
}

/* ============ DIRECTION 2, Command (dark navy hero) ============ */
function HomeCommand({ go, v }) {
  return (
    <div>
      <section style={{ background: "var(--navy)", color: "var(--navy-ink)", paddingTop: "clamp(56px, 8vw, 104px)", paddingBottom: "clamp(48px, 7vw, 88px)", position: "relative", overflow: "hidden" }}>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(1100px 480px at 78% -10%, oklch(0.62 0.13 230 / 0.16), transparent 60%)" }} />
        <div className="wrap" style={{ position: "relative" }}>
          <div className="grid-2" style={{ gridTemplateColumns: "1.3fr 0.8fr", alignItems: "center" }}>
            <div className="fade-up">
              <p className="eyebrow on-dark kicker-line" style={{ marginBottom: 24 }}>Richard Vallejo · {v.tagline}</p>
              <h1 className="display" style={{ color: "var(--navy-ink)", fontSize: "clamp(38px, 5.8vw, 72px)" }}>
                {v.headline[0]}<br /><span style={{ color: "var(--accent)" }}>{v.headline[1]}</span>
              </h1>
              <p className="lede" style={{ color: "var(--navy-ink-2)", marginTop: 22, maxWidth: 540 }}>{v.positioning}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
                <button className="btn btn-accent" onClick={() => go("contact")}>Get in touch <Icon d={ICONS.arrow} size={15} /></button>
                <button className="btn btn-ghost on-dark" onClick={() => go("about")}>About me</button>
              </div>
              <HeroChips chips={v.chips} dark />
            </div>
            <div className="fade-up" style={{ animationDelay: ".1s" }}>
              <Photo src="assets/img/portrait.png" alt="Richard Vallejo" position="center 22%" ratio="4 / 5" style={{ borderRadius: "var(--radius-lg)" }} />
            </div>
          </div>
          <div style={{ marginTop: "clamp(40px, 5vw, 64px)" }}>
            <p className="eyebrow on-dark" style={{ marginBottom: 18 }}>Industries served</p>
            <IndustriesStrip dark />
          </div>
        </div>
      </section>
      <HomeAchievements go={go} />
      <HomeFocus go={go} />
      <HomeCTA go={go} />
    </div>
  );
}

/* ============ DIRECTION 3, Structured (modular bento) ============ */
function HomeGrid({ go, v }) {
  const featured = SITE.articles.find(a => a.featured);
  return (
    <div>
      <section style={{ paddingTop: "clamp(40px, 5vw, 64px)", paddingBottom: "clamp(20px, 3vw, 32px)" }}>
        <div className="wrap">
          <div className="bento">
            <div className="bento-hero fade-up">
              <p className="eyebrow kicker-line" style={{ marginBottom: 20 }}>{v.tagline}</p>
              <h1 className="display" style={{ fontSize: "clamp(34px, 4.6vw, 60px)" }}>
                {v.headline[0]}<br /><em style={{ fontStyle: "italic", color: "var(--accent-ink)" }}>{v.headline[1]}</em>
              </h1>
              <p className="lede" style={{ marginTop: 18, maxWidth: 460 }}>{v.positioning}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={() => go("about")}>About me <Icon d={ICONS.arrow} size={15} /></button>
                <button className="btn btn-ghost" onClick={() => go("contact")}>Get in touch</button>
              </div>
            </div>
            <div className="bento-portrait fade-up" style={{ animationDelay: ".06s" }}>
              <Photo src="assets/img/portrait.png" alt="Richard Vallejo" position="center 22%" style={{ height: "100%", borderRadius: "var(--radius-lg)" }} />
            </div>
            <div className="bento-cert fade-up" style={{ animationDelay: ".12s" }}>
              <span style={{ width: 38, height: 38, borderRadius: 8, background: "var(--ink)", color: "var(--accent)", display: "grid", placeItems: "center", marginBottom: 14 }}>
                <Icon d={ICONS.shield} size={19} />
              </span>
              <div className="metric-num" style={{ fontSize: 30 }}>CISSP</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", fontFamily: "var(--font-mono)", marginTop: 4 }}>ISC² · Certified 2019</div>
            </div>
            {SITE.industries.slice(0, 2).map((m, i) => (
              <div key={i} className={"bento-metric fade-up"} style={{ animationDelay: (.16 + i * .05) + "s" }}>
                <span style={{ display: "inline-grid", placeItems: "center", width: 30, height: 30, borderRadius: 7, marginBottom: 12, background: "var(--accent-soft)", color: "var(--accent)" }}>
                  <Icon d={ICONS.shield} size={16} />
                </span>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "-0.01em", lineHeight: 1.15 }}>{m.name}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.5 }}>{m.note}</div>
              </div>
            ))}
            <div className="bento-feature fade-up" style={{ animationDelay: ".26s", cursor: "pointer" }} onClick={() => go("article", featured.id)}>
              <span className="chip accent" style={{ marginBottom: 12 }}>Featured note</span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.3vw, 27px)", margin: 0, letterSpacing: "-0.01em", lineHeight: 1.18 }}>{featured.title}</h3>
              <span className="link-arrow" style={{ marginTop: 12 }}>Read note <Icon className="arr" d={ICONS.arrow} size={15} /></span>
            </div>
          </div>
        </div>
      </section>
      <HomeAchievements go={go} />
      <HomeFocus go={go} />
      <HomeCTA go={go} />
    </div>
  );
}

Object.assign(window, { HomeEditorial, HomeCommand, HomeGrid, HomeFocus, HomeNotes, HomeCTA, HomeAchievements, IndustriesStrip });
