function SoftPage({ tweaks }) {
  return (
    <div className="page" data-screen-label="04 Soft Robotics">
      <section className="ihero blue">
        <div className="container">
          <div className="breadcrumb">
            <a href="#/"></a>
            <span className="sep"></span>
            <a href="#/">Platforms</a>
            <span className="sep">/</span>
            <span className="cur">Soft Robotics</span>
          </div>
          <div className="ihero-grid">
            <div className="meta">
              <div><b></b></div>
              <div>Domain<b>Ground · Subsurface</b></div>
              <div>Origin<b>NC State University</b></div>
            </div>
            <div>
              <Reveal>
                <h1>
                  Thermally Actuated<br />
                  Soft Robotics.
                </h1>
              </Reveal>
              <Reveal delay={100}>
                <p className="ihero-sub">
                  Biomimetic robots that move like organisms, not machines.
                  Developed at NC State University.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section className={window.sClass("soft-overview", tweaks)} data-section-id="soft-overview">
        <div className="container">
          <div className="two-col" style={{ marginTop: 32 }}>
            <Reveal>
              <div className="label">What It Does</div>
            </Reveal>
            <Reveal delay={80} className="body-text">
              <p className="lead">
                Thermal actuation instead of motors or traditional mechanical systems.
              </p>
              <p>
                The robots move like caterpillars on land and like fish underwater.
                Soft materials produce different acoustic and visual signatures than
                rigid robots, making them harder to detect with sonar and conventional
                surveillance.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className={window.sClass("soft-specs", tweaks)} data-section-id="soft-specs">
        <div className="container">
          <SHead id="" eyebrow={<>Specifications &amp; Technical Profile</>}>
            Platform profile.
          </SHead>
        </div>
        <div className="container">
          <Reveal>
            <div className="spec-table">
              {[
              ["Actuation", "Thermal", "Liquid crystal elastomer-based response, no motors."],
              ["Movement", "Biomimetic", "Caterpillar locomotion on land, fish locomotion in water."],
              ["Domain", "Ground · Subsurface", "Crawling and swimming variants."],
              ["Sonar Profile", "Low Cross-Section", "Soft materials reduce acoustic and visual signature."],
              ["Power", "Low Voltage", "Operates at low power, enabling smaller form factors."],
              ["Materials", "Soft Composite", "Conformable to confined and unstructured environments."]].
              map(([k, v, d]) =>
              <div key={k} className="spec-row">
                  <div className="k">{k}</div>
                  <div className="v">{v}</div>
                  <div className="d">{d}</div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

      <section className={window.sClass("soft-advantages", tweaks)} data-section-id="soft-advantages">
        <div className="container">
          <SHead id="" eyebrow={<>Doctrine &amp;<br />Key Advantages</>}>
            Key advantages.
          </SHead>
        </div>
        <div className="principles" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
          {[
          ["", "Low Detection Signature", "Soft materials are less visible to sonar and visual sensors than rigid robots."],
          ["", "Superior Maneuverability", "Navigate tight spaces and unstructured terrain where rigid systems fail."],
          ["", "Biomimetic Design", "Movement patterns that blend into natural environments."],
          ["", "Low Power Requirements", "Operates at low voltages, enabling smaller form factors and longer missions."]].
          map(([ix, h, p]) =>
          <Reveal key={ix} className="principle">
              <div className="ix">{ix}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </Reveal>
          )}
        </div>
      </section>

      <section className={window.sClass("soft-variants", tweaks)} data-section-id="soft-variants">
        <div className="container">
          <SHead id="" eyebrow={<>Variants &amp;<br />Platform Configurations</>}>
            Platform variants.
          </SHead>
        </div>
        <div className="origin-block">
          <Reveal className="origin-cell">
            <div className="seal">01</div>
            <h3>Crawling Robot</h3>
            <div className="loc">Ground Operations</div>
            <p>
              Caterpillar-inspired design for ground-based reconnaissance and
              confined space operations.
            </p>
          </Reveal>
          <Reveal delay={120} className="origin-cell">
            <div className="seal">02</div>
            <h3>Swimming Robot</h3>
            <div className="loc">Subsurface Operations</div>
            <p>
              Fish-inspired design for underwater surveillance and environmental
              monitoring.
            </p>
          </Reveal>
        </div>
      </section>

      <section className={window.sClass("soft-applications", tweaks)} data-section-id="soft-applications">
        <div className="container">
          <SHead id="" eyebrow={<>Theatre &amp;<br />Applications</>}>
            Applications.
          </SHead>
        </div>
        <div className="apps">
          {[
          ["", "Reconnaissance", "Stealthy observation where traditional robots would be detected."],
          ["", "Harbor Security", "Underwater surveillance of port facilities and coastal infrastructure."],
          ["", "Confined Spaces", "Inspection of pipes, rubble, and collapsed structures."],
          ["", "Environmental Monitoring", "Delicate sampling tasks with minimal environmental impact."]].
          map(([ix, h, p]) =>
          <Reveal key={ix} className="app-cell">
              <div className="ix">{ix}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </Reveal>
          )}
        </div>
      </section>

      <section className={window.sClass("soft-origin", tweaks)} data-section-id="soft-origin">
        <div className="origin-block" style={{ gridTemplateColumns: "1fr" }}>
          <Reveal className="origin-cell">
            <h3>Developed at NC State University</h3>
            <div className="loc"></div>
            <p style={{ maxWidth: 720 }}>
              Developed at NC State — a leader in advanced materials and biomimetic
              systems research. Foundational work published in Science Advances.
            </p>
          </Reveal>
        </div>
      </section>

            <section className={window.ctaClass("soft-cta", tweaks)} data-section-id="soft-cta">
        <div className="topo-bg" />
        <div className="container" style={{ textAlign: "center" }}>
          <div className="cta-inner" style={{ marginTop: 40, display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Reveal>
              <h2 style={{ color: "rgb(255, 255, 255)" }}>
                Ready to defend America <span className="em" style={{ color: "rgb(241, 241, 241)" }}>together</span>.
              </h2>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: 18, lineHeight: 1.5,
                maxWidth: 540, marginTop: 20, marginLeft: "auto", marginRight: "auto", textAlign: "center", color: "rgb(255, 255, 255)"
              }}>
                Partner with America First Defense.AI. Contact us to learn more.
              </p>
            </Reveal>
            <Reveal delay={120}>
              <div className="cta-actions" style={{ marginTop: 12, justifyContent: "center" }}>
                <a href="#/contact" className={tweaks?.accent === "crimson" ? "btn btn-crimson" : "btn"}>
                  Contact <Arr />
                </a>
                <a href="#/mission" className="btn btn-ghost">
                  Read Mission <Arr />
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>);

}

Object.assign(window, { SoftPage });