import { useState } from "react";

const schedule = [
  {
    time: "5:30 AM",
    label: "Wake Up Ritual",
    emoji: "🌅",
    type: "ritual",
    color: "#FF6B35",
    items: [
      { name: "Copper Water", amount: "1 glass (250ml)", benefit: "Boosts metabolism, aids digestion", calories: 0 },
      { name: "Warm Lemon Water", amount: "1 glass with ½ lemon", benefit: "Detox, vitamin C, kickstarts digestion", calories: 5 },
    ],
    note: "Drink copper water first (stored overnight), then lemon water after 5 mins"
  },
  {
    time: "6:00 AM",
    label: "Morning Boost",
    emoji: "🫚",
    type: "ritual",
    color: "#F7C59F",
    items: [
      { name: "Apple Cider Vinegar", amount: "1 tbsp in 1 glass warm water", benefit: "Controls blood sugar, reduces appetite", calories: 3 },
    ],
    note: "Always dilute ACV — never drink straight. Use a straw to protect teeth enamel."
  },
  {
    time: "6:30 AM",
    label: "Exercise / Walk",
    emoji: "🏃‍♀️",
    type: "activity",
    color: "#4ECDC4",
    items: [
      { name: "30–45 min brisk walk / yoga / home workout", amount: "", benefit: "Burns ~150–200 cal, boosts metabolism", calories: -180 },
    ],
    note: "Fasted cardio in morning maximizes fat burn"
  },
  {
    time: "7:30 AM",
    label: "Post-Workout Drink",
    emoji: "🍵",
    type: "ritual",
    color: "#96CEB4",
    items: [
      { name: "Ginger Green Tea", amount: "1 cup (unsweetened)", benefit: "Anti-inflammatory, fat burn, digestion", calories: 2 },
    ],
    note: "Add 1 inch grated ginger + 1 green tea bag. No sugar or milk."
  },
  {
    time: "8:00 AM",
    label: "Breakfast",
    emoji: "🍳",
    type: "meal",
    color: "#FFEAA7",
    items: [
      { name: "Boiled Eggs", amount: "2 whole eggs", benefit: "High protein, keeps you full", calories: 140 },
      { name: "Vegetable Oats / Upma", amount: "½ cup dry oats (cooked)", benefit: "Fiber, slow carbs, energy", calories: 150 },
      { name: "Mixed Veggies (spinach, tomato, cucumber)", amount: "1 cup", benefit: "Fiber, vitamins, low cal", calories: 30 },
    ],
    note: "Total ~320 cal | ~20g protein. Chew slowly. No white bread or paratha."
  },
  {
    time: "10:30 AM",
    label: "Mid-Morning",
    emoji: "🫖",
    type: "snack",
    color: "#DDA0DD",
    items: [
      { name: "Hibiscus Tea", amount: "1 cup (unsweetened)", benefit: "Lowers blood pressure, rich in antioxidants", calories: 2 },
      { name: "A small fruit (apple / guava / papaya)", amount: "1 medium or 1 cup", benefit: "Natural sugar, fiber, vitamins", calories: 60 },
    ],
    note: "Total ~62 cal. Hibiscus tea is great for bloating and water retention."
  },
  {
    time: "1:00 PM",
    label: "Lunch",
    emoji: "🥗",
    type: "meal",
    color: "#98D8C8",
    items: [
      { name: "Brown Rice / Roti (multigrain)", amount: "½ cup rice OR 1 roti", benefit: "Complex carbs, energy", calories: 110 },
      { name: "Dal (moong / masoor / chana)", amount: "1 cup cooked", benefit: "Plant protein, fiber", calories: 130 },
      { name: "Sabzi (any vegetable curry — low oil)", amount: "1 cup", benefit: "Vitamins, minerals", calories: 80 },
      { name: "Salad (cucumber, tomato, onion, lemon)", amount: "1 large bowl", benefit: "Fiber, hydration, digestive enzymes", calories: 30 },
    ],
    note: "Total ~350 cal | ~18g protein. Eat salad first before dal & rice."
  },
  {
    time: "3:00 PM",
    label: "Afternoon Ritual",
    emoji: "🍋",
    type: "ritual",
    color: "#F0E68C",
    items: [
      { name: "Jeera / Ginger Water", amount: "1 glass warm water with ½ tsp jeera", benefit: "Reduces bloating, aids digestion", calories: 3 },
    ],
    note: "Boil jeera in water for 5 mins, strain and sip warm. Great for afternoon energy dip."
  },
  {
    time: "4:00 PM",
    label: "Evening Snack",
    emoji: "🥜",
    type: "snack",
    color: "#FFB347",
    items: [
      { name: "Roasted Chana / Makhana", amount: "30g (small handful)", benefit: "Protein, fiber, keeps hunger away", calories: 100 },
      { name: "Green Tea", amount: "1 cup (unsweetened)", benefit: "Metabolism boost, antioxidants", calories: 2 },
    ],
    note: "Total ~102 cal. Avoid biscuits, chips, or chai with milk & sugar."
  },
  {
    time: "7:00 PM",
    label: "Dinner",
    emoji: "🥦",
    type: "meal",
    color: "#90EE90",
    items: [
      { name: "Grilled / Stir-fried Veggies", amount: "2 cups (broccoli, zucchini, bell pepper, cabbage)", benefit: "Low cal, high fiber, vitamins", calories: 80 },
      { name: "Paneer / Tofu", amount: "80g (low fat paneer or tofu)", benefit: "Protein, calcium", calories: 120 },
      { name: "Moong Dal Soup / Clear Vegetable Soup", amount: "1 bowl", benefit: "Light, protein-rich, filling", calories: 80 },
    ],
    note: "Total ~280 cal | ~20g protein. Keep dinner light. No roti or rice at night."
  },
  {
    time: "8:30 PM",
    label: "Post Dinner",
    emoji: "🌸",
    type: "ritual",
    color: "#FFB6C1",
    items: [
      { name: "Hibiscus / Chamomile Tea", amount: "1 cup (unsweetened)", benefit: "Reduces bloating, aids sleep, antioxidants", calories: 2 },
    ],
    note: "Walk for 10–15 mins after dinner before this tea."
  },
  {
    time: "9:30 PM",
    label: "Bedtime",
    emoji: "🌙",
    type: "ritual",
    color: "#B0C4DE",
    items: [
      { name: "Warm turmeric milk (plant-based) OR plain warm water", amount: "1 small cup", benefit: "Anti-inflammatory, aids deep sleep", calories: 30 },
    ],
    note: "Sleep by 10 PM. 7–8 hrs sleep is CRUCIAL for weight loss — it regulates hunger hormones."
  },
];

const typeColors = {
  meal: { bg: "#fff8e1", border: "#f59e0b", badge: "#f59e0b" },
  ritual: { bg: "#f0fdf4", border: "#22c55e", badge: "#22c55e" },
  snack: { bg: "#fdf4ff", border: "#a855f7", badge: "#a855f7" },
  activity: { bg: "#eff6ff", border: "#3b82f6", badge: "#3b82f6" },
};

const typeLabel = { meal: "MEAL", ritual: "RITUAL", snack: "SNACK", activity: "ACTIVITY" };

export default function App() {
  const [expanded, setExpanded] = useState({});
  const [checked, setChecked] = useState({});

  const toggle = (i) => setExpanded(e => ({ ...e, [i]: !e[i] }));
  const check = (i, j) => setChecked(c => ({ ...c, [`${i}-${j}`]: !c[`${i}-${j}`] }));

  const totalCalories = schedule
    .flatMap(s => s.items)
    .reduce((sum, item) => sum + (item.calories > 0 ? item.calories : 0), 0);

  const completedMeals = Object.values(checked).filter(Boolean).length;
  const totalItems = schedule.reduce((s, m) => s + m.items.length, 0);

  return (
    <div style={{
      minHeight: "100vh",
      background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
      fontFamily: "'Georgia', serif",
      padding: "20px 16px 40px",
    }}>
      {/* Header */}
      <div style={{ textAlign: "center", marginBottom: 28 }}>
        <div style={{
          display: "inline-block",
          background: "linear-gradient(135deg, #FF6B35, #F7C59F)",
          borderRadius: 20,
          padding: "4px 18px",
          fontSize: 11,
          fontFamily: "monospace",
          letterSpacing: 3,
          color: "#1a1a2e",
          fontWeight: 700,
          marginBottom: 12,
          textTransform: "uppercase"
        }}>Your Personalized Plan</div>
        <h1 style={{
          fontSize: 28,
          fontWeight: 800,
          color: "#fff",
          margin: "0 0 6px",
          lineHeight: 1.2,
          letterSpacing: -0.5,
        }}>Weight Loss Schedule</h1>
        <p style={{ color: "#94a3b8", fontSize: 13, margin: 0 }}>
          Vegetarian + Eggs • 70kg → 50kg Goal
        </p>

        {/* Stats Bar */}
        <div style={{
          display: "flex", justifyContent: "center", gap: 16, marginTop: 18,
          flexWrap: "wrap"
        }}>
          {[
            { label: "Daily Calories", value: `~${totalCalories}`, unit: "kcal", color: "#FF6B35" },
            { label: "Protein Target", value: "110–120", unit: "g", color: "#4ECDC4" },
            { label: "Completed", value: `${completedMeals}/${totalItems}`, unit: "items", color: "#96CEB4" },
          ].map((s, i) => (
            <div key={i} style={{
              background: "rgba(255,255,255,0.07)",
              borderRadius: 14,
              padding: "10px 18px",
              textAlign: "center",
              border: `1px solid rgba(255,255,255,0.1)`,
              backdropFilter: "blur(10px)"
            }}>
              <div style={{ fontSize: 20, fontWeight: 800, color: s.color }}>{s.value}<span style={{ fontSize: 11, marginLeft: 3, color: "#94a3b8" }}>{s.unit}</span></div>
              <div style={{ fontSize: 10, color: "#64748b", letterSpacing: 1, textTransform: "uppercase", marginTop: 2 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Schedule */}
      <div style={{ maxWidth: 480, margin: "0 auto" }}>
        {schedule.map((slot, i) => {
          const tc = typeColors[slot.type];
          const isOpen = expanded[i];
          const allChecked = slot.items.every((_, j) => checked[`${i}-${j}`]);

          return (
            <div key={i} style={{ display: "flex", gap: 12, marginBottom: 14 }}>
              {/* Timeline */}
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", minWidth: 48 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: allChecked ? "#22c55e" : tc.border,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 18, flexShrink: 0,
                  boxShadow: `0 0 12px ${tc.border}55`
                }}>{allChecked ? "✓" : slot.emoji}</div>
                {i < schedule.length - 1 && (
                  <div style={{ width: 2, flex: 1, background: "rgba(255,255,255,0.08)", marginTop: 4, minHeight: 20 }} />
                )}
              </div>

              {/* Card */}
              <div style={{
                flex: 1,
                background: "rgba(255,255,255,0.05)",
                border: `1px solid ${isOpen ? tc.border : "rgba(255,255,255,0.08)"}`,
                borderRadius: 16,
                overflow: "hidden",
                backdropFilter: "blur(10px)",
                transition: "border-color 0.2s",
                marginBottom: 4,
              }}>
                {/* Card Header */}
                <div
                  onClick={() => toggle(i)}
                  style={{
                    padding: "12px 14px",
                    cursor: "pointer",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                  }}
                >
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
                      <span style={{
                        background: tc.border,
                        color: "#fff",
                        fontSize: 9,
                        fontWeight: 700,
                        letterSpacing: 1.5,
                        padding: "2px 7px",
                        borderRadius: 20,
                        fontFamily: "monospace",
                      }}>{typeLabel[slot.type]}</span>
                      <span style={{ color: "#64748b", fontSize: 11, fontFamily: "monospace" }}>{slot.time}</span>
                    </div>
                    <div style={{ color: "#f1f5f9", fontWeight: 700, fontSize: 15 }}>{slot.label}</div>
                  </div>
                  <div style={{
                    color: "#64748b", fontSize: 18,
                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
                    transition: "transform 0.2s"
                  }}>⌄</div>
                </div>

                {/* Expanded */}
                {isOpen && (
                  <div style={{ padding: "0 14px 14px" }}>
                    <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)", paddingTop: 12, marginBottom: 10 }}>
                      {slot.items.map((item, j) => (
                        <div
                          key={j}
                          onClick={() => check(i, j)}
                          style={{
                            display: "flex",
                            gap: 10,
                            alignItems: "flex-start",
                            marginBottom: 10,
                            cursor: "pointer",
                            opacity: checked[`${i}-${j}`] ? 0.5 : 1,
                          }}
                        >
                          <div style={{
                            width: 20, height: 20, borderRadius: 6, flexShrink: 0, marginTop: 1,
                            border: `2px solid ${checked[`${i}-${j}`] ? "#22c55e" : tc.border}`,
                            background: checked[`${i}-${j}`] ? "#22c55e" : "transparent",
                            display: "flex", alignItems: "center", justifyContent: "center",
                            fontSize: 11, color: "#fff",
                          }}>{checked[`${i}-${j}`] ? "✓" : ""}</div>
                          <div style={{ flex: 1 }}>
                            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                              <span style={{ color: "#f1f5f9", fontWeight: 600, fontSize: 13, textDecoration: checked[`${i}-${j}`] ? "line-through" : "none" }}>
                                {item.name}
                              </span>
                              {item.calories > 0 && (
                                <span style={{
                                  background: "rgba(255,255,255,0.08)",
                                  color: "#94a3b8", fontSize: 10,
                                  padding: "2px 7px", borderRadius: 10, fontFamily: "monospace"
                                }}>{item.calories} cal</span>
                              )}
                            </div>
                            {item.amount && (
                              <div style={{ color: tc.border, fontSize: 11, fontWeight: 600, marginTop: 1 }}>{item.amount}</div>
                            )}
                            <div style={{ color: "#64748b", fontSize: 11, marginTop: 2 }}>{item.benefit}</div>
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* Note */}
                    <div style={{
                      background: `${tc.border}15`,
                      border: `1px solid ${tc.border}33`,
                      borderRadius: 10, padding: "8px 12px",
                      color: "#cbd5e1", fontSize: 11, lineHeight: 1.5,
                    }}>
                      💡 {slot.note}
                    </div>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div style={{
        maxWidth: 480, margin: "24px auto 0",
        background: "rgba(255,107,53,0.1)",
        border: "1px solid rgba(255,107,53,0.3)",
        borderRadius: 16, padding: "16px 18px",
      }}>
        <div style={{ color: "#FF6B35", fontWeight: 700, fontSize: 13, marginBottom: 8 }}>⚡ Daily Water Goal</div>
        <div style={{ color: "#94a3b8", fontSize: 12, lineHeight: 1.7 }}>
          Drink <strong style={{ color: "#fff" }}>2.5–3 litres</strong> of water throughout the day.<br />
          Start with copper water, sip warm water between meals.<br />
          Avoid cold water — it slows digestion.
        </div>
      </div>

      <div style={{ textAlign: "center", marginTop: 20, color: "#334155", fontSize: 11 }}>
        Tap each card to expand • Check items as you complete them
      </div>
    </div>
  );
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>