src/pages/program.html

<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Program — GreenRoot</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='88'>%F0%9F%8C%B1</text></svg>">
<!--STYLE-->
</head>
<body data-page="program">

<header class="nav" id="nav">
  <div class="container nav-inner">
    <a class="brand" href="index.html">
      <svg class="logo" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="23" fill="#0B3B2A"/><path d="M24 38c0-9 2-14 9-19-1 8-3 13-9 19Z" fill="#A3E635"/><path d="M24 38c0-9-2-14-9-19 1 8 3 13 9 19Z" fill="#4ADE80"/><path d="M24 38V22" stroke="#D9F99D" stroke-width="2" stroke-linecap="round"/></svg>
      <span>GreenRoot</span>
    </a>
    <nav class="links" id="links">
      <a href="index.html" data-i18n="nav.home">Home</a>
      <a href="science.html" data-i18n="nav.science">Science</a>
      <a href="program.html" data-i18n="nav.program">Program</a>
      <a href="ai.html" data-i18n="nav.ai">AI companion</a>
      <a href="dashboard.html" data-i18n="nav.impact">Impact</a>
      <a href="cop31.html" data-i18n="nav.cop31">COP31</a>
      <a href="areas.html" data-i18n="nav.areas">Istanbul areas</a>
      <a href="join.html" data-i18n="nav.join">Join</a>
    </nav>
    <div class="nav-actions">
      <div class="lang-sw"><button class="lang on" data-lang="en" type="button">EN</button><button class="lang" data-lang="fa" type="button">فا</button><button class="lang" data-lang="tr" type="button">TR</button></div>
      <a class="btn small" href="join.html" data-i18n="nav.cta">Join the pilot</a>
      <button class="burger" id="burger" aria-label="Menu" type="button"><span></span><span></span><span></span></button>
    </div>
  </div>
</header>

<main>
<section class="hero">
  <div class="container">
    <span class="kicker light" data-i18n="prog.hero.kicker">Twelve months, four phases</span>
    <h1 data-i18n="prog.hero.h1">The GreenRoot program</h1>
    <p class="lead" data-i18n="prog.hero.p">A structured journey from stabilization to a paid green job to the career you had before — with therapy and medicine funded by the work itself.</p>
  </div>
</section>

<!-- Phases -->
<section>
  <div class="container">
    <div class="center rv">
      <span class="kicker" data-i18n="prog.ph.kicker">The four phases</span>
      <h2 class="title" data-i18n="prog.ph.h2">Your path through GreenRoot</h2>
    </div>
    <div class="steps mt">
      <div class="step rv"><div class="num"></div><div><span class="when" data-i18n="prog.ph1w">Weeks 0–4</span><h3 data-i18n="prog.ph1t">Stabilize</h3><p data-i18n="prog.ph1p">Medical check-up and psychiatric assessment; medication-assisted treatment where indicated; a personal safety and craving plan; first meeting with Raha, your AI companion. No shifts yet — health first.</p></div></div>
      <div class="step rv"><div class="num"></div><div><span class="when" data-i18n="prog.ph2w">Weeks 2–12</span><h3 data-i18n="prog.ph2t">Work &amp; heal</h3><p data-i18n="prog.ph2p">Three supported cleanup shifts a week in a small crew with a peer mentor. Group therapy twice a week. Tokens for every shift; weekly token review with your counselor.</p></div></div>
      <div class="step rv"><div class="num"></div><div><span class="when" data-i18n="prog.ph3w">Months 3–6</span><h3 data-i18n="prog.ph3t">Build</h3><p data-i18n="prog.ph3p">Move indoors or to the sorting line: materials handling, machine basics, upcycling workshop, quality control. Raha maps your skills and drafts your career-rewind plan toward your previous profession.</p></div></div>
      <div class="step rv"><div class="num"></div><div><span class="when" data-i18n="prog.ph4w">Months 6–12</span><h3 data-i18n="prog.ph4t">Return</h3><p data-i18n="prog.ph4p">CV rebuild with honest gap-framing, mock interviews, a supported internship or direct placement, and the alumni network. You leave with a job and a community — not just a certificate.</p></div></div>
    </div>
  </div>
</section>

<!-- A day -->
<section style="background:#EFF5EA">
  <div class="container">
    <div class="center rv">
      <span class="kicker" data-i18n="prog.day.kicker">A shift day</span>
      <h2 class="title" data-i18n="prog.day.h2">Structure is the therapy</h2>
      <p class="lead" data-i18n="prog.day.lead">Every hour has a purpose — that's the point.</p>
    </div>
    <div class="grid g4 mt">
      <div class="card rv"><div class="ic green">☕</div><h3>07:30</h3><p data-i18n="prog.day.c1">Crew meet-up &amp; check-in: mood, cravings, safety gear. Raha logs your check-in.</p></div>
      <div class="card rv"><div class="ic amber">🧤</div><h3>08:00</h3><p data-i18n="prog.day.c2">Cleanup shift in park / riverbank / street. Breaks built in; mentor nearby.</p></div>
      <div class="card rv"><div class="ic teal">⚖️</div><h3>11:30</h3><p data-i18n="prog.day.c3">Weigh &amp; sort: PET, metal, paper, glass. Tokens credited on the spot.</p></div>
      <div class="card rv"><div class="ic green">🧠</div><h3>13:30</h3><p data-i18n="prog.day.c4">Lunch, then group therapy, an AI session, or a skills class — your schedule.</p></div>
    </div>
  </div>
</section>

<!-- Economy -->
<section>
  <div class="container">
    <div class="center rv">
      <span class="kicker" data-i18n="prog.eco.kicker">The circular economy of recovery</span>
      <h2 class="title" data-i18n="prog.eco.h2">Where the money goes</h2>
    </div>
    <div class="grid g3 mt">
      <div class="card rv"><div class="ic green">♻️</div><h3 data-i18n="prog.eco.c1t">Recycling revenue</h3><p data-i18n="prog.eco.c1p">Sold materials (PET, metal, paper, glass) plus upcycled medical products generate income for the program.</p></div>
      <div class="card rv"><div class="ic amber">🪙</div><h3 data-i18n="prog.eco.c2t">Participant rewards</h3><p data-i18n="prog.eco.c2p">Fair wages plus tokens redeemable for essentials, transport, phone credit and skills courses.</p></div>
      <div class="card rv"><div class="ic teal">💊</div><h3 data-i18n="prog.eco.c3t">Treatment fund</h3><p data-i18n="prog.eco.c3p">A transparent share funds each crew's therapy, psychiatric care and essential medicines — published on the Impact page.</p></div>
    </div>
    <div class="mt rv" style="display:flex;gap:12px;flex-wrap:wrap;justify-content:center">
      <span class="badge" data-i18n="prog.b1">🧾 Open budget: crew revenue → 40% wages · 30% treatment · 30% operations</span>
      <span class="badge amber" data-i18n="prog.b2">No quotas used against participants — ever</span>
      <span class="badge teal" data-i18n="prog.b3">Wages at or above local minimum</span>
    </div>
  </div>
</section>

<!-- Waste to ward -->
<section style="background:#EFF5EA">
  <div class="container">
    <div class="center rv">
      <span class="kicker" data-i18n="prog.wtw.kicker">Waste → ward</span>
      <h2 class="title" data-i18n="prog.wtw.h2">The upcycling line: from litter to medical supplies</h2>
      <p class="lead" data-i18n="prog.wtw.lead">The most symbolic job in the program: making the material of the street useful to the hospital.</p>
    </div>
    <div class="grid g4 mt">
      <div class="card rv"><div class="ic green">🧴</div><h3 data-i18n="prog.wtw.c1t">1 · Collect &amp; sort</h3><p data-i18n="prog.wtw.c1p">PET and HDPE plastics separated on the sorting line, weighed and logged.</p></div>
      <div class="card rv"><div class="ic amber">🔪</div><h3 data-i18n="prog.wtw.c2t">2 · Clean &amp; shred</h3><p data-i18n="prog.wtw.c2p">Wash, sanitize and shred into certified flake at the micro-factory.</p></div>
      <div class="card rv"><div class="ic teal">🖨️</div><h3 data-i18n="prog.wtw.c3t">3 · Remanufacture</h3><p data-i18n="prog.wtw.c3p">With certified manufacturing partners: face shields, splint components, clinical packaging.</p></div>
      <div class="card rv"><div class="ic green">🏥</div><h3 data-i18n="prog.wtw.c4t">4 · Deliver</h3><p data-i18n="prog.wtw.c4p">Supplies donated or sold to clinics; proceeds feed the treatment fund.</p></div>
    </div>
    <p class="center small muted mt rv" data-i18n="prog.wtw.note">Safety note: medical-grade remanufacturing happens with certified partners under regulatory standards; GreenRoot crews handle collection, sorting and pre-processing only.</p>
  </div>
</section>

<!-- Raha in the program -->
<section>
  <div class="container">
    <div class="grid g2" style="align-items:center">
      <div class="rv">
        <span class="kicker" data-i18n="prog.ai.kicker">Raha, through every phase</span>
        <h2 class="title" data-i18n="prog.ai.h2">An AI companion in your pocket</h2>
        <p class="lead" data-i18n="prog.ai.p">Raha is with you from day one: craving SOS in the hard moments, daily mood check-ins, relapse-risk alerts shared (only with your consent) with your counselor, token wallet, and the career-rewind plan that maps your old job skills back into reach.</p>
        <a class="btn mt" href="ai.html" data-i18n="prog.ai.b">Try the Raha demo</a>
      </div>
      <div class="card rv"><div class="ic teal">🤖</div><ul style="margin-top:0">
        <li data-i18n="prog.ai.l1">Craving SOS: urge-surfing coach, 24/7</li>
        <li data-i18n="prog.ai.l2">Mood &amp; sleep check-ins with relapse-risk alerts</li>
        <li data-i18n="prog.ai.l3">Token wallet, goals and milestone celebrations</li>
        <li data-i18n="prog.ai.l4">Career rewind: résumé, skills map, interview practice</li>
        <li data-i18n="prog.ai.l5">Private by design: opt-in, encrypted, participant-owned</li>
      </ul></div>
    </div>
  </div>
</section>

<!-- CTA -->
<section style="padding-top:0">
  <div class="container">
    <div class="cta-band rv">
      <h2 data-i18n="prog.cta.h2">Ready for a structured year?</h2>
      <p data-i18n="prog.cta.p">Spots in the pilot cohort are limited. Talk to us — no commitment needed.</p>
      <a class="btn" href="join.html" data-i18n="nav.cta">Join the pilot</a>
    </div>
  </div>
</section>
</main>

<footer>
  <div class="container">
    <div class="grid g3">
      <div>
        <div class="fbrand"><svg class="logo" viewBox="0 0 48 48" fill="none" width="34" height="34"><circle cx="24" cy="24" r="23" fill="#0E4D36"/><path d="M24 38c0-9 2-14 9-19-1 8-3 13-9 19Z" fill="#A3E635"/><path d="M24 38c0-9-2-14-9-19 1 8 3 13 9 19Z" fill="#4ADE80"/><path d="M24 38V22" stroke="#D9F99D" stroke-width="2" stroke-linecap="round"/></svg>GreenRoot</div>
        <p data-i18n="footer.tag">Healing people, healing the planet — recovery through environmental work, funded by recycling, guided by AI.</p>
      </div>
      <div>
        <h4 data-i18n="footer.links">Explore</h4>
        <p><a href="science.html" data-i18n="nav.science">Science</a> · <a href="program.html" data-i18n="nav.program">Program</a> · <a href="ai.html" data-i18n="nav.ai">AI companion</a></p>
        <p class="mt-s"><a href="dashboard.html" data-i18n="nav.impact">Impact</a>
      <a href="cop31.html" data-i18n="nav.cop31">COP31</a> · <a href="areas.html" data-i18n="nav.areas">Areas</a> · <a href="join.html" data-i18n="nav.join">Join</a></p>
      </div>
      <div>
        <h4 data-i18n="footer.contact">Contact</h4>
        <p>hello@greenroot.example</p>
        <p data-i18n="footer.contact2">Frankfurt · Tehran (pilot cities)</p>
      </div>
    </div>
    <p class="disclaimer" data-i18n="footer.disclaimer">GreenRoot is a concept prototype. Nothing on this site is medical advice. Addiction is a medical condition — always work with qualified doctors and licensed treatment services. In an emergency, contact your local emergency number.</p>
    <p class="copy">© <span id="year">2026</span> GreenRoot.</p>
  </div>
</footer>

<!--APP-->
</body>
</html>