JobsDone

import { o } from '../jsx/jsx.js'
import { nodeToHTML, prerender } from '../jsx/html.js'
import SourceCode from '../components/source-code.js'
import { ResolvedPageRoute, Routes } from '../routes.js'
import { config, title } from '../../config.js'
import Style from '../components/style.js'
import { Link } from '../components/router.js'
import { Fragment, fragmentToText } from '../components/fragment.js'
import Comment from '../components/comment.js'
import { Locale, LocaleVariants, isPreferZh } from '../components/locale.js'
import { toRouteUrl } from '../../url.js'
import tasks from './task-list.js'
import projects from './project-list.js'

// Calling <Component/> will transform the JSX into AST for each rendering.
// You can reuse a pre-compute AST like `let component = <Component/>`.

// If the expression is static (not depending on the render Context),
// you don't have to wrap it by a function at all.

let style = Style(/* css */ `
body {
  /*
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  */
}
header {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  text-align: center;
}
header h1 {
  margin: 0;
}
.cta {
  margin: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.cta a {
  text-decoration: none;
  background-color: #fff;
  color: #4caf50;
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid #fff;
  font-size: 18px;
  transition: all 0.3s ease;
}
.cta a:hover {
  background-color: #4caf50;
  color: white;
  border: 2px solid white;
}
.hero {
  text-align: center;
  padding: 50px 20px;
}
.intro {
  background-color: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
}
.intro h2 {
  margin: 0 0 20px 0;
}
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 40px 20px;
}
.feature-box {
  flex: 1;
  min-width: 280px;
  max-width: 300px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: auto;
}
.feature-box h3 {
  margin-bottom: 10px;
}
.how-it-works {
  padding: 40px 20px;
}
.how-it-works h2 {
  text-align: center;
}
.how-it-works .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 30px 0;
}
.column {
  flex: 1;
  min-width: 280px;
  max-width: 300px;
  text-align: center;
  padding: 10px;
  margin: auto;
}
.testimonials {
  background-color: #f1f1f1;
  padding: 40px 20px;
}
.testimonials h2 {
  text-align: center;
  margin-bottom: 30px;
}
.testimonials .testimonial {
  margin: 10px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.call-to-action {
  padding: 40px 20px;
  text-align: center;
}
.call-to-action h2 {
  margin-bottom: 20px;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.cta-buttons a {
  text-decoration: none;
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  transition: all 0.3s ease;
}
.cta-buttons a:hover {
  background-color: #45a049;
}
footer {
  background-color: #333;
  color: white;
  padding: 20px;
  /*
  text-align: center;
  */
}
footer nav {
  margin: 1rem 0;
}
footer nav a {
  margin: 0 10px;
}
footer a {
  color: #4caf50;
  text-decoration: none;
}
footer a:hover {
  color: white;
}
@media (max-width: 768px) {
  .cta {
    flex-direction: column;
  }
  .features {
    flex-direction: column;
  }
  .how-it-works .row {
    flex-direction: column;
  }
  .cta-buttons {
    flex-direction: column;
    gap: 10px;
  }
}
`)

let content = (
  <div id="home">
    {Comment('Header Section')}
    <header>
      <h1>JobsDone</h1>
      <p>
        <Locale
          en="Low-Risk Task-Based Crowd-sourcing Platform"
          zh_hk="低風險的 Task-based Crowd-Sourcing 平台"
          zh_cn="低风险的任务型众包平台"
        />
      </p>
      <div class="cta">
        <Link href={toRouteUrl(tasks.routes, '/tasks')}>
          <Locale
            en="Find Your Next Task"
            zh_hk="尋找你的下一個任務"
            zh_cn="寻找你的下一个任务"
          />
        </Link>{' '}
        <Link href={toRouteUrl(projects.routes, '/projects')}>
          <Locale
            en="Start Your Project"
            zh_hk="開始你的項目"
            zh_cn="开始你的项目"
          />
        </Link>
      </div>
    </header>

    {Comment('Hero Section ')}
    <section class="hero">
      <h2>
        <Locale
          en="Empowering Freelancers and Project Owners with Low-Risk, Task-Based Crowd-Sourcing, Real-World Learning, and Seamless Project Management."
          zh_hk="為自由職業者和項目負責人提供低風險的 Task-Based Crowd-Sourcing、無縫的項目管理、及實戰學習。"
          zh_cn="为自由职业者和项目负责人提供低风险的 Task-Based Crowd-Sourcing、无缝的项目管理、及实战学习。"
        />
      </h2>
      <p>
        <Locale
          en="With small tasks that take less than half a day, work gets done faster, with minimal risk for both freelancers and project owners."
          zh_hk="通過少於半天的小型任務，工作完成得更快，並且為自由職業者和項目負責人降低風險。"
          zh_cn="通过少于半天的小型任务，工作完成得更快，并且为自由职业者和项目负责人降低风险。"
        />
      </p>
    </section>

    {Comment('Introduction Section ')}
    <section class="intro">
      <h2>
        <Locale
          en="What is JobsDone?"
          zh_hk="JobsDone 是什麼？"
          zh_cn="JobsDone 是什么？"
        />
      </h2>
      <p>
        <Locale
          en="JobsDone is a platform designed for freelancers, learners, and project owners to collaborate on low-risk, task-based projects. Whether you're an experienced freelancer, a learner seeking real-world experience, or a project owner in need of efficient task management, JobsDone connects you with opportunities and tools to succeed."
          zh_hk="JobsDone 是一個為自由職業者、學習人士和項目負責人設計的平台，用於協作低風險的 Task-Based 項目。無論你是有經驗的自由職業者、尋求實戰經驗的學習者，還是需要高效任務管理的項目負責人，JobsDone 都能為你提供成功所需的機會和工具。"
          zh_cn="JobsDone 是一个为自由职业者、学习人士和项目负责人设计平台，用于协作低风险的 Task-Based 项目。无论你是有经验的自由职业者、寻求实战经验的学学习者，还是需要高效任务管理的项目负责人，JobsDone 都能为你提供成功所需的机遇和工具。"
        />
      </p>
    </section>

    {Comment('Features Section ')}
    <section class="features">
      <div className="feature-box">
        <h3>
          <Locale
            en="Task-Based Job Crowd-Sourcing for Digital Nomads"
            zh_hk="為數碼遊牧族提供 Task-Based 任務外包"
            zh_cn="为数字游牧族提供任务型外包"
          />
        </h3>
        <p>
          <Locale
            en="Freelancers / slashers can pick up small tasks, from 5 minutes to half a day, offering flexibility and remote work freedom. Simple payment terms ensure minimal risk and quick payouts."
            zh_hk="自由職業者 / 斜槓族可以接取小型任務，只需 5 分鐘到半天，提供靈活性和遠程工作的自由。簡單的付款條款確保低風險和快速支付。"
            zh_cn="自由职业者 / 斜杠族可以接取小型任务，只需 5 分钟到半天，提供灵活性和远程工作的自由。简单的付款条款确保低风险和快速支付。"
          />
        </p>
      </div>

      <div className="feature-box">
        <h3>
          <Locale
            en="Learn Through Real-Project Experience"
            zh_hk="從實際項目經驗中學習"
            zh_cn="从实际项目经验中学习"
          />
        </h3>
        <p>
          <Locale
            en="Gain hands-on experience with live projects. Beginner-friendly tasks offer mentorship, guidance, and code reviews, perfect for building skills."
            zh_hk="通過真實項目獲取實戰經驗。對初學者友好的任務提供技術指導和代碼審查，有助提升技能。"
            zh_cn="通过真实项目获取实战经验。对初学者友好的任务提供技术指导和代码审查，有助于提升技能。"
          />
        </p>
      </div>

      <div className="feature-box">
        <h3>
          <Locale
            en="Low-Risk Project Management for Owners"
            zh_hk="為項目負責人降低項目管理的風險"
            zh_cn="为项目负责人降低项目管理的风险"
          />
        </h3>
        <p>
          <Locale
            en="Break projects into small, manageable tasks, reducing the risk of delays and scams. Track progress and review work to stay on schedule."
            zh_hk="將項目拆分為小型、易於管理的任務，減少延誤和被欺詐的風險。通過跟蹤進度和審查工作來確保項目按時完成。"
            zh_cn="将项目拆分为小型、易于管理的任务，减少延误和被欺诈的风险。通过跟踪进度和审查工作来确保项目按时完成。"
          />
        </p>
      </div>
    </section>

    {Comment('How it Works Section ')}
    <section class="how-it-works">
      <h2>
        <Locale en="How It Works" zh_hk="運作流程" zh_cn="运作流程" />
      </h2>
      <div class="row">
        <div class="column">
          <h3>
            <Locale
              en="For Freelancers"
              zh_hk="對於自由工作者"
              zh_cn="对於自由工作者"
            />
          </h3>
          <p>
            <Locale
              en="Browse small, short tasks that fit your expertise—most take less
                than half a day to complete."
              zh_hk="瀏覽符合您專業的小型/短期任務 — 大多數任務只需半天內即可完成。"
              zh_cn="浏览符合您专业的小型/短期任务 — 大多数任务只需半天内即可完成。"
            />
          </p>
          <p>
            <Locale
              en="Pick a task, complete it, and get paid quickly."
              zh_hk="選擇一項任務，完成後快速獲得報酬。"
              zh_cn="选择一项任务，完成後快速獲得報酬。"
            />
          </p>
        </div>
        <div class="column">
          <h3>
            <Locale en="For Learners." zh_hk="對於學習者" zh_cn="对於學習者" />
          </h3>
          <p>
            <Locale
              en="Look for small, manageable tasks in areas you want to learn about."
              zh_hk="尋找小型、可管理的任務，探索你想學習的領域。"
              zh_cn="寻找小型、可管理的任务，探索你想学习的领域。"
            />
          </p>
          <p>
            <Locale
              en="Work on real projects with minimal risk and build your portfolio."
              zh_hk="在真實項目上工作，風險最小，並可以建立你的作品集。"
              zh_cn="在真实项目上工作，风险最小，并可以建立你的作品集。"
            />
          </p>
        </div>
        <div class="column">
          <h3>
            <Locale
              en="For Project Owners"
              zh_hk="對於項目擁有者"
              zh_cn="对于项目拥有者"
            />
          </h3>
          <p>
            <Locale
              en="Create small, low-risk tasks that are easy to manage."
              zh_hk="創建小型、低風險、便於管理的任務。"
              zh_cn="创建小型、低风险、便于管理的任务。"
            />
          </p>
          <p>
            <Locale
              en="Assign tasks to freelancers, track progress, and review work
            quickly."
              zh_hk="將任務分配給自由職業者，利於跟踪進度，並快速審查工作。"
              zh_cn="将任务分配给自由职业者，利于跟踪进度，并快速审查工作。"
            />
          </p>
        </div>
      </div>
    </section>

    {Comment('Testimonials Section ')}
    <section class="testimonials">
      <h2>
        <Locale
          en="What Our Users Are Saying"
          zh_hk="我們的用戶怎麼說"
          zh_cn="我们的用户怎么说"
        />
      </h2>
      <div class="testimonial">
        <p>
          <Locale
            en={`"I love how JobsDone focuses on small tasks. I can complete multiple
          jobs in a day, and I get paid quickly, without worrying about long
          projects or endless change requirements." - Freelancer`}
            zh_hk="「我喜歡 JobsDone 專注於小任務。我可以在一天內完成多個工作，並且迅速獲得報酬，
                無需擔心遇到長期項目或無止境的變更要求。」- 自由工作者"
            zh_cn="「我喜欢 JobsDone 专注于小任务。我可以在一天内完成多个工作，并且迅速获得报酬，
                无需担心遇到长期项目或无止境的变更要求。」- 自由工作者"
          />
        </p>
      </div>
      <div class="testimonial">
        <p>
          <Locale
            en={`"Working on real projects with short tasks has given me solid
          experience in my field. The small-task nature made it easy to get
          started and learn without feeling overwhelmed." - Learner`}
            zh_hk="「參與短期而真實的項目讓我在自己的領域獲得了實際經驗。
                小任務的性質使我能輕鬆入門並學習，而不會感到不堪重負。」- 學習者"
            zh_cn="「参与短期而真实的项目让我在自己的领域获得了实际经验。
                小任务的性质使我能够轻松入门并学习，而不会感到不堪重负。」- 学习者"
          />
        </p>
      </div>
      <div class="testimonial">
        <p>
          <Locale
            en={`"Breaking down my projects into small tasks has been a game-changer. I
          can track progress easily and avoid scams, ensuring the work gets done
          without worrying about unreliable freelancers." - Project Owner`}
            zh_hk="「將我的項目分拆為小任務真是遊戲規則的變革者。我可以輕鬆跟踪進度、避免詐騙、
                確保工作完成而不必擔心遇到不可靠的自由工作者。」- 項目擁有者"
            zh_cn="「将我的项目分拆为小任务真是游戏规则的变革者。我可以轻松跟踪进度、避免诈骗、
                确保工作完成而不必担心遇到不可靠的自由工作者。」- 项目拥有者"
          />
        </p>
      </div>
    </section>

    {Comment('Call to Action Section ')}
    <section class="call-to-action">
      <h2>
        <Locale
          en="Ready to Get Started?"
          zh_hk="準備好開始了嗎？"
          zh_cn="准备好了吗？"
        />
      </h2>
      <div class="cta-buttons">
        <Link href={toRouteUrl(tasks.routes, '/tasks')}>
          <Locale en="Browse Tasks" zh_hk="瀏覽任務" zh_cn="浏览任务" />
        </Link>{' '}
        <Link href={toRouteUrl(projects.routes, '/projects')}>
          <Locale
            en="Start a Project"
            zh_hk="開始一個項目"
            zh_cn="开始一个项目"
          />
        </Link>
      </div>
    </section>

    <SourceCode page="home.tsx" />
  </div>
)

let home = (
  <>
    {style}
    {content}
  </>
)

// And it can be pre-rendered into html as well
let content_en = prerender(home, { language: 'en' })
let content_zh = prerender(home, { language: 'zh' })
let route: LocaleVariants<ResolvedPageRoute> = {
  en: {
    title: title(
      `${config.site_name} - Low-Risk Task-Based Crowd-Sourcing Platform`,
    ),
    description: fragmentToText(
      <>
        JobsDone connects freelancers, learners, and project owners with small,
        manageable tasks that offer quick payouts, real-world experience, and
        low-risk project management. Whether you're looking to grow your skills
        or simplify your project process, JobsDone makes work easy and
        efficient.
      </>,
    ),
    node: prerender(home, { language: 'en' }),
  },
  zh_hk: {
    title: title(
      `${config.site_name} - 低風險的 Task-Based Crowd-Sourcing 平台`,
    ),
    description: fragmentToText(
      <>
        JobsDone
        連結自由職業者、學習者和項目擁有者，通過小型且易於管理的任務，提供快速支付、實戰經驗和低風險的項目管理。無論你是希望提升技能，還是簡化項目流程，JobsDone
        讓工作變得簡單且高效。
      </>,
    ),
    node: prerender(home, { language: 'zh_hk' }),
  },
  zh_cn: {
    title: title(`${config.site_name} - 低风险的任务型众包平台`),
    description: fragmentToText(
      <>
        JobsDone
        连接自由职业者、学习者和项目拥有者，通过小型且易于管理的任务，提供快速支付、实战经验和低风险的
        项目管理。无论你是希望提升技能，还是简化项目流程，JobsDone
        让工作变得简单且高效。
      </>,
    ),
    node: prerender(home, { language: 'zh_cn' }),
  },
}

let routes = {
  '/': {
    menuText: <Locale en="Home" zh_hk="主頁" zh_cn="主页" />,
    resolve(context) {
      return Locale(route, context)
    },
  },
} satisfies Routes

export default { routes }