// about.jsx - about / founder / values

const VALUES = [
  { t: "Receipts over rhetoric", d: "If we can't show a log line, we didn't see it. Every claim in our reports is sourced." },
  { t: "Tuning is the job",       d: "A good SIEM out of the box is a myth. We earn our retainer in week 3–6." },
  { t: "Open by default",         d: "Our stack is open source. Your data stays yours. When you leave, the keys come with you." },
  { t: "No pager-theatre",        d: "If we wake you up, it matters. If it doesn't matter, we handle it and tell you on Friday." },
];

const NUMBERS = [
  { v: "7",     l: "Indian companies trust us with their security" },
  { v: "527",   l: "Alerts triaged by AI in 7 days on a live deployment" },
  { v: "★",     l: "Official Wazuh Ambassador for India" },
  { v: "15,700", l: "Lines of production code in the AI SOC platform" },
];

function AboutPage({ setPage }) {
  return (
    <div className="page">
      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 900 }}>
          <Label>ABOUT · NASHIK, MAHARASHTRA · BOOTSTRAPPED</Label>
          <h1 className="serif" style={{ fontSize: "clamp(52px, 6.5vw, 104px)", margin: 0, lineHeight: 0.98, letterSpacing: "-0.025em" }}>
            We exist cuz enterprise security<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>forgot about startups.</span>
          </h1>
        </div>
      </section>

      {/* Founder quote */}
      <section style={{ padding: "40px 0 60px" }}>
        <div className="container" style={{ maxWidth: 900 }}>
          <div style={{
            border: "1px solid var(--line)",
            borderLeft: "3px solid var(--accent)",
            background: "var(--bg-1)",
            padding: "48px 52px",
          }}>
            <p className="serif" style={{
              fontSize: "clamp(17px, 1.8vw, 21px)",
              fontStyle: "italic",
              color: "var(--fg-mute)",
              lineHeight: 1.8,
              margin: 0,
            }}>
              &ldquo;I kept having the same conversation. Different CTO. Different startup. Different city. Same sentence.
              &lsquo;Prathamesh, I get it. We need monitoring. But I can&rsquo;t justify the cost to my board when we barely have
              budget for the infrastructure itself.&rsquo; That sentence is why Secure Sleuths exists. Not cuz I thought AI
              was cool and wanted to build something. Cuz I sat through that same call a dozen times and thought the
              same thing every time: you&rsquo;re not too small to get breached. You&rsquo;re too small to afford the old way of
              preventing it. So I built a different way.&rdquo;
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 12, alignItems: "center" }}>
              <span style={{ width: 40, height: 1, background: "var(--fg-dim)" }} />
              <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.1em" }}>
                PRATHAMESH BAKLIWAL · FOUNDER
              </Mono>
            </div>
          </div>
        </div>
      </section>

      {/* Numbers */}
      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="THE NUMBERS" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", border: "1px solid var(--line)" }}>
            {NUMBERS.map((n, i) => (
              <div key={i} style={{
                padding: 32,
                borderRight: i < 3 ? "1px solid var(--line-soft)" : "none",
                display: "flex", flexDirection: "column", gap: 12,
                textAlign: "center",
              }}>
                <span className="serif" style={{ fontSize: 48, color: "var(--accent)", lineHeight: 1, letterSpacing: "-0.02em" }}>
                  {n.v}
                </span>
                <span style={{ fontSize: 13, color: "var(--fg-mute)", lineHeight: 1.5 }}>{n.l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="WHAT WE STAND FOR" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", border: "1px solid var(--line)" }}>
            {VALUES.map((v, i) => (
              <div key={i} style={{
                padding: 36,
                borderRight: (i % 2 === 0) ? "1px solid var(--line-soft)" : "none",
                borderBottom: i < 2 ? "1px solid var(--line-soft)" : "none",
                display: "flex", flexDirection: "column", gap: 14,
                minHeight: 220,
              }}>
                <Mono style={{ fontSize: 11, color: "var(--accent)" }}>◆ PRINCIPLE · {String(i + 1).padStart(2, "0")}</Mono>
                <h3 className="serif" style={{ fontSize: 30, margin: 0, lineHeight: 1.15, letterSpacing: "-0.015em" }}>{v.t}</h3>
                <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.6 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founder profile */}
      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="THE FOUNDER" />
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1.4fr",
            border: "1px solid var(--line)",
            background: "#F5EFDC",
            color: "#0E2A36",
          }}>
            <div style={{
              padding: 40,
              borderRight: "1px solid #D8CCAA",
              display: "flex", flexDirection: "column", gap: 20,
            }}>
              <div style={{
                width: 100, height: 100,
                background: "#0E2A36",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 42, fontFamily: "var(--serif)", color: "#F5EFDC",
                fontWeight: 400,
              }}>P</div>
              <div>
                <h3 className="serif" style={{ fontSize: 28, margin: 0, letterSpacing: "-0.01em", color: "#0E2A36" }}>
                  Prathamesh Bakliwal
                </h3>
                <Mono style={{ fontSize: 12, color: "#6B7680", display: "block", marginTop: 6 }}>
                  Founder, Secure Sleuths
                </Mono>
              </div>
              <div style={{ marginTop: "auto" }}>
                <span style={{
                  display: "inline-block",
                  padding: "4px 10px",
                  border: "1px solid #8A5A2B",
                  color: "#8A5A2B",
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  letterSpacing: "0.1em",
                }}>WAZUH AMBASSADOR FOR INDIA</span>
              </div>
            </div>
            <div style={{ padding: 40, display: "flex", flexDirection: "column", gap: 20 }}>
              <p style={{ margin: 0, color: "#2A3842", fontSize: 15, lineHeight: 1.7 }}>
                Prathamesh has been securing businesses since 2020 and started Secure Sleuths in 2024.
                Official Wazuh Ambassador for India. Built DHRUVA — the AI SOC platform named after the pole star — after watching startup after startup get priced out of security by enterprise vendors.
              </p>
              <div style={{ height: 1, background: "#D8CCAA" }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <Mono style={{ fontSize: 11, color: "#6B7680", letterSpacing: "0.12em" }}>LOCATION</Mono>
                  <Mono style={{ fontSize: 13, color: "#0E2A36" }}>Nashik, Maharashtra</Mono>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <Mono style={{ fontSize: 11, color: "#6B7680", letterSpacing: "0.12em" }}>EMAIL</Mono>
                  <Mono style={{ fontSize: 13 }}>
                    <a href="mailto:prathamesh@securesleuths.in" style={{ color: "#8A5A2B" }}>
                      prathamesh@securesleuths.in
                    </a>
                  </Mono>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <Mono style={{ fontSize: 11, color: "#6B7680", letterSpacing: "0.12em" }}>PHONE</Mono>
                  <Mono style={{ fontSize: 13 }}>
                    <a href="tel:+917559249171" style={{ color: "#0E2A36" }}>+91-7559249171</a>
                  </Mono>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <Mono style={{ fontSize: 11, color: "#6B7680", letterSpacing: "0.12em" }}>LINKEDIN</Mono>
                  <Mono style={{ fontSize: 13 }}>
                    <a href="https://linkedin.com/in/prathamesh-bakliwal" target="_blank" rel="noopener" style={{ color: "#8A5A2B" }}>
                      prathamesh-bakliwal
                    </a>
                  </Mono>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 0" }}>
        <div className="container">
          <div style={{
            border: "1px solid var(--line)",
            background: "var(--bg-1)",
            padding: "60px 48px",
            display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
          }}>
            <div>
              <Label>WANT TO TALK?</Label>
              <h3 className="serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "14px 0 12px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
                Skip the cold email.<br/>
                <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Pick a path that fits.</span>
              </h3>
              <p style={{ color: "var(--fg-mute)", fontSize: 16, margin: 0, maxWidth: 560, lineHeight: 1.6 }}>
                Download Community for free and self-host today. See pricing tiers if you're sizing budget. Or talk to me directly if neither path fits what you're trying to do.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button className="btn btn-primary" onClick={() => { window.__dlSource = "about-sidebar"; setPage("download-community"); }}>Download Community →</button>
              <button className="btn" onClick={() => setPage("contact")}>Send me a note</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });