// React and useState are available globally from the CDN
const { useState } = React;

// Google Analytics 4
(function() {
  const script = document.createElement('script');
  script.async = true;
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0W8M6D9KSN';
  document.head.appendChild(script);
  window.dataLayer = window.dataLayer || [];
  function gtag(){window.dataLayer.push(arguments);}
  window.gtag = gtag;
  gtag('js', new Date());
  gtag('config', 'G-0W8M6D9KSN');
})();

const trackEvent = (eventName, params = {}) => {
  if (window.gtag) window.gtag('event', eventName, params);
};

const EmergencyApp = () => {
  const [currentView, setCurrentView] = useState('home');
  const [selectedCondition, setSelectedCondition] = useState(null);
  const [activeTab, setActiveTab] = useState('quickView');
  const [searchTerm, setSearchTerm] = useState('');
  const [flowchartPath, setFlowchartPath] = useState([]);
  const [menuOpen, setMenuOpen] = useState(false);
  const btnStyle = (selected, available) => ({
    backgroundColor: selected ? '#42c3f7' : available ? '#182b3c' : '#e5e7eb',
    color: selected ? '#182b3c' : available ? 'white' : '#9ca3af',
    fontWeight: 'bold',
    cursor: available || selected ? 'pointer' : 'default'
  });


  const conditions = [
    {
      id: 1,
      name: 'Abdominal Pain',
      overview: `Abdominal pain is discomfort felt between the bottom of the rib cage and the groin creases. The causes vary and range from mild to life-threatening.

FIRST AID:
• Offer access to the restroom.
• Have the student lie down and rest in a comfortable position.
• Note the quality, duration, location, and severity of pain.
• Check their temperature.

CALL 911 IF:
• The student is unable to stand or move.
• Severe pain is present, with or without fever.
• Pain is due to a traumatic injury/fall.
• There is blood in the stool or vomit.
• Be prepared to perform CPR.

CONSULT HEALTHCARE PROVIDER IF:
• Persistent pain on one side, particularly the right side.
• Pain with urination.
• Shortness of breath`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 2,
      name: 'Allergic Reactions',
      overview: `An allergy is a chronic condition where the immune system overreacts to a harmless substance, known as an allergen, triggering the release of histamines. Histamines can cause bothersome and sometimes life-threatening symptoms, including anaphylaxis. 

Anaphylaxis is a systemic, serious, and life-threatening allergic reaction. Allergic reactions may be delayed by up to two hours following exposure to an allergen.

COMMON TRIGGERS:
• Food.
• Insect stings.
• Medications.
• Latex.

NOTE: Students with a known allergy should have an Emergency Action/Care Plan.

ALLERGIC REACTION (SEVERE - ANAPHYLAXIS)

If a student with a known history of anaphylaxis has a known or suspected exposure to an allergen, follow the Emergency Action/Care Plan and administer epinephrine as ordered. GET HELP AND AED. CALL 911. 

Epinephrine is the single evidence-based treatment for anaphylaxis. Epinephrine is commonly prescribed as an autoinjector that delivers a single dose of medication via a preloaded needle injected into the muscle. Epinephrine autoinjectors may also be prescribed in the form of a nasal spray for students at least 4 years of age weighing a minimum of 33 pounds.

SIGNS/SYMPTOMS:
• Wheezing or coughing, shortness of breath or difficulty breathing.
• Pale, ashen, or bluish color skin.
• Fainting or dizziness.
• Tight, itchy, or hoarse throat; difficulty swallowing; swelling of lips or tongue, mouth, or airway.
• Vomiting or diarrhea (if repetitive, severe, or combined with other symptoms)
• Rashes or hives in one area or widespread redness over the body.
• Feeling of "doom," confusion, altered consciousness, or agitation.

FIRST AID:
• GET HELP AND AED. CALL 911.
• Follow the Emergency Action/Care Plan.
• Remove allergens if possible. If the student has been stung, see [[Bites and Stings|6]]
• Administer single-dose epinephrine if prescribed*.
• Seat the individual comfortably and provide calm reassurance.
• Monitor breathing.
• If the student is, or becomes unresponsive, begin CPR.
• If symptoms do not improve, repeat with a second single-dose epinephrine as ordered*.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided.

*The SAU may have a policy permitting stock epinephrine to be administered by a trained, unlicensed assistive personnel (UAP) with a standing order and Collaborative Practice Agreement. Maine Revised Statutes, Title 20-A, section 6305, subsection 3`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 3,
      name: 'Amputation',
      overview: `An amputation is the loss of a body part. Students with bleeding disorders may not respond to basic first aid and should have an Emergency Action/Care Plan.

FIRST AID:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• Have the student lie down.
• To control bleeding, apply direct pressure to the open wound with a bandage or cloth until the emergency medical team arrives.
• Do not remove the bandage or cloth. Add more if needed.
• If possible, elevate the injury above the heart.
• If the above measures do not stop bleeding, apply a tourniquet if one is available and you have been trained to do so.

IF THE AMPUTATED BODY PART IS AVAILABLE:
• Wrap it in clean gauze.
• Put it in a plastic container or bag.
• Place it on ice.
• The part should not be frozen or submerged in ice or water.
• Give it to the emergency medical team when they arrive.
• Inform the student's parent or legal guardian.
• Document care provided.
• Clean and disinfect any contaminated surfaces`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 4,
      name: 'Asthma or Breathing Difficulties',
      overview: `Students diagnosed with asthma should have an Emergency Action/Care Plan for managing symptoms, asthma medication, and emergencies. Follow the plan. Prompt rescue medication administration is the priority.

EARLY SIGNS/SYMPTOMS:
• Coughing.
• Shortness of breath when walking.
• A tickle in the throat.

SEVERE SIGNS/SYMPTOMS:
• Chest tightness.
• Wheezing or grunting.
• Inability to talk without stopping to breathe.
• Gasping or rapid breathing.
• Flaring nostrils.
• Feelings of fear or confusion.
• Bluish or ashen color of lips, skin, or nail beds.
• Changes in alertness.

FIRST AID:
• If the student has symptoms of severe work of breathing, or a rapid onset of breathing difficulty: GET HELP AND AED. CALL 911.
• Have the student sit comfortably and have them breathe slowly and fully..
• If the student has medication, assist in inhaling the medication over 5 seconds. Use a spacer, if available.
• Calm and reassure the student. DO NOT LEAVE THE STUDENT ALONE.
• For ongoing symptoms, repeat the medication as ordered.
• Be prepared to perform CPR.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided.

IMPORTANT: Quick-relief inhalers are prescribed medication, should not be shared, and should only be used in accordance with Rule for Medication Administration in Maine Schools`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 5,
      name: 'Back and Neck Injuries',
      overview: `When a traumatic event occurs (fall, motor vehicle accident, sports injury), assume potential spinal injury. Restrict spinal movement to prevent further injury. Do not move the student unless there is an immediate threat of danger.

SIGNS/SYMPTOMS:
• Pain in the back or neck.
• Tenderness, swelling, or bruising to the back or neck.
• Headache or pain radiating through the shoulders.

SEVERE SIGNS/SYMPTOMS:
• Inability to move arms or legs.
• Neck pain after trauma.
• Loss of sensation or weakness in extremities.
• Numbness or tingling.
• Loss of bladder or bowel control.
• Severe headache or dizziness.
• Difficulty walking or maintaining balance.
• Visible deformity or misalignment in the neck.
• Unconsciousness or altered mental state.

FIRST AID:
• Secure the scene for safety.
• If severe symptoms are present, GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Keep the student warm, still, and safe from further injury until the emergency medical team arrives.
• If the student is wearing a helmet, do not try to remove it unless it is needed for airway management, bleeding control, etc.
• Inform the student's parent or legal guardian. Advise them to have the student seen by their healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 6,
      name: 'Bites and Stings',
      overview: `Any bite or scratch resulting in an open wound or broken skin is at high risk of infection and should be taken seriously. Treat wounds caused by cat claws as a bite. If bitten by a domestic or wild animal, inform animal control.

FIRST AID FOR ALL BITES AND STINGS:
• Secure the scene for safety.
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• If bleeding is heavy, apply direct pressure with a bandage until the medical team arrives.
• Provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.
• Be prepared to perform CPR.
• If signs of an allergic reaction are present, see [[Allergic Reactions|2]]

ADDITIONAL FIRST AID FOR ANIMAL OR HUMAN BITES:
• GET HELP AND AED. CALL 911 if the bite involves a wild animal.
• CALL POISON CONTROL at <strong>1-800-222-1222</strong> if the bite is from a snake.
• Wash wounds with copious amounts of soap and water for 15 minutes.

ADDITIONAL FIRST AID FOR BEES, INSECTS, SPIDERS, TICKS:
• For a known history of anaphylactic reaction to bee/insect venom, follow the student's Emergency Action/Care Plan. Administer epinephrine immediately as ordered and GET HELP AND AED. CALL 911. Do not delay treatment.
• Insects:
  - Remove the body and stinger of an insect by plucking or scraping with a stiff card, but do not squeeze. Stings to the eye should be evaluated by a trained medical professional.
  - Caterpillar spines can be removed using tape.
• Spiders:
  - GET HELP AND AED. CALL 911 if the bite is from a black widow or brown recluse spider.
• Ticks:
  - Using tweezers, grasp the tick's body as close to the student's skin as possible.
  - Pull upward with steady, even pressure. Do not twist or jerk it out.
  - If possible, capture the spider, tick, or insect for identification.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider immediately if the skin has been broken.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 7,
      name: 'Bleeding',
      overview: `Consider training staff in STOP THE BLEED® or another program to identify appropriate interventions for uncontrolled bleeding using direct pressure, pressure dressings, and tourniquets. Students with bleeding disorders may not respond to basic first aid treatment and should have an Emergency Action/Care Plan.

FIRST AID FOR BLEEDING:
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• If bleeding is heavy (pooling or spurting) or if there are signs of a puncture, stab, or other severe injuries, GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Do not remove an embedded object.
• Have the student lie down.
• If possible, elevate the bleeding area above the level of the heart.
• When bleeding is hard to control, apply direct pressure to the open wound with a bandage or cloth until the emergency medical team arrives. Do not remove the bandage. Add more if needed.
• If the above measures do not stop the bleeding, apply a tourniquet if one is available and you have been trained to do so.

FIRST AID FOR MINOR CUTS:
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• Have the student apply direct pressure with a clean bandage until the bleeding has stopped.
• Once bleeding has stopped, slowly remove the bandage.
• Provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.
• Inform the student's parent or legal guardian. Advise them to have the student seen by a healthcare provider if the wound is open.
• Document care provided.
• Clean and disinfect any contaminated surfaces.

IMPORTANT: If you have direct contact with blood or body fluids, follow your school's bloodborne pathogen exposure protocol`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 8,
      name: 'Broken Bone, Dislocation, Sprain, Strain',
      overview: `A broken bone is most frequently associated with an injury to its surrounding tissue caused by direct trauma. Medical emergencies involving fractures would include bone penetration of the skin, misalignment of a large joint, a double-bone forearm fracture, and a suspected fracture of the upper leg.

FIRST AID FOR BROKEN BONES:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Do not move the student if the suspected fracture is of the leg, pelvis, head, neck, or spine, unless there is an immediate threat of danger.
• Stop bleeding if present.
• Find a comfortable position for the student and encourage the student to remain still.
• If the bone penetrates the skin:
  - Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
  - Cover exposed bone with a moist sterile bandage if available.
  - Do not manipulate bones.
• If the student must be moved, a splint helps prevent further injury. Use a folded blanket, cardboard magazine, or pillow to support the injury above and below the suspected fracture if possible.

FIRST AID FOR DISLOCATIONS/SPRAINS/STRAINS:
• Find a comfortable position for the student and encourage the student to remain still.
• Apply a cold pack wrapped in a cloth to protect the skin for a maximum of 20 minutes.
• Use pillows to stabilize the injury above the level of the heart.
• Inform the student's parent or legal guardian. Advise them to have the student seen by their healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 9,
      name: 'Burns',
      overview: `Burns can be caused by different sources: thermal, chemical, electrical, or radiation. Burns on the face, hands, feet, genitals, large and deep burns, or burns that wrap around a limb or area are an emergency. Facial burns, difficulty breathing, singed nasal hairs, or soot around the nose or mouth are also emergencies. GET HELP AND AED. CALL 911.

BURN TYPES:
• <strong>Superficial or first-degree</strong> burns involve only the top layer of skin.
• <strong>Partial thickness or second-degree</strong> burns go deeper and cause blisters.
• <strong>Full-thickness or third-degree</strong> burns damage the full depth of the skin and even muscle and nerve tissue.

FIRST AID FOR ALL BURNS:
• Secure the scene for safety.
• Remove the student from the source of the burn.
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• Do not remove clothing that has adhered to the skin.
• Remove jewelry, rings, and constricting clothing if possible.
• Cool burn with water as soon as possible:
  - If burn is the size of your hand or smaller, gently put it under cool running water for 1–2 minutes.
  - If unable to put area under water (like on the face or chest), use a clean, cool, wet cloth.
  - Do not use ice – it can make the burn worse.
  - Be careful not to cool too much of the body at once.
  - Protect the student from hypothermia.
• Be prepared to perform CPR.
• Do not break blisters.
• Apply a loose, dry, non-stick bandage. Do not use cotton, salves, or ointments.
• Do not offer food or drink.

ADDITIONAL FIRST AID FOR CHEMICAL BURNS:
• GET HELP AND AED. CALL 911.
• While administering first aid, consider eye protection. If the chemical gets in the eyes, rinse immediately with cool, not cold, water, injured eye down protecting the student's other eye.
• Brush any dry chemicals off the skin.
• Flush affected areas with cool water until the emergency medical team arrives.
• Consider contacting the Poison Control Center at 800-222-1222.
• Send chemical Safety Data Sheets (SDS) with the student.

ADDITIONAL FIRST AID FOR ELECTRICAL BURNS:
• GET HELP AND AED. CALL 911.
• If a power line is down, do not approach the student until confirmation that the power is off.
• Inform the student's parent or legal guardian. Advise them to have the student seen by their healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 10,
      name: 'Choking',
      overview: `Clearing a blocked airway may be critical to saving a student before the emergency medical team arrives. If the student can cough, cry, or speak, monitor the student carefully and stay with student until coughing clears and normal breathing resumes. A cough is often effective in removing an obstruction. Notify the school nurse.

If the student is choking and responsive, follow the steps to clear the blocked airway. Repeat until the object is dislodged.

FIRST AID FOR A BLOCKED AIRWAY:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.

FOR INFANTS:
• Hold the infant face down on your arm, chest in your hand, and the infant's head lowered.
• Give five slaps between the shoulder blades.
• Turn the infant face up.
• Using your fingers to press up on the breastbone, give five quick chest thrusts.
• Give 5 back blows alternating with 5 chest thrusts until clear or unresponsive.
• If the infant becomes unresponsive, begin CPR.
• After each set of chest compressions, open the mouth, check for any objects, and remove them if visible. Continue checking the mouth for objects after every set of compressions until the rescue breaths are successful.
• Do not perform a "blind finger sweep."
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided.

FOR CHILDREN AND ADULTS:
Alternate between 5 back blows and 5 abdominal thrusts until clear or unresponsive.
• <strong>Back blow:</strong> Use heel of hand to forcefully strike between the shoulder blades.
• <strong>Abdominal thrust:</strong> Get behind the student. Place a fist just above the student's navel, grasp it with your other hand, pull the student close, and thrust upward against the abdomen.

Repeat until the airway is clear. <strong>If the student becomes unresponsive, begin CPR.</strong>
• After each set of chest compressions, open the mouth, check for any objects, and remove them if visible. Continue checking the mouth for objects after every set of compressions until the rescue breaths are successful.
• <strong>Do not perform a "blind finger sweep."</strong>

Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 13,
      name: 'Drowning',
      overview: `If a spinal injury is suspected, see [["Back and Neck Injuries"|5]]. After any submersion incident, all individuals, regardless of how well they appear, must be evaluated and monitored in the hospital setting due to the risk of delayed symptoms. Notify the school nurse.

FIRST AID FOR DROWNING:
• GET HELP AND AED. CALL 911.
• Remove the student from the water, if safe to do so.
• Begin high-quality CPR if not breathing.
• Consider hypothermia.
• Remove wet clothing.
• Provide privacy and keep student warm.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 30,
      name: 'Diabetes (High Blood Sugar)',
      overview: `Hyperglycemia is defined as blood sugar above 240mg/dl. It usually occurs over hours or days. It can be an emergency if it develops into diabetic ketoacidosis (DKA). If untreated, it can lead to coma or death. Notify the school nurse.

FIRST AID FOR HIGH BLOOD SUGAR:
• Follow the Emergency Action/Care Plan.
• Encourage water or sugar-free fluid consumption.
• Check for ketones* when blood glucose is over 300 mg/dL or as indicated in the Emergency Action/Care Plan.
• Notify the student's parent, legal guardian, or healthcare provider if ketones are present.
• Do not allow the student to exercise if ketones are present.
• Document care provided.

*Ketone testing may not be ordered for students with Type 2 Diabetes.

SEVERE SIGNS/SYMPTOMS:
• Extreme thirst.
• Frequent urination.
• Drowsiness.
• Difficulty concentrating, confusion, disorientation.
• Fruity smell on the student's breath.
• Fast breathing.
• Nausea and vomiting.
• Loss of responsiveness.

FIRST AID FOR SEVERE SIGNS/SYMPTOMS:
• GET HELP AND AED. CALL 911.
• Roll the student onto their left side.
• Be prepared to perform CPR.
• Inform the student's parent or legal guardian.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 31,
      name: 'Diabetes (Low Blood Sugar)',
      overview: `Hypoglycemia is a sudden, potentially life-threatening event in a student who takes insulin. It is defined as a blood sugar level below 70mg/dl. This condition can develop in minutes and requires immediate attention. The student's Emergency Care plan will define low blood sugar and provide instructions. Follow the plan. Notify the school nurse.

SIGNS/SYMPTOMS:
• Irritability, anxiety, or confusion.
• Weakness, drowsiness, or poor coordination.
• Excessive sweating or trembling.
• Blurred vision.
• Paleness, dizziness, or slurred speech.
• Loss of responsiveness and/or seizures.

<strong>FIRST AID FOR LOW BLOOD SUGAR WHEN NO EMERGENCY CARE PLAN IS AVAILABLE:</strong>
• <strong>DO NOT LEAVE THE STUDENT ALONE.</strong>
• Give 15 grams of carbohydrates/sugar (Examples: 4 oz. juice, 3 tsp glucose gel, 3–4 glucose tabs).
• Wait 15 minutes. Recheck blood sugar. If blood sugar remains under 70mg/dl, repeat treatment.
• If above 70mg/dl and mealtime is over an hour away, provide a long-lasting carbohydrate snack (Examples: cheese and crackers, peanut butter, chocolate milk) and recheck blood sugar in one hour.
• If blood sugar continues to be below 70mg/dl, repeat treatment. If unsure: CALL 911.
• Be prepared to perform CPR.
• Inform the student's parent or legal guardian.
• Document care provided.

<strong>ADDITIONAL FIRST AID IF THE STUDENT HAS AN ALTERED MENTAL STATUS, IS UNABLE TO SWALLOW, OR BECOMES UNRESPONSIVE:</strong>
• GET HELP AND AED. CALL 911.
• Stop insulin delivery, such as an insulin pump, or pod.
• Do not give anything by mouth.
• Roll the student onto their left side.
• Trained staff may give glucagon per the Emergency Action/Care Plan and healthcare provider's orders.
• Inform the student's parent or legal guardian.
• Document care provided.

Maine schools may stock undesignated ready-to-use glucagon rescue therapies that may be administered to a student with a known diagnosis of diabetes if the student's prescribed glucagon is not available on-site or has expired`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 14,
      name: 'Eye Injuries',
      overview: `FIRST AID FOR ALL EYE INJURIES:
• Wash hands and wear non-latex disposable gloves following standard exposure precautions.
• Have or help the student remove the contact lenses, if present.
• Instruct the student not to rub their eye.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided.

ADDITIONAL FIRST AID FOR CHEMICAL IN THE EYE:
• Have someone call the Poison Center at <strong>1-800-222-1222</strong>. Follow their instructions.
• Secure the scene for safety.
• Position the student's head over a sink with the injured eye down, running water or saline solution into the inside corner of the eye (by the nose) continuously.
• Determine chemical, if possible, and send Safety Data Sheets (SDS) with the student.
• Advise the parent or legal guardian that the student must be seen by a healthcare provider immediately.

ADDITIONAL FIRST AID FOR CUTS TO THE EYE OR EYELID:
• Keep the student in a seated position.
• Cover the eye with a gauze pad and bandage loosely or an eye shield if tolerated.
• Do not try to flush the eye with water. Do not apply pressure to control bleeding. Do not apply any medicine, drops, or ointment to the eye.
• Refer to a healthcare provider for evaluation and treatment of possible corneal abrasion.

ADDITIONAL FIRST AID FOR PENETRATING OBJECT IN THE EYE:
• GET HELP AND AED. CALL 911.
• Do not attempt to flush the eye.
• Keep the student still and lying flat on their back, if possible.
• Never attempt to remove the penetrating object. The object may be immobilized with tape and gauze.
• Never put pressure on the eye.
• Cover the injured eye with an eye shield or small paper cup and anchor in place. Patch the other eye to minimize eye movement.
• Advise the parent or legal guardian that the student must be seen by a healthcare provider immediately.

ADDITIONAL FIRST AID FOR SMALL OBJECTS IN THE EYE:
• Gently pull down the lower eyelid while the student looks up, down, and side to side. Try to locate the object.
• Gently lifting the upper lid out and down produces tears and may help flush out the object.
• If the object remains, flush the eye with clean, lukewarm water or saline solution/eye wash.
• If unable to remove the object, patch both eyes to minimize movement. Refer to a healthcare provider`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 15,
      name: 'Fainting',
      overview: `Fainting is a temporary loss of consciousness that may have many possible causes. If the cause of the fainting is known, respond according to the cause. The episode is usually brief, typically lasting for less than a minute. Notify the school nurse.

POSSIBLE CAUSES:
• Not eating/Low blood sugar.
• Choking.
• Dehydration.
• Injury or blood loss.
• Allergic reaction or poisoning.
• Holding one's breath or hyperventilating.
• Fatigue or illness.
• Standing for a long time.
• Being too warm.
• Use of drugs (including caffeine or nicotine) or alcohol.
• Stress, fear, and emotional upset.
• Heart problems.

WARNING SIGNS:
• Blurred or tunnel vision.
• Light-headedness.
• Sweating or trembling.
• Nausea.
• Pale skin.

FIRST AID FOR FAINTING:
• Check for breathing.
• If not breathing, GET HELP AND AED. CALL 911 and begin CPR.
• Lay the person on their back with their legs elevated.
• Apply a cool washcloth to the forehead.
• Roll to their left side if they vomit.
• Follow the Emergency Action/Care Plan, if available.
• Write down details of what happened, including the amount of time the person was unconscious, possible causes, and other signs or symptoms.
• Do not allow the student to stand immediately following a fainting episode.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 11,
      name: 'Head Injury / Suspected Concussion',
      overview: `A concussion is a type of traumatic brain injury (TBI) caused when there is a bump, blow, or jolt to the head or a strike to the body that causes the head and brain to move back and forth rapidly. Symptoms may not appear immediately and may develop over several hours or days after the impact. Consider the possibility of a spinal injury when caring for a student with an impact to the head. Move the student only if necessary. Notify the school nurse.

SIGNS/SYMPTOMS:
• Loss of consciousness (even a brief loss)
• Increasing confusion, restlessness, or agitation.
• Drowsiness or inability to wake the student.
• Slurred speech or slow response.
• Seizure-like activity.
• One pupil (the black part in the middle of one eye) larger than the other.
• Vomiting or nausea; pale and sweaty skin.
• Headache, blurred vision, dizziness, or balance difficulties.
• Weakness, numbness, or decreased coordination.
• Blood or clear fluid persistently dripping from the nostril or ear canal.
• Loss of bowel or bladder control (when unusual for that student)

FIRST AID FOR A SUSPECTED CONCUSSION:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Try to determine the cause of the head injury.
• Stay with the student until EMS arrives.
• Keep the student dry and warm.
• Place a cold pack or ice bag wrapped in a cloth on the injury for 10 to 15 minutes to reduce swelling.
• Inform the student's parent or legal guardian and advise them to consult with a healthcare professional for assessment.
• If concussion is suspected, remove from activity (Maine Department of Education, 2024). Students may not return to sports or any physical activity without being evaluated by a person trained in concussion recognition.
• Document care provided.

A child with a suspected concussion should be seen by a healthcare provider. The CDC Concussion Checklist can be used and includes danger signs of a concussion`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 16,
      name: 'Heat Exhaustion and Heat Stroke',
      overview: `Heat-related injuries can be life-threatening if not recognized. These injuries can develop when students are exposed to hot temperatures, actively playing, sweating, or overly clothed. Heat exhaustion is a result of fluid or electrolyte imbalances. Heat stroke is when the heat-regulating mechanism is affected. Notify the school nurse.

SIGNS/SYMPTOMS OF HEAT EXHAUSTION:
• Flushed, sweaty skin.
• Nausea and vomiting.
• Headache.
• Thirst, dry mouth, or cramps.
• Dizziness, fainting, or fatigue.
• Fast breathing rate.
• Normal to slightly elevated body temperature.

FIRST AID FOR HEAT EXHAUSTION:
• Remove the student from the hot environment. Seek shade. Direct a fan toward the student, if possible.
• Remove outer clothing and cool skin with water or wet cloths.
• Give small sips of water.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• If the student does not improve or cannot drink fluids: GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.

SIGNS/SYMPTOMS OF HEAT STROKE (LIFE-THREATENING):
• Flushed, hot, DRY skin.
• Confusion, disorientation, or unresponsiveness.
• High body temperature (104°F or higher)
• Progression to seizures, stroke, or cardiac arrest.

FIRST AID FOR HEAT STROKE:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Remove the student from the hot environment. Seek shade. Direct a fan toward the student, if possible.
• Remove outer clothing and cool skin with water or wet cloths.
• Put ice packs, wrapped in cloth, in the armpit and groin areas.
• Do not try to give fluids by mouth; students with heatstroke may not be able to safely swallow.
• Inform the student's parent or legal guardian.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 17,
      name: 'Hypothermia and Frostbite',
      overview: `HYPOTHERMIA
Hypothermia is a life-threatening condition that occurs when the body loses heat faster than it can produce heat. Notify the school nurse.

SIGNS/SYMPTOMS:
• Temperature below 95°F.
• Loss of fine or gross motor skills.
• Confusion.
• Loss of shivering.

FIRST AID FOR HYPOTHERMIA:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Bring the student to a warm place if possible, or shield from further heat loss.
• Remove all wet clothing and replace it with dry clothing, a hat, and blankets.
• Give high-sugar, warm fluids, if tolerated and alert.
• Do not massage to actively warm the student, as it may worsen the damage caused by frostbite.
• Inform the student's parent or legal guardian.
• Document care provided.

FROSTBITE
Frostbite is an injury caused by freezing body tissues.

SIGNS/SYMPTOMS:
• If the affected area returns to normal appearance after rewarming, it may be frostnip. Inform the student's parent or legal guardian to consult with a healthcare provider.
• If the area is very red, very pale, swollen, or blistered, it may be frostbite.

FIRST AID FOR FROSTBITE:
• If there is no risk of refreezing, rewarm frostbitten tissue with lukewarm water if available or in warm room air or next to person's skin.
• Do not rub toes, fingers, ears, or skin.
• Do not break any blisters; bandage any that have broken.
• If toes or fingers are damaged, put bulky dry gauze between them to keep them from rubbing, avoid using or walking to avoid further damage.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 18,
      name: 'Jaw Injuries: Broken or Dislocated',
      overview: `A broken or dislocated jaw requires prompt medical attention because of the risk of breathing problems or bleeding. Notify the school nurse.

SIGNS/SYMPTOMS OF A BROKEN JAW:
• Bleeding from the mouth.
• Jaw stiffness, tenderness, pain, or limited movement.
• Facial bruising, swelling, a lump, or abnormal appearance of the cheek or jaw.
• Loose or damaged teeth.
• Numbness of the face (particularly the lower lip)

FIRST AID:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Keep the student in the seated position, if possible, with a container for drainage.
• Apply cold packs to reduce pain/swelling.
• Expect that the student may not be able to spit/swallow effectively.
• Inform the student's parent or legal guardian.
• Document care provided.

SIGNS/SYMPTOMS OF A DISLOCATED JAW:
• Teeth that do not line up properly.
• Inability to close the mouth.
• A jaw that protrudes forward or a jawline that may appear distorted.
• Difficulty speaking.
• Drooling.
• Pain in the face or jaw, located in front of the ear or on the affected side, that worsens with movement.

FIRST AID:
• GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Encourage the student to remain still.
• Make sure the student can breathe.
• Inform the student's parent or legal guardian.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 19,
      name: 'Mental Health Emergency',
      overview: `A variety of family, community, and environmental factors contribute to mental health, wellness, and accessibility of care. These factors include age, financial hardship, rural living, shortages, distance to services, and transportation challenges. While not always an emergency, symptoms can cause distress and make it challenging to get through the day. While confidentiality needs to be maintained and respected, it cannot be promised in a mental health emergency when there is a serious threat of harm to self or others, harmful actions have already taken place, or evidence of being a victim of neglect or abuse. As a mandated reporter, there is a duty to warn and protect. Prior to responding, secure the scene for safety.

MENTAL HEALTH: EMERGENCIES
A life-threatening event involves a threat of imminent harm to self or others and/or harmful actions that have already taken place. Notify the school nurse and/or school-based mental health provider.

Signs/Symptoms:
• Erratic, unpredictable, and/or uncontrollable behavior that endangers the safety of the student or others.
• Verbalizing the intent to harm oneself or others.

First Aid:
• GET HELP AND AED. CALL 911. Maine Crisis Line: <strong>1-888-568-1112</strong>, or <strong>call 988</strong>.
• Keep the student in sight.
• Remove harmful objects from the environment.
• Maintain a caring, calm, and nonjudgmental approach.
• Seek help from colleagues who can provide crisis intervention or first aid.
• Maintain safety for other students.
• Follow your school's crisis protocol for emergencies.
• Coordinate with administration, a mental health professional, and/or the school nurse to determine the most appropriate notifications per local protocol.
• Document care provided.

Mental health support is available by texting or <strong>calling 988</strong> or by calling the Maine Crisis Line at <strong>1-888-568-1112</strong>.

In the State of Maine, minors can independently and confidentially access outpatient mental health and substance abuse treatment services. Refer to your school or district policies regarding internal referral protocols and key contact people.

MENTAL HEALTH: SUICIDAL IDEATION
Suicidal thoughts, threats, and plans must always be taken seriously. Guidelines and resources are included within this guide to better prepare for such an event. Do not hesitate to call the Maine Crisis Line: <strong>1-888-568-1112</strong>.

Signs/Symptoms:
• Talking about killing oneself.
• Extreme irritability/agitation.
• Hopelessness/despair.
• Giving away favorite things.
• Talking, reading, and writing about death.
• Feeling isolated.

First Aid:
• Keep the student in sight.
• Remove harmful objects from the environment.
• Get help. School nurses, counselors, school resource officers, social workers, and psychologists are trained in suicide prevention.
• Follow your school's crisis protocol for suicide.
• Maintain a caring, calm, and nonjudgmental approach.
• Get help. Maine Crisis Line: <strong>1-888-568-1112</strong> is an immediate resource to use while waiting for a colleague with training on suicide to be available.
• Coordinate with administration, a mental health professional, and/or the school nurse to determine the most appropriate notifications per local protocol.
• Document care provided.

The Revised Statute Sec. 1. 20-A MRSA §4502, sub-§5-B, requires a 1-2 hour Suicide Prevention Awareness Education training be completed by all school personnel in each SAU, island, charter, CTE Region and public school that is not in a SAU.

NAMI Maine has a Suicide Prevention Awareness Toolkit for Maine School Personnel with a 1-hour Suicide Awareness and Prevention Training. Additional trainings are available on the NAMI Maine event calendar.

MENTAL HEALTH: NON-SUICIDAL SELF-INJURY OR SELF-INJURY
Non-suicidal self-injury (NSSI) or self-injury is increasingly becoming identified, especially at the middle and high school levels. NSSI has a different intended outcome than a student engaging in suicide-related behaviors, as it is considered a coping mechanism that is often related to self-soothing. Notify the school nurse.

Signs/Symptoms:
• Fresh cuts or scratches; often in patterns.
• Refusal to participate in activities due to unwillingness to expose skin.

First Aid:
• Maintain a caring, calm, and nonjudgmental approach.
• Provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin. If wounds are significant, see [[Bleeding|7]].
• Seek support from a colleague with expertise in mental health, like a school nurse, counselor, social worker, psychologist, or administrator.
• Coordinate with administration, a mental health professional, and/or the school nurse to determine the most appropriate notifications per local protocol.
• Document care provided.

Mental health support is available by texting or <strong>calling 988</strong> or by calling the Maine Crisis Line at <strong>1-888-568-1112</strong>.

In the State of Maine, minors can independently and confidentially access outpatient mental health and substance abuse treatment services. Refer to your school or district policies regarding internal referral protocols and key contact people`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 20,
      name: 'Nosebleeds (Epistaxis)',
      overview: `Nosebleeds can be common in school-age children and may occur from nose picking, inflammation, injury, forceful blowing, dry air exposure, rubbing the nose, allergies, or foreign objects lodged in the nose. While most nosebleeds are benign, they may become an emergency in a student with a bleeding disorder or if the nosebleed does not stop after applying pressure. Students with a known bleeding disorder should have an Emergency Action/Care Plan. Follow the plan. Notify the school nurse.

FIRST AID:
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• Keep the student sitting upright.
• Gently pinch the soft parts of the nose together. If possible, have the student do this. Have the student lean forward. Do not tilt the head back.
• Hold for <strong>15 minutes</strong>—do not release pressure early to see if the bleeding has stopped.
• If available, place a cold pack or ice bag wrapped in a cloth on the nose and cheeks.
• If bleeding is severe and continues after <strong>15 minutes</strong>, consult the student's parent or legal guardian and recommend medical care.
• If a nosebleed is due to trauma, seek medical attention if there is visual nasal deformity, swelling, or if the student exhibits signs of a possible concussion. See [[Head Injury / Suspected Concussion|11]].
• If unable to reach the parent or legal guardian and bleeding continues for <strong>30 minutes</strong>, GET HELP AND AED. CALL 911.
• Inform the student's parent or legal guardian about recurrent nosebleeds.
• Document care provided.
• Clean and disinfect any contaminated surfaces`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 24,
      name: 'Overdose (Suspected)',
      overview: `The use of alcohol and drugs often occurs alongside other health risk conditions and behaviors, including depression, bullying, and obesity. Know your school's policy on drug and alcohol use. Notify the school nurse as well as the school resource officer.

SIGNS/SYMPTOMS:
• Inappropriate behavior.
• Staggering.
• Slurred speech.
• Slow or absent breathing.
• Blue or ashen lips, skin, and/or nail beds.
• Unresponsiveness.
• Dilated (large) or constricted (small) pupils.

FIRST AID:
• GET HELP AND AED. CALL 911.
• Secure the scene if there is a presence of drugs or paraphernalia.
• If opioid overdose is suspected, naloxone should be administered according to school policy, if available.*.
  - Insert the applicator tip into either nostril.
  - Depress the plunger to administer the full dose.
  - Roll to their side, if possible.
  - Be prepared to perform CPR.
  - A second dose may be needed.
• Have a school administrator, counselor, or nurse inform the student's parent or legal guardian of the incident and transport.

Important Note: Maine Revised Statutes, Title 17-A, §111-B, subsection 1 provides immunity from arrest, prosecution and revocation and termination proceedings when assistance has been requested for suspected drug-related overdose. Maine Revised Statutes, Title 20-A, §4009, subsection 4 further protects non-licensed agent or employee of a school or SAU who renders first aid, or emergency assistance to a student during a school program from being held liable for injuries or death alleged to have been sustained as a result of an act or omission in rendering aid, treatment or assistance. School resource officers are required by law to carry and administer Naloxone Maine Revised Statutes, Title 22, §2353, subsection 3.

<a href="https://www.youtube.com/watch?v=aFUDR9Fo0-E" target="_blank">US CDC Narcan/Naloxone Video Instructions</a>`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 21,
      name: 'Poisoning (Suspected)',
      overview: `Notify the school nurse. If the student is responsive, call the Poison Center at <strong>1-800-222-1222</strong>.

SWALLOWED OR INHALED POISONING

Signs/Symptoms:
• Open containers or spilled medicine, chemicals, illegal drugs, or alcohol.
• Unusual odor in the room or from the student's mouth or clothes.
• Burns on or around the mouth, indicating contact with a corrosive chemical.
• Signs of altered mental status, level of consciousness, or responsiveness.
• Chest pain, difficulty breathing, and/or wheezing.
• Skin changes, burning or stinging of the eyes, and/or temperature changes.
• Headache, abdominal pain, nausea, vomiting, or diarrhea.

First Aid:
• Secure the scene for safety.
• Remove the suspected source of poisoning or relocate the student to fresh air. If gas is the suspected source, do not enter.
• If the student is unresponsive and breathing, GET HELP AND AED. CALL 911.
• Be prepared to perform CPR. Roll the student onto their left side.
• Do not administer anything by mouth unless advised by Poison Control or EMS.
• Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider.
• If possible, send a container of suspected poison and the Safety Data Sheet with EMS.
• Document care provided.

POISONOUS PLANTS
If the student's skin is exposed to poisonous plants, removing the oil secreted from the plant within 10 minutes provides the best outcome. Allergic reactions/sensitivities to poisonous plants can appear hours to days after exposure.

Signs/Symptoms:
• Redness, swelling, rash, blisters, and/or itching.

First Aid:
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• Clean the area to remove plant oil with soap and running water.
• Remove exposed clothing and place it in a plastic bag.
• If possible, save a sample of the plant for identification purposes.
• Inform the student's parent or legal guardian. Refer to a healthcare provider if exposure involves the eyes, face, genitals, or mucous membranes.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 26,
      name: 'Pregnancy Complications',
      overview: `The possibility of pregnancy exists in students post-puberty. A miscarriage may happen over several days and may not be just one event. School staff must maintain student confidentiality and work with the school nurse, counselor, and social worker to assist students in accessing necessary resources, pregnancy counseling, and prenatal care. School staff should remain supportive and nonjudgmental. Notify the school nurse.

SIGNS/SYMPTOMS:
• Pain, cramping, fever, fainting, or dizziness.
• Vaginal spotting or bleeding (may be light to heavy)
• Clear drainage (amniotic fluid)

FIRST AID:
• GET HELP AND AED. CALL 911 if bleeding is heavy, there is clear drainage, or pain is severe.
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• The student should be seen immediately by a healthcare provider if a miscarriage is suspected.
• The student's psychological and emotional needs should be addressed; provide resources.
• Coordinate with administration and/or the school nurse to determine the most appropriate notifications per local protocol.
• Document care provided.

ASSIST WITH THE DELIVERY (IF NECESSARY):
If the delivery is imminent, and help has not arrived, consider these steps:
• GET HELP AND AED. CALL 911
• Allow the mother to deliver where she is, if it is safe.
• Provide clean cloths for hygiene and to protect the mother and baby.
• Assist with the baby's emergence, guiding the head and shoulders out. Do not pull on the baby.
• If the umbilical cord is wrapped around the baby's neck or body, carefully unloop it.
• Once the baby is born, rub vigorously to stimulate breathing. Keep the baby warm and dry.
• If the baby is not breathing, begin CPR`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 22,
      name: 'Seizures',
      overview: `Emergency Medical Services may not need to be called for every seizure in the school setting. A student who is diagnosed with epilepsy will have an Emergency Action/Care Plan that should outline the parameters of what constitutes an emergency. Follow the plan. If unsure, GET HELP AND AED. CALL 911. Notify the school nurse.

SIGNS/SYMPTOMS:
• Stiffening or jerking of the limbs or the whole body.
• Blank stare or eyes rolling back, and/or inability to speak or move.
• Unusual behaviors, smacking lips, repetitive movements.
• Confusion, disorientation; loss of awareness, consciousness, or responsiveness.
• Changes to breathing, such as gagging or gasps.
• Clenched jaw, drooling, or loss of bowel or bladder control.

FIRST AID:
• If there is a known history of seizures, follow the student's Emergency Action/Care Plan.
• GET HELP AND AED. CALL 911 if:
  - The student has never had a seizure before.
  - Infant under 6 months old.
  - The seizure occurs in water.
  - The student has difficulty breathing.
  - The student is injured, pregnant, or sick.
  - The seizure lasts for more than 5 minutes or as indicated in the student's Emergency Action/Care Plan.
  - Another seizure starts soon after the first.
  - Doesn't return to baseline within 5-10 minutes after seizure activity stops.
• Stay calm and with the student; offer privacy if possible. Be prepared to perform CPR.
• Keep the student safe. Move, or guide the student away from harm.
• Loosen clothing, do not put anything in the student's mouth, remove harmful objects, and never restrain.
• Roll the student onto their left side and protect the head with a towel, blanket, or clothing.
• Time the length of seizure and note the body parts affected.
• Let the student rest while lying on their left side after a seizure.
• Inform the student's parent or legal guardian.
• Document care provided.

The Epilepsy Foundation online trainings: Seizure First Aid Training and Certification: Seizure Training for School Personnel and Seizure Training for School Nurses: Caring for Students`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 27,
      name: 'Skin Injuries',
      overview: `Puncture wounds to the head, genitals, eyes, neck, chest, or abdomen are severe; seek emergency medical treatment. Do not try to remove an embedded object. Any student who experiences a puncture wound should be referred to a healthcare provider for evaluation and treatment. Students with bleeding disorders may not respond to basic first aid treatment and should have an Emergency Care Plan. Follow the plan. Notify the school nurse.

First Aid:
• If the wound is severe, GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.
• Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.
• Provide first aid: wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.

<strong>Minor Punctures:</strong> Do not try to pick out debris. Soak or wash the area with soap and warm water.

<strong>Scrapes:</strong> Apply pressure with a bandage to stop the bleeding, then wash the wound with soap and warm water.

<strong>Splinters:</strong> Remove small slivers close to the surface and wash the area with soap and warm water.

<strong>Open Sores:</strong> Do not touch the sore. Cover the sore with a bandage taped on all sides. Reinforce with extra bandages, as needed.

• Inform the student’s parent or legal guardian.
• For a puncture wound or an open wound, advise them to consult with a healthcare provider.
• Document care provided.
• Clean and disinfect any contaminated surfaces.

(American Heart Association and American Red Cross, 2024; Selekman, Shannon, & Yonkaitis, 2019)`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 28,
      name: 'Stroke',
      overview: `Stroke in children occurs most often around birth, in early childhood, and again during the teenage years, so a first aid provider may be the first to recognize it. Although pediatric stroke can resemble adult stroke, it may also appear with vague symptoms or imitate other childhood conditions. Follow the plan. Notify the school nurse.

PRIMARY SIGNS AND SYMPTOMS OF A STROKE:
• Muscle weakness on one side of the body.
• Facial droop.
• Disturbance in sensation, vision, or speech.

ADDITIONAL SIGNS AND SYMPTOMS SEEN IN CHILDREN:
• Altered mental status.
• Seizure.
• Headache.
• Dizziness.
• Nausea/vomiting.

While headaches and vomiting are often linked to common childhood illnesses, these symptoms combined with other neurological changes should prompt concern for possible stroke. Some strokes may also appear as generalized or focal seizures, particularly in infants under one year old.

Adult stroke assessment tools, such as F.A.S.T., have not been validated for children, and there is currently no first-aid–appropriate, evidence-based stroke identification tool specifically for pediatric patients.

If a stroke is suspected, GET HELP AND AED. CALL 911.
• Be prepared to perform CPR.

FOR ADULTS, UTILIZE THE AMERICAN STROKE ASSOCIATION'S F.A.S.T TOOL:
• <strong>FACE</strong> Drooping.
• <strong>ARM</strong> Weakness.
• <strong>SPEECH</strong> Difficulty.
• <strong>TIME</strong> to CALL 911.

• Inform the student's parent or legal guardian.
• Document care provided.
• Clean and disinfect any contaminated surfaces.

(American Heart Association and American Red Cross, 2024; Selekman, Shannon, & Yonkaitis, 2019)`,
      quickView: 'Interactive flowchart'
    },
    {
      id: 25,
      name: 'Teeth Injuries',
      overview: `For treating any oral injury, wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions. Notify the school nurse.

BROKEN TOOTH

First Aid:
• Gently clean dirt from the injured area with warm water.
• Cover the jagged edge of the tooth with gauze.
• Place a cold pack or ice bag wrapped in a cloth on the face over the injured area.
• Save the tooth fragment if possible. Place in water and send with the student to the dentist.
• Inform the student's parent or legal guardian. Advise them to see a dentist immediately.
• Document care provided.

DISPLACED TOOTH

First Aid:
• Position the student so that bleeding does not cause choking.
• Have the student rinse their mouth with cold water.
• Have the student bite down on a wad of gauze to help control bleeding or to stabilize the tooth.
• Apply ice or a cold pack wrapped in a thin cloth over the injured area (on the face) if there is any swelling.
• Inform the student's parent or legal guardian. Advise them to see a dentist as soon as possible.
• Document care provided.

PERMANENT TOOTH KNOCKED OUT

First Aid:
• Find the tooth. The faster you act, the better the chances of saving the tooth.
• Handle the tooth by its crown, not the root, to preserve the periodontal ligament.
• If the tooth is dirty, gently rinse it with water. Do NOT scrub antiseptic on the tooth.
• Gently put the tooth back into its socket, ensuring that the front of the tooth is facing you.
• Have the student hold the tooth in place with clean gauze.
• If the tooth cannot be reinserted into the socket, put the tooth into a specimen cup with a solution such as Hanks’ Balanced Salt Solution (HBSS). If HBSS is not available, the next best options are a specimen cup with cold skim milk, saliva, normal saline, or wrapped in cling film if no other option is available.
• Apply gentle pressure on the socket if bleeding continues.
• Do not remove the blood clot from the socket—it is important for healing.
• Inform the student's parent or legal guardian. Refer to a dentist emergently. The prognosis is best if the tooth has been out for under 20 minutes.
• Document care provided`,
      quickView: 'Interactive flowchart'
    },
  ];

  const conditionKeywords = {
    1:  ['stomach','belly','abdomen','abdominal','cramp','cramps','stomachache','stomach ache','tummy','nausea','vomiting','throwing up','threw up','bowel','groin','rib','pain','hurts','appendix','appendicitis','diarrhea','bloating','constipation'],
    2:  ['allergy','allergic','allergies','anaphylaxis','anaphylactic','epipen','epinephrine','hives','swelling','bee sting','peanut','nut','reaction','histamine','itching','rash','throat closing','tongue swelling'],
    3:  ['amputation','amputated','severed','cut off','finger','toe','limb','arm','leg','detached','body part'],
    4:  ['asthma','breathing','inhaler','wheeze','wheezing','breath','shortness of breath','cant breathe','respiratory','nebulizer','chest tight','chest tightness','rescue inhaler','albuterol','puffing','airway'],
    5:  ['back','neck','spine','spinal','vertebrae','cervical','paralysis','whiplash','fall','numbness','tingling','sports injury','cord'],
    6:  ['bite','sting','bites','stings','insect','bee','wasp','hornet','spider','animal','scratch','rabies','venom','tick','snake','cat bite','dog bite','ant','mosquito','black widow','brown recluse'],
    7:  ['bleeding','bleed','blood','hemorrhage','cut','laceration','wound','gash','tourniquet','stop the bleed','spurting','pooling'],
    8:  ['broken bone','fracture','broken','sprain','strain','dislocation','dislocated','swollen','bruise','bruising','twisted ankle','ankle','wrist','forearm','femur','joint','bone sticking out'],
    9:  ['burn','burns','burning','scald','fire','chemical burn','heat burn','sunburn','blister','electrical burn','radiation','singed','first degree','second degree','third degree'],
    10: ['choke','choking','airway','heimlich','obstruction','swallowed object','throat','cant breathe','something stuck','blockage','coughing','foreign object','swallowed'],
    11: ['head','concussion','skull','brain','headache','hit head','knocked out','unconscious','concussed','tbi','traumatic brain','bump','dizzy after fall','confusion','memory','seeing stars','blurry vision'],
    13: ['drowning','drowned','water','submersion','pool','lake','ocean','swim','swam','near drowning','submerged','pond','river','bath'],
    14: ['eye','eyes','vision','sight','foreign object in eye','chemical in eye','blurry','blind','contact lens','poke','scratch eye','cornea','flushing eye'],
    15: ['faint','fainting','passed out','syncope','dizzy','dizziness','collapse','unconscious','blacked out','lightheaded','fell down','unresponsive','woozy'],
    16: ['heat','hot','temperature','heat stroke','heat exhaustion','overheating','sweating','dehydration','flushed','sunstroke','too hot','outside too long','playing in heat'],
    17: ['hypothermia','cold','frostbite','freezing','frost','chilled','exposure','wet','shivering','numb fingers','numb toes','pale skin','low temperature'],
    18: ['jaw','broken jaw','dislocated jaw','jaw pain','face','facial','cheek','mouth','teeth loose','jaw swelling','jaw stiffness','jaw injury','locked jaw'],
    19: ['mental health','mental','crisis','psychiatric','behavior','emotional','breakdown','self harm','self-harm','suicidal','suicide','threat','hurting self','harming self','harming others','threatening','988','crying','panic','panic attack','cutting','overdose intent','aggression','violent'],
    20: ['nosebleed','nose bleed','nosebleeds','nose bleeds','epistaxis','bloody nose','nose bleeding','blood from nose'],
    21: ['poison','poisoning','toxic','toxin','ingestion','swallowed','chemicals','household chemicals','cleaning product','medication','pills','unknown substance','ate something','drank something','fumes','inhaled','carbon monoxide'],
    24: ['overdose','opioid','narcan','naloxone','fentanyl','heroin','drugs','drug','alcohol','drunk','intoxicated','substance','pills','unresponsive student','slurred speech','staggering','weed','marijuana','stimulant','depressant'],
    25: ['teeth','tooth','dental','mouth','oral','knocked out tooth','avulsion','broken tooth','chipped tooth','loose tooth','tooth socket','gauze','tooth pain'],
    26: ['pregnancy','pregnant','labor','labour','birth','contractions','miscarriage','prenatal','baby','expecting','bleeding pregnancy','water broke'],
    22: ['seizure','seizures','epilepsy','epileptic','convulsion','convulsions','fit','shaking','twitching','jerking','stiffening','blank stare','loss of consciousness','post ictal','ictal'],
    27: ['skin','rash','abrasion','scrape','splinter','open sore','puncture','cut','scratch','blister','minor wound','wound care','sore','lesion','debris in wound','embedded object'],
    28: ['stroke','brain','paralysis','facial droop','face drooping','speech difficulty','slurred speech','neurological','weakness','one side','arm weakness','fast assessment','sudden headache','vision loss'],
    30: ['diabetes','diabetic','blood sugar','glucose','insulin','hyperglycemia','high blood sugar','high sugar','ketones','dka','ketoacidosis','thirsty','frequent urination','dry mouth'],
    31: ['diabetes','diabetic','blood sugar','glucose','insulin','hypoglycemia','low blood sugar','low sugar','sugar','shaky','shakiness','sweating','confused','pale','hungry','juice','glucose tablets'],
  };

  const filteredConditions = conditions.filter(condition => {
    const term = searchTerm.toLowerCase().trim();
    if (!term) return true;
    if (condition.name.toLowerCase().includes(term)) return true;
    const keywords = conditionKeywords[condition.id] || [];
    return keywords.some(k => k.includes(term) || term.includes(k));
  });

  const renderFlowchart = () => {
    if (selectedCondition.id === 1) {
      const severe = flowchartPath.includes('severe');
      const notSevere = flowchartPath.includes('not-severe');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">
              Reset Flowchart
            </button>
          )}
          
          {/* Blue info box - separate from flow */}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div>Abdominal pain is one of the most common reasons for health room visits in school. A student may have a chronic health condition that causes abdominal pain, or it could indicate an illness that requires medical intervention. Notify the school nurse.</div>
            <div className="mt-2 font-semibold">Follow the Emergency Action/Care Plan, if indicated.</div>
          </div>
          
          {/* FLOWCHART STARTS - Decision diamond */}
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Are any of the following symptoms present?</div>
            <div className="bg-white p-3 rounded mb-3 text-sm">
              <ul className="text-left space-y-1 ml-4">
                <li>• Unable to stand or move.</li>
                <li>• Severe pain with or without a fever.</li>
                <li>• Did the student have a traumatic fall or physical trauma.</li>
                <li>• Blood in stool or vomit.</li>
              </ul>
            </div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['severe'])} disabled={severe || notSevere} className="px-6 py-2 rounded font-semibold" style={btnStyle(severe, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['not-severe'])} disabled={severe || notSevere} className="px-6 py-2 rounded font-semibold" style={btnStyle(notSevere, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          
          {(severe || notSevere) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${severe ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${severe ? '' : 'opacity-40'}`}>
                  GET HELP AND AED.<br/>CALL 911.
                </div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${severe ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`p-4 rounded-lg shadow-md ${severe ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Have student rest.</li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${notSevere ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${notSevere ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Have student rest.</li>
                    <li>Inform the student's parent or legal guardian. Advise them to consult with a healthcare provider if there is one or all of the following:
                      <ul className="list-disc list-inside ml-4 mt-1 space-y-1">
                        <li>Persistent pain on one side, particularly the right side.</li>
                        <li>Pain with urination.</li>
                        <li>Shortness of breath.</li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    
    if (selectedCondition.id === 2) {
      const hasPlan = flowchartPath.includes('has-plan');
      const noPlan = flowchartPath.includes('no-plan');
      const severe = flowchartPath.includes('severe');
      const notSevere = flowchartPath.includes('not-severe');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="font-semibold mb-2">Reactions can be immediate or occur up to 2 hours following exposure to allergen.</div>
            <div className="font-semibold mb-2">Symptoms that may indicate a severe reaction:</div>
            <ul className="ml-4 space-y-1">
              <li>• Shortness of breath, or difficulty breathing.</li>
              <li>• Wheezing, or coughing.</li>
              <li>• Skin color that is pale or has a bluish color.</li>
              <li>• Fainting or dizziness.</li>
              <li>• Tight, itchy, or hoarse throat, difficulty swallowing.</li>
              <li>• Swelling of lips or tongue.</li>
              <li>• Vomiting or diarrhea (if repetitive, severe, or combined with other symptoms)</li>
              <li>• Many hives or widespread redness over body.</li>
              <li>• Feeling of "doom," confusion, altered consciousness, or agitation.</li>
            </ul>
          </div>
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Does student have an accessible Emergency Action/Care Plan?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['has-plan'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(hasPlan, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['no-plan'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(noPlan, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          {hasPlan && (
            <div className="space-y-3 mt-4">
              <div className="text-sm font-bold text-center text-gray-800">YES ↓</div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">Follow Emergency Action/Care Plan.</div>
            </div>
          )}
          {noPlan && (
            <div className="space-y-3 mt-4">
              <div className="text-sm font-bold text-center text-gray-800">NO ↓</div>
              <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: !severe && !notSevere  ? "#182b3c" : "#9ca3af"}}>
                <div className="text-center font-bold text-gray-800 mb-3">Do symptoms indicate a severe reaction (anaphylaxis)?</div>
                <div className="bg-white p-3 rounded mb-3 text-sm">
                  <div className="font-semibold mb-2">Severe Reaction Signs/Symptoms:</div>
                  <ul className="text-left space-y-1 ml-4 text-xs">
                    <li>• Shortness of breath or difficulty breathing.</li>
                    <li>• Wheezing.</li>
                    <li>• Pale, bluish, or ashen skin color.</li>
                    <li>• Swelling of throat, tongue, or lips.</li>
                    <li>• Dizziness or fainting.</li>
                    <li>• Widespread hives.</li>
                    <li>• Vomiting or diarrhea.</li>
                  </ul>
                </div>
                <div className="flex gap-2 justify-center">
                  <button onClick={() => setFlowchartPath([...flowchartPath, 'severe'])} disabled={severe || notSevere} className="px-6 py-2 rounded font-semibold" style={btnStyle(severe, !severe && !notSevere)}>YES</button>
                  <button onClick={() => setFlowchartPath([...flowchartPath, 'not-severe'])} disabled={severe || notSevere} className="px-6 py-2 rounded font-semibold" style={btnStyle(notSevere, !severe && !notSevere)}>NO</button>
                </div>
              </div>
              {(severe || notSevere) && (
                <div className="grid grid-cols-2 gap-4 mt-4">
                  <div className="space-y-3">
                    <div className={`text-sm font-bold text-center ${severe ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                    <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${severe ? "" : "opacity-30"}`}>GET HELP AND AED.<br/>CALL 911.</div>
                    <div className="flex justify-center"><div className={`w-1 h-8 ${severe ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                    <div className={`p-3 rounded-lg text-sm ${severe ? 'text-gray-800' : 'text-gray-400'}`} style={{backgroundColor:'#eee6df'}}>
                      <ul className="list-disc ml-4 space-y-1">
                        <li>Administer single-dose epinephrine, if prescribed and trained, per district policy.</li>
                        <li>Seat individual comfortably.</li>
                        <li>Monitor breathing.</li>
                        <li>If unresponsive, begin <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                        <li>If symptoms do not improve, repeat with a second single dose epinephrine as ordered.</li>
                      </ul>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className={`text-sm font-bold text-center ${notSevere ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                    <div className={`p-3 rounded-lg text-sm ${notSevere ? 'text-gray-800' : 'text-gray-400'}`} style={{backgroundColor:'#eee6df'}}>
                      <ul className="list-disc ml-4 space-y-1">
                        <li>Monitor student for any changes in symptoms.</li>
                        <li>Remove allergens. If the student has been stung, see <span onClick={() => { const c = conditions.find(x => x.id === 6); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Bites and Stings</span>.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 3) {
      const breathing = flowchartPath.includes('breathing');
      const notBreathing = flowchartPath.includes('not-breathing');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Blue info box - separate from flow */}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="font-semibold mb-2">Students with bleeding disorders may not respond to basic first aid treatment and should have an Emergency Action/Care Plan. Follow the plan.</div>
            <div>Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</div>
          </div>
          
          {/* FLOWCHART STARTS - Red emergency box */}
          <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white mt-6">GET HELP AND AED.<br/>CALL 911.</div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Cream box with actions */}
          <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
            <ul className="text-sm space-y-1 list-disc list-inside">
              <li>Have student lie down.</li>
              <li>Apply direct pressure to open wound with clean bandage until emergency medical team arrives. <strong>Do not remove bandage. Add more if needed.</strong></li>
              <li>If possible, elevate bleeding area above level of heart.</li>
              <li>If bleeding continues, apply a tourniquet if trained.</li>
              <li>If the amputated body part is available, wrap it in clean gauze, put it in a plastic container or bag, and place it on ice. Do not freeze or submerge in ice or water.</li>
            </ul>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Is student breathing, responsive?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['breathing'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(breathing, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['not-breathing'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(notBreathing, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          
          {(breathing || notBreathing) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${breathing ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${breathing ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Continue to apply pressure until help arrives.</li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${notBreathing ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${notBreathing ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Begin <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>. Continue until help arrives.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 4) {
      const hasPlan = flowchartPath.includes('has-plan');
      const noPlan = flowchartPath.includes('no-plan');
      const severe = flowchartPath.includes('severe');
      const notSevere = flowchartPath.includes('not-severe');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="font-semibold">Severe Signs/Symptoms:</div>
            <ul className="mt-2 ml-4 space-y-1">
              <li>• Chest tightness.</li>
              <li>• Wheezing or grunting.</li>
              <li>• Being unable to talk without stopping to breathe.</li>
              <li>• Gasping, rapid breaths.</li>
              <li>• Nostrils flaring.</li>
              <li>• Feelings of fear, confusion, or changes in alertness.</li>
              <li>• Bluish or ashen color of lips, skin, or nail beds.</li>
            </ul>
          </div>
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Did breathing difficulty occur rapidly or are severe signs/symptoms present?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['severe'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(severe, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['not-severe'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(notSevere, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          {(severe || notSevere) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${severe ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${severe ? "" : "opacity-30"}`}>GET HELP AND AED.<br/>CALL 911.</div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${severe ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: severe && !hasPlan && !noPlan  ? "#182b3c" : "#9ca3af"}}>
                  <div className="text-center font-bold text-gray-800 mb-3 text-sm">Does student have an accessible Emergency Action Plan?</div>
                  <div className="flex gap-2 justify-center">
                    <button onClick={() => setFlowchartPath([...flowchartPath, 'has-plan'])} disabled={!severe || hasPlan || noPlan} className="px-4 py-2 rounded font-semibold text-sm" style={btnStyle(hasPlan && severe, severe && !hasPlan && !noPlan)}>YES</button>
                    <button onClick={() => setFlowchartPath([...flowchartPath, 'no-plan'])} disabled={!severe || hasPlan || noPlan} className="px-4 py-2 rounded font-semibold text-sm" style={btnStyle(noPlan && severe, severe && !hasPlan && !noPlan)}>NO</button>
                  </div>
                </div>
                {hasPlan && severe && (
                  <>
                    <div className="text-xs font-bold text-center text-gray-800">YES ↓</div>
                    <div style={{ backgroundColor: "#8a2e13" }} className="p-3 rounded-lg shadow-md text-center font-bold text-white text-sm">Follow Emergency Action Plan.</div>
                  </>
                )}
                {severe && (hasPlan || noPlan) && (
                  <>
                    <div className="flex justify-center"><div className={`w-1 h-8 ${severe ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                    <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Have student sit comfortably and have them breathe slowly and fully.</li>
                        <li>Calm and reassure student. DO NOT LEAVE STUDENT ALONE.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      </ul>
                    </div>
                  </>
                )}
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${notSevere ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: notSevere ? '#182b3c' : '#e5e7eb'}}>
                  <div className="text-center font-bold text-gray-800 mb-3 text-sm">Does student have an accessible Emergency Action Plan?</div>
                  <div className="flex gap-2 justify-center">
                    <button onClick={() => setFlowchartPath([...flowchartPath, 'has-plan'])} disabled={!notSevere || hasPlan || noPlan} className="px-4 py-2 rounded font-semibold text-sm" style={btnStyle(hasPlan && notSevere, notSevere && !hasPlan && !noPlan)}>YES</button>
                    <button onClick={() => setFlowchartPath([...flowchartPath, 'no-plan'])} disabled={!notSevere || hasPlan || noPlan} className="px-4 py-2 rounded font-semibold text-sm" style={btnStyle(noPlan && notSevere, notSevere && !hasPlan && !noPlan)}>NO</button>
                  </div>
                </div>
                {hasPlan && notSevere && (
                  <>
                    <div className="text-xs font-bold text-center text-gray-800">YES ↓</div>
                    <div style={{ backgroundColor: "#8a2e13" }} className="p-3 rounded-lg shadow-md text-center font-bold text-white text-sm">Follow Emergency Action Plan.</div>
                  </>
                )}
                {notSevere && hasPlan && (
                  <>
                    <div className="flex justify-center"><div className={`w-1 h-8 ${notSevere ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                    <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Have student sit comfortably and have them breathe slowly and fully.</li>
                        <li>If student has medication, assist student in inhaling medication over 5 seconds. Use a spacer, if available.</li>
                        <li>For ongoing symptoms, repeat medication as ordered.</li>
                        <li>Calm and reassure student. DO NOT LEAVE STUDENT ALONE.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      </ul>
                    </div>
                  </>
                )}
                {notSevere && noPlan && (
                  <>
                    <div className="flex justify-center"><div className={`w-1 h-8 ${notSevere ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                    <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Have student sit comfortably and have them breathe slowly and fully.</li>
                        <li>If student has medication, assist student in inhaling medication over 5 seconds. Use a spacer, if available.</li>
                        <li>For ongoing symptoms, repeat medication as ordered.</li>
                        <li>If symptoms worsen or do not improve, <strong style={{color:'#8a2e13'}}>GET HELP AND AED. CALL 911.</strong></li>
                        <li>Calm and reassure student. DO NOT LEAVE STUDENT ALONE.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      </ul>
                    </div>
                  </>
                )}
              </div>
            </div>
          )}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 5) {
      const severe = flowchartPath.includes('severe');
      const notSevere = flowchartPath.includes('not-severe');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="font-semibold mb-2">Restrict spinal movement to prevent further injury; do not move the victim unless there is an immediate threat at the scene.</div>
            <div className="font-semibold mt-4 mb-2">Severe Signs/Symptoms:</div>
            <ul className="ml-4 space-y-1">
              <li>• Inability to move arms or legs.</li>
              <li>• Neck pain after trauma.</li>
              <li>• Loss of sensation or weakness in extremities.</li>
              <li>• Numbness or tingling.</li>
              <li>• Loss of bladder or bowel control.</li>
              <li>• Severe headache or dizziness.</li>
              <li>• Difficulty walking or maintaining balance.</li>
              <li>• Visible deformity or misalignment in the neck.</li>
              <li>• Unconsciousness or altered mental state.</li>
            </ul>
          </div>
          
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Are any severe signs/symptoms present?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['severe'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(severe, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['not-severe'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(notSevere, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          {(severe || notSevere) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${severe ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${severe ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`p-4 rounded-lg shadow-md ${severe ? '' : 'opacity-50'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Secure scene for safety.</li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>Keep student still, and safe from further injury until emergency medical team arrives.</li>
                    <li>If student is wearing a helmet, do not try to remove it, unless needed for airway management or bleeding control, etc.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${notSevere ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${notSevere ? '' : 'opacity-50'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Secure scene for safety.</li>
                    <li>Keep student still.</li>
                    <li>Notify school nurse or other school health staff for assessment.</li>
                    <li>Advise parent or legal guardian to consult with medical provider.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 6) {
      const hasAnaphylaxis = flowchartPath.includes('anaphylaxis');
      const noAnaphylaxis = flowchartPath.includes('no-anaphylaxis');
      const animalBite = flowchartPath.includes('animal');
      const noAnimal = flowchartPath.includes('no-animal');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="font-semibold mb-2">If a student with a known history of anaphylactic reaction to bee/insect venom is stung, follow the student's Emergency Action/Care Plan. Administer epinephrine immediately as ordered and call 911.</div>
            <div className="font-semibold">Do not delay treatment.</div>
          </div>
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Are there signs of anaphylaxis or uncontrolled bleeding?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['anaphylaxis'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(hasAnaphylaxis, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['no-anaphylaxis'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(noAnaphylaxis, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          {hasAnaphylaxis && (
            <div className="space-y-3 mt-4">
              <div className="text-sm font-bold text-center text-gray-800">YES ↓</div>
              <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Secure scene for safety.</li>
                  <li>Move student from area.</li>
                  <li>Wash hands and wear non-latex disposable gloves following standard precautions.</li>
                  <li>Provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.</li>
                  <li>For heavy bleeding, apply direct pressure with bandage until medical team arrives. See <span onClick={() => { const c = conditions.find(x => x.id === 7); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Bleeding</span>.</li>
                  <li>Monitor student carefully for allergic reactions.</li>
                  <li>If anaphylaxis is suspected or for a known allergy, follow Emergency Action/Care Plan or local policy to administer epinephrine, if available. See <span onClick={() => { const c = conditions.find(x => x.id === 2); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Allergic Reactions</span>.</li>
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  <li>If bite is from a domestic or wild animal, inform animal control.</li>
                </ul>
              </div>
            </div>
          )}
          {noAnaphylaxis && (
            <div className="space-y-3 mt-4">
              <div className="text-sm font-bold text-center text-gray-800">NO ↓</div>
              <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: !animalBite && !noAnimal  ? "#182b3c" : "#9ca3af"}}>
                <div className="text-center font-bold text-gray-800 mb-3">Was a domestic or wild animal involved?</div>
                <div className="flex gap-2 justify-center">
                  <button onClick={() => setFlowchartPath([...flowchartPath, 'animal'])} disabled={animalBite || noAnimal} className="px-6 py-2 rounded font-semibold" style={btnStyle(animalBite, !animalBite && !noAnimal)}>YES</button>
                  <button onClick={() => setFlowchartPath([...flowchartPath, 'no-animal'])} disabled={animalBite || noAnimal} className="px-6 py-2 rounded font-semibold" style={btnStyle(noAnimal, !animalBite && !noAnimal)}>NO</button>
                </div>
              </div>
              {animalBite && (
                <div className="space-y-3 mt-3">
                  <div className="text-sm font-bold text-center text-gray-800">YES ↓</div>
                  <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                </div>
              )}
              {(animalBite || noAnimal) && (
                <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Secure scene for safety.</li>
                    <li>Move student from area.</li>
                    <li>Wash hands and wear non-latex disposable gloves following standard precautions.</li>
                    <li>Provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.</li>
                    <li>For heavy bleeding, apply direct pressure with bandage until medical team arrives. See <span onClick={() => { const c = conditions.find(x => x.id === 7); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Bleeding</span>.</li>
                    <li>Monitor student carefully for allergic reactions.</li>
                    <li>If anaphylaxis is suspected or for a known allergy, follow Emergency Action/Care Plan or local policy to administer epinephrine, if available. See <span onClick={() => { const c = conditions.find(x => x.id === 2); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Allergic Reactions</span>.</li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>If bite is from a domestic or wild animal, inform animal control.</li>
                  </ul>
                </div>
              )}
            </div>
          )}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 7) {
      const heavy = flowchartPath.includes('heavy');
      const minor = flowchartPath.includes('minor');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="font-semibold mb-2">Students with bleeding disorders may not respond to basic first aid treatment and should have an Emergency Action/Care Plan. Follow the plan.</div>
            <div>Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</div>
          </div>
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Is bleeding heavy (pooling or spurting) or are there signs of severe injury?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['heavy'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(heavy, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['minor'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(minor, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          {(heavy || minor) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${heavy ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: '#8a2e13' }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${heavy ? '' : 'opacity-30'}`}>GET HELP AND AED.<br/>CALL 911.</div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${heavy ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`p-4 rounded-lg shadow-md ${heavy ? '' : 'opacity-50'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Do not remove an embedded object.</li>
                    <li>Have the student lie down.</li>
                    <li>Apply direct pressure with a bandage until the emergency medical team arrives. <strong>Do not remove bandage. Add more if needed.</strong></li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>Elevate bleeding area above level of heart, if possible.</li>
                    <li>If bleeding continues, apply tourniquet if trained.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${minor ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${minor ? '' : 'opacity-50'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Apply direct pressure with bandage.</li>
                    <li>When bleeding stops, remove bandage slowly and provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.</li>
                    <li>Advise parent or legal guardian to consult with medical provider if wound is open.</li>
                    <li>Clean and disinfect any contaminated surfaces.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 8) {
      const fracture = flowchartPath.includes('fracture');
      const sprain = flowchartPath.includes('sprain');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="mb-2">Minimize movement. If the student must be moved, a splint helps prevent further injury. Use a folded blanket, magazine, or cardboard to support the injured part.</div>
            <div>Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</div>
          </div>
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Is a broken bone suspected?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['fracture'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(fracture, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['sprain'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(sprain, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          {(fracture || sprain) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${fracture ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: '#8a2e13' }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${fracture ? '' : 'opacity-30'}`}>GET HELP AND AED.<br/>CALL 911.</div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${fracture ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`p-4 rounded-lg shadow-md ${fracture ? '' : 'opacity-50'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>Do not move student, unless in grave danger.</li>
                    <li>Stop bleeding, if present.</li>
                    <li>If bone penetrates skin: Cover exposed bone with sterile bandage, if available. Do not manipulate bones.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${sprain ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${sprain ? '' : 'opacity-50'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Keep student still.</li>
                    <li>Apply cold pack wrapped in a cloth to protect skin.</li>
                    <li>Stabilize the injury with pillows above the level of the heart.</li>
                    <li>Advise parent or legal guardian to consult with medical provider.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
            <p className="mt-2"><strong>Blood Borne Pathogen Safety:</strong> If you have direct contact with blood or body fluid, follow your school's blood borne pathogen protocol.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 9) {
      const severe = flowchartPath.includes('severe');
      const notSevere = flowchartPath.includes('not-severe');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Blue info box - separate from flow */}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <div className="mb-2">The following applies to all burns. Burns can be caused by different sources: thermal, chemical, electrical, or from radiation. Refer to the text of these guidelines for specific information related to chemical and electrical burns.</div>
            <div>Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</div>
          </div>
          
          {/* FLOWCHART STARTS - Decision diamond */}
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Are burns located on face, hands, feet, or genitals? Are burns deep and/or larger than size of student's palm?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['severe'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(severe, flowchartPath.length === 0)}>YES</button>
              <button onClick={() => setFlowchartPath(['not-severe'])} disabled={flowchartPath.length > 0} className="px-6 py-2 rounded font-semibold" style={btnStyle(notSevere, flowchartPath.length === 0)}>NO</button>
            </div>
          </div>
          
          {(severe || notSevere) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${severe ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${severe ? '' : 'opacity-40'}`}>GET HELP AND AED.<br/>CALL 911.</div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${severe ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`p-4 rounded-lg shadow-md ${severe ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Secure scene for safety.</li>
                    <li>Remove student from burn source, if it is safe.</li>
                    <li>Do not remove clothing that has adhered to the skin.</li>
                    <li>Remove jewelry and tight clothing, if possible.</li>
                    <li>Cool burn with water as soon as possible.</li>
                    <li>Be careful not to cool too much of the body at once.</li>
                    <li>Protect student from hypothermia.</li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>Do not break blisters.</li>
                    <li>Apply loose, dry, non-stick bandage.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${notSevere ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${notSevere ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Secure scene for safety.</li>
                    <li>Remove student from burn source, if it is safe.</li>
                    <li>Do not remove clothing that has adhered to the skin.</li>
                    <li>Remove jewelry and tight clothing, if possible.</li>
                    <li>Cool burn with water as soon as possible:
                      <ul className="ml-6 mt-1 space-y-1">
                        <li>- If burn is the size of your hand or smaller, put it under cool running water for 1-2 minutes.</li>
                        <li>- If unable to put area under water (like on the face or chest), use a clean, cool, wet cloth.</li>
                        <li>- Do not use ice.</li>
                      </ul>
                    </li>
                    <li>Be careful not to cool too much of the body at once.</li>
                    <li>Protect student from hypothermia.</li>
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>Do not break blisters.</li>
                    <li>Do not use cotton, salves, or ointments.</li>
                    <li>Apply loose, dry, non-stick bandage.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 10) {
      const resolved = flowchartPath.includes('resolved');
      const notResolved = flowchartPath.includes('not-resolved');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <p>Clearing a blocked airway is critical to saving a life before emergency medical team arrives.</p>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
            GET HELP AND AED. CALL 911.
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className="grid grid-cols-2 gap-4">
            <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
              <div className="font-bold mb-2">Choking: Infants</div>
              <ul className="text-sm space-y-1 list-disc list-inside">
                <li>Hold infant face down on your arm, chest in your hand, and head lowered.</li>
                <li>Give five slaps between shoulder blades.</li>
                <li>Turn infant face up.</li>
                <li>Using your fingers, press up on the breastbone, give five quick chest thrusts.</li>
              </ul>
            </div>
            <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
              <div className="font-bold mb-2">Choking: Children and Adults</div>
              <ul className="text-sm space-y-2 list-disc list-inside">
                <li>5 back blows alternating with 5 chest thrusts until clear or unresponsive.</li>
                <li><strong>Back Blow:</strong> Forcefully strike between shoulder blades.</li>
                <li><strong>Abdominal Thrusts:</strong> From behind, make a fist with one hand, grasp with other hand just above navel, thrust upwards.</li>
                <li><strong>If student becomes unresponsive, start CPR.</strong></li>
              </ul>
              <p className="text-sm mt-2"><strong>Do not perform a blind finger sweep.</strong></p>
            </div>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
            <ul className="text-sm space-y-1 list-disc list-inside">
              <li>Repeat until object is cleared or help arrives.</li>
              <li>Monitor student for any changes in symptoms.</li>
              <li>If student becomes unresponsive start <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
              <li>After each set of compressions, open mouth, check for object, and remove if visible. Do not perform a blind finger sweep.</li>
            </ul>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !resolved && !notResolved  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Has choking resolved?</div>
            <div className="flex gap-2 justify-center">
              <button 
                onClick={() => setFlowchartPath(['resolved'])} 
                disabled={resolved || notResolved}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(resolved, !resolved && !notResolved)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['not-resolved'])} 
                disabled={resolved || notResolved}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(notResolved, !resolved && !notResolved)}
              >
                NO
              </button>
            </div>
          </div>
          
          {(resolved || notResolved) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${resolved ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${resolved ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <p className="text-sm">Monitor student until medical team arrives.</p>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${notResolved ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${notResolved ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <p className="text-sm">Continue until medical team arrives.</p>
                </div>
              </div>
            </div>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 11) {
      const severeYes = flowchartPath.includes('severe-yes');
      const severeNo = flowchartPath.includes('severe-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box with symptoms */}
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <p className="font-semibold mb-2">Signs/Symptoms of a Suspected Concussion:</p>
            <ul className="space-y-1 list-disc list-inside mb-3">
              <li>Headache.</li>
              <li>Pale and sweaty skin.</li>
            </ul>
            <p className="font-semibold mb-2">Severe Signs/Symptoms of a Suspected Concussion:</p>
            <ul className="space-y-1 list-disc list-inside">
              <li>Loss of consciousness (even a brief loss)</li>
              <li>Increasing confusion, restlessness, or agitation.</li>
              <li>Drowsiness or cannot be awakened.</li>
              <li>Slurred speech or slow response.</li>
              <li>Seizure-like activity.</li>
              <li>One pupil (the black part in the middle of the eye) larger than the other.</li>
              <li>Vomiting or nausea.</li>
              <li>Blurred vision, dizziness, balance difficulties.</li>
              <li>Weakness, numbness, or decreased coordination.</li>
              <li>Blood or clear fluid persistently dripping from nostril or ear canal.</li>
              <li>Loss of bowel/bladder control (when unusual for that student)</li>
            </ul>
          </div>
          
          {/* FLOWCHART STARTS - Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Are severe symptoms of a suspected concussion present?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['severe-yes'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['severe-no'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {(severeYes || severeNo) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${severeYes ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${severeYes ? '' : 'opacity-40'}`}>
                  GET HELP AND AED.<br/>CALL 911.
                </div>
                <div className="flex justify-center"><div className={`w-1 h-8 ${severeYes ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                <div className={`p-4 rounded-lg shadow-md ${severeYes ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                    <li>Observe student until emergency medical team arrives.</li>
                    <li>Apply a cold pack wrapped in a cloth to protect skin.</li>
                    <li>Do not allow student to continue participating in sports or physical activities.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${severeNo ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${severeNo ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Report any bumps to the head to the school nurse and other appropriate school health staff.</li>
                    <li>Notify parent for monitoring and possible follow-up with a medical provider.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          
          {/* Important Note at bottom */}
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 28) {
      const primarySymptoms = flowchartPath.includes('primary-yes');
      const primaryNo = flowchartPath.includes('primary-no');
      const additionalSymptoms = flowchartPath.includes('additional-yes');
      const additionalNo = flowchartPath.includes('additional-no');
      const neurologicalSymptoms = flowchartPath.includes('neurological-yes');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <p className="mb-3">Stroke in children occurs most often around birth, in early childhood, and again during the teenage years, so a first aid provider may be the first to recognize it. Although pediatric stroke can resemble adult stroke, it may also appear with vague symptoms or imitate other childhood conditions. Notify the school nurse.</p>
            <p className="font-semibold mb-1">Primary signs and symptoms of a stroke:</p>
            <ul className="list-disc list-inside space-y-1">
              <li>Muscle weakness on one side of the body.</li>
              <li>Facial droop.</li>
              <li>Disturbance in sensation, vision, or speech.</li>
            </ul>
            <p className="font-bold mt-3">• Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer'}}>CPR/AED</span>.</p>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: (primarySymptoms || primaryNo) ? '#9ca3af' : '#182b3c'}}>
            <div className="text-center font-bold text-gray-800 mb-3">Are there primary signs and symptoms of a stroke (see above)?</div>
            <div className="flex gap-2 justify-center">
              <button 
                onClick={() => setFlowchartPath(['primary-yes'])} 
                disabled={primarySymptoms || primaryNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(primarySymptoms, !primarySymptoms && !primaryNo)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['primary-no'])} 
                disabled={primarySymptoms || primaryNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(primaryNo, !primarySymptoms && !primaryNo)}
              >
                NO
              </button>
            </div>
          </div>
          
          {primarySymptoms && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                GET HELP AND AED.<br/>CALL 911.
              </div>
            </>
          )}
          
          {primaryNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: (additionalSymptoms || additionalNo) ? '#9ca3af' : '#182b3c'}}>
                <div className="text-center font-bold text-gray-800 mb-3">Are the following additional signs and symptoms present?</div>
                <ul className="text-sm space-y-1 list-disc list-inside mb-3">
                  <li>Altered mental status.</li>
                  <li>Seizure.</li>
                </ul>
                <div className="flex gap-2 justify-center">
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'additional-yes'])} 
                    disabled={additionalSymptoms || additionalNo}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(additionalSymptoms, !additionalSymptoms && !additionalNo)}
                  >
                    YES
                  </button>
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'additional-no'])} 
                    disabled={additionalSymptoms || additionalNo}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(additionalNo, !additionalSymptoms && !additionalNo)}
                  >
                    NO
                  </button>
                </div>
              </div>
            </>
          )}
          
          {additionalSymptoms && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                GET HELP AND AED.<br/>CALL 911.
              </div>
            </>
          )}
          
          {additionalNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md" style={{borderColor: '#182b3c'}}>
                <div className="text-center font-bold text-gray-800 mb-3">Are the following additional signs and symptoms present, accompanied by neurological symptoms?</div>
                <ul className="text-sm space-y-1 list-disc list-inside mb-3">
                  <li>Sudden severe headache.</li>
                  <li>Dizziness.</li>
                  <li>Sudden severe nausea/vomiting.</li>
                </ul>
                <div className="flex gap-2 justify-center">
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'neurological-yes'])}
                    disabled={neurologicalSymptoms}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(neurologicalSymptoms, !neurologicalSymptoms)}
                  >
                    YES
                  </button>
                </div>
              </div>
            </>
          )}
          
          {neurologicalSymptoms && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                GET HELP AND AED.<br/>CALL 911.
              </div>
            </>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 30) {
      const hasPlan = flowchartPath.includes('has-plan');
      const noPlan = flowchartPath.includes('no-plan');
      const responsive = flowchartPath.includes('responsive');
      const unresponsive = flowchartPath.includes('unresponsive');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <p>Hyperglycemia (high blood sugar) is defined as blood sugar above 240mg/dl. It usually occurs over hours or days.</p>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !hasPlan && !noPlan  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Does the student have an accessible Emergency Action/Care Plan?</div>
            <div className="flex gap-2 justify-center">
              <button 
                onClick={() => setFlowchartPath(['has-plan'])} 
                disabled={hasPlan || noPlan}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(hasPlan, !hasPlan && !noPlan)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['no-plan'])} 
                disabled={hasPlan || noPlan}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(noPlan, !hasPlan && !noPlan)}
              >
                NO
              </button>
            </div>
          </div>
          
          {hasPlan && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">Follow Emergency Action/Care Plan.</div>


            </>
          )}
          
          {noPlan && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !responsive && !unresponsive  ? "#182b3c" : "#9ca3af"}}>
                <div className="text-center font-bold text-gray-800 mb-3">Is student unresponsive?</div>
                <div className="flex gap-2 justify-center">
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'unresponsive'])} 
                    disabled={responsive || unresponsive}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(unresponsive, !responsive && !unresponsive)}
                  >
                    YES
                  </button>
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'responsive'])} 
                    disabled={responsive || unresponsive}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(responsive, !responsive && !unresponsive)}
                  >
                    NO
                  </button>
                </div>
              </div>
              
              {(unresponsive || responsive) && (
                <div className="grid grid-cols-2 gap-4 mt-4">
                  <div className="space-y-3">
                    <div className={`text-sm font-bold text-center ${unresponsive ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                    <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${unresponsive ? '' : 'opacity-40'}`}>
                      GET HELP AND AED.<br/>CALL 911.
                    </div>
                    <div className="flex justify-center"><div className={`w-1 h-8 ${unresponsive ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                    <div className={`p-4 rounded-lg shadow-md ${unresponsive ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Roll student onto left side.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      </ul>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className={`text-sm font-bold text-center ${responsive ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                    <div className={`p-4 rounded-lg shadow-md ${responsive ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Encourage water or sugar-free fluid consumption.</li>
                        <li>Notify parent or medical provider.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    // Diabetes (Low Blood Sugar) - ID 31
    if (selectedCondition.id === 31) {
      const hasPlan = flowchartPath.includes('has-plan');
      const noPlan = flowchartPath.includes('no-plan');
      const canSwallow = flowchartPath.includes('can-swallow');
      const cannotSwallow = flowchartPath.includes('cannot-swallow');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <p>Hypoglycemia (low blood sugar) is a sudden, potentially life-threatening event in a student who takes insulin. It is defined as a blood sugar level below 70mg/dl.</p>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !hasPlan && !noPlan  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Does the student have an accessible Emergency Action Plan?</div>
            <div className="flex gap-2 justify-center">
              <button 
                onClick={() => setFlowchartPath(['has-plan'])} 
                disabled={hasPlan || noPlan}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(hasPlan, !hasPlan && !noPlan)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['no-plan'])} 
                disabled={hasPlan || noPlan}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(noPlan, !hasPlan && !noPlan)}
              >
                NO
              </button>
            </div>
          </div>
          
          {hasPlan && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">Follow Emergency Action/Care Plan.</div>


            </>
          )}
          
          {noPlan && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !canSwallow && !cannotSwallow  ? "#182b3c" : "#9ca3af"}}>
                <div className="text-center font-bold text-gray-800 mb-3">Is student unresponsive or unable to swallow liquid/food?</div>
                <div className="flex gap-2 justify-center">
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'cannot-swallow'])} 
                    disabled={canSwallow || cannotSwallow}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(cannotSwallow, !canSwallow && !cannotSwallow)}
                  >
                    YES
                  </button>
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'can-swallow'])} 
                    disabled={canSwallow || cannotSwallow}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(canSwallow, !canSwallow && !cannotSwallow)}
                  >
                    NO
                  </button>
                </div>
              </div>
              
              {(canSwallow || cannotSwallow) && (
                <div className="grid grid-cols-2 gap-4 mt-4">
                  <div className="space-y-3">
                    <div className={`text-sm font-bold text-center ${cannotSwallow ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                    <div style={{ backgroundColor: "#8a2e13" }} className={`p-4 rounded-lg shadow-md text-center font-bold text-white ${cannotSwallow ? '' : 'opacity-30'}`}>
                      GET HELP AND AED.<br/>CALL 911.
                    </div>
                    <div className="flex justify-center"><div className={`w-1 h-8 ${cannotSwallow ? 'bg-gray-400' : 'bg-gray-200'}`}></div></div>
                    <div className={`p-4 rounded-lg shadow-md ${cannotSwallow ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Suspend insulin source.</li>
                        <li>Do not give anything by mouth.</li>
                        <li>Roll student onto left side.</li>
                        <li>Trained staff may give glucagon per provider's orders.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      </ul>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className={`text-sm font-bold text-center ${canSwallow ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                    <div className={`p-4 rounded-lg shadow-md ${canSwallow ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Give 15 grams of carbohydrates/sugar (Examples: 4 oz. juice, 3 tsp glucose gel, 3–4 glucose tablets).</li>
                        <li>Wait 15 minutes.</li>
                        <li>Recheck blood sugar.</li>
                        <li>Repeat treatment if not above 70mg/dl.</li>
                        <li>If above 70mg/dl provide a protein and complex carbohydrate snack if the next meal is more than 1 hour away.</li>
                        <li>If blood sugar continues to be below 70mg/dl, follow Emergency Action/Care Plan. <strong style={{color:'#8a2e13'}}>GET HELP AND AED. CALL 911</strong> if unsure.</li>
                        <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                        <li>Recheck blood sugar one hour after reaching the target range.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 13) {
      const unresponsive = flowchartPath.includes('unresponsive');
      const responsive = flowchartPath.includes('responsive');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          <div style={{ backgroundColor: "#274f73" }} className="p-4 rounded-lg shadow-md text-sm text-white">
            <p>If a spinal injury is suspected, see <span onClick={() => { const c = conditions.find(x => x.id === 5); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Back and Neck Injuries</span>.</p>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div style={{ backgroundColor: "#8a2e13" }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
            GET HELP AND AED.<br/>CALL 911.
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
            <ul className="text-sm space-y-1 list-disc list-inside">
              <li>Remove student from water.</li>
              <li>Begin <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
              <li>Consider hypothermia.</li>
              <li>Remove wet clothing.</li>
              <li>Provide privacy; keep student warm.</li>
            </ul>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !unresponsive && !responsive  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Is student unresponsive or not breathing?</div>
            <div className="flex gap-2 justify-center">
              <button 
                onClick={() => setFlowchartPath(['unresponsive'])} 
                disabled={unresponsive || responsive}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(unresponsive, !unresponsive && !responsive)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['responsive'])} 
                disabled={unresponsive || responsive}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(responsive, !unresponsive && !responsive)}
              >
                NO
              </button>
            </div>
          </div>
          
          {(unresponsive || responsive) && (
            <div className="grid grid-cols-2 gap-4 mt-4">
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${unresponsive ? 'text-gray-800' : 'text-gray-400'}`}>YES ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${unresponsive ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Continue <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span> until medical team arrives.</li>
                  </ul>
                </div>
              </div>
              <div className="space-y-3">
                <div className={`text-sm font-bold text-center ${responsive ? 'text-gray-800' : 'text-gray-400'}`}>NO ↓</div>
                <div className={`p-4 rounded-lg shadow-md ${responsive ? '' : 'opacity-40'}`} style={{ backgroundColor: '#eee6df' }}>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Monitor student for any changes in symptoms until medical team arrives.</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
          
          <div style={{ backgroundColor: '#274f73' }} className="p-4 rounded text-sm mt-6 text-white">
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 12) {
      const ageGroup = flowchartPath.includes('infant') || flowchartPath.includes('child-adult');
      const infant = flowchartPath.includes('infant');
      const childAdult = flowchartPath.includes('child-adult');
      const aedStep = flowchartPath.includes('aed');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          <div className={`p-4 rounded-lg shadow-md text-center font-bold ${flowchartPath.length === 0 ? 'bg-sky-400 text-white ring-4 ring-sky-600' : 'bg-sky-200 text-gray-700'}`}>Person is unresponsive, not breathing, or only gasping</div>
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          <div className={`bg-white border-4 p-4 rounded-lg shadow-md border-active`} style={{borderColor: !ageGroup  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Age of person?</div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setFlowchartPath(['infant'])} disabled={ageGroup} className={`px-6 py-2 rounded font-semibold ${infant ? 'bg-purple-500 text-white' : !ageGroup ? 'bg-gray-200 hover:bg-purple-100' : 'bg-gray-200 text-gray-400'}`}>Infant<br/>(Birth-12 months)</button>
              <button onClick={() => setFlowchartPath(['child-adult'])} disabled={ageGroup} className="px-6 py-2 rounded font-semibold" style={btnStyle(childAdult, !ageGroup)}>Child/Adult<br/>(1 year+)</button>
            </div>
          </div>
          {infant && (
            <div className="space-y-3">
              <div className="text-sm font-bold text-center text-purple-600">Infant CPR (Birth to 12 months) ↓</div>
              <div className="bg-purple-100 border-2 border-purple-400 p-4 rounded-lg">
                <div className="font-bold mb-3 text-center text-purple-900">CPR Steps - Continue until EMS arrives:</div>
                <div className="space-y-2 text-sm text-gray-800">
                  <div className="p-2 bg-white rounded font-semibold">1. Ensure face up on firm, flat surface</div>
                  <div className="p-2 bg-white rounded font-semibold">2. Give 30 chest compressions</div>
                  <div className="p-2 bg-white rounded">• Push hard and fast in center of chest</div>.
                  <div className="p-2 bg-white rounded">• Depth: At least 1.5 inches (4cm)</div>.
                  <div className="p-2 bg-white rounded">• Rate: 100-120 compressions per minute</div>.
                  <div className="p-2 bg-white rounded font-semibold">3. Give 2 rescue breaths</div>
                  <div className="p-2 bg-white rounded">• Put head in neutral position</div>.
                  <div className="p-2 bg-white rounded">• Seal over infant's nose AND mouth</div>.
                  <div className="p-2 bg-white rounded">• Use barrier device if available</div>.
                  <div className="p-2 bg-white rounded">• Each breath about 1 second</div>.
                  <div className="p-2 bg-white rounded">• Ensure chest rises</div>.
                  <div className="p-2 bg-white rounded font-semibold">4. Continue 30 compressions + 2 breaths</div>
                </div>
              </div>
              <button onClick={() => setFlowchartPath([...flowchartPath, 'aed'])} className="w-full px-4 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-bold">
                When AED arrives →
              </button>
            </div>
          )}
          {childAdult && (
            <div className="space-y-3">
              <div className="text-sm font-bold text-center text-blue-600">Child/Adult CPR (1 Year+) ↓</div>
              <div className="bg-blue-100 border-2 border-blue-400 p-4 rounded-lg">
                <div className="font-bold mb-3 text-center text-blue-900">CPR Steps - Continue until EMS arrives:</div>
                <div className="space-y-2 text-sm text-gray-800">
                  <div className="p-2 bg-white rounded font-semibold">1. Ensure face up on firm, flat surface</div>
                  <div className="p-2 bg-white rounded font-semibold">2. Give 30 chest compressions</div>
                  <div className="p-2 bg-white rounded">• Push hard and fast in center of chest</div>.
                  <div className="p-2 bg-white rounded">• Depth: At least 2 inches (5cm)</div>.
                  <div className="p-2 bg-white rounded">• Rate: 100-120 compressions per minute</div>.
                  <div className="p-2 bg-white rounded font-semibold">3. Give 2 rescue breaths</div>
                  <div className="p-2 bg-white rounded">• Tilt head back, pinch nose shut</div>.
                  <div className="p-2 bg-white rounded">• Complete seal over person's mouth</div>.
                  <div className="p-2 bg-white rounded">• Use barrier device if available</div>.
                  <div className="p-2 bg-white rounded">• Each breath about 1 second</div>.
                  <div className="p-2 bg-white rounded">• Ensure chest rises</div>.
                  <div className="p-2 bg-white rounded font-semibold">4. Continue 30 compressions + 2 breaths</div>
                  <div className="p-2 bg-yellow-100 rounded border border-yellow-400 mt-2">If unable to give rescue breaths, continue chest compressions only (Hands-Only CPR)</div>
                </div>
              </div>
              <button onClick={() => setFlowchartPath([...flowchartPath, 'aed'])} className="w-full px-4 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-bold">
                When AED arrives →
              </button>
            </div>
          )}
          {aedStep && (
            <div className="space-y-3 mt-4">
              <div className="text-sm font-bold text-center text-yellow-700">AED (Automated External Defibrillator) ↓</div>
              <div className="bg-yellow-100 border-2 border-yellow-400 p-4 rounded-lg">
                <div className="font-bold mb-3 text-center text-yellow-900">AED Steps:</div>
                <div className="space-y-2 text-sm text-gray-800">
                  <div className="p-2 bg-white rounded font-semibold">1. Turn AED on - Follow prompts</div>
                  <div className="p-2 bg-white rounded font-semibold">2. Remove all clothing from chest</div>
                  <div className="p-2 bg-white rounded">• Wipe chest dry if necessary</div>.
                  <div className="p-2 bg-white rounded font-semibold">3. Attach pads to bare chest</div>
                  <div className="p-2 bg-white rounded">• Follow instructions on pads</div>.
                  <div className="p-2 bg-white rounded">• Pediatric pads for children ≤8 years old</div>.
                  <div className="p-2 bg-white rounded">• If no pediatric pads: Use adult pads (DO NOT let them touch)</div>.
                  <div className="p-2 bg-white rounded">• For small children: One pad on chest, one on back</div>.
                  <div className="p-2 bg-white rounded font-semibold">4. Plug pad connector into AED if needed</div>
                  <div className="p-2 bg-white rounded font-semibold">5. AED will analyze heart rhythm</div>
                  <div className="p-2 bg-white rounded font-semibold">6. If shock needed:</div>
                  <div className="p-2 bg-white rounded">• Ensure NO ONE touching person</div>.
                  <div className="p-2 bg-white rounded">• Press shock button</div>.
                  <div className="p-2 bg-white rounded">• Immediately resume CPR</div>.
                  <div className="p-2 bg-white rounded font-semibold">7. If no shock needed:</div>
                  <div className="p-2 bg-white rounded">• Resume CPR immediately</div>.
                  <div className="p-2 bg-white rounded font-semibold">8. Continue following AED prompts</div>
                  <div className="p-2 bg-white rounded">• Keep going until person responsive or EMS takes over</div>.
                </div>
              </div>
            </div>
          )}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Despite excellent efforts, survival rates from pediatric cardiac arrest remain very low. Unsuccessful resuscitation is traumatic - ensure all responding personnel receive appropriate support resources. Inform parent/guardian.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 14) {
      const chemicalYes = flowchartPath.includes('chemical-yes');
      const chemicalNo = flowchartPath.includes('chemical-no');
      const penetratingYes = flowchartPath.includes('penetrating-yes');
      const penetratingNo = flowchartPath.includes('penetrating-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">For any chemical in the eye, have someone call the Poison Center, 1-800-222-1222.</p>
            <p className="font-semibold">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* FLOWCHART STARTS - First decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md mt-6 border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Is there a chemical in the eye?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['chemical-yes'])} 
                disabled={chemicalYes || chemicalNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(chemicalYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['chemical-no'])} 
                disabled={chemicalYes || chemicalNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(chemicalNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* Chemical YES - automatically show both boxes */}
          {chemicalYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              <div className="grid grid-cols-2 gap-4">
                <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                  <p className="font-semibold mb-2 text-sm">Chemical in the Eye</p>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Instruct student not to rub the eye.</li>
                    <li>Flush with running water or saline solution into inside corner of the eye (by the nose) continuously until the emergency medical team arrives.</li>
                  </ul>
                </div>
                
                <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                  <p className="font-semibold mb-2 text-sm">Penetrating Object in the Eye</p>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Keep student still and lying flat on back, if possible.</li>
                    <li>Do not remove object. May immobilize object.</li>
                    <li>Never put pressure on the eye.</li>
                    <li>Cover injured eye with an eye shield or small paper cup and anchor in place.</li>
                    <li>Patch other eye to minimize eye movement.</li>
                  </ul>
                </div>
              </div>
            </>
          )}
          
          {/* Chemical NO - show second decision */}
          {chemicalNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !penetratingYes && !penetratingNo  ? "#182b3c" : "#9ca3af"}}>
                <div className="text-center font-bold text-gray-800 mb-4">Is there a penetrating object in the eye?</div>
                <div className="flex gap-3 justify-center">
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'penetrating-yes'])} 
                    disabled={penetratingYes || penetratingNo}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(penetratingYes, !penetratingYes && !penetratingNo)}
                  >
                    YES
                  </button>
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'penetrating-no'])} 
                    disabled={penetratingYes || penetratingNo}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(penetratingNo, !penetratingYes && !penetratingNo)}
                  >
                    NO
                  </button>
                </div>
              </div>
              
              {/* Penetrating YES */}
              {penetratingYes && (
                <>
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                  <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
                  
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                  
                  <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                    <p className="font-semibold mb-2 text-sm">Penetrating Object in the Eye</p>
                    <ul className="text-sm space-y-1 list-disc list-inside">
                      <li>Keep student still and lying flat on back, if possible.</li>
                      <li>Do not remove object. May immobilize object.</li>
                      <li>Never put pressure on the eye.</li>
                      <li>Cover injured eye with an eye shield or small paper cup and anchor in place.</li>
                      <li>Patch other eye to minimize eye movement.</li>
                    </ul>
                  </div>
                </>
              )}
              
              {/* Penetrating NO - Minor injuries */}
              {penetratingNo && (
                <>
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                  
                  <div className="grid grid-cols-3 gap-4">
                    {/* Cuts to Eye or Eye Lid */}
                    <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                      <p className="font-semibold mb-2 text-sm">Cuts to Eye or Eye Lid</p>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Cover eye with gauze pad.</li>
                        <li>Do not flush the eye with water.</li>
                        <li>Do not apply pressure and do not apply any medicine, drops, or ointment.</li>
                        <li>Refer to healthcare provider.</li>
                      </ul>
                    </div>
                    
                    {/* Minor Bruising */}
                    <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                      <p className="font-semibold mb-2 text-sm">Minor Bruising</p>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Apply a cold pack wrapped in a cloth to protect skin.</li>
                      </ul>
                    </div>
                    
                    {/* Small Object in Eye */}
                    <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                      <p className="font-semibold mb-2 text-sm">Small Object in Eye (i.e. dust/hair)</p>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Remove contact lens, if present.</li>
                        <li>Gently pull down lower eyelid while the student looks up, down, and side to side.</li>
                        <li>If the object remains, flush eye with lukewarm water.</li>
                      </ul>
                    </div>
                  </div>
                </>
              )}
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 15) {
      const unresponsive = flowchartPath.includes('unresponsive');
      const responsive = flowchartPath.includes('responsive');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box - NOT part of flow */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold text-center">Fainting is a temporary loss of consciousness.</p>
            <p className="font-semibold text-center">A healthcare provider should be consulted for any student who loses consciousness.</p>
          </div>
          
          {/* FLOWCHART STARTS HERE - First cream box */}
          <div className="p-4 rounded-lg shadow-md mt-6" style={{ backgroundColor: '#eee6df' }}>
            <p className="text-sm font-semibold">Lay student on their back with legs elevated.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Is student unresponsive and/or not breathing?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['unresponsive'])} 
                disabled={unresponsive || responsive}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(unresponsive, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['responsive'])} 
                disabled={unresponsive || responsive}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(responsive, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {responsive && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Loosen tight clothing.</li>
                  <li>Apply cool washcloth to forehead.</li>
                  <li>Follow Emergency Action/Care Plans for student.</li>
                  <li>Document what happened, how long student was unconscious, possible causes, and other signs or symptoms.</li>
                  <li>Do not allow student to stand immediately following a fainting episode.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path */}
          {unresponsive && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream box with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Begin <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span> until student becomes responsive or emergency medical team arrives.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 16) {
      const heatStroke = flowchartPath.includes('heat-stroke');
      const heatExhaustion = flowchartPath.includes('heat-exhaustion');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p>Heat-related injuries can develop when students are exposed to hot temperatures, actively playing, sweating, or overly clothed.</p>
          </div>
          
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !heatStroke && !heatExhaustion  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-3">Are signs of heat stroke present?</div>
            <div className="bg-white p-3 rounded mb-3 text-sm">
              <ul className="text-left space-y-1">
                <li>• Flushed, hot DRY skin.</li>
                <li>• Confusion or disorientation.</li>
                <li>• Unresponsiveness.</li>
                <li>• High body temperature (104°F or higher)</li>
                <li>• Progression to seizures, stroke or cardiac arrest.</li>
              </ul>
            </div>
            <div className="flex gap-2 justify-center">
              <button 
                onClick={() => setFlowchartPath(['heat-stroke'])} 
                disabled={heatStroke || heatExhaustion}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(heatStroke, !heatStroke && !heatExhaustion)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['heat-exhaustion'])} 
                disabled={heatStroke || heatExhaustion}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(heatExhaustion, !heatStroke && !heatExhaustion)}
              >
                NO
              </button>
            </div>
          </div>
          
          {heatStroke && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <div className="font-bold mb-2">Heat Stroke</div>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Move student to cool location.</li>
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  <li>Remove outer clothing.</li>
                  <li>Cool skin with water or wet cloths.</li>
                  <li>Direct a fan towards student.</li>
                  <li>Put ice packs, wrapped in cloths, in armpit and groin areas.</li>
                  <li>Do not try to give fluids by mouth.</li>
                </ul>
              </div>
            </>
          )}
          
          {heatExhaustion && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <div className="font-bold mb-2">Heat Exhaustion</div>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Move student to cool location.</li>
                  <li>Remove outer clothing.</li>
                  <li>Cool skin with water or wet cloths.</li>
                  <li>Direct a fan towards student.</li>
                  <li>Give small sips of water.</li>
                  <li>Advise parent or legal guardian to consult with medical provider.</li>
                  <li>If student does not improve or cannot drink fluids, <strong style={{color:'#8a2e13'}}>GET HELP AND AED. CALL 911.</strong></li>
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                </ul>
              </div>
            </>
          )}
          
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 17) {
      const hypothermiaPresent = flowchartPath.includes('hypothermia-yes');
      const hypothermiaNotPresent = flowchartPath.includes('hypothermia-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">A student with hypothermia has a dangerously low body temperature.</p>
            <p className="font-semibold mb-1">Signs/Symptoms of hypothermia:</p>
            <ul className="list-disc list-inside space-y-1">
              <li>Temperature below 95°F.</li>
              <li>Loss of fine or gross motor skills.</li>
              <li>Confusion.</li>
              <li>Loss of shivering.</li>
            </ul>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Are signs of hypothermia present?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['hypothermia-yes'])} 
                disabled={hypothermiaPresent || hypothermiaNotPresent}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(hypothermiaPresent, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['hypothermia-no'])} 
                disabled={hypothermiaPresent || hypothermiaNotPresent}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(hypothermiaNotPresent, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path - cream box with warming actions */}
          {hypothermiaNotPresent && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Move student to a warm room.</li>
                  <li>Remove all wet clothing and replace with dry clothing, hat, and blankets.</li>
                  <li>Monitor for signs of hypothermia.</li>
                </ul>
              </div>
              
              {/* Frostbite info box */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <p className="font-semibold mb-2 text-sm">Signs of Frostbite:</p>
                <p className="text-sm mb-2">An area of the body is red, pale, swollen, or has blisters and doesn't return to normal after rewarming.</p>
                <p className="font-semibold mb-2 text-sm">If above symptoms are present:</p>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Warm affected area slowly.</li>
                  <li>Do not rub.</li>
                  <li>Do not break blisters. Bandage broken blisters.</li>
                  <li>If toes or fingers are damaged, put dry gauze between them.</li>
                  <li>Advise parent or legal guardian to consult with medical provider.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path - red CALL 911 box */}
          {hypothermiaPresent && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream box with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  <li>Bring student to a warm room.</li>
                  <li>Remove all wet clothing and replace with dry clothing, hat, and blankets.</li>
                  <li>Give high-sugar, warm oral fluids, if tolerated and alert.</li>
                  <li>Do not rub affected area.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 18) {
      const signsPresent = flowchartPath.includes('signs-yes');
      const signsNotPresent = flowchartPath.includes('signs-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-3">Signs/Symptoms of a broken or dislocated jaw include:</p>
            <div className="grid grid-cols-2 gap-2 mb-3">
              <ul className="space-y-1">
                <li>• Severe jaw pain.</li>
                <li>• Swelling.</li>
                <li>• Bruising.</li>
                <li>• Bleeding.</li>
                <li>• Distorted or misaligned jawline.</li>
              </ul>
              <ul className="space-y-1">
                <li>• Loose or damaged teeth.</li>
                <li>• Trouble speaking or closing the mouth.</li>
                <li>• Drooling.</li>
                <li>• Numbness.</li>
                <li>• Pain near the ear.</li>
              </ul>
            </div>
            <p className="font-semibold mt-3">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Are any signs of a broken or dislocated jaw present?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['signs-yes'])} 
                disabled={signsPresent || signsNotPresent}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(signsPresent, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['signs-no'])} 
                disabled={signsPresent || signsNotPresent}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(signsNotPresent, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {signsNotPresent && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Monitor student for discomfort, swelling, or bleeding.</li>
                  <li>Apply a cold pack wrapped in a cloth to protect skin.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path */}
          {signsPresent && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream box with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  <li>Keep student in a seated position.</li>
                  <li>Apply a cold pack wrapped in a cloth to protect skin.</li>
                  <li>Encourage student to remain still.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 19) {
      const threatYes = flowchartPath.includes('threat-yes');
      const threatNo = flowchartPath.includes('threat-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold text-center">A mental health emergency involves the threat of imminent harm to self or others and/or harmful actions already taken.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Is there a threat of imminent harm to self or others?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['threat-yes'])} 
                disabled={threatYes || threatNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(threatYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['threat-no'])} 
                disabled={threatYes || threatNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(threatNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* YES path */}
          {threatYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                Get help.<br/>Call 911 or<br/>Maine Crisis Line:<br/>1-888-568-1112.
              </div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream boxes with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Follow school crisis plan.</li>
                  <li>Ensure other students' safety, with help from school security or other colleagues if possible.</li>
                  <li>Keep the student in sight.</li>
                  <li>Remove harmful objects from environment.</li>
                  <li>Maintain a caring, calm, and nonjudgmental approach.</li>
                  <li>Seek help from colleagues who can provide crisis intervention or first aid.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* NO path */}
          {threatNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Keep the student in sight.</li>
                  <li>Seek help from a colleague with expertise in mental health, like a school nurse, counselor, social worker, psychologist, or administrator.</li>
                  <li>If injuries are present, provide first aid: Wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin. If wounds are significant, see <span onClick={() => { const c = conditions.find(x => x.id === 7); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Bleeding</span>.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Blue coordination box at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">Coordinate with administration, a mental health professional, and/or the school nurse to determine the most appropriate notifications per local protocol.</p>
            <p className="font-semibold">Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 20) {
      const stoppedYes = flowchartPath.includes('stopped-yes');
      const stoppedNo = flowchartPath.includes('stopped-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">Students with bleeding disorders may not respond to basic first aid treatment and should have an Emergency Action/Care Plan. Follow the plan.</p>
            <p className="font-semibold">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Cream box with initial actions */}
          <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
            <ul className="text-sm space-y-1 list-disc list-inside">
              <li>Keep student sitting upright.</li>
              <li>Gently pinch soft parts of nose together. If possible, have student do this.</li>
              <li>Have student lean forward. Do not tilt head back.</li>
              <li>Hold for <strong>15 minutes</strong>.</li>
              <li>If available, place a cold pack or ice bag wrapped in a cloth on the nose and cheeks.</li>
            </ul>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Has bleeding stopped after <strong>15 minutes</strong>?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['stopped-yes'])} 
                disabled={stoppedYes || stoppedNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(stoppedYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['stopped-no'])} 
                disabled={stoppedYes || stoppedNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(stoppedNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {stoppedNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Reapply pressure.</li>
                  <li>Consult the student's parent or legal guardian, or medical provider.</li>
                  <li>If unable to reach parent or legal guardian and bleeding continues for <strong>30 minutes</strong>, <strong style={{color:'#8a2e13'}}>GET HELP AND AED. CALL 911.</strong></li>
                  <li>If nosebleed is due to trauma, seek medical attention if there is visual nasal deformity, swelling, or if the student exhibits signs of a possible concussion. See <span onClick={() => { const c = conditions.find(x => x.id === 11); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>Head Injury / Suspected Concussion</span>.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path */}
          {stoppedYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Have student wash hands.</li>
                  <li>Clean and disinfect any contaminated surfaces.</li>
                  <li>Advise student to avoid blowing nose.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 21) {
      const swallowedInhaled = flowchartPath.includes('swallowed-inhaled');
      const poisonousPlants = flowchartPath.includes('poisonous-plants');
      const unresponsive = flowchartPath.includes('unresponsive');
      const responsive = flowchartPath.includes('responsive');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold text-center">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* First decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Was the substance swallowed or inhaled?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['swallowed-inhaled'])} 
                disabled={swallowedInhaled || poisonousPlants}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(swallowedInhaled, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['poisonous-plants'])} 
                disabled={swallowedInhaled || poisonousPlants}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(poisonousPlants, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path - Poisonous Plants */}
          {poisonousPlants && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <p className="font-semibold mb-2 text-sm">Poisonous Plants</p>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Remove plant oil with soap and water.</li>
                  <li>Remove exposed clothing, and place in a plastic bag.</li>
                  <li>Watch for signs of an allergic reaction.</li>
                  <li>If possible, save a sample of the plant.</li>
                  <li>Advise parent or legal guardian to consult with medical provider if exposure involves the eyes, face, genitals, or mucous membranes.</li>
                  <li><strong style={{color:'#8a2e13'}}>Call the Poison Center, 1-800-222-1222.</strong></li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path - Swallowed or Inhaled */}
          {swallowedInhaled && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Second decision diamond */}
              <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: !unresponsive && !responsive  ? "#182b3c" : "#9ca3af"}}>
                <div className="text-center font-bold text-gray-800 mb-4">Is student unresponsive?</div>
                <div className="flex gap-3 justify-center">
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'unresponsive'])} 
                    disabled={unresponsive || responsive}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(unresponsive, !unresponsive && !responsive)}
                  >
                    YES
                  </button>
                  <button 
                    onClick={() => setFlowchartPath([...flowchartPath, 'responsive'])} 
                    disabled={unresponsive || responsive}
                    className="px-6 py-2 rounded font-semibold" style={btnStyle(responsive, !unresponsive && !responsive)}
                  >
                    NO
                  </button>
                </div>
              </div>
              
              {/* Responsive path (NO) */}
              {responsive && (
                <>
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                  <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                    Call the Poison Center:<br/>1-800-222-1222
                  </div>
                </>
              )}
              
              {/* Unresponsive path (YES) */}
              {unresponsive && (
                <>
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                  <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                    GET HELP AND AED.<br/>CALL 911.
                  </div>
                </>
              )}
              
              {/* Common actions for both responsive and unresponsive */}
              {(responsive || unresponsive) && (
                <>
                  <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
                  <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                    <p className="font-semibold mb-2 text-sm">Swallowed or Inhaled Poison</p>
                    <ul className="text-sm space-y-1 list-disc list-inside">
                      <li>Secure scene for safety.</li>
                      <li>Remove suspected source of poisoning or relocate student to fresh air. If gas is the suspected source, do not enter.</li>
                      <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                      <li>Place student on their left side.</li>
                      <li>Do not administer anything by mouth unless advised to do so by Poison Control or EMS.</li>
                      <li>If possible, send containers of suspected medication ingested with EMS and a copy of the SDS sheet.</li>
                    </ul>
                  </div>
                </>
              )}
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 26) {
      const severeYes = flowchartPath.includes('severe-yes');
      const severeNo = flowchartPath.includes('severe-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">Signs/Symptoms of Pregnancy Complications or Miscarriage:</p>
            <ul className="space-y-1 list-disc list-inside">
              <li>Pain, cramping, fever, fainting or dizziness.</li>
              <li>Vaginal spotting or bleeding that may be light to heavy.</li>
              <li>Clear drainage. (amniotic fluid)</li>
            </ul>
            <p className="font-semibold mt-3">A miscarriage may happen over several days and may not be just one event.</p>
            <p className="font-semibold mt-2">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Is there heavy bleeding, clear drainage, and/or severe pain?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['severe-yes'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['severe-no'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {severeNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Refer to a medical provider for any abnormal discomfort, bleeding, or other possible complications.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path */}
          {severeYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">
                GET HELP AND AED.<br/>CALL 911.
              </div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream box with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Monitor student until emergency medical team arrives.</li>
                </ul>
              </div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Additional info box */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <p className="font-semibold mb-2 text-sm">If delivery begins before help arrives:</p>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Allow the mother to deliver where she is, if it is safe.</li>
                  <li>Provide clean cloths for hygiene and to protect the mother and baby.</li>
                  <li>Assist with baby's emergence, guiding the head and shoulders out. Do not pull on baby.</li>
                  <li>If the umbilical cord is wrapped around the baby's neck or body, carefully unloop.</li>
                  <li>Once the baby is born, rub vigorously to stimulate breathing. Keep the baby warm/dry.</li>
                  <li>If the baby is not breathing, begin <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Coordination box at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">Coordinate with administration and/or the school nurse to determine the most appropriate notifications per local protocol.</p>
            <p className="font-semibold">Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 22) {
      const emergencyYes = flowchartPath.includes('emergency-yes');
      const emergencyNo = flowchartPath.includes('emergency-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-3">A student who is diagnosed with epilepsy should have an Emergency Action/Care Plan (ECP) that should outline the parameters of what constitutes an emergency. Follow the plan. If unsure, <strong style={{textDecoration:'underline'}}>GET HELP AND AED. CALL 911.</strong></p>
            <p className="font-semibold mb-2">Signs/Symptoms of a Seizure Emergency:</p>
            <ul className="space-y-1 list-disc list-inside">
              <li>The student has never had a seizure before.</li>
              <li>Infant under 6 months old.</li>
              <li>The seizure occurs in water.</li>
              <li>The student has trouble breathing.</li>
              <li>The student is seriously injured.</li>
              <li>The seizure lasts for more than 5 minutes or as indicated in the student's ECP.</li>
              <li>Another seizure starts soon after the first.</li>
            </ul>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Cream box with care actions */}
          <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
            <ul className="text-sm space-y-1 list-disc list-inside">
              <li>Follow Emergency Action/Care Plan, if available.</li>
              <li>Stay with student; provide privacy.</li>
              <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
              <li>Move or guide student away from harm.</li>
              <li>Loosen clothing, put nothing in mouth, remove harmful objects, and never restrain.</li>
              <li>Lay student on left side, protect head with a towel, blanket, or clothing.</li>
              <li>Time the seizure and note body parts affected.</li>
              <li>Let the student rest while lying on their side after the seizure.</li>
            </ul>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Are there signs of a seizure emergency (see above)?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['emergency-yes'])} 
                disabled={emergencyYes || emergencyNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(emergencyYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['emergency-no'])} 
                disabled={emergencyYes || emergencyNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(emergencyNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {emergencyNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <p className="text-sm">Seizure has ended or is ending. Continue care and monitoring.</p>
              </div>
            </>
          )}
          
          {/* YES path */}
          {emergencyYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    if (selectedCondition.id === 27) {
      const severeYes = flowchartPath.includes('severe-yes');
      const severeNo = flowchartPath.includes('severe-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">Students with bleeding disorders may not respond to basic first aid treatment and should have an Emergency Action/Care Plan. Follow the plan.</p>
            <p className="font-semibold">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Is a puncture wound to the head, genitals, eyes, neck or chest? Is bleeding heavy (pooling or spurting) or are there signs of severe injury?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['severe-yes'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['severe-no'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {severeNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Apply direct pressure with bandage.</li>
                  <li>When bleeding stops, remove bandage slowly and provide first aid: wash minor wounds, cover with a bandage, apply a cold pack wrapped in a cloth to protect skin.</li>
                  <li>Cover open sores with a bandage taped on all sides, when possible.</li>
                  <li>Advise parent or legal guardian to consult with healthcare provider for a puncture wound or an open wound.</li>
                  <li>Clean and disinfect any contaminated surfaces.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path */}
          {severeYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream box with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Do not remove an embedded object.</li>
                  <li>Apply direct pressure with a bandage until the emergency medical team arrives. <strong>Do not remove bandage. Add more if needed.</strong></li>
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                  <li>Elevate bleeding area above level of heart, if possible.</li>
                  <li>If bleeding continues, apply tourniquet if trained.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 24) {
      const severeYes = flowchartPath.includes('severe-yes');
      const severeNo = flowchartPath.includes('severe-no');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold mb-2">Signs/Symptoms:</p>
            <ul className="space-y-1 list-disc list-inside">
              <li>Breathing that is slow or absent.</li>
              <li>Blue or ashen lips, skin, and/or nail beds.</li>
              <li>Unresponsiveness.</li>
              <li>Dilated or constricted pupils.</li>
            </ul>
            <p className="mt-3 font-semibold">Narcan/Naloxone: <a href="https://www.youtube.com/watch?v=aFUDR9Fo0-E" target="_blank" rel="noreferrer" style={{color:'#42c3f7', textDecoration:'underline'}}>US CDC Video Instructions</a></p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Are signs of severe alcohol or drug use present?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['severe-yes'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeYes, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['severe-no'])} 
                disabled={severeYes || severeNo}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(severeNo, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path */}
          {severeNo && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Get help.</li>
                  <li>Monitor student.</li>
                  <li>Do not leave student alone.</li>
                  <li>Roll to their side, if possible.</li>
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* YES path */}
          {severeYes && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div style={{ backgroundColor: '#8a2e13' }} className="p-4 rounded-lg shadow-md text-center font-bold text-white">GET HELP AND AED.<br/>CALL 911.</div>
              
              {/* Connector line */}
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Cream box with emergency actions */}
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <p className="text-sm font-semibold mb-2">If opioid overdose is suspected, a trained staff member should administer naloxone, if available:</p>
                <ul className="text-sm space-y-1 list-disc list-inside ml-4">
                  <li>Insert tip into either nostril.</li>
                  <li>Depress plunger to administer full dose.</li>
                  <li>Roll to thier side, if possible.</li>
                  <li>A second dose may be needed.</li>
                  <li>Do not leave student alone.</li>
                  <li>Be prepared to perform <span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span>.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }
    if (selectedCondition.id === 25) {
      const toothOut = flowchartPath.includes('tooth-out');
      const toothNotOut = flowchartPath.includes('tooth-not-out');
      
      return (
        <div className="space-y-4">
          {flowchartPath.length > 0 && (
            <button onClick={() => setFlowchartPath([])} className="mb-4 px-4 py-2 bg-gray-500 text-white rounded-lg">Reset Flowchart</button>
          )}
          
          {/* Light blue info box */}
          <div className="p-4 rounded-lg shadow-md text-sm text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-semibold text-center">Wash hands and wear non-latex disposable gloves following standard blood and body fluid exposure precautions.</p>
          </div>
          
          {/* Connector line */}
          <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
          
          {/* Decision diamond */}
          <div className={`bg-white border-4 p-6 rounded-lg shadow-md mx-auto max-w-md border-active`} style={{borderColor: flowchartPath.length === 0  ? "#182b3c" : "#9ca3af"}}>
            <div className="text-center font-bold text-gray-800 mb-4">Did a tooth fall out or is it missing?</div>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setFlowchartPath(['tooth-out'])} 
                disabled={toothOut || toothNotOut}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(toothOut, flowchartPath.length === 0)}
              >
                YES
              </button>
              <button 
                onClick={() => setFlowchartPath(['tooth-not-out'])} 
                disabled={toothOut || toothNotOut}
                className="px-6 py-2 rounded font-semibold" style={btnStyle(toothNotOut, flowchartPath.length === 0)}
              >
                NO
              </button>
            </div>
          </div>
          
          {/* NO path - Broken or Displaced Tooth */}
          {toothNotOut && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              
              {/* Two columns for Broken Tooth and Displaced Tooth */}
              <div className="grid grid-cols-2 gap-4">
                {/* Broken Tooth */}
                <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                  <p className="font-semibold mb-2 text-sm">Broken Tooth</p>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Clean gently with warm water.</li>
                    <li>Cover the edge of the tooth with gauze.</li>
                    <li>Apply a cold pack wrapped in a cloth to protect skin.</li>
                    <li>Save tooth fragment. Place in water and send with student to the dentist.</li>
                  </ul>
                </div>
                
                {/* Displaced Tooth */}
                <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                  <p className="font-semibold mb-2 text-sm">Displaced Tooth</p>
                  <ul className="text-sm space-y-1 list-disc list-inside">
                    <li>Position student with head tilted forward, to prevent choking.</li>
                    <li>Rinse mouth with water.</li>
                    <li>Have student bite down on a wad of gauze.</li>
                    <li>Apply a cold pack wrapped in a cloth to protect skin.</li>
                    <li>Advise parent or legal guardian to consult with dentist as soon as possible.</li>
                  </ul>
                </div>
              </div>
            </>
          )}
          
          {/* YES path - Permanent/Adult Tooth Knocked Out */}
          {toothOut && (
            <>
              <div className="flex justify-center"><div className="w-1 h-8 bg-gray-400"></div></div>
              <div className="p-4 rounded-lg shadow-md" style={{ backgroundColor: '#eee6df' }}>
                <p className="font-semibold mb-2 text-sm">Permanent/Adult Tooth Knocked Out</p>
                <ul className="text-sm space-y-1 list-disc list-inside">
                  <li>Find the tooth, if possible.</li>
                  <li>Only handle the tooth by its crown.</li>
                  <li>Rinse tooth with water, if dirty.</li>
                  <li>Place the tooth back into its socket.</li>
                  <li>Have student hold the tooth in place with clean gauze.</li>
                  <li>If the tooth cannot be reinserted, see overview for storage options. Use cling film if no other option is available.</li>
                  <li>Apply gentle pressure on the socket if bleeding continues.</li>
                  <li>Refer to an emergency dentist.</li>
                </ul>
              </div>
            </>
          )}
          
          {/* Important Note at bottom */}
          <div className="p-4 rounded text-sm mt-6 text-white" style={{ backgroundColor: '#274f73' }}>
            <p className="font-bold text-base mb-2 text-center">IMPORTANT NOTE</p>
            <p>Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol. Document any care provided.</p>
          </div>
        </div>
      );
    }

    return (
      <div className="whitespace-pre-wrap text-gray-700 leading-relaxed">
        {selectedCondition.overview.split('\n').map((line, i) => renderOverviewLine(line, i))}
      </div>
    );
  };

  const renderOverviewLine = (line, i) => {
    const t2 = line.trim(); const uc = (t2.match(/[A-Z]/g)||[]).length; const lc = (t2.match(/[a-zA-Z]/g)||[]).length; const isHeader = lc > 0 && uc/lc > 0.8 && t2.length > 2 && t2.charAt(0) !== '•' && t2.charAt(0) !== '<' && t2.charAt(0) !== '(';
    if (isHeader) return <div key={i} className="font-extrabold text-lg mt-4 mb-2 pt-4 border-t border-gray-300">{line}</div>;
    if (line.indexOf('GET HELP AND AED. CALL 911') !== -1) {
      const idx = line.indexOf('GET HELP AND AED. CALL 911');
      const before = line.substring(0, idx);
      const after = line.substring(idx + 26);
      const renderAfter = (str) => {
        if (!str || str.indexOf('<strong>') === -1) return str || '\u00A0';
        const parts = str.split(/<strong>|<\/strong>/);
        return parts.map((p, j) => { if (j % 2 === 1) { const isPhone = p.indexOf('1-800-222-1222') !== -1 || p.indexOf('1-888-568-1112') !== -1 || p.indexOf('988') !== -1; return <strong key={j} style={isPhone ? {color:'#8a2e13'} : {}}>{p}</strong>; } return p; });
      };
      return <div key={i}>{before}<strong style={{color:'#8a2e13'}}>GET HELP AND AED. CALL 911</strong>{renderAfter(after)}</div>;
    }
    if (line.indexOf('[[') !== -1) {
      const parts = line.split(/\[\[([^|\]]+)\|(\d+)\]\]/);
      return <div key={i}>{parts.map((p, j) => {
        if (j % 3 === 1) return null;
        if (j % 3 === 2) {
          const text = parts[j - 1];
          const id = parseInt(p);
          return <span key={j} onClick={() => { const c = conditions.find(x => x.id === id); if(c){ setSelectedCondition(c); setCurrentView('detail'); setActiveTab('overview'); setFlowchartPath([]); }}} style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline', cursor:'pointer'}}>{text}</span>;
        }
        return p;
      })}</div>;
    }
    if (line.indexOf('<strong>') !== -1) {
      const parts = line.split(/<strong>|<\/strong>/);
      return <div key={i}>{parts.map((p, j) => { if (j % 2 === 1) { const isPhone = p.indexOf('1-800-222-1222') !== -1 || p.indexOf('1-888-568-1112') !== -1 || p === '988' || p.indexOf('988') !== -1; return <strong key={j} style={isPhone ? {color:'#8a2e13'} : {}}>{p}</strong>; } return p; })}</div>;
    }
    if (line.indexOf('<a ') !== -1) {
      const match = line.match(/^(.*)<a href="([^"]+)"[^>]*>([^<]+)<\/a>(.*)$/);
      if (match) {
        return <div key={i}>{match[1]}<a href={match[2]} target="_blank" rel="noreferrer" style={{color:'#42c3f7', fontWeight:'bold', textDecoration:'underline'}}>{match[3]}</a>{match[4]}</div>;
      }
    }
    if (line.indexOf('CPR') !== -1 && !line.startsWith('<')) {
      const parts = line.split('CPR');
      return <div key={i}>{parts.map((p, j) => j < parts.length - 1 ? <span key={j}>{p}<span onClick={() => setCurrentView('cpr')} style={{color:'#42c3f7', textDecoration:'underline', cursor:'pointer', fontWeight:'bold'}}>CPR/AED</span></span> : p)}</div>;
    }
    return <div key={i}>{line || '\u00A0'}</div>;
  };

  return (
    <div style={{ fontFamily: 'Calibri, sans-serif' }}>
      {/* Hamburger Menu Button - Always visible */}
      <div className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
        <div className="max-w-4xl mx-auto px-4 py-3 flex items-center">
          <button 
            onClick={() => setMenuOpen(!menuOpen)} 
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
            aria-label="Menu"
          >
            {menuOpen ? <span className="text-2xl">✕</span> : <span className="text-2xl">☰</span>}
          </button>
          <div className="ml-4 font-bold" style={{ color: '#182b3c' }}>Menu</div>
        </div>
      </div>

      {/* Slide-in Menu Drawer */}
      <div 
        className={`fixed top-0 left-0 h-full bg-white shadow-2xl z-40 transition-transform duration-300 ease-in-out overflow-y-auto ${menuOpen ? 'translate-x-0' : '-translate-x-full'}`}
        style={{ width: '280px', paddingTop: '60px' }}
      >
        <nav className="p-4">
          <div className="space-y-2">
            <button
              onClick={() => {
                setCurrentView('home'); trackEvent('navigate', {destination: 'home'});
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>🏠</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>Home</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('list'); trackEvent('navigate', {destination: 'conditions_list'});
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>⚠️</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>View Conditions</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('cpr'); trackEvent('navigate', {destination: 'cpr'});
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8a2e13" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              <span className="font-medium" style={{ color: '#182b3c' }}>CPR/AED Quick Reference</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('about');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>ℹ️</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>About This Guide</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('acknowledgements');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>👥</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>Acknowledgements</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('general');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>📋</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>General Considerations</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('medical');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>⚠️</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>Medical Emergencies</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('infection');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>🛡️</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>Standard Precautions</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('resources');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>📖</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>Resources</span>
            </button>
            <button
              onClick={() => {
                setCurrentView('references');
                setMenuOpen(false);
              }}
              className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
            >
              <span>📄</span>
              <span className="font-medium" style={{ color: '#182b3c' }}>References</span>
            </button>
          </div>
        </nav>
      </div>

      {/* Overlay when menu is open */}
      {menuOpen && (
        <div 
          className="fixed inset-0 bg-black bg-opacity-50 z-30"
          onClick={() => setMenuOpen(false)}
        />
      )}

      {currentView === 'home' && (
        <>
        <style>{`.btn-selected { background-color: #42c3f7 !important; color: #182b3c !important; font-weight: bold; } .btn-default { background-color: #182b3c !important; color: white !important; } .tbl-border { border: 2px solid #182b3c !important; }`}</style>
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <div className="flex items-center justify-center mb-6">
                <div className="text-center">
                  <div className="text-white font-bold text-2xl mb-1">Maine Department of Education</div>
                  <div className="h-1 w-48 mx-auto mb-4" style={{ backgroundColor: '#42c3f7' }}></div>
                </div>
              </div>
              <h1 className="text-3xl font-bold text-white text-center mb-2">Emergency Guidelines for Schools</h1>
              <p className="text-center text-gray-300 text-lg">How to Respond to Injury and Illness at School</p>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
              <h2 className="text-2xl font-bold mb-4" style={{ color: '#182b3c' }}>About This Guide</h2>
              <p className="text-gray-700 mb-4 leading-relaxed">
                This resource was developed as a partnership by the Maine Department of Education (DOE), 
                Maine Emergency Medical Services (EMS) and the Emergency Medical Services for Children (EMS-C) 
                program for Maine schools.
              </p>
              <p className="text-gray-700 mb-4 leading-relaxed">
                It is designed to be accessible to all unlicensed School Administrative Unit (SAU) staff, 
                assisting them in responding quickly, safely, and effectively when students are injured or 
                become ill at school or during school-sponsored activities.
              </p>
              <div style={{ backgroundColor: "#42c3f7" }} className="p-4 mb-4 rounded">
                <p className="text-sm font-semibold mb-2 text-black">IMPORTANT:</p>
                <p className="text-sm">
                  When in doubt, call 911. Always inform the school nurse, administration, and the 
                  student's parent or legal guardian as soon as possible.
                </p>
              </div>
              <p className="text-xs text-gray-500 mb-6 px-1">Use the menu <strong>☰</strong> at the top to navigate to more information in this guide.</p>
              <div className="p-4 rounded-lg mb-6" style={{backgroundColor:'#eee6df', border:'1px solid #d4c9be'}}>
                <p className="font-bold text-sm mb-3" style={{color:'#182b3c'}}>📱 Save this guide to your phone's home screen for quick access:</p>
                <div className="space-y-3 text-sm" style={{color:'#374151'}}>
                  <div>
                    <p className="font-semibold mb-1">iPhone / iPad (Safari):</p>
                    <ol className="space-y-1 text-xs" style={{listStyle:'decimal', paddingLeft:'1.2rem'}}>
                      <li>Tap the <strong>Share button</strong> <span style={{fontSize:'1rem'}}>⎋</span> at the bottom of Safari</li>
                      <li>Scroll down and tap <strong>"Add to Home Screen"</strong></li>
                      <li>Tap <strong>"Add"</strong> in the top right</li>
                    </ol>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">Android (Chrome):</p>
                    <ol className="space-y-1 text-xs" style={{listStyle:'decimal', paddingLeft:'1.2rem'}}>
                      <li>Tap the <strong>three-dot menu</strong> ⋮ in the top right of Chrome</li>
                      <li>Tap <strong>"Add to Home screen"</strong></li>
                      <li>Tap <strong>"Add"</strong> to confirm</li>
                    </ol>
                  </div>
                  <p className="text-xs italic mt-2" style={{color:'#6b7280'}}>Once saved, the guide will appear as an icon on your home screen for instant access.</p>
                </div>
              </div>
            </div>
            <div className="mb-6">
              <form onSubmit={(e) => { e.preventDefault(); if (searchTerm.trim()) setCurrentView('list'); }}>
                <span className="absolute ml-4 mt-4 text-gray-400">🔍</span>
                <input type="text" placeholder="Search emergency conditions..." value={searchTerm} onChange={(e) => { setSearchTerm(e.target.value); if(e.target.value.length > 2) trackEvent("search", {search_term: e.target.value}); }} className="w-full pl-12 pr-4 py-4 border-2 rounded-lg text-lg" style={{ borderColor: '#182b3c' }} />
                <p className="text-xs text-gray-500 mt-2 px-1">This is a dynamic search — try typing symptoms or situations like <span className="font-semibold">"spider"</span>, <span className="font-semibold">"temperature"</span>, or <span className="font-semibold">"belly"</span> to find related conditions.</p>
              </form>
            </div>
            {searchTerm.trim() && (
              <button onClick={() => setCurrentView('list')} className="w-full py-4 px-6 rounded-lg font-bold text-white text-lg shadow-lg mb-3" style={{ backgroundColor: '#42c3f7' }}>
                <span className="inline mr-2">🔍</span>Search for "{searchTerm}"
              </button>
            )}
            <button onClick={() => { setSearchTerm(''); setCurrentView('list'); }} className="w-full py-4 px-6 rounded-lg font-bold text-white text-lg shadow-lg" style={{ backgroundColor: '#182b3c' }}>
              View All Emergency Conditions →
            </button>
            <div className="mt-8 rounded-lg p-6" style={{ border: '2px solid #8a2e13', backgroundColor: '#fff' }}>
              <h3 className="font-bold text-xl mb-4" style={{ color: '#8a2e13' }}>Emergency Numbers</h3>
              <div className="space-y-2 text-gray-700">
                <p><span className="font-bold">Emergency: </span>911</p>
                <p><span className="font-bold">Poison Control: </span>1-800-222-1222</p>
                <p><span className="font-bold">Maine Crisis Line: </span><span style={{color:'#8a2e13', fontWeight:'bold'}}>1-888-568-1112</span> or <span style={{color:'#8a2e13', fontWeight:'bold'}}>988</span></p>
              </div>
            </div>
          </div>
        </div>
        </>
      )}
      

      {currentView === 'cpr' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="max-w-6xl mx-auto px-4 py-8">
            <button 
              onClick={() => setCurrentView('home')} 
              className="mb-6 flex items-center text-gray-600 hover:text-gray-800"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
              Back to Home
            </button>
            
            <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
              <h1 className="text-3xl font-bold mb-4" style={{ color: '#182b3c' }}>CPR/AED Quick Reference</h1>
              <div style={{ backgroundColor: "#42c3f7" }} className="p-4 mb-6 rounded">
                <p className="text-sm font-semibold text-black">IMPORTANT:</p>
                <p className="text-sm">The steps below are meant to be a refresher and not a substitute for training. Staff positioned to provide first aid to students are recommended to complete an approved first aid and Cardiopulmonary Resuscitation (CPR) course, including the use of an Automated External Defibrillator (AED).</p>
              </div>
              
              {/* CPR/AED Table */}
              <div className="overflow-x-auto">
                <table className="w-full border-collapse text-sm">
                  <thead>
                    <tr className="bg-gray-800 text-white">
                      <th className="p-3 text-center font-bold" style={{border:"2px solid #182b3c"}}>Action</th>
                      <th className="p-3 text-center font-bold" style={{border:"2px solid #182b3c"}}>Adults & Adolescents</th>
                      <th className="p-3 text-center font-bold" style={{border:"2px solid #182b3c"}}>Age 1 to Puberty</th>
                      <th className="p-3 text-center font-bold" style={{border:"2px solid #182b3c"}}>Less Than 1 Year Old</th>
                    </tr>
                  </thead>
                  <tbody>
                    {/* Verify Scene Safety */}
                    <tr className="bg-gray-100">
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Verify Scene Safety</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>Make sure the environment is safe for rescuer(s) and victim(s)</td>
                    </tr>
                    
                    {/* Recognize Cardiac Arrest */}
                    <tr>
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Recognize Cardiac Arrest</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p className="mb-2">Check for responsiveness</p>
                        <p className="mb-2">Signs of cardiac arrest include:</p>
                        <div className="space-y-1">
                          <p>- No breathing or only gasping</p>
                          <p>- No definite pulse felt within 10 seconds</p>
                        </div>
                        <p className="mt-2 text-xs italic">*Breathing and pulse check can be performed simultaneously</p>
                      </td>
                    </tr>
                    
                    {/* Activate EMS */}
                    <tr className="bg-gray-100">
                      <td rowSpan="2" className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Activate EMS</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        If a phone is immediately available, call 911. If not:
                      </td>
                    </tr>
                    <tr className="bg-gray-100">
                      <td className="p-3 text-center align-top" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p className="font-semibold mb-2">BY YOURSELF:</p>
                        <div className="space-y-1">
                          <p>- Leave the victim to call 911/activate EMS and get an AED.</p>
                          <p>- Return to the victim and begin CPR.</p>
                        </div>
                        <p className="font-semibold mt-3 mb-2">WITH OTHERS:</p>
                        <div className="space-y-1">
                          <p>- Begin CPR immediately.</p>
                          <p>- Send someone to call 911/activate EMS and get an AED.</p>
                        </div>
                      </td>
                      <td colSpan="2" className="p-3 text-center align-top" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p className="font-semibold mb-1">WITNESSED COLLAPSE:</p>
                        <p className="mb-3">- Follow the steps for adults and adolescents.</p>
                        <p className="font-semibold mb-1">UNWITNESSED COLLAPSE:</p>
                        <div className="space-y-1">
                          <p>- Give 2 minutes of CPR.</p>
                          <p>- Leave the victim to call 911/activate EMS and get an AED.</p>
                          <p>- Return to the child or infant and resume CPR.</p>
                        </div>
                      </td>
                    </tr>
                    
                    {/* AED */}
                    <tr>
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>AED</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p>Use an AED as soon as it is available.</p>
                        <p className="mt-1">Adjust undergarments for pad placement, if necessary.</p>
                      </td>
                    </tr>
                    
                    {/* Compressions */}
                    <tr className="bg-gray-100">
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Compressions</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>Ensure victim is on a firm, flat surface.</td>
                    </tr>
                    
                    {/* Hand Placement */}
                    <tr>
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Hand Placement</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>2 hands on the lower half of the victim's sternum</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>1 or 2 hands on the lower half of the victim's sternum</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>Heel of one hand or 2 thumbs encircling the lower half of the victim's sternum</td>
                    </tr>
                    
                    {/* Compression-Breaths Ratio */}
                    <tr className="bg-gray-100">
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Compression-Breaths Ratio</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>30:2</td>
                      <td colSpan="2" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p>1 rescuer: 30:2</p>
                        <p>2 rescuers: 15:2</p>
                      </td>
                    </tr>
                    
                    {/* Compression Depth */}
                    <tr>
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Compression Depth</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>At least 2 inches</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>2 inches</td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>1.5 inches</td>
                    </tr>
                    
                    {/* Breaths */}
                    <tr className="bg-gray-100">
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Breaths</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>Give each breath over 1 second. Use a barrier device, if available.</td>
                    </tr>
                    
                    {/* Breath Seal */}
                    <tr>
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Breath Seal</td>
                      <td colSpan="2" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p>Ensure a seal over the victim's mouth.</p>
                        <p>Pinch the victim's nose.</p>
                      </td>
                      <td className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>Ensure a seal over the victim's mouth and nose.</td>
                    </tr>
                    
                    {/* Foreign Objects */}
                    <tr className="bg-gray-100">
                      <td className="p-3 font-semibold" style={{border:"2px solid #182b3c", backgroundColor: '#6d8ba6', color: '#fff' }}>Foreign Objects</td>
                      <td colSpan="3" className="p-3 text-center" style={{border:"2px solid #182b3c", backgroundColor: '#eee6df' }}>
                        <p>Check for objects in the victim's mouth every 2 minutes.</p>
                        <p>Remove any visible objects.</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              
              <div className="mt-6 text-xs text-gray-600 italic">
                <p>(American Heart Association, 2025; American Academy of Pediatrics & Pediatric Education for Prehospital Professionals, 2021; Taliaferro & Resha, 2020; Maine Emergency Medical Services, 2024)</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {currentView === 'list' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="sticky top-0 z-10 px-6 py-4 shadow-md" style={{ backgroundColor: '#182b3c', marginTop: '60px' }}>
            <div className="max-w-4xl mx-auto flex items-center">
              <button onClick={() => setCurrentView('home')} className="mr-4 p-2 rounded-lg hover:bg-gray-700">
                <span className="text-white text-2xl">‹</span>
              </button>
              <h1 className="text-2xl font-bold text-white">Emergency Conditions</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-4">
            <span className="absolute ml-4 mt-3 text-gray-400">🔍</span>
            <input type="text" placeholder="Search..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-12 pr-4 py-3 border-2 rounded-lg" style={{ borderColor: '#182b3c' }} />
            <p className="text-xs text-gray-500 mt-2 px-1">This is a dynamic search — try typing symptoms or situations like <span className="font-semibold">"spider"</span>, <span className="font-semibold">"temperature"</span>, or <span className="font-semibold">"belly"</span> to find related conditions.</p>
          </div>
          <div className="max-w-4xl mx-auto px-6 pb-6">
            {filteredConditions.map((c) => (
              <button key={c.id} onClick={() => { setSelectedCondition(c); setCurrentView('detail'); setActiveTab('quickView'); setFlowchartPath([]); trackEvent('view_condition', {condition_name: c.name, condition_id: c.id}); }} className="w-full p-5 rounded-lg shadow hover:shadow-lg mb-3 text-left border-l-4" style={{ borderLeftColor: '#6d8ba6', backgroundColor: '#eee6df' }}>
                <h3 className="text-xl font-bold" style={{ color: '#182b3c' }}>{c.name}</h3>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* About This Guide Page */}
      {currentView === 'about' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">About This Guide</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed space-y-4">
                <h2 className="text-2xl font-bold mb-4" style={{ color: '#182b3c' }}>Emergency Guidelines: How to Respond to Injury and Illness at School</h2>
                
                <p>This resource was developed as a partnership by the Maine Department of Education (DOE), Maine Emergency Medical Services (EMS) and the Emergency Medical Services for Children (EMS-C) program for Maine schools and adapted with permission from the Washington State Department of Health and the Washington State Office of Superintendent of Public Instruction. It is designed to be accessible to all unlicensed School Administrative Unit (SAU) staff, assisting them in responding quickly, safely, and effectively when students are injured or become ill at school or during school-sponsored activities. When feasible, always inform the school nurse, administration, and the student's parent or legal guardian as soon as possible. Don't hesitate to ask for help. The guide should be made available to staff members during the school day and can be carried on field trips or athletic events. Other recommendations include placing a copy of this guide in emergency backpacks and on school buses. This document summarizes currently available resources and may be used as a resource; it does not replace the clinical judgment required for professional school nursing practice. When in doubt, call 911.</p>

                <p>This guide is not an Emergency Preparedness Toolkit. While each section of the following pages briefly describes what an emergency may look like, it is not a resource for preparedness. This guide aims to provide clear and concise instructions on what to do in the event of an emergency. The guidance provided in this document will be most effective if SAUs have developed local policies and procedures, trained personnel, assigned specific roles, acquired necessary supplies, and conducted practice drills.</p>

                <p>This guide is not a substitute for Emergency Preparedness Training. Staff positioned to provide first aid to students are recommended to complete an approved first aid and Cardiopulmonary Resuscitation (CPR) course, including the use of an Automated External Defibrillator (AED), mental health first aid training, and be familiar with Maine state law and locally required staff training. Consider training staff in STOP THE BLEED® or another program to be able to identify appropriate interventions for uncontrolled bleeding using direct pressure, pressure dressings, and tourniquets if they are available (Selekman, Shannon, & Yonkaitis, 2019).</p>

                <h3 className="text-xl font-bold mt-6 mb-3" style={{ color: '#182b3c' }}>Common Illnesses and Health Office Visits</h3>
                
                <p>Students enter the health office for a variety of reasons that are not addressed in this guide. Standard precautions should be followed to minimize exposure to blood and body fluids, such as hand washing and wearing non-latex disposable gloves. Refer to local policies and procedures for common illnesses to include, but not limited to, respiratory, gastrointestinal, viral, bacterial, febrile, or pest-related health concerns. Notify the school nurse and follow emergency care plans. Always ask for help. Inform school nurse, administration, and student's parent or legal guardian as soon as possible, according to local protocol.</p>

                <div style={{ backgroundColor: "#42c3f7", color: "#000" }} className="p-4 rounded-lg mt-6">
                  <p className="font-semibold">Maine's Good Samaritan Law, Maine Revised Statutes, Title 14, §164 and Maine Revised Statutes, Title 20-A, §4009, subsection 4 provide immunity from civil liability if any person voluntarily renders first aid or emergency treatment in good faith to a person who is ill, injured, unconscious, or in need of rescue assistance.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Acknowledgements Page */}
      {currentView === 'acknowledgements' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">Acknowledgements</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed space-y-4">
                <h2 className="text-2xl font-bold mb-4" style={{ color: '#182b3c' }}>Acknowledgements</h2>
                
                <p>This document is based in part on information and guidelines from the American Academy of Pediatrics (AAP), the Maine Department of Education (DOE), the National Association of School Nurses (NASN), the American Heart Association (AHA), the Centers for Disease Control and Prevention (CDC), and Maine Emergency Medical Services (EMS) Prehospital Treatment Protocols. Other resources cited throughout the document include School Nursing: The Comprehensive Text, School Nurse Resource Manual, Legal Resource for School Health Services, and Pediatric Education for Prehospital Professionals, among others.</p>

                <h3 className="text-xl font-bold mt-6 mb-3" style={{ color: '#182b3c' }}>Review and Approval</h3>
                
                <p>This document has been reviewed by members of the Maine DOE Office of School and Student Supports, Maine EMS, Maine Emergency Medical Services for Children (EMS-C), Maine AAP: School Health Committee, Maine School Health Advisory Committee, Maine Association of School Nurses, Maine DOE School Safety Center, Maine National Alliance on Mental Illness, Maine State Certified School Nurses, and Nationally Certified School Nurses.</p>

                <h3 className="text-xl font-bold mt-6 mb-3" style={{ color: '#182b3c' }}>Development</h3>
                
                <p>In alignment with the Maine Department of Education's ongoing vision of learning environments that are safe and supportive for all, the Coordinated School Health team is pleased to release the Emergency Guidelines for Maine Schools: How to Respond to Injury and Illness at School. This newest project directly promotes the mission of Maine DOE by recognizing that being prepared for emergencies is a way to exhibit focus on the whole student and helps to inspire trust in our schools.</p>

                <p>The Coordinated School Health Team is a part of the Maine DOE Office of School and Student Supports. The Office of School & Student Supports strives to ensure that Maine schools are inclusive, healthy, safe, and supportive communities where every student thrives. This document was developed by the School Nurse Regional Liaisons who are members of the Maine Department of Education Coordinated School Health Team.</p>

                <p>The Maine EMS-C program focuses on collaboration to encourage preparation, education, and care for those under 18 years old with a goal to reduce pediatric mortality and morbidity by ensuring appropriate and effective pediatric emergency care.</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* General Considerations Page */}
      {currentView === 'general' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">General Considerations for Medical Emergencies</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed space-y-4">
                <h2 className="text-2xl font-bold mb-4" style={{ color: '#182b3c' }}>Access and Functional Needs</h2>
                
                <p>The Centers for Disease Control and Prevention (CDC) describes Access and Functional Needs (AFN) as "Individuals with and without disabilities, who may need additional assistance because of any condition (temporary or permanent) that may limit their ability to act in an emergency. Individuals with 'access and functional needs' do not require any kind of diagnosis or specific evaluation." Individuals with AFN who do not have a chronic health condition may include individuals from diverse cultures, those with limited English proficiency, or those who face mobility or transportation challenges. When preparing for medical emergencies and injuries, these individuals with special healthcare needs must be considered. The CDC provides a toolkit for readiness related to AFN, which is included in the resource section of this document.</p>

                <h2 className="text-2xl font-bold mt-6 mb-4" style={{ color: '#182b3c' }}>Emergency Action/Care Plan</h2>
                
                <p>Any student with special healthcare needs or AFN may require an Emergency Action/Care Plan. The school nurse is responsible for evaluating and updating the Emergency Action/Care Plan annually and as needed to reflect the student's healthcare needs, nursing interventions, and student healthcare outcomes. The Emergency Action/Care Plan is written by the school nurse for non-medical educational personnel to provide instruction on addressing and appropriately responding to emergent healthcare issues and needs for students. Teachers, administrators, and unlicensed school staff responsible for students with health conditions should have appropriate training on the contents of Emergency Action/Care Plans, directed and delivered by the school nurse. During an emergency, the Emergency Action/Care Plan should be sent with Emergency Medical Services (EMS) along with parent or guardian contact information.</p>

                <h3 className="text-xl font-bold mt-6 mb-3" style={{ color: '#182b3c' }}>Some examples of health conditions of students who may have AFN:</h3>
                
                <ul className="list-disc ml-6 space-y-1">
                  <li>Asthma.</li>
                  <li>Diabetes.</li>
                  <li>Seizures.</li>
                  <li>Allergies.</li>
                  <li>Autism.</li>
                  <li>Down syndrome.</li>
                  <li>Mental health conditions.</li>
                  <li>Any health condition(s) that require accommodation(s) to ensure safety and access to education.</li>
                </ul>

                <p className="text-sm italic mt-4">(National Association of School Nurses, 2020; Selekman, Shannon, & Yonkaitis, 2019; Taliaferro & Resha, 2020)</p>

                <div style={{ backgroundColor: "#42c3f7", color: "#000" }} className="p-4 rounded-lg mt-6">
                  <p className="font-semibold">The American Academy of Pediatrics and the American College of Emergency Physicians: Emergency Information Form (EIF). The EIF can be completed by parents of students with special healthcare needs to facilitate communication that informs providers in various settings of the complex healthcare needs in an emergency.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Medical Emergencies Page */}
      {currentView === 'medical' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">What to Do in a Medical Emergency</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed space-y-4">
                <p>Each SAU should have local policies and/or procedures for emergency response and should be prepared to respond to emergencies through established protocols, equipment, staff education, training, and documentation. Rescuers should only use equipment and supplies they have been sufficiently trained to use.</p>

                <h2 className="text-2xl font-bold mt-6 mb-4" style={{ color: '#182b3c' }}>Steps in First Aid to Students:</h2>

                <div className="space-y-4">
                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>1. Survey the Scene</h3>
                    <p className="ml-4">Take a moment to look around and ensure the scene is safe. Do not endanger yourself.</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>2. Hands-off Check</h3>
                    <p className="ml-4">As you approach the student, look at appearance, responsiveness and breathing to decide if someone should <strong style={{color:"#8a2e13"}}>GET HELP AND AED. CALL 911</strong>—this should take less than 30 seconds. Have someone notify the school nurse.</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>3. Supervise</h3>
                    <p className="ml-4">Make sure other students near the scene are supervised and safe.</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>4. Hands-on Check</h3>
                    <p className="ml-4">Check the student's condition, reassess the need to call 911, and determine what first aid is needed.</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>5. First Aid Care</h3>
                    <p className="ml-4">Provide first aid that suits the injury or illness. Avoid moving the student if there is a suspected head, neck, or back injury, or if they are having difficulty breathing. However, if there is a clear danger of further injury, carefully move the student to a safe location. In an emergency, do not offer food or drink unless directed by the Emergency Action/Care Plan, emergency services, medical personnel, or poison control.</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>6. Notify</h3>
                    <p className="ml-4">Notify the student's parent or legal guardian as soon as possible. Do not delay emergency medical care if you are unable to reach them. If a parent cannot be contacted, implied consent assumes that consent would be provided to prevent the loss of life, limb, or organ (Selekman, Shannon, & Yonkaitis, 2019).</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>7. Debrief</h3>
                    <p className="ml-4">After an emergency, take time to talk about any concerns. Talk with others who witnessed what happened and how you and others responded. Debriefing should include organizing crisis intervention for staff, depending on the situation.</p>
                  </div>

                  <div>
                    <h3 className="text-lg font-bold" style={{ color: '#182b3c' }}>8. Document</h3>
                    <p className="ml-4">Complete a written report of what happened utilizing the School Administrative Unit's guidelines for documentation.</p>
                  </div>
                </div>

                <p className="text-sm italic mt-6">Adapted from the American Academy of Pediatrics' course book: Pediatric First Aid for Caregivers and Teachers, 2nd Edition</p>

                <div style={{ backgroundColor: "#42c3f7", color: "#000" }} className="p-4 rounded-lg mt-6">
                  <p className="font-semibold">NOTE: In a medical emergency, reasonable steps will be taken to reach the parent/guardian. Emergency medical services will not be withheld. Maine Revised Statutes, Title 22, §4023, subsection 4.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Infection Control Standards Page */}
      {currentView === 'infection' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">Standard Precautions to Prevent Infection</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed space-y-4">
                <p>These precautions help prevent the spread of germs for the student and the care provider. Assume that anyone can be the source of infection, and everyone needs protection. Follow your SAU's protocols for cleaning and disposing of contaminated materials.</p>

                <h2 className="text-2xl font-bold mt-6 mb-4" style={{ color: '#182b3c' }}>Avoid direct contact with blood and other body fluids:</h2>
                
                <ul className="list-disc ml-6 space-y-2">
                  <li>Always have students/individuals wash their hands with soap and warm water, if possible.</li>
                  <li>Use a barrier between you and the body fluids, such as non-latex disposable gloves, apron, a mask, and eye protection. Do not reuse gloves.</li>
                  <li>Never touch your mouth or eyes while wearing gloves.</li>
                  <li>After glove removal, wash your hands with soap and warm water.</li>
                  <li>Have the student hold a bandage or cloth over the bleeding area, if able.</li>
                </ul>

                <h2 className="text-2xl font-bold mt-6 mb-4" style={{ color: '#182b3c' }}>Clean and sanitize contaminated surfaces, including sports equipment:</h2>
                
                <ul className="list-disc ml-6 space-y-2">
                  <li>Use non-latex disposable gloves and disposable cleaning materials.</li>
                  <li>Wipe up body fluids.</li>
                  <li>Remove and launder contaminated clothing as soon as possible.</li>
                </ul>

                <h2 className="text-2xl font-bold mt-6 mb-4" style={{ color: '#182b3c' }}>Disposal of contaminated items and cleaning materials:</h2>
                
                <ul className="list-disc ml-6 space-y-2">
                  <li>Seal all contaminated materials, including gloves, in a plastic bag.</li>
                  <li>Dispose of the bag in a plastic-lined trash can.</li>
                  <li>Wash your hands thoroughly with soap and warm water.</li>
                </ul>

                <div className="p-4 rounded-lg mt-6 border-l-4" style={{ backgroundColor: '#8a2e13', color: 'white', boxShadow: 'none' }}>
                  <p className="font-semibold text-white">IMPORTANT: If you have direct contact with blood or body fluids, follow your SAU's Blood Borne Pathogen Exposure Protocol.</p>
                </div>

                <p className="text-sm italic mt-6">(American Heart Association and American Red Cross, 2024; Taliaferro & Resha, 2020)</p>

                <div style={{ backgroundColor: "#42c3f7", color: "#000" }} className="p-4 rounded-lg mt-6">
                  <p className="font-semibold mb-2">First Aid Supply Checklist:</p>
                  <p>Being prepared for an emergency includes having resources and equipment. The National Association of School Nurses has Emergency Resources, Equipment, and Supply Lists for Schools, which may help stock a school emergency bag (2020).</p>
                </div>

                <div className="bg-white p-4 rounded-lg mt-4">
                  <p className="font-semibold">Emergency medications are prescribed medications, should not be shared, and should only be used in accordance with 05-071 C.M.R. ch.40 (2022) Rule for Medication Administration in Maine Schools.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Resources Page */}
      {currentView === 'resources' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">Resources</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed space-y-4">
                <h2 className="text-2xl font-bold mb-6" style={{ color: '#182b3c' }}>Health and Safety Resources</h2>
                
                <div className="space-y-4">
                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">American Academy of Allergy Asthma & Immunology</h3>
                    <a href="https://www.aaaai.org/" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://www.aaaai.org/</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">American Diabetes Association</h3>
                    <a href="https://www.diabetes.org" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>www.diabetes.org</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">American Heart Association: CPR and First Aid</h3>
                    <a href="https://cpr.heart.org/" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://cpr.heart.org/</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Asthma and Allergy Foundation of America</h3>
                    <a href="https://www.aafa.org" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>www.aafa.org</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Collaborative Practice Agreement Sample</h3>
                    <a href="https://www.maine.gov/doe/sites/maine.gov.doe/files/inline-files/SchoolHealthServicesSampleCollaborativePracticeAgreement-2.26.2025.docx" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>Maine DOE Collaborative Practice Agreement</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Emergency Information Form (EIF)</h3>
                    <a href="https://downloads.aap.org/AAP/Documents/eif.doc" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://downloads.aap.org/AAP/Documents/eif.doc</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Epilepsy Foundation</h3>
                    <a href="https://www.epilepsy.com/" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://www.epilepsy.com/</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Maine CDC: Public Health Districts</h3>
                    <a href="https://www.maine.gov/dhhs/mecdc/public-health-systems/lphd/index.shtml" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>https://www.maine.gov/dhhs/mecdc/public-health-systems/lphd/index.shtml</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Maine DOE: Coordinated School Health: School Health Services</h3>
                    <a href="https://www.maine.gov/doe/index.php/schools/safeschools/healthed/nurseresources/guidelines" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>Maine DOE School Health Services</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Maine EMS</h3>
                    <a href="https://www.maine.gov/ems/home" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://www.maine.gov/ems/home</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">NAMI Maine (National Alliance on Mental Illness)</h3>
                    <a href="https://namimaine.org/" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://namimaine.org/</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">NASN (National Association of School Nurses)</h3>
                    <a href="https://www.nasn.org/home" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://www.nasn.org/home</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Readiness and Emergency Management for Schools</h3>
                    <a href="https://rems.ed.gov/docs/SchoolEOPChecklist_508C.pdf" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>School Emergency Operations Plan Checklist</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">STOP THE BLEED®</h3>
                    <a href="https://www.stopthebleed.org/" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://www.stopthebleed.org/</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">U.S. CDC: Access and Functional Needs Toolkit</h3>
                    <a href="https://www.cdc.gov/readiness/media/pdfs/CDC_Access_and_Functional_Needs_Toolkit_March2021.pdf" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>CDC AFN Toolkit PDF</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">U.S. CDC: Concussion Basics</h3>
                    <a href="https://www.cdc.gov/heads-up/about/index.html" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://www.cdc.gov/heads-up/about/index.html</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">U.S. CDC: Concussion Checklist</h3>
                    <a href="https://www.cdc.gov/heads-up/media/pdfs/schools/TBI_schools_checklist_508-a.pdf" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>CDC Concussion Checklist PDF</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">U.S. CDC: How to Use Naloxone Nasal Spray</h3>
                    <a href="https://youtu.be/odlFtGNjmMQ" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline"}}>https://youtu.be/odlFtGNjmMQ</a>
                  </div>

                  <div className="border-b pb-3">
                    <h3 className="font-bold text-lg">Youth Mental Health First Aid Training</h3>
                    <a href="https://www.mentalhealthfirstaid.org/cs/take-a-course/course-types/youth/" target="_blank" rel="noopener noreferrer" style={{color:"#42c3f7",textDecoration:"underline",wordBreak:"break-all"}}>www.mentalhealthfirstaid.org/cs/take-a-course/course-types/youth/</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* References Page */}
      {currentView === 'references' && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="px-6 py-8" style={{ backgroundColor: '#182b3c' }}>
            <div className="max-w-4xl mx-auto">
              <h1 className="text-3xl font-bold text-white text-center">References</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-8">
            <div className="bg-white rounded-lg shadow-lg p-8">
              <div className="text-gray-700 leading-relaxed">
                <div className="space-y-3 text-sm">
                  <p>American Academy of Allergy & Immunology. (n.d.). Asthma overview. Retrieved from <a href="https://www.aaaai.org/conditions-treatments/asthma/asthma-overview" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.aaaai.org/conditions-treatments/asthma/asthma-overview</a></p>

                  <p>American Academy of Allergy Asthma & Immunology. (n.d.). Anaphylaxis. Retrieved from <a href="https://www.aaaai.org/conditions-treatments/allergies/anaphylaxis" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.aaaai.org/conditions-treatments/allergies/anaphylaxis</a></p>

                  <p>American Academy of Pediatrics & Pediatric Education for Prehospital Professionals. (2021). Pediatric education for prehospital professionals (4th ed.). (S. Fuchs, & M. McEvoy, Eds.) Burlington, MA: World Headquarters.</p>

                  <p>American Academy of Pediatrics. (2023). Managing infectious diseases in child care and schools (6 ed.). (T. Shope, & A. Hashikawa, Eds.) Itasca, IL: American Academy of Pediatrics.</p>

                  <p>American Diabetes Association. (n.d.). Low blood glucose (Hypoglycemia). Retrieved from <a href="https://diabetes.org/living-with-diabetes/hypoglycemia-low-blood-glucose" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://diabetes.org/living-with-diabetes/hypoglycemia-low-blood-glucose</a></p>

                  <p>American Heart Association. (2020). 2020 American Heart Association Guidelines for CPR and ECC. Dallas, Texas. Retrieved from <a href="https://cpr.heart.org/en/resuscitation-science/cpr-and-ecc-guidelines" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://cpr.heart.org/en/resuscitation-science/cpr-and-ecc-guidelines</a></p>

                  <p>American Heart Association and American Red Cross. (2024). 2024 American Heart Association and American Red Cross Guidelines for First Aid. Retrieved from <a href="https://cpr.heart.org/en/resuscitation-science/2024-first-aid-guidelines" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://cpr.heart.org/en/resuscitation-science/2024-first-aid-guidelines</a></p>

                  <p>Centers for Disease Control and Prevention (CDC). (2021). Access and functional needs toolkit: Integrating a community partner network to inform risk communication strategies. Atlanta, Georgia: U.S. Department of Health and Human Services (HHS). Retrieved from <a href="https://www.cdc.gov/readiness/media/pdfs/CDC_Access_and_Functional_Needs_Toolkit_March2021.pdf" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.cdc.gov/readiness/media/pdfs/CDC_Access_and_Functional_Needs_Toolkit_March2021.pdf</a></p>

                  <p>Epilepsy Foundation. (2024). Schools and seizure preparedness. Retrieved from <a href="https://www.epilepsy.com/preparedness-safety/schools" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.epilepsy.com/preparedness-safety/schools</a></p>

                  <p>James M. Callahan, S. B. (2023, 03). Access to critical health information for children during emergencies: Emergency information forms and beyond. Pediatrics, p. 151. doi:e2022060970. 10.1542/peds.2022-060970</p>

                  <p>Maine Department of Education. (2023). Seizure and Epilepsy Resource Guide. Retrieved from <a href="https://www.maine.gov/doe/sites/maine.gov.doe/files/inline-files/FINAL%20Guidelines%20for%20Seizure%20Management_2.9.2023.pdf" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.maine.gov/doe/sites/maine.gov.doe/files/inline-files/FINAL%20Guidelines%20for%20Seizure%20Management_2.9.2023.pdf</a></p>

                  <p>Maine Department of Education. (2024). Concussion management resource guide. Retrieved from <a href="https://www.maine.gov/doe/sites/maine.gov.doe/files/inline-files/School%20Health%20Services%20-%20Concussion%20Management%20Resource%20Guide%20-%2010.8.2024.pdf" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.maine.gov/doe/sites/maine.gov.doe/files/inline-files/School%20Health%20Services%20-%20Concussion%20Management%20Resource%20Guide%20-%2010.8.2024.pdf</a></p>

                  <p>Maine Emergency Medical Services. (2024). Maine EMS: Prehospital treatment protocols. Prehospital Treatment Protocols. Augusta, ME. Retrieved from <a href="https://www.maine.gov/ems/sites/maine.gov.ems/files/inline-files/2023-Maine-EMS-Protocols-20240124.pdf" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.maine.gov/ems/sites/maine.gov.ems/files/inline-files/2023-Maine-EMS-Protocols-20240124.pdf</a></p>

                  <p>National Association of School Nurses. (2020). Emergency resources, equipment and supplies list for schools. Retrieved from <a href="https://higherlogicdownload.s3.amazonaws.com/NASN/8575d1b7-94ad-45ab-808e-d45019cc5c08/UploadedImages/PDFs/Practice%20Topic%20Resources/Emergency_Resources_Equipment_Supplies_list_for_Schools.pdf" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://higherlogicdownload.s3.amazonaws.com/NASN/8575d1b7-94ad-45ab-808e-d45019cc5c08/UploadedImages/PDFs/Practice%20Topic%20Resources/Emergency_Resources_Equipment_Supplies_list_for_Schools.pdf</a></p>

                  <p>National Association of School Nurses. (2020). Use of individualized healthcare plans to support school health services. Retrieved from <a href="https://www.nasn.org/nasn-resources/professional-practice-documents/position-statements/ps-ihps" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.nasn.org/nasn-resources/professional-practice-documents/position-statements/ps-ihps</a></p>

                  <p>National Association of School Nurses. (2021). Concussions: School-based management. Retrieved from <a href="https://www.nasn.org/nasn-resources/professional-practice-documents/position-statements/ps-concussions" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.nasn.org/nasn-resources/professional-practice-documents/position-statements/ps-concussions</a></p>

                  <p>National Association of School Nurses. (2022). NASN position statement: The behavioral health and wellness of students. Retrieved from <a href="https://journals.sagepub.com/doi/10.1177/1942602X211066656" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://journals.sagepub.com/doi/10.1177/1942602X211066656</a></p>

                  <p>National Association of School Nurses. (2023). Allergy and anaphylaxis toolkit. Retrieved from <a href="https://learn.nasn.org/courses/58035" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://learn.nasn.org/courses/58035</a></p>

                  <p>National Association of School Nurses. (2024). Clinical practice guideline implementation toolkit: Students with asthma. Silver Spring, MD. Retrieved from <a href="https://learn.nasn.org/courses/89761/documents/129298/download" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://learn.nasn.org/courses/89761/documents/129298/download</a></p>

                  <p>Rani S. Gereige, M. F., & Toni Gross, M. M. (2022, July 27). Individual medical emergencies occurring at school. Pediatrics, 150(1). doi:e2022057987. 10.1542/peds.2022-057987</p>

                  <p>SchoolNurse.com. (2024). Legal Resources (2nd ed.). (V. Taliaferro, & C. Resha, Eds.) Midlothian, VA: SchoolNurse.com.</p>

                  <p>Selekman, J., Shannon, R., & Yonkaitis, C. (Eds.). (2019). School nursing: A comprehensive text (3rd ed.). F.A. Davis Company.</p>

                  <p>Taliaferro, V., & Resha, C. (Eds.). (2020). School nurse resource manual: Evidence based guide to practice (10th ed.). Nashville, TN: School Health Alert.</p>

                  <p>U.S. Centers for Disease Control and Prevention. (2024). Stop overdose: Lifesaving naloxone. Retrieved from <a href="https://www.cdc.gov/stop-overdose/caring/naloxone.html" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.cdc.gov/stop-overdose/caring/naloxone.html</a></p>

                  <p>U.S. Centers for Disease Control and Prevention. (2024). What to do after a tick bite. Retrieved from <a href="https://www.cdc.gov/ticks/after-a-tick-bite/index.html" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.cdc.gov/ticks/after-a-tick-bite/index.html</a></p>

                  <p>U.S. Centers for Disease Control and Prevention. (2024). Winter weather: Preventing frostbite. Retrieved from <a href="https://www.cdc.gov/winter-weather/prevention/preventing-frostbite.html" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.cdc.gov/winter-weather/prevention/preventing-frostbite.html</a></p>

                  <p>U.S. Centers for Disease Control and Prevention. (2025). Concussion basics. Retrieved from <a href="https://www.cdc.gov/heads-up/about/index.html" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.cdc.gov/heads-up/about/index.html</a></p>

                  <p>U.S. Food and Drug Administration. (2024). FDA approves first nasal spray for treatment of anaphylaxis. Retrieved from <a href="https://www.fda.gov/news-events/press-announcements/fda-approves-first-nasal-spray-treatment-anaphylaxis" target="_blank" rel="noreferrer" style={{color:"#42c3f7"}}>https://www.fda.gov/news-events/press-announcements/fda-approves-first-nasal-spray-treatment-anaphylaxis</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {currentView === 'detail' && selectedCondition && (
        <div className="min-h-screen bg-gray-50" style={{ paddingTop: '60px' }}>
          <div className="sticky top-0 z-10 px-6 py-4 shadow-md" style={{ backgroundColor: '#182b3c', marginTop: '60px' }}>
            <div className="max-w-4xl mx-auto flex items-center">
              <button onClick={() => setCurrentView('list')} className="mr-4 p-2 rounded-lg hover:bg-gray-700">
                <span className="text-white text-2xl">‹</span>
              </button>
              <h1 className="text-xl font-bold text-white">{selectedCondition.name}</h1>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 py-4">
            <div className="flex space-x-2 rounded-lg p-2 shadow" style={{ backgroundColor: '#eee6df' }}>
              <button onClick={() => { setActiveTab('quickView'); trackEvent('tab_switch', {tab: 'quickView', condition: selectedCondition?.name}); }} className={`flex-1 py-3 px-4 rounded-lg font-bold ${activeTab === 'quickView' ? 'text-white shadow-md' : 'text-black'}`} style={activeTab === 'quickView' ? { backgroundColor: '#182b3c' } : {}}>
                <span className="inline mr-2">📄</span>Quick View
              </button>
              <button onClick={() => { setActiveTab('overview'); trackEvent('tab_switch', {tab: 'overview', condition: selectedCondition?.name}); }} className={`flex-1 py-3 px-4 rounded-lg font-bold ${activeTab === 'overview' ? 'text-white shadow-md' : 'text-black'}`} style={activeTab === 'overview' ? { backgroundColor: '#182b3c' } : {}}>
                <span className="inline mr-2">📖</span>Overview
              </button>
            </div>
          </div>
          <div className="max-w-4xl mx-auto px-6 pb-6">
            <div className="bg-white rounded-lg shadow-lg p-6">
              {activeTab === 'overview' ? (
                <div className="whitespace-pre-wrap text-gray-700 leading-relaxed">
                  {selectedCondition.overview.split('\n').map((line, i) => renderOverviewLine(line, i))}
                </div>
              ) : (
                renderFlowchart()
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// Make EmergencyApp available globally for the browser
window.EmergencyApp = EmergencyApp;