// Full About page content (bio + skills + life-arc chart).
// Exposes window.AboutPageContent({ go }).

(function() {
  var useState = React.useState;
  function isMobileNow() { return window.innerWidth <= 768; }
  function useMobile() {
    var s = useState(isMobileNow());
    React.useEffect(function() {
      function h() { s[1](isMobileNow()); }
      window.addEventListener("resize", h);
      return function() { window.removeEventListener("resize", h); };
    }, []);
    return s[0];
  }

  function Eyebrow(props) {
    return <div style={{ fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.12em",
      textTransform: "uppercase", color: "var(--ink)", fontWeight: 700, marginBottom: 14 }}>{props.children}</div>;
  }
  function SectionRule(props) {
    return <hr style={{ border: 0, borderTop: "1px solid var(--rule)", margin: (props.m || "52px") + " 0 28px" }} />;
  }

  // skill group card
  function SkillGroup(props) {
    return (
      <div style={{ breakInside: "avoid", marginBottom: 22 }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.1em",
          textTransform: "uppercase", color: "var(--accent)", fontWeight: 700, marginBottom: 8 }}>
          {props.title}
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 15.5, lineHeight: 1.6, color: "var(--ink)" }}>
          {props.children}
        </div>
      </div>
    );
  }

  // phase card for the narrative timeline
  function PhaseCard(props) {
    var mobile = props.mobile;
    return (
      <div style={{ display: mobile ? "block" : "grid", gridTemplateColumns: "132px 1fr",
        gap: mobile ? 6 : 22, padding: "20px 0", borderTop: "1px solid var(--rule)" }}>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)",
            letterSpacing: "0.04em", fontWeight: 600 }}>{props.years}</div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--sans)", fontSize: 17, fontWeight: 600,
            color: "var(--ink)", marginBottom: 5, letterSpacing: "-0.01em" }}>{props.title}</div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)" }}>
            {props.children}
          </div>
        </div>
      </div>
    );
  }

  function AboutPageContent(props) {
    var mobile = useMobile();
    var go = props.go;

    return (
      <div className="container" style={{ maxWidth: 880, padding: mobile ? "32px 0 60px" : "60px 0 90px" }}>
        {/* ── Hero ── */}
        <Eyebrow>About · The Mind Explorer</Eyebrow>
        <h1 style={{ fontFamily: "var(--serif)", fontWeight: 400, fontSize: mobile ? 32 : 48,
          lineHeight: 1.1, letterSpacing: "-0.025em", margin: "0 0 22px", color: "var(--ink)",
          maxWidth: 760, textWrap: "balance" }}>
          An artificial intelligence architect, <em>now</em> the Mind Explorer.
        </h1>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px",
          border: "1px solid var(--rule)", borderRadius: 100, marginBottom: 34 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--accent)" }} />
          <span style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-2)" }}>
            Life motto — <strong style={{ color: "var(--ink)", fontWeight: 600 }}>&ldquo;Do What is Absolutely Necessary.&rdquo;</strong>
          </span>
        </div>

        {/* ── Lead bio ── */}
        <div style={{ maxWidth: 680, fontFamily: "var(--serif)", fontSize: mobile ? 17 : 19,
          lineHeight: 1.7, color: "var(--ink)" }}>
          <p style={{ margin: "0 0 20px" }}>
            I'm <strong>Veda Konduru</strong> — a former AI tech founder, data scientist, and technology
            product architect, with academic grounding in science and technology and 20+ years of
            subject-domain experience.
          </p>
          <p style={{ margin: 0 }}>
            Inspired by some events in my life, I set off on a quest to explore the role of
            <em> natural intelligence</em> — the human mind's underpinnings — in the age of AI. I've made
            significant strides over the past few years, and I'm here to help others on a similar journey.
          </p>
        </div>

        {/* ── Belief pullquote ── */}
        <blockquote style={{ margin: mobile ? "34px 0" : "44px 0", padding: mobile ? "26px 22px" : "34px 40px",
          background: "var(--paper-2)", borderRadius: 14, borderLeft: "3px solid var(--accent)", maxWidth: 720 }}>
          <p style={{ fontFamily: "var(--serif)", fontSize: mobile ? 19 : 22, lineHeight: 1.5,
            color: "var(--ink)", margin: 0, fontWeight: 400, letterSpacing: "-0.01em" }}>
            I believe in maximizing human natural intelligence while augmenting artificial intelligence.
            The human mind must be the master of all decision-making and choice-making — for one's own
            personal and professional life.
          </p>
          <p style={{ fontFamily: "var(--serif)", fontSize: mobile ? 16 : 17.5, lineHeight: 1.6,
            color: "var(--ink-2)", margin: "18px 0 0" }}>
            The next frontier lies in leveraging human intuition — tapping the subconscious mind to find
            one's own life path, purpose, and gifted talents.
          </p>
          <p style={{ fontFamily: "var(--serif)", fontSize: mobile ? 15.5 : 17, lineHeight: 1.6,
            color: "var(--ink-2)", margin: "14px 0 0" }}>
            AI is the perfect ally when a human knows how to ask the right questions, for the right reasons,
            and makes the best use of its power. What it can never replace is, self-responsibility, ethics,
            and moral conduct — humans must not make AI a scapegoat for their own deficiencies.
          </p>
        </blockquote>

        {/* ── Mental acuity ── */}
        <Eyebrow>Mental acuity</Eyebrow>
        <div style={{ columnCount: mobile ? 1 : 2, columnGap: 36, maxWidth: 720 }}>
          {[
            "Analytical bent of mind",
            "An Architect by personality type (INTJ-A)",
            "A master at mapping and distilling intuition with logical frameworks toward confident action",
            "High personal standards",
            "Principle-driven, a critical thinker",
            "Independent Thinker \u2014 I build my own perspectives in the pursuit of truth, discerning right from wrong for myself",
            "A staunch advocate for self-governance, personal autonomy, and freedom of thought and expression",
          ].map(function(item, i) {
            return (
              <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start",
                breakInside: "avoid", marginBottom: mobile ? 14 : 18 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)",
                  marginTop: 9, flexShrink: 0 }} />
                <span style={{ fontFamily: "var(--serif)", fontSize: mobile ? 16 : 17, lineHeight: 1.5,
                  color: "var(--ink)" }}>{item}</span>
              </div>
            );
          })}
        </div>

        {/* ── LIFE-ARC CHART ── */}
        <SectionRule />
        <Eyebrow>The life arc · 2007 – 2026</Eyebrow>
        <h2 style={{ fontFamily: "var(--serif)", fontWeight: 400, fontSize: mobile ? 25 : 33,
          lineHeight: 1.15, letterSpacing: "-0.02em", margin: "0 0 10px", color: "var(--ink)" }}>
          One mind, still becoming.
        </h2>
        <p style={{ fontFamily: "var(--serif)", fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-2)",
          maxWidth: 660, margin: "0 0 26px" }}>
          A self-assessed map of where my energy has lived each year — technical craft, leadership,
          public voice, and inner growth. The dashed lines mark the steep, defining turns; the line doesn't
          stop in 2026, it's simply where the data catches up to today.
        </p>
        <window.LifeArcChart />

        {/* ── NARRATIVE TIMELINE ── */}
        <SectionRule />
        <Eyebrow>The journey, in chapters</Eyebrow>
        <div style={{ marginTop: 6 }}>
          <PhaseCard mobile={mobile} years="2024 – 2026" title="The comeback & the Mind Explorer">
            A full-blown return — spiritually sound, mentally strong, fully autonomous. Public writing for
            social impact, the &lsquo;Intuition to Action&rsquo; series, and my own ground:
            <a onClick={function() { go && go("writing"); }} style={{ color: "var(--accent)", cursor: "pointer" }}> intuition2action.net</a>.
          </PhaseCard>
          <PhaseCard mobile={mobile} years="2022 – 2023" title="The crucible">
            An uprooting and the steepest, hardest stretch of my life — depression, confusion, a sacred
            rage. Met daily, without fail, through writing, yoga, and a 10K-step walk.
          </PhaseCard>
          <PhaseCard mobile={mobile} years="2016 – 2021" title="Founder — VectorScient">
            Launched an AI startup, built real IP and a product, and earned enterprise customers across
            verticals. Learned that entrepreneurship with uncompromising ethics is its own hard discipline.
          </PhaseCard>
          <PhaseCard mobile={mobile} years="2014 – 2015" title="The first pivot">
            Left the US corporate world to pause, be present for my daughter, and rethink everything.
            Taught myself machine learning and data science, and built my first prototype in R.
          </PhaseCard>
          <PhaseCard mobile={mobile} years="2007 – 2013" title="Corporate craft">
            Technical foundations at scale — Unix, PL/SQL, Oracle E-Business Suite, demand forecasting and
            supply-chain architecture. Rose from engineer to program lead and custom-module architect; the
            &ldquo;intrapreneur&rdquo; the team trusted.
          </PhaseCard>
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
          <img src="brand/png/i2A-lockup-light.png" alt="i2A — Intuition to Action"
            style={{ width: "100%", maxWidth: mobile ? 260 : 320, height: "auto" }} />
        </div>

        {/* ── SKILLS & EXPERTISE ── */}
        <SectionRule />
        <Eyebrow>Skills &amp; expertise</Eyebrow>
        <div style={{ columnCount: mobile ? 1 : 2, columnGap: 44, marginTop: 8 }}>
          <SkillGroup title="Academic foundation">
            Math, Physics, Statistics, Chemistry, Computer Science. Software programming across many
            generations of Object-Oriented languages — C, C++, Java, PL/SQL, Python; R for ML algorithmic
            R&amp;D and AI prototyping; Unix / Linux; Data Warehouses.
          </SkillGroup>
          <SkillGroup title="Academic degrees">
            B.Sc. (Math, Physics, Statistics) and Master of Computer Applications (M.C.A.), Osmania
            University, India.
          </SkillGroup>
          <SkillGroup title="Multi-disciplinary">
            Data Scientist · Machine Learning Programmer · AI Product Architect. Design and implementation
            of many use cases with proprietary intelligence — the full ML lifecycle for Predictive
            Analytics and recommendations.
          </SkillGroup>
          <SkillGroup title="Business & functional">
            Advanced Supply-Chain Planning, Demand Forecasting, S&amp;OP. AI-based personalized marketing
            for E-Commerce, Market-Basket Analysis, AI/ML for CPG, AI-Driven Dynamic Incentives, Market
            Research — and a dozen more custom AI implementations.
          </SkillGroup>
          <SkillGroup title="Acquired along the way">
            AI &amp; LLM architecture, Human Psychology, Criminal Psychology, Philosophy and Spirituality, resolving
            ethical dilemmas, Objective Morality and codes of conduct.
          </SkillGroup>
          <SkillGroup title="Enthusiast of">
            Cosmology, Quantum Physics, Game Theory, and Level-5 Leadership.
          </SkillGroup>
        </div>
        <div style={{ borderTop: "1px solid var(--rule)", marginTop: 6, paddingTop: 22 }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em",
            textTransform: "uppercase", color: "var(--accent)", fontWeight: 700, marginBottom: 8 }}>
            Inspiration from
          </div>
          <div style={{ fontFamily: "var(--serif)", fontSize: mobile ? 18 : 21, lineHeight: 1.5,
            color: "var(--ink)", fontStyle: "italic", maxWidth: 760 }}>
            Nature, Music, Animals, the wonders of the Universe, and fine wisdom from Great Minds.
          </div>
        </div>

        {/* ── Elsewhere ── */}
        <SectionRule />
        <Eyebrow>Elsewhere</Eyebrow>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {[{ label: "LinkedIn", href: "https://www.linkedin.com/in/vedak/" },
            { label: "X", href: "https://x.com/vedakonduru" },
            { label: "Substack", href: "https://substack.com/@vedak2025" },
            { label: "Bluesky", href: "https://bsky.app/profile/vkonduru.bsky.social" },
            { label: "intuition2action.net", href: "https://intuition2action.net" }].map(function(item) {
            return <a key={item.label} href={item.href} target="_blank" rel="noreferrer"
              style={{ fontFamily: "var(--sans)", fontSize: 13, padding: "8px 16px",
                border: "1px solid var(--rule)", borderRadius: 100, color: "var(--ink-2)",
                textDecoration: "none" }}>{item.label} &#8599;</a>;
          })}
        </div>
      </div>
    );
  }

  window.AboutPageContent = AboutPageContent;
})();