import Card from '@/components/base/Card'
import './HelpPage.css'

export default function HelpPage() {
  return (
    <div className="help-page">
      <h1 className="page-title">Help & Documentation</h1>

      <div className="help-content">
        <Card title="User Guide" className="help-section">
          <h3>Getting Started</h3>
          <ol>
            <li>Configure waste types in Configuration → Waste</li>
            <li>Configure natural regulators in Configuration → Regulators</li>
            <li>Configure services pricing in Configuration → Services</li>
            <li>Create treatment sites in Projects → Treatment Sites</li>
            <li>Create waste sites in Projects → Waste Sites</li>
            <li>Create a project in Projects → Projects</li>
            <li>View yields in Yields page</li>
            <li>Configure business plan in Business Plan page</li>
          </ol>
        </Card>

        <Card title="Formula Reference" className="help-section">
          <p>
            All calculation formulas are displayed on the Yields and Business Plan pages.
            Formulas use monospace font and show the complete calculation method.
          </p>
          <p>
            For detailed formula documentation, see <code>formulas_reference.md</code>
          </p>
        </Card>

        <Card title="Data Management" className="help-section">
          <h3>Export Data</h3>
          <p>Go to Settings → Export Data to download all your data as JSON.</p>

          <h3>Import Data</h3>
          <p>Go to Settings → Import Data to replace all data with imported JSON file.</p>
          <p className="warning">Warning: Importing will replace all existing data!</p>
        </Card>

        <Card title="FAQ" className="help-section">
          <h3>How do I calculate yields?</h3>
          <p>Yields are automatically calculated when you select a project. Make sure the project has a configured waste type and treatment site.</p>

          <h3>How do I configure service pricing?</h3>
          <p>Go to Configuration → Services and set pricing for each year (1-10). Pricing is per module per year.</p>

          <h3>Can I override waste characteristics per project?</h3>
          <p>Yes, in the Project Configuration page, you can override BMP and water percentage for that specific project.</p>
        </Card>
      </div>
    </div>
  )
}