frontend/src/components/HelpGuide.jsx

import { useEffect, useState } from "react"
import { X } from "lucide-react"
import { getCatalog } from "../api"
import { useI18n } from "../i18n/I18nContext"
import { T } from "../theme"

const EXAMPLES = [
  "What is aspirin?",
  "Side effects of metformin?",
  "Can I take ibuprofen with warfarin?",
  "How do I take atorvastatin?",
  "I forgot my metformin dose, what do I do?",
]

export default function HelpGuide({ onClose }) {
  const { t } = useI18n()
  const [drugs, setDrugs] = useState([])

  useEffect(() => { getCatalog().then(setDrugs).catch(() => {}) }, [])

  const sections = [
    ["help_chat_title", "help_chat_body"],
    ["help_schedule_title", "help_schedule_body"],
    ["help_today_title", "help_today_body"],
    ["help_points_title", "help_points_body"],
    ["help_badges_title", "help_badges_body"],
    ["help_meds_lib_title", "help_meds_lib_body"],
  ]

  return (
    <div style={overlay} onClick={onClose}>
      <div style={panel} className="dm-slide-up" onClick={(e) => e.stopPropagation()}>
        {/* header */}
        <div style={header}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 800 }}>💊 {t("help_title")}</div>
            <div style={{ fontSize: 12.5, color: "rgba(255,255,255,.85)", marginTop: 3 }}>{t("help_intro")}</div>
          </div>
          <button onClick={onClose} style={closeBtn}><X size={18} /></button>
        </div>

        <div style={body}>
          {/* capability cards */}
          <div style={grid}>
            {sections.map(([title, desc]) => (
              <div key={title} style={featCard}>
                <div style={{ fontSize: 14, fontWeight: 700, color: T.text }}>{t(title)}</div>
                <div style={{ fontSize: 12.5, color: T.muted, marginTop: 5, lineHeight: 1.55 }}>{t(desc)}</div>
              </div>
            ))}
          </div>

          {/* examples */}
          <div style={{ marginTop: 22 }}>
            <div style={blockTitle}>{t("help_examples_title")}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
              {EXAMPLES.map((ex) => (
                <span key={ex} style={exampleChip}>{ex}</span>
              ))}
            </div>
          </div>

          {/* medicines in DB */}
          <div style={{ marginTop: 22 }}>
            <div style={blockTitle}>{t("help_meds_title")}</div>
            <div style={{ fontSize: 12.5, color: T.muted, marginTop: 4 }}>{t("help_meds_body")}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 10 }}>
              {drugs.map((d) => (
                <span key={d.drug_name} style={medChip} title={d.drug_class}>💊 {d.drug_name}</span>
              ))}
            </div>
          </div>

          <button onClick={onClose} style={gotItBtn}>{t("got_it")}</button>
        </div>
      </div>
    </div>
  )
}

const overlay = { position: "fixed", inset: 0, background: "rgba(15,23,42,.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2500, backdropFilter: "blur(3px)", padding: 16 }
const panel = { width: "100%", maxWidth: 620, maxHeight: "88vh", background: "#fff", borderRadius: 22, overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: T.shadowLg }
const header = { background: T.gradient, color: "#fff", padding: "22px 24px", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }
const closeBtn = { background: "rgba(255,255,255,.2)", border: "none", color: "#fff", width: 32, height: 32, borderRadius: 10, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }
const body = { padding: 24, overflowY: "auto" }
const grid = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12 }
const featCard = { background: T.surfaceAlt, border: `1px solid ${T.border}`, borderRadius: 14, padding: 14 }
const blockTitle = { fontSize: 14, fontWeight: 700, color: T.text }
const exampleChip = { fontSize: 12.5, color: T.green, background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 999, padding: "7px 13px", fontWeight: 500 }
const medChip = { fontSize: 12, color: T.text, background: "#fff", border: `1px solid ${T.border}`, borderRadius: 999, padding: "6px 11px", fontWeight: 500 }
const gotItBtn = { marginTop: 24, width: "100%", padding: "13px", borderRadius: 12, border: "none", background: T.gradient, color: "#fff", fontSize: 15, fontWeight: 700, cursor: "pointer", boxShadow: T.shadowGreen }