// Industry page — prior R&D work

const INDUSTRY_DATA = [
  {
    img: "static/assets/projects/ROM.gif",
    company: "MyMedicalHUB Corp · Florida, USA",
    title: "Automated Range-of-Motion Measurement using Pose Estimation",
    blurb: "Built a web/mobile platform integrating 200+ active and passive ROM exercises, using full-body pose-estimation models for real-time analysis. Contributed a novel 3D pose-estimation technique for trunk-rotation ROM, fine-tuned exercise-specific models on custom in-house datasets, and designed a master-slave distributed system on AWS to handle high-volume API requests.",
  },
  {
    img: "static/assets/projects/gait.gif",
    company: "MyMedicalHUB Corp · Florida, USA",
    title: "Abnormal Gait Analysis using Video Signal Processing",
    blurb: "Advanced gait-event and abnormality-detection system using pose estimation. A signal-based approach outperformed traditional angle-based methods, resulting in a patented solution covering antalgic, ataxic, hemiplegic, parkinsonian, and Trendelenburg gaits — built in close collaboration with MMH's clinical team.",
  },
  {
    img: "static/assets/projects/balance.png",
    company: "MyMedicalHUB Corp · Florida, USA",
    title: "Balance and Fall-Risk Assessment for Elderly Patients",
    blurb: "Video-based balance monitoring using joint-distortion metrics from a reference axis, predicting balance scores and fall risk through TUG and Berg Balance Scale tests — integrated into real-world clinical environments.",
  },
  {
    img: "static/assets/projects/safegaze.png",
    company: "Halalz e-Ticaret Ltd · Turkey",
    title: "Safegaze API for Kahf Browser",
    blurb: "Lightweight computer-vision pipeline for the Kahf Android Browser (10K+ downloads), enabling a safe-browsing experience aligned with Islamic values. Featured in The Daily Star.",
    link: { label: "Featured in The Daily Star ↗", href: "https://www.thedailystar.net/tech-startup/news/meet-the-app-and-browser-extension-made-halal-internet-experience-3583186" },
  },
];

const PageIndustry = ({ theme }) => (
  <main>
    <Container theme={theme} style={{ paddingTop: 72, paddingBottom: 32 }}>
      <Eyebrow theme={theme} color={theme.accent}>Industry R&amp;D</Eyebrow>
      <h1 style={{ fontFamily: theme.fontSans, fontSize: 40, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 20px", color: theme.ink, textWrap: "balance" }}>
        Three years of applied research, in healthcare AI and computer vision.
      </h1>
      <p style={{ fontFamily: theme.fontBody, fontSize: 18, color: theme.body, lineHeight: 1.6, margin: 0, maxWidth: 760 }}>
        Before pivoting to computational social science, I led production ML work at the intersection of pose estimation, signal processing, and clinical assessment — shipping systems used in telehealth and consumer browsing.
      </p>
    </Container>

    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad }}>
      <Container theme={theme}>
        {INDUSTRY_DATA.map((p, i) => (
          <article key={i} style={{
            display: "grid", gridTemplateColumns: "240px 1fr",
            gap: 40, padding: "32px 0",
            borderBottom: i < INDUSTRY_DATA.length - 1 ? `1px solid ${theme.line}` : "none",
          }}>
            <div>
              <img src={p.img} alt="" style={{
                width: "100%", aspectRatio: "1/1", objectFit: "cover",
                background: theme.chip, border: `1px solid ${theme.line}`,
              }} />
            </div>
            <div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.accent, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>{p.company}</div>
              <h3 style={{ fontFamily: theme.fontSans, fontSize: 22, fontWeight: 500, letterSpacing: "-0.012em", margin: 0, marginBottom: 12, lineHeight: 1.3, color: theme.ink }}>{p.title}</h3>
              <p style={{ fontFamily: theme.fontBody, fontSize: 15.5, color: theme.body, margin: 0, marginBottom: 12, lineHeight: 1.65, maxWidth: 720 }}>{p.blurb}</p>
              {p.link && (
                <a href={p.link.href} target="_blank" rel="noopener"
                   style={{ fontFamily: theme.fontMono, fontSize: 12, letterSpacing: "0.06em", color: theme.accent, textDecoration: "none", borderBottom: `1px solid ${theme.accent}` }}>
                  {p.link.label}
                </a>
              )}
            </div>
          </article>
        ))}
      </Container>
    </section>
  </main>
);

window.PageIndustry = PageIndustry;