iGEM 2025 — Team saint-joseph

"use client";

import { Sidebar } from "@/components/Sidebar";
import { Box, Divider, Stack } from "@mui/material";
import { useEffect } from "react";

const PDF_URL =
  "https://static.igem.wiki/teams/5704/sonfotolar/laboratory-notebook-final-2025-10-09.pdf";

const anchors = [
  { id: "notebook-pdf", label: "Lab Notebook (PDF)" },
  { id: "download", label: "Download" },
];
const HERO_GIF = "https://static.igem.wiki/teams/5704/wikidesign/glutenelsalliyor-gif.webp";

export default function NotebookPage() {
  useEffect(() => {
    document.documentElement.style.scrollBehavior = "smooth";
    return () => {
      document.documentElement.style.scrollBehavior = "";
    };
  }, []);

  return (
    <div className="page">
      <div className="bg-mist" />

      <div className="layout">
        {/* Sidebar */}
        <Sidebar options={anchors} />

        {/* Main */}
        <main className="main">
          <div className="content">
            <Stack direction="row" mt={10} position="relative">
              <h1 className="hero-title">Lab <span className="accent">Notebook</span></h1>
              <Box component="img"
                position="absolute"
                right="10px"
                bottom="0"
                src="https://static.igem.wiki/teams/5704/wikidesign/glutenelsalliyor-gif-ezgif-com-crop.webp" height={100} />
            </Stack>
            <Divider />
          </div>

          <div className="content">
            {/* CARD: PDF */}
            <section id="notebook-pdf" className="card">
              <div className="card-body">
                <div className="card-head">
                  <h3 className="card-title">Lab Notebook </h3>
                </div>
                <p className="para">
                  Embedded PDF viewer with scroll. If your browser blocks inline
                  PDF, use the{" "}
                  <a href={PDF_URL} target="_blank" rel="noopener" className="link">
                    direct link
                  </a>
                  .
                </p>

                <div className="pdf-frame">
                  <iframe title="Lab Notebook PDF" src={PDF_URL} className="pdf" />
                </div>

                <div className="pdf-fallback">
                  If the viewer doesn’t load,{" "}
                  <a href={PDF_URL} target="_blank" rel="noopener" className="link">
                    open the PDF in a new tab
                  </a>
                  .
                </div>
              </div>
            </section>

            {/* CARD: DOWNLOAD */}
            <section id="download" className="card">
              <div className="card-body">
                <div className="card-head">
                  <h3 className="card-title">Download</h3>
                </div>
                <p className="para">
                  Get the full Lab Notebook as a PDF file for offline viewing and sharing.
                </p>
                <div className="dl-bar">
                  <a className="btn" href={PDF_URL} target="_blank" rel="noopener">
                    ⬇ Download PDF
                  </a>
                </div>
              </div>
            </section>
          </div>
        </main>
      </div>

      {/* Styles — HP/Protocol ile birebir uyumlu */}
      <style jsx>{`
        :global(*), :global(*::before), :global(*::after) { box-sizing: border-box; }
        :global(html), :global(body), :global(#__next) { height: 100%; }
        :global(body) { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color: #0b0f19; background: #fff; }

        /* Global sarı scrollbar */
        :global(html), :global(body) {
          scrollbar-width: thin;
          scrollbar-color: #dd671eff #fefce8;
        }
        :global(body::-webkit-scrollbar) { width: 10px; height: 10px; }
        :global(body::-webkit-scrollbar-track) { background: #fefce8; }
        :global(body::-webkit-scrollbar-thumb) { background: #dd671eff; border-radius: 8px; }

        .page { min-height: 100vh; position: relative; padding-bottom: 80px; }
        .bg-mist { display: none; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 50% 35% at 50% 0%, rgba(251,146,60,0.10), transparent 60%), #ffffff; }

        .layout { position: relative; z-index: 1; display: flex; }

        /* Sidebar */
        .sidebar { width: 0; flex: 0 0 0; position: sticky; top: 0; height: 100vh; z-index: 10; }
        @media (min-width: 1024px) { .sidebar { width: 280px; flex: 0 0 280px; } }
        .sidebar-inner {
          position: sticky; top: 24px; margin: 16px;
          border: 1px solid rgba(221, 103, 30, 0.2); border-radius: 16px;
          background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
          max-height: calc(100vh - 120px); overflow: auto;
          scrollbar-width: thin; scrollbar-color: #dd671eff #fefce8;
        }
        .sidebar-inner::-webkit-scrollbar { width: 8px; }
        .sidebar-inner::-webkit-scrollbar-track { background: #fefce8; }
        .sidebar-inner::-webkit-scrollbar-thumb { background: #dd671eff; border-radius: 8px; }
        .sidebar-title { font-size: 16px; font-weight: 800; padding: 16px 18px; border-bottom: 1px solid rgba(221, 103, 30, 0.15); color: #dd671eff; text-align: center; }
        .toc { list-style: none; margin: 0; padding: 12px; }
        .toc li { margin: 0; }
        .toc-link { display: block; padding: 12px 14px; border-radius: 10px; color: #dd671eff; text-decoration: none; font-size: 14px; font-weight: 600; transition: all 0.2s ease; border-left: 3px solid transparent; }
        .toc-link:hover { background: rgba(221, 103, 30, 0.1); border-left-color: #dd671eff; transform: translateX(4px); }

        /* Main */
        .main { flex: 1 1 auto; padding-left: 0; }
        @media (min-width: 1024px) { .main { padding-left: 0; } }

        .hero { padding: 56px 16px 12px 16px; }
        @media (min-width: 1024px) { .hero { padding-left: 32px; padding-right: 32px; } }
        .hero-title { font-size: 36px; margin: 0 0 8px 0; font-weight: 800; color: #dd671eff; letter-spacing: -0.02em; }
        @media (min-width: 640px) { .hero-title { font-size: 48px; } }
        .accent { color: #082e74ff; }

        .hero-divider { height: 1px; background: #e5e7eb; width: 100%; margin: 0 16px 16px 16px; }
        @media (min-width: 1024px) { .hero-divider { margin-left: 32px; margin-right: 32px; } }

        .content { padding: 0 16px 48px 16px; max-width: 1140px; }
        @media (min-width: 1024px) { .content { padding-left: 32px; padding-right: 32px; } }

        .block { margin-bottom: 24px; }
        .block-title { font-size: 24px; margin: 0 0 8px 0; font-weight: 800; color: #dd671eff; }
        .para { color: #4b5563; line-height: 1.75; margin: 0 0 12px 0; font-size: 16px; }
        .link { color: #1d4ed8; text-decoration: none; font-weight: 700; }
        .link:hover { text-decoration: underline; }

        .card {
          display: grid;
          grid-template-columns: 1fr;
          border: 1px solid #111827;
          border-radius: 12px;
          background: #fff;
          overflow: hidden;
          margin-bottom: 24px;
        }
        @media (min-width: 1200px) { .card { grid-template-columns: 1fr; } }
        .card-body { padding: 20px; }
        @media (min-width: 768px) { .card-body { padding: 24px; } }
        .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
        .card-title { margin: 0; font-size: 20px; font-weight: 800; color: #dd671eff; letter-spacing: -0.01em; }

        .pdf-frame {
          background: #ffffff;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
          margin-top: 8px;
        }
        .pdf { width: 100%; height: 80vh; border: none; display: block; }
        .pdf-fallback {
          padding: 12px 14px;
          font-size: 14px;
          color: #475569;
          border-top: 1px solid #e5e7eb;
          text-align: center;
        }

        .dl-bar { display: flex; gap: 10px; flex-wrap: wrap; }
        .btn {
          display: inline-flex; align-items: center; gap: 8px;
          background: #1e40af; color: #fff; text-decoration: none;
          padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 14px;
          box-shadow: 0 6px 16px rgba(30, 64, 175, 0.25);
          transition: transform .05s ease, box-shadow .2s ease;
        }
        .btn:hover { box-shadow: 0 10px 22px rgba(30, 64, 175, 0.28); }
        .btn:active { transform: translateY(1px); }
      `}</style>
    </div>
  );
}

// app/engineering/page.tsx
"use client";

import { Sidebar } from "@/components/Sidebar";
import { Box, Divider, Stack } from "@mui/material";
import { useEffect } from "react";

const anchors = [
  { id: "iteration-1", label: "First Iteration" },
  { id: "iteration-2", label: "Second Iteration" },
  { id: "iteration-3", label: "Third Iteration" },
  { id: "whats-next", label: "What’s Next?" },
];

// TODO: Ayır
const HERO_GIF =
  "https://static.igem.wiki/teams/5704/wikidesign/glutenelsalliyor-gif.webp";

export default function EngineeringPage() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      document.documentElement.style.scrollBehavior = "smooth";
      return () => {
        document.documentElement.style.scrollBehavior = "";
      };
    }
  }, []);

  return (
    <div className="page">
      <div className="bg-mist" />

      <div className="layout">
        {/* Sidebar */}
        <Sidebar options={anchors} />

        {/* Main */}
        <main className="main">
          <div className="content">
            <Stack direction="row" mt={10} position="relative">
              <h1 className="hero-title">Engineering <span className="accent">Iterations</span></h1>
              <Box component="img"
                position="absolute"
                right="10px"
                bottom="0"
                src="https://static.igem.wiki/teams/5704/wikidesign/glutenelsalliyor-gif-ezgif-com-crop.webp" height={100} />
            </Stack>
            <Divider />
          </div>

          {/* CONTENT (DBTL only) */}
          <div className="content">
            {/* ITERATION 1 */}
            <section id="iteration-1" className="block">
              <h2 className="block-title">First Iteration</h2>

              <div className="two-col">
                <div className="col">
                  <h3 className="step">Design</h3>
                  <p className="para">
                    The initial plan for gene expression involved cloning the target gene into standard backbones like pET-29b(+) or pUC18. This would require using the Multiple Cloning Site (MCS) and specific restriction enzymes, namely HindIII and EcoRI, to insert the gene. The goal was to establish a functional expression system for the target protein. However, an alternative was identified: purchasing the gene constructs pre-cloned into the supplier's proprietary expression vector, pET IDT C His, offered by Integrated DNA Technologies (IDT).
                  </p>
                  <h3 className="step">Build</h3>
                  <p className="para">
                    To optimize for time and cost efficiency, the decision was made to leverage IDT's cloning service. The gene variants were ordered directly, synthesized, and cloned into the pET IDT C His expression vector. This vector is designed for protein expression and includes a C-terminal Histidine-tag (His-tag) for downstream purification. This approach eliminated the need for in-house cloning and validation of the initial construct.

                  </p>
                </div>
                <div className="col">
                  <h3 className="step">Test</h3>
                  <p className="para">
                    The acquired pET IDT C His plasmids, containing the gene constructs, were transformed into the BL21(DE3) E. coli strain, a common host for T7-promoter-driven protein expression. The transformed cells were subsequently plated on LB-Kanamycin plates to select for successful transformants, as the pET IDT C His backbone confers kanamycin resistance. Successful growth on the selective media confirmed the viability of the plasmid and the transformation protocol.

                  </p>
                  <h3 className="step">Learn</h3>
                  <p className="para">
                    The successful and rapid acquisition of the constructs highlighted a significant advancement in synthetic biology. It is now far more practical and efficient to outsource gene synthesis and initial cloning to specialized companies. Ordering gene constructs already inserted into the desired expression vector saves substantial time, resources, and labor compared to traditional in-house cloning methods, making it the preferred initial strategy for construct preparation.

                  </p>
                </div>
              </div>
            </section>

            {/* ITERATION 2 */}
            <section id="iteration-2" className="block">
              <h2 className="block-title">Second Iteration</h2>

              <div className="two-col">
                <div className="col">
                  <h3 className="step">Design</h3>
                  <p className="para">
                    The literature suggests that using a minimal media for growing host cells can be beneficial for the final quality and solubility of recombinant proteins. Slower growth rates, inherent to minimal media, lead to a reduced protein synthesis rate. This allows the cellular machinery, including chaperone proteins, more time to assist in the correct folding of the recombinant protein. This is a critical strategy to prevent aggregation and the formation of insoluble inclusion bodies, thereby increasing the yield of soluble, functional protein.

                  </p>
                  <h3 className="step">Build</h3>
                  <p className="para">
                    To implement this design, the BL21(DE3) host cells containing the expression plasmid were inoculated and cultured in a Minimal Media formulation.

                  </p>
                </div>
                <div className="col">
                  <h3 className="step">Test</h3>
                  <p className="para">
                    The experiment was unsuccessful: the bacteria failed to grow in the Minimal Media, even after an extended incubation period of 48 hours. The incubator provided shaking at 100 rpm, which should have supplied adequate aeration. Following this failure, the team reverted to using LB media. Although growth in LB media was also observed to be somewhat slower than expected, it was sufficient to achieve efficient bacterial growth and subsequent detectable protein expression.

                  </p>
                  <h3 className="step">Learn</h3>
                  <p className="para">
                    The inability to cultivate the host strain in Minimal Media suggests a limitation within the laboratory setup, most likely insufficient aeration or a nutritional deficiency in the media formulation specific to the lab's conditions. Minimal media requires meticulous control over oxygen transfer. Consequently, the laboratory is currently restricted to using LB media for bacterial cultivation, as this remains the only reliable method for obtaining sufficient biomass for protein expression.
                  </p>
                </div>
              </div>
            </section>

            {/* ITERATION 3 */}
            <section id="iteration-3" className="block">
              <h2 className="block-title">Third Iteration</h2>

              <div className="two-col">
                <div className="col">
                  <h3 className="step">Design</h3>
                  <p className="para">
                    To confirm the enzyme's function, an activity assay following the protocol by Liu et al. (2021) was planned. Their method involved incubating the purified enzyme (wt Bga1903) with Gliadins (the substrate) and then analyzing the degradation pattern using SDS-PAGE to visualize the breakdown products. This method requires obtaining the enzyme in its mature, purified form for the reaction.

                  </p>
                  <h3 className="step">Build</h3>
                  <p className="para">
                    The decision was made to follow the established protocol, which necessitated the purification of the target enzyme. The enzyme was designed to carry a His-tag, which permits purification via Immobilized Metal Affinity Chromatography (IMAC). A Cobalt Talon column and the manufacturer's protocol were selected for the purification of the His-tagged protein from the clarified bacterial lysate.

                  </p>
                </div>
                <div className="col">
                  <h3 className="step">Test</h3>
                  <p className="para">
                    The purification attempts were performed on the clarified lysate for the variants E380Q/S387L, E380R/S387L, and wt-Bga1903. SDS-PAGE gels were run to assess the fractions. The expected size for the mature, active enzyme was approximately 36 kDa. However, no protein band of the expected size was detectable in any of the purified fractions across all variants. This indicated a complete failure in the protein purification step.

                  </p>
                  <h3 className="step">Learn</h3>
                  <p className="para">
                    The inability to detect the His-tagged enzyme suggests a potential issue with the His-tag itself. Given that the enzyme is a serine protease, it is highly sensitive to degradation. A likely scenario is self-cleavage or degradation of the His-tag during expression or the critical, high-shear purification steps. Due to this major roadblock, the team pivoted the strategy for activity testing. The new approach avoids purification altogether: a fluorescent-based serine protease assay was implemented, using the whole cell extract (cleared lysate) of the bacteria. This change eliminates the risk associated with purification and allows for an immediate assessment of enzyme activity in situ.

                  </p>
                </div>
              </div>
            </section>

            {/* WHAT'S NEXT — only the (renamed) tip box kept */}
            <section id="whats-next" className="block">
              <aside className="callout tip">
                <div className="callout-head">What’s Next?</div>
                <p className="para">For our short-term goals, the team plans to conduct new experiments based on the recent strategic pivot in activity testing: Fluorescent-Based Serine Protease Assay. This approach will allow us to generate reliable data more efficiently and validate our system. Looking ahead, our long-term vision is to translate this proof of concept into a practical therapeutic format. We are aiming to finalise our supplements by covering them with enteric-coating. This method would ensure enzyme stability through gastric passage and enable targeted release in the intestine, allowing the real-world applications of our project.</p>
              </aside>
            </section>
          </div>
        </main>
      </div>

      {/* STYLES — master ile aynı + kutular */}
      <style jsx>{`
        :global(*), :global(*::before), :global(*::after) { box-sizing: border-box; }
        :global(html), :global(body), :global(#__next) { height: 100%; background: #ffffff !important; }
        :global(body) {
          margin: 0;
          font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
          color: #0b0f19; background: #ffffff !important;
        }

        /* Global yellow scrollbar */
        :global(html), :global(body) { scrollbar-width: thin; scrollbar-color: #dd671eff #fefce8; }
        :global(body::-webkit-scrollbar) { width: 10px; height: 10px; }
        :global(body::-webkit-scrollbar-track) { background: #fefce8; }
        :global(body::-webkit-scrollbar-thumb) { background: #dd671eff; border-radius: 8px; }
        :global(body::-webkit-scrollbar-thumb:hover) { background: #dd671eff; }

        .page { min-height: 100vh; position: relative; padding-bottom: 80px; background: #ffffff; }
        .bg-mist { display: none; }
        .layout { position: relative; z-index: 1; display: flex; }

        /* Sidebar (glassy + sticky) */
        .sidebar { width: 0; flex: 0 0 0; position: sticky; top: 0; height: 100vh; z-index: 10; }
        @media (min-width: 1024px) { .sidebar { width: 280px; flex: 0 0 280px; } }
        .sidebar-inner {
          position: sticky; top: 24px; margin: 16px;
          border: 1px solid rgba(221, 103, 30, 0.2); border-radius: 16px;
          background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
          max-height: calc(100vh - 120px); overflow: auto;
          scrollbar-width: thin; scrollbar-color: #dd671eff #fefce8;
        }
        .sidebar-inner::-webkit-scrollbar { width: 8px; }
        .sidebar-inner::-webkit-scrollbar-track { background: #fefce8; }
        .sidebar-inner::-webkit-scrollbar-thumb { background: #dd671eff; border-radius: 8px; }
        .sidebar-title {
          font-size: 16px; font-weight: 800; padding: 16px 18px;
          border-bottom: 1px solid rgba(221, 103, 30, 0.15);
          color: #dd671eff; text-align: center;
        }
        .toc { list-style: none; margin: 0; padding: 12px; }
        .toc li { margin: 0; }
        .toc-link {
          display: block; padding: 12px 14px; border-radius: 10px;
          color: #dd671eff; text-decoration: none; font-size: 14px; font-weight: 600;
          transition: all 0.2s ease; border-left: 3px solid transparent;
        }
        .toc-link:hover { background: rgba(221, 103, 30, 0.1); border-left-color: #dd671eff; transform: translateX(4px); }

        /* Main */
        .main { flex: 1 1 auto; padding-left: 0; }
        @media (min-width: 1024px) { .main { padding-left: 0; } }

        .hero { padding: 56px 16px 12px 16px; }
        @media (min-width: 1024px) { .hero { padding-left: 32px; padding-right: 32px; } }
        .hero-title { font-size: 36px; margin: 0 0 8px 0; font-weight: 800; color: #dd671eff; letter-spacing: -0.02em; }
        @media (min-width: 640px) { .hero-title { font-size: 48px; } }
        .accent { color: #082e74ff; }

        /* Hero GIF — aynı yer ve boyut */
        .hero-gif { margin-top: 12px; display: flex; align-items: center; justify-content: flex-start; }
        .hero-gif img {
          display: block; width: 50%; max-width: 920px; max-height: 360px; height: auto;
          border-radius: 14px; object-fit: cover; transform: translateX(3cm);
        }

        .hero-divider { height: 1px; background: #e5e7eb; width: 100%; margin: 0 16px 16px 16px; }
        @media (min-width: 1024px) { .hero-divider { margin-left: 32px; margin-right: 32px; } }

        .content { padding: 0 16px 48px 16px; max-width: 1140px; }
        @media (min-width: 1024px) { .content { padding-left: 32px; padding-right: 32px; } }

        /* Blocks */
        .block { margin-bottom: 24px; }
        .block-title { font-size: 24px; margin: 0 0 8px 0; font-weight: 800; color: #dd671eff; }
        .para { color: #4b5563; line-height: 1.75; margin: 0 0 12px 0; font-size: 16px; }

        /* Step heading */
        .step {
          margin: 12px 0 6px;
          font-size: 14px; font-weight: 800; color: #082e74ff;
          text-transform: uppercase; letter-spacing: 0.04em;
        }

        /* (KPI & other styles stay; kullanılmasa da zarar vermez) */
        .kpi-grid {
          display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px; margin: 8px 0 20px 0;
        }
        @media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        .kpi {
          border: 1px dashed rgba(221, 103, 30, 0.5);
          border-radius: 14px; padding: 14px; background: #fff7ed;
        }
        .kpi-top { font-weight: 900; font-size: 18px; color: #dd671e; line-height: 1.1; }
        .kpi-label { font-size: 12px; color: #475569; margin-top: 4px; }

        /* Callouts */
        .callout {
          border-radius: 14px; padding: 14px 16px; margin: 14px 0;
          border: 1px solid var(--callout-border); background: var(--callout-bg);
        }
        .callout-head { font-weight: 800; margin-bottom: 6px; color: var(--callout-head); }
        .callout.info  { --callout-bg:#eff6ff; --callout-border:#082e74; --callout-head:#082e74; }
        .callout.warn  { --callout-bg:#fff7ed; --callout-border:#dd671e; --callout-head:#dd671e; }
        .callout.success { --callout-bg:#ecfdf5; --callout-border:#10b981; --callout-head:#065f46; }
        .callout.tip   { --callout-bg:#f5f3ff; --callout-border:#7c3aed; --callout-head:#5b21b6; }

        /* Checklist */
        .checklist { border: 1px solid rgba(8,46,116,.35); border-radius: 14px; padding: 14px 16px; background: #eef2ff; margin-top: 12px; }
        .checklist-head { font-weight: 800; color: #082e74; margin-bottom: 8px; }
        .checklist ul { margin: 0; padding-left: 18px; color: #4b5563; }
        .checklist li { margin: 6px 0; }

        /* Two-column layout */
        .two-col { display: grid; grid-template-columns: 1fr; gap: 16px; }
        @media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
        .col { min-width: 0; }

        /* Compare block */
        .compare {
          margin-top: 10px; display: grid; gap: 12px;
          grid-template-columns: 1fr;
        }
        @media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
        .compare-col {
          border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 14px 16px; background: #fff;
        }
        .compare-head { font-weight: 800; color: #082e74; margin-bottom: 8px; }

        /* Milestones */
        .milestones { margin-top: 10px; display: grid; gap: 10px; }
        .ms { display: flex; gap: 10px; align-items: flex-start; }
        .ms-dot { width: 10px; height: 10px; border-radius: 999px; background: #dd671e; margin-top: 7px; }
        .ms-title { font-weight: 800; color: #0b0f19; }
        .ms-desc { font-size: 14px; color: #4b5563; }
      `}</style>
    </div>
  );
}