// About Promefy — team strength, pricing promise, and founder profile.
// Focused: who we are (published AI researchers), why we're different
// (serious engineering without the high-stakes price), and who leads it.

const RESEARCH_AREAS = ["Robotics", "A.I.", "Algorithms", "Cloud data", "Web & networking"];

// Drawn from peer-reviewed work at top international AI venues and open-source work in the wild.
const ACHIEVEMENTS = [
  {
    year: "2020-Present",
    title: "Presents at top international conferences",
    body: "Peer-reviewed work presented at top international robotics / AI conferences — from research and prototyping through to live demonstration.",
  },
  {
    year: "OSS",
    title: "Open-source algorithm libraries",
    body: "Algorithm implementations released openly and used by other developers in their own projects.",
  },
  {
    year: "OSS",
    title: "Open-source cloud data tooling",
    body: "Tooling for large-scale cloud data handling — pipelines and storage, published for the community.",
  },
  {
    year: "—",
    title: "Ex-Intel algorithm engineer",
    body: "AI and algorithm work in production, plus full-stack delivery from model to browser.",
  },
];

// — Founder-led operating model —
const HOW_WE_WORK = [
  { title: "Lean and efficient development", body: "Small surface area, fast decisions, no overhead passed on to you." },
  { title: "Direct client communication", body: "You talk to the person building it — not an account layer." },
  { title: "Modern AI-assisted engineering", body: "Tooling that compresses delivery cycles without cutting corners." },
  { title: "Specialist partners when required", body: "Vetted contractors and partners brought in for the right scope." },
];

const CORE_VALUES = [
  "Technical excellence",
  "Transparency",
  "Reliability",
  "Continuous innovation",
  "Long-term client relationships",
];

const TEAM_TABLE = [
  { fn: "Founder & Engineering", resp: "Robotics, AI & Software Development" },
  { fn: "Product Development",   resp: "Research & Prototyping" },
  { fn: "Operations",            resp: "Project Management" },
  { fn: "Customer Support",      resp: "Client Communication" },
];

function AchievementRow({ year, title, body, last }) {
  return (
    <div className="about-achievement-row" style={{
      display: "grid",
      gridTemplateColumns: "100px minmax(0, 1fr)",
      gap: 18, alignItems: "baseline",
      padding: "14px 0",
      borderBottom: last ? "none" : "1px solid var(--border-1)",
    }}>
      <span style={{
        fontFamily: "var(--font-mono)", fontSize: 12,
        letterSpacing: "0.06em", color: "var(--site-accent, var(--flame))",
        paddingTop: 1,
      }}>{year}</span>
      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
        <span style={{
          fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600,
          lineHeight: 1.3, color: "var(--fg-1)",
        }}>{title}</span>
        <span style={{
          fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55,
          color: "var(--fg-2)",
        }}>{body}</span>
      </div>
    </div>
  );
}

function ResearchTag({ children }) {
  return (
    <span style={{
      fontFamily: "var(--font-mono)", fontSize: 11,
      letterSpacing: "0.10em", color: "var(--fg-2)",
      padding: "5px 10px",
      border: "1px solid var(--border-2)",
      borderRadius: 3, textTransform: "uppercase",
    }}>{children}</span>
  );
}

const FOUNDER_PHOTOS = [
  {
    src: "assets/founder-conference-2.png",
    alt: "Jonathan Tay speaking to a full conference hall",
    tag: "Main stage",
    caption: "Speaking to a full conference hall on mapless navigation and sim-to-real learning.",
  },
  {
    src: "assets/founder-conference.png",
    alt: "Jonathan Tay presenting at a top robotics / AI conference",
    tag: "At the podium",
    caption: "Presenting peer-reviewed research at a top international robotics / AI conference.",
  },
];

function About() {
  return (
    <section id="about" style={{
      padding: "120px 0 96px",
      background: "var(--bg-1)",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Drifting cube — slow parallax */}
      <Parallax speed={0.18} style={{
        position: "absolute",
        right: "-100px", top: 80,
        width: 380, opacity: 0.18, pointerEvents: "none",
      }}>
        <img
          src="assets/motif-wireframe-cube.svg"
          alt=""
          className="drift-y"
          style={{ width: "100%", display: "block" }}/>
      </Parallax>

      <div className="container" style={{
        display: "flex", flexDirection: "column", gap: 80, position: "relative",
      }}>
        <SectionHeader
          eyebrow="WHO WE ARE"
          title={
            <ScrambleHeading segments={[
              { text: "Research professionals" },
              { text: " Not your usual programmers." },
            ]} />
          }
          sub={"\n"}
        />

        {/* Team strength + pricing promise */}
        <div className="grid-2" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 6fr) minmax(0, 6fr)",
          gap: 64, alignItems: "start",
        }}>
          <Reveal className="reveal-from-left col gap-4">
            <EyebrowLabel>THE TEAM</EyebrowLabel>
            <p style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(22px, 2vw, 28px)",
              fontWeight: 500, lineHeight: 1.25,
              letterSpacing: "-0.01em", margin: 0, color: "var(--fg-1)",
              textWrap: "balance",
            }}>
              A group of <span style={{ color: "var(--site-accent, var(--flame))" }}>actual researchers</span> — with
              papers at top AI conferences and open-source projects in the wild.
            </p>
          </Reveal>

          <Reveal className="reveal-from-right col gap-4" delay={160}>
            <EyebrowLabel>THE PROMISE</EyebrowLabel>
            <p style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(22px, 2vw, 28px)",
              fontWeight: 500, lineHeight: 1.25,
              letterSpacing: "-0.01em", margin: 0, color: "var(--fg-1)",
              textWrap: "balance",
            }}>
              Too many firms are quoted a fortune for digital transformation. We don't buy that.
            </p>
          </Reveal>
        </div>

        {/* Founder */}
        <Reveal className="reveal-up">
          <div className="grid-2" style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)",
            gap: 56, alignItems: "center",
          }}>
            {/* Photo — edges dissolve into the page, no frame */}
            <div style={{ position: "relative" }}>
              <img
                src="assets/founder-jonathan.png"
                alt="Jonathan Tay, founder of Promefy Solutions"
                style={{
                  width: "100%", display: "block",
                  aspectRatio: "5 / 6", objectFit: "cover",
                  objectPosition: "58% 18%",
                  WebkitMaskImage:
                    "radial-gradient(125% 115% at 52% 42%, #000 58%, rgba(0,0,0,0.55) 78%, transparent 96%)",
                  maskImage:
                    "radial-gradient(125% 115% at 52% 42%, #000 58%, rgba(0,0,0,0.55) 78%, transparent 96%)",
                }}
              />
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <EyebrowLabel>FOUNDER</EyebrowLabel>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <h3 style={{
                  fontFamily: "var(--font-display)",
                  fontSize: "clamp(30px, 3.4vw, 42px)",
                  fontWeight: 500, lineHeight: 1.05,
                  letterSpacing: "-0.02em", margin: 0, color: "var(--fg-1)",
                }}>Jonathan Tay</h3>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 12,
                  letterSpacing: "0.16em", color: "var(--fg-3)",
                  textTransform: "uppercase",
                }}>Founder · Robotics &amp; AI Algorithm Engineer</span>
              </div>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.65,
                color: "var(--fg-2)", margin: 0, maxWidth: "52ch",
              }}>
                A robotics and AI algorithm engineer with vast international experience —
                having worked across Singapore, Japan, China and the USA. Ex-Intel, full-stack from
                the silicon up to the browser, and a professional in delivering real
                industrial solutions. Along the way he's contributed to projects with teams
                at Toyota, JR-East, Honda and Salesforce, as well as government-funded research
                programmes in Japan.
              </p>

              {/* Worked with */}
              <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12 }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "0.16em", color: "var(--fg-3)",
                  textTransform: "uppercase",
                }}>// Worked with</span>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {["Toyota", "JR-EAST", "Honda", "Salesforce", "Gov-funded research (JP)"].map((c) => <ResearchTag key={c}>{c}</ResearchTag>)}
                </div>
              </div>

              {/* Worked in */}
              <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12 }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "0.16em", color: "var(--fg-3)",
                  textTransform: "uppercase",
                }}>// Worked in</span>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {["Singapore", "Malaysia", "Japan", "China", "USA"].map((c) => <ResearchTag key={c}>{c}</ResearchTag>)}
                </div>
              </div>

              {/* Achievements */}
              <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 4 }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "0.16em", color: "var(--fg-3)",
                  textTransform: "uppercase",
                }}>// Selected work</span>
                <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                  {ACHIEVEMENTS.map((a, i) => <AchievementRow key={a.year + a.title} {...a} last={i === ACHIEVEMENTS.length - 1} />)}
                </div>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 6 }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "0.16em", color: "var(--fg-3)",
                  textTransform: "uppercase",
                }}>// Research</span>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {RESEARCH_AREAS.map((r) => <ResearchTag key={r}>{r}</ResearchTag>)}
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        {/* Founder — on the conference circuit (side by side) */}
        <Reveal className="reveal-up">
          <div className="grid-2" style={{
            maxWidth: 1040, marginInline: "auto",
            display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
            gap: 32,
          }}>
            {FOUNDER_PHOTOS.map((p) => (
              <figure key={p.src} style={{
                margin: 0, display: "flex", flexDirection: "column", gap: 14,
              }}>
                <img
                  src={p.src}
                  alt={p.alt}
                  style={{
                    width: "100%", display: "block",
                    aspectRatio: "3 / 2", objectFit: "cover", objectPosition: "center",
                    WebkitMaskImage:
                      "radial-gradient(118% 128% at 50% 46%, #000 62%, rgba(0,0,0,0.5) 84%, transparent 99%)",
                    maskImage:
                      "radial-gradient(118% 128% at 50% 46%, #000 62%, rgba(0,0,0,0.5) 84%, transparent 99%)",
                  }}
                />
                <figcaption className="photo-caption" style={{
                  display: "grid", gridTemplateColumns: "max-content minmax(0, 1fr)",
                  gap: 16, alignItems: "baseline",
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    letterSpacing: "0.16em", color: "var(--site-accent, var(--flame))",
                    textTransform: "uppercase", whiteSpace: "nowrap",
                  }}>{p.tag}</span>
                  <span style={{
                    fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.55,
                    color: "var(--fg-2)",
                  }}>{p.caption}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </Reveal>

        {/* How we work */}
        <Reveal className="reveal-up">
          <div className="grid-2" style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)",
            gap: 56, alignItems: "start",
          }}>
            <div className="col gap-4">
              <EyebrowLabel>HOW WE WORK</EyebrowLabel>
              <p style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(22px, 2vw, 28px)",
                fontWeight: 500, lineHeight: 1.25,
                letterSpacing: "-0.01em", margin: 0, color: "var(--fg-1)",
                textWrap: "balance",
              }}>
                We're <span style={{ color: "var(--site-accent, var(--flame))" }}>founder-led</span> — so you
                get direct communication, rapid development cycles, and close collaboration with the person doing the work.
              </p>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                letterSpacing: "0.16em", color: "var(--fg-3)",
                textTransform: "uppercase",
              }}>// Rather than a large internal team, we focus on</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                {HOW_WE_WORK.map((a, i) => (
                  <AchievementRow key={a.title} year={String(i + 1).padStart(2, "0")} title={a.title} body={a.body} last={i === HOW_WE_WORK.length - 1} />
                ))}
              </div>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.65,
                color: "var(--fg-2)", margin: "4px 0 0", maxWidth: "56ch",
              }}>
                This approach lets us deliver high-quality solutions while staying agile and cost-effective.
              </p>
            </div>
          </div>
        </Reveal>

        {/* Core values */}
        {/* Our team */}
        <Reveal className="reveal-up col gap-4">
          <EyebrowLabel>OUR TEAM</EyebrowLabel>
          <div style={{
            border: "1px solid var(--border-1)", borderRadius: 10, overflow: "hidden",
          }}>
            <div className="team-table-row" style={{
              display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
              gap: 24, padding: "14px 28px", background: "var(--bg-2)",
              borderBottom: "1px solid var(--border-1)",
            }}>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em",
                color: "var(--fg-3)", textTransform: "uppercase",
              }}>Function</span>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em",
                color: "var(--fg-3)", textTransform: "uppercase",
              }}>Responsibility</span>
            </div>
            {TEAM_TABLE.map((r, i) => (
              <div key={r.fn} className="team-table-row" style={{
                display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
                gap: 24, padding: "18px 28px",
                borderBottom: i === TEAM_TABLE.length - 1 ? "none" : "1px solid var(--border-1)",
                alignItems: "baseline",
              }}>
                <span style={{
                  fontFamily: "var(--font-sans)", fontSize: 15.5, fontWeight: 600,
                  color: "var(--fg-1)", lineHeight: 1.4,
                }}>{r.fn}</span>
                <span style={{
                  fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--fg-2)", lineHeight: 1.5,
                }}>{r.resp}</span>
              </div>
            ))}
          </div>
        </Reveal>

      </div>
    </section>
  );
}

Object.assign(window, { About });