// Homepage sections: hero variations, themes, projects preview, news, partners, publications
// Uses window.LAB data and shared chrome.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "editorial",
  "showMotif": true,
  "accent": "moss",
  "fontPreset": "apple"
}/*EDITMODE-END*/;

// ---------- HERO VARIATIONS ----------

function HeroEditorial() {
  return (
    <section className="hero hero--editorial">
      <div className="motif-grid"></div>
      <div className="hero__inner">
        <div className="hero__meta upper-mono">
          <span>● Bioinformatics &amp; AI Lab</span>
          <span>University of Guelph</span>
        </div>
        <h1 className="hero__title serif">
          Computational tools for the<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--moss-600)' }}>biology of tomorrow</em>,
          built with care for<br/>
          the people they serve.
        </h1>
        <div className="hero__columns">
          <p className="hero__lede">
            We design machine-learning methods for genomic discovery and build
            LLM-powered agents for retrieval, reasoning, and adaptive interaction.
            Privacy, security, and ethics frame the guardrails; healthcare is one of
            our deployment grounds. Methods rooted in statistics; systems rooted in
            real agricultural, clinical, and societal needs.
          </p>
          <div className="hero__actions">
            <a href="research.html" className="btn btn--primary">
              See our research <span className="btn__arrow">→</span>
            </a>
            <a href="team.html" className="btn btn--ghost">
              Meet the team
            </a>
          </div>
        </div>
        <div className="hero__strip">
          {Object.values(window.LAB.THEMES).map(t => (
            <a key={t.id} href={`research.html#${t.id}`} className="hero__theme-card" style={{ borderColor: t.soft }}>
              <span className="upper-mono" style={{ color: t.color }}>{t.num}</span>
              <span className="serif" style={{ fontSize: 22, lineHeight: 1.2 }}>{t.title}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroTechnical() {
  return (
    <section className="hero hero--technical">
      <div className="hero__inner">
        <div className="hero-tech__grid">
          <div className="hero-tech__left">
            <div className="upper-mono" style={{ marginBottom: 24 }}>
              {`> bioai_lab`} · v.2026 · <span style={{ color: 'var(--moss-600)' }}>Research index</span>
            </div>
            <h1 className="hero__title serif" style={{ fontSize: 'clamp(40px, 6vw, 80px)' }}>
              Genomics.<br/>
              Healthcare.<br/>
              <span style={{ color: 'var(--moss-400)' }}>Trust.</span>
            </h1>
            <p className="hero__lede" style={{ marginTop: 24, maxWidth: 480 }}>
              We build interpretable ML for biological data — and study the
              systems and ethics that surround it.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              <a href="research.html" className="btn btn--primary">Research index <span className="btn__arrow">→</span></a>
              <a href="#publications" className="btn btn--ghost">{window.LAB.PUBS.length} publications</a>
            </div>
          </div>
          <div className="hero-tech__right">
            <div className="hero-tech__terminal">
              <div className="hero-tech__term-head upper-mono">~/lab/state.json</div>
              <pre className="mono">
{`{
  "pi":            "Dr. Yan Yan",
  "members":       ${Object.keys(window.LAB.PEOPLE).length - 1},
  "themes": [
    "genomics",
    "healthcare",
    "responsible-ai"
  ],
  "active_projects": ${window.LAB.PROJECTS.length},
  "recruiting":    true
}`}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <section className="hero hero--visual">
      <div className="hero-visual__bg">
        <svg viewBox="0 0 800 400" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
          {Array.from({ length: 24 }).map((_, i) => {
            const x = i * 35 + 10;
            return (
              <g key={i} opacity={0.5}>
                <circle cx={x} cy={120 + Math.sin(i * 0.7) * 60} r="3" fill="var(--moss-400)" />
                <circle cx={x} cy={280 + Math.sin(i * 0.7 + Math.PI) * 60} r="3" fill="var(--moss-600)" />
                <line
                  x1={x} y1={120 + Math.sin(i * 0.7) * 60}
                  x2={x} y2={280 + Math.sin(i * 0.7 + Math.PI) * 60}
                  stroke="var(--moss-200)" strokeWidth="1"
                />
              </g>
            );
          })}
        </svg>
      </div>
      <div className="hero__inner" style={{ position: 'relative', zIndex: 2 }}>
        <h1 className="hero__title serif" style={{ fontSize: 'clamp(48px, 8vw, 120px)', lineHeight: 0.95, textAlign: 'center' }}>
          Where biology<br/>
          meets <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>thoughtful</em> AI.
        </h1>
        <p className="hero__lede" style={{ textAlign: 'center', maxWidth: 560, margin: '32px auto 0' }}>
          The Bioinformatics &amp; AI Lab at the University of Guelph — building
          interpretable methods for genomics, healthcare, and the responsible AI
          systems that connect them.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 32 }}>
          <a href="research.html" className="btn btn--primary">Our research <span className="btn__arrow">→</span></a>
          <a href="team.html" className="btn btn--ghost">Team</a>
        </div>
      </div>
    </section>
  );
}

// ---------- FEATURED SHELVES ----------

function ThemesShelf() {
  return (
    <section className="section" id="themes">
      <div className="section-head">
        <div>
          <div className="section-head__num">§ 01 · Research</div>
        </div>
        <div>
          <h2 className="section-head__title serif">
            Four lines of inquiry,<br/>one connected lab.
          </h2>
          <p className="section-head__sub">
            Methods cross over: a Bayesian model from genomics inspires uncertainty
            quantification in healthcare; a privacy audit on health portals shapes how
            we deploy clinical LLMs.
          </p>
        </div>
      </div>
      <div className="themes-shelf">
        {Object.values(window.LAB.THEMES).map((t, idx) => {
          const projectCount = window.LAB.PROJECTS.filter(p => p.themes.includes(t.id)).length;
          const small = idx >= 2;
          return (
            <a href={`research.html#${t.id}`} key={t.id} className={`theme-card ${small ? 'theme-card--small' : ''}`} style={{ '--theme-c': t.color, '--theme-s': t.soft }}>
              <div className="theme-card__num">{t.num}</div>
              <div className="theme-card__title serif">{t.title}</div>
              <p className="theme-card__blurb">{t.blurb}</p>
              <ul className="theme-card__topics">
                {t.topics.slice(0, 4).map(top => <li key={top}>{top}</li>)}
              </ul>
              <div className="theme-card__foot upper-mono">
                {projectCount} projects <span>→</span>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

function FeaturedProjects() {
  const featured = window.LAB.PROJECTS.slice(0, 3);
  return (
    <section className="section section--paper-warm" style={{ marginTop: 48 }}>
      <div className="section-head">
        <div><div className="section-head__num">§ 02 · Featured</div></div>
        <div>
          <h2 className="section-head__title serif">Recent &amp; in-flight projects</h2>
          <p className="section-head__sub">
            A snapshot of work the lab is shipping this year — papers, models, and
            posters with student leads. The full catalog lives on the Research page.
          </p>
        </div>
      </div>
      <div className="proj-grid">
        {featured.map(p => {
          const t = window.LAB.THEMES[p.themes[0]];
          const lead = p.lead ? window.LAB.PEOPLE[p.lead] : null;
          return (
            <article key={p.id} className="proj-card">
              <div className={`proj-card__fig ph ph--moss`} style={{ background: t.soft, color: t.color }}>
                {p.figure}
              </div>
              <div className="proj-card__body">
                <ThemeBadge theme={p.themes[0]} />
                <h3 className="serif" style={{ fontSize: 22, margin: '12px 0 8px' }}>{p.title}</h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: 14, marginBottom: 12 }}>{p.blurb}</p>
                <div className="proj-card__meta upper-mono">
                  {lead && <span>Lead · {lead.name}</span>}
                  <span>{p.venue}</span>
                </div>
              </div>
            </article>
          );
        })}
      </div>
      <div style={{ marginTop: 32, textAlign: 'center' }}>
        <a href="research.html" className="btn btn--ghost">All {window.LAB.PROJECTS.length} projects →</a>
      </div>
    </section>
  );
}

// ---------- TIMELINE ----------

function Timeline() {
  return (
    <section className="section">
      <div className="section-head">
        <div><div className="section-head__num">§ 03 · Trajectory</div></div>
        <div>
          <h2 className="section-head__title serif">Lab milestones</h2>
          <p className="section-head__sub">From first GWAS papers to multi-omics graph models — a quick read of where we've been.</p>
        </div>
      </div>
      <div className="timeline">
        {window.LAB.TIMELINE.map((m, i) => (
          <div key={m.year} className="timeline__item">
            <div className="timeline__year mono">{m.year}</div>
            <div className="timeline__dot" />
            <div className="timeline__body">
              <div className="serif" style={{ fontSize: 20 }}>{m.label}</div>
              <div style={{ color: 'var(--ink-soft)', fontSize: 14 }}>{m.note}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- NEWS ----------

function News() {
  return (
    <section className="section" id="news">
      <div className="section-head">
        <div><div className="section-head__num">§ 04 · Updates</div></div>
        <div>
          <h2 className="section-head__title serif">Latest news</h2>
        </div>
      </div>
      <ul className="news-list">
        {window.LAB.NEWS.map((n, i) => (
          <li key={i} className="news-item">
            <span className="news-item__date upper-mono">{n.date}</span>
            <span className="news-item__tag">{n.tag}</span>
            <span className="news-item__text">{n.text}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- PARTNERS ----------

function Partners() {
  return (
    <section className="section--full" id="partners">
      <div style={{ maxWidth: 'var(--max-w)', margin: '0 auto' }}>
        <div className="section-head" style={{ borderColor: 'var(--moss-700)' }}>
          <div><div className="section-head__num" style={{ color: 'var(--moss-200)' }}>§ 05 · Partner with us</div></div>
          <div>
            <h2 className="section-head__title serif" style={{ color: 'var(--cream-50)' }}>
              For industry, agri-tech &amp; healthcare partners.
            </h2>
            <p className="section-head__sub" style={{ color: 'var(--moss-200)' }}>
              We collaborate with companies and clinics on applied problems where
              interpretability, privacy, and biological grounding matter.
            </p>
          </div>
        </div>
        <div className="partners-grid">
          <div className="partner-cap">
            <div className="upper-mono" style={{ color: 'var(--moss-200)' }}>Capability 01</div>
            <h3 className="serif" style={{ fontSize: 26, color: 'var(--cream-50)', margin: '8px 0 12px' }}>
              Genomics pipelines, ready to deploy
            </h3>
            <p style={{ color: 'var(--moss-200)', fontSize: 14 }}>
              GWAS, SNP discovery, multi-omics integration. Dockerized pipelines (PLINK,
              TASSEL, GAPIT, GCTA) tailored to your crop or cohort.
            </p>
          </div>
          <div className="partner-cap">
            <div className="upper-mono" style={{ color: 'var(--moss-200)' }}>Capability 02</div>
            <h3 className="serif" style={{ fontSize: 26, color: 'var(--cream-50)', margin: '8px 0 12px' }}>
              LLM agents for healthcare information
            </h3>
            <p style={{ color: 'var(--moss-200)', fontSize: 14 }}>
              Prototyping retrieval &amp; reformulation agents — paired with privacy
              audits and human-factors studies.
            </p>
          </div>
          <div className="partner-cap">
            <div className="upper-mono" style={{ color: 'var(--moss-200)' }}>Capability 03</div>
            <h3 className="serif" style={{ fontSize: 26, color: 'var(--cream-50)', margin: '8px 0 12px' }}>
              Responsible-AI assessments
            </h3>
            <p style={{ color: 'var(--moss-200)', fontSize: 14 }}>
              Privacy &amp; third-party data sharing audits, ESG report scoring,
              risk frameworks for AI in regulated domains.
            </p>
          </div>
        </div>
        <div className="partners-cta">
          <div>
            <div className="serif" style={{ fontSize: 28, color: 'var(--cream-50)' }}>
              Have a problem we should look at?
            </div>
            <div style={{ color: 'var(--moss-200)', marginTop: 4 }}>
              Reach out — we'll respond within a week.
            </div>
          </div>
          <a href="mailto:yyan15@uoguelph.ca" className="btn"
             style={{ background: 'var(--cream-50)', color: 'var(--moss-900)', border: 'none' }}>
            Start a conversation →
          </a>
        </div>
        <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--moss-700)' }}>
          <div className="upper-mono" style={{ color: 'var(--moss-200)', marginBottom: 16 }}>Past collaborators &amp; venues</div>
          <div className="partners-logos mono">
            {['IEEE BIBM', 'PST', 'PRAI', 'ACM CUI', 'BIBE', 'ICICT', 'Bioinformatics Advances', 'Food Chemistry', 'Vector Institute'].map(v => (
              <span key={v}>{v}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- PUBLICATIONS PREVIEW ----------

function PubsPreview() {
  const recent = window.LAB.PUBS.slice(0, 6);
  return (
    <section className="section" id="publications">
      <div className="section-head">
        <div><div className="section-head__num">§ 06 · Selected work</div></div>
        <div>
          <h2 className="section-head__title serif">Recent publications</h2>
        </div>
      </div>
      <ul className="pubs-list">
        {recent.map((p, i) => (
          <li key={i} className="pub-item">
            <div className="pub-item__year mono">{p.year}</div>
            <div className="pub-item__type upper-mono">{p.type}</div>
            <div className="pub-item__text">
              {p.text}
              <div className="pub-item__tags">
                {p.tags.slice(0, 3).map(t => <span key={t} className="tag" style={{ fontSize: 10 }}>{t}</span>)}
              </div>
            </div>
          </li>
        ))}
      </ul>
      <div style={{ marginTop: 24, textAlign: 'center' }}>
        <span className="upper-mono" style={{ color: 'var(--ink-soft)' }}>
          Full publications list — see the complete site
        </span>
      </div>
    </section>
  );
}

// ---------- HERO ROUTER + APP ----------

function HomeApp() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const f = tweaks.fontPreset || 'apple';
    document.documentElement.setAttribute('data-fonts', f);
    try { localStorage.setItem('bioai.fontPreset', f); } catch(e) {}
  }, [tweaks.fontPreset]);

  let Hero = HeroEditorial;
  if (tweaks.heroVariant === "technical") Hero = HeroTechnical;
  else if (tweaks.heroVariant === "visual") Hero = HeroVisual;

  return (
    <>
      <SiteHeader active="home" />
      <Hero />
      <ThemesShelf />
      <FeaturedProjects />
      <News />
      <Partners />
      <PubsPreview />
      <SiteFooter />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Typography">
          <window.TweakSelect
            value={tweaks.fontPreset}
            onChange={v => setTweak('fontPreset', v)}
            options={[
              { value: 'apple',     label: 'Apple — SF Pro / system' },
              { value: 'geist',     label: 'Geist (Vercel)' },
              { value: 'manrope',   label: 'Manrope — soft geometric' },
              { value: 'dmsans',    label: 'DM Sans — clean modern' },
              { value: 'jakarta',   label: 'Plus Jakarta — warm Apple-feel' },
              { value: 'editorial', label: 'Editorial — Instrument Serif + Inter' },
            ]}
          />
          <p style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 8 }}>
            Apple-style options first. The page falls back to system fonts when the
            web font isn't loaded — that's how Apple itself does it.
          </p>
        </window.TweakSection>

        <window.TweakSection title="Hero variant">
          <window.TweakRadio
            value={tweaks.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={[
              { value: 'editorial',  label: 'Editorial' },
              { value: 'technical',  label: 'Technical' },
              { value: 'visual',     label: 'Visual' },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp />);