import { useState } from "react";
const days = [
{
id: "push",
label: "PUSH",
tag: "Chest · Shoulders · Triceps",
color: "#E8FF47",
💪",
emoji: "
note: "Focus: progressive overload on
bench & OHP",
exercises: [
{ name: "Flat Barbell Bench Press",
sets: "4", reps: "6–8", note: "Main
strength lift" },
{ name: "Incline Dumbbell Press",
sets: "3", reps: "10–12", note: "Upper
chest emphasis" },
{ name: "Overhead Press (Barbell)",
sets: "4", reps: "6–8", note: "Main
shoulder lift" },
{ name: "Cable Lateral Raise", sets:
"3", reps: "15–20", note: "Side delts, keep
it strict" },
{ name: "Tricep Rope Pushdown", sets:
"3", reps: "12–15", note: "" },
{ name: "Overhead DB Tricep
Extension", sets: "3", reps: "12–15", note:
"Long head focus" },
],
},
{
id: "pull",
label: "PULL",
tag: "Back · Biceps · Rear Delts",
color: "#FF6B47",
🔙",
emoji: "
note: "Focus: feel the stretch, control
the eccentric",
exercises: [
{ name: "Weighted Pull-ups / Lat
Pulldown", sets: "4", reps: "6–10", note:
"Pullups if you can, machine to assist" },
{ name: "Barbell or DB Row", sets:
"4", reps: "8–10", note: "Drive elbow back,
not up" },
{ name: "Seated Cable Row (wide
grip)", sets: "3", reps: "10–12", note:
"Upper back thickness" },
{ name: "Face Pulls", sets: "3",
reps: "15–20", note: "Shoulder health,
don't skip this" },
{ name: "Incline DB Curl", sets: "3",
reps: "10–12", note: "Full stretch at
bottom" },
{ name: "Hammer Curl", sets: "3",
reps: "12–15", note: "Brachialis + forearm
size" },
],
},
{
id: "legs",
label: "LEGS",
tag: "Quads · Hamstrings · Glutes ·
Calves",
color: "#47C8FF",
🦵",
emoji: "
note: "Don't skip. This is where the
fat burns fastest.",
exercises: [
{ name: "Barbell Squat", sets: "4",
reps: "6–8", note: "King of all lifts" },
{ name: "Romanian Deadlift", sets:
"3", reps: "10–12", note: "Hamstrings and
glutes, go slow" },
{ name: "Leg Press", sets: "3", reps:
"12–15", note: "High foot placement for
glutes" },
{ name: "Leg Curl (seated or lying)",
sets: "3", reps: "12–15", note: "" },
{ name: "Leg Extension", sets: "3",
reps: "15–20", note: "Quad definition
finisher" },
{ name: "Standing Calf Raise", sets:
"4", reps: "15–20", note: "2 second hold at
top" },
],
},
{
id: "upper",
label: "UPPER",
tag: "Full Upper Body — Hypertrophy
Focus",
color: "#B347FF",
⬆️",
emoji: "
note: "Higher volume, moderate weight.
This is the 'look jacked in April' day.",
exercises: [
{ name: "Incline Barbell Press",
sets: "4", reps: "8–10", note: "Upper chest
& shoulders" },
{ name: "Chest-Supported DB Row",
sets: "4", reps: "10–12", note: "No lower
back cheating" },
{ name: "Dumbbell Shoulder Press",
sets: "3", reps: "10–12", note: "" },
{ name: "Lat Pulldown (close grip)",
sets: "3", reps: "10–12", note: "Lower
lats, V-taper" },
{ name: "Cable Fly (low to high)",
sets: "3", reps: "12–15", note: "Chest
definition" },
{ name: "Barbell Curl", sets: "3",
reps: "10–12", note: "" },
{ name: "Skull Crushers", sets: "3",
reps: "10–12", note: "" },
],
},
{
id: "lower",
label: "LOWER",
tag: "Legs — Strength + Posterior
Chain",
color: "#47FFB3",
⬇️",
emoji: "
note: "Deadlift variation day. More
posterior chain, less quad.",
exercises: [
{ name: "Conventional Deadlift",
sets: "4", reps: "5–6", note: "Heaviest
lift of the week" },
{ name: "Bulgarian Split Squat",
sets: "3", reps: "10 each", note: "The
humbling exercise" },
{ name: "Hack Squat or Leg Press",
sets: "3", reps: "12–15", note: "" },
{ name: "Seated Leg Curl", sets: "3",
reps: "12–15", note: "" },
{ name: "Hip Thrust", sets: "3",
reps: "12–15", note: "Glute hypertrophy +
calorie burn" },
{ name: "Seated Calf Raise", sets:
"4", reps: "15–20", note: "Soleus focus" },
],
},
];
const schedule = [
{ day: "MON", session: "push" },
{ day: "TUE", session: "pull" },
{ day: "WED", session: "legs" },
{ day: "THU", session: "rest", label:
"REST" },
{ day: "FRI", session: "upper" },
{ day: "SAT", session: "lower" },
{ day: "SUN", session: "rest", label:
"REST" },
];
export default function PPLRoutine() {
const [active, setActive] =
useState("push");
const current = [Link]((d) => [Link] ===
active);
return (
<div style={{
background: "#0e0e0e",
minHeight: "100vh",
fontFamily: "'Inter', system-ui,
sans-serif",
color: "#f0f0f0",
padding: "24px 16px",
maxWidth: 680,
margin: "0 auto",
}}>
{/* Header */}
<div style={{ marginBottom: 28 }}>
<div style={{
fontSize: 11,
letterSpacing: "0.2em",
color: "#666",
textTransform: "uppercase",
marginBottom: 6,
}}>5-Day · Full Gym ·
Returner</div>
<h1 style={{
fontSize: 32,
fontWeight: 900,
margin: 0,
lineHeight: 1,
letterSpacing: "-0.02em",
}}>
PUSH · PULL · LEGS<br />
<span style={{ color: "#E8FF47"
}}>UPPER · LOWER</span>
</h1>
<div style={{ fontSize: 13, color:
"#888", marginTop: 8 }}>
80kg → 70kg lean · June–April ·
Off-hoodie season
</div>
</div>
{/* Weekly Schedule Strip */}
<div style={{
display: "flex",
gap: 6,
marginBottom: 28,
overflowX: "auto",
paddingBottom: 4,
}}>
{[Link](({ day, session,
label }) => {
const isRest = session ===
"rest";
const dayData = [Link]((d) =>
[Link] === session);
const isActive = active ===
session && !isRest;
return (
<button
key={day}
onClick={() => !isRest &&
setActive(session)}
style={{
flex: "0 0 auto",
background: isRest
? "#1a1a1a"
: isActive
? [Link]
: "#1e1e1e",
color: isActive ? "#0e0e0e"
: isRest ? "#444" : "#aaa",
border: "none",
borderRadius: 8,
padding: "10px 12px",
cursor: isRest ? "default"
: "pointer",
textAlign: "center",
minWidth: 56,
transition: "all 0.15s",
}}
>
<div style={{ fontSize: 10,
fontWeight: 700, letterSpacing: "0.1em" }}>
{day}</div>
<div style={{ fontSize: 11,
marginTop: 3, fontWeight: 600 }}>
{isRest ? "OFF" :
[Link]}
</div>
</button>
);
})}
</div>
{/* Day Tabs */}
<div style={{ display: "flex", gap:
8, marginBottom: 20, flexWrap: "wrap" }}>
{[Link]((d) => (
<button
key={[Link]}
onClick={() => setActive([Link])}
style={{
background: active === [Link] ?
[Link] : "#1e1e1e",
color: active === [Link] ?
"#0e0e0e" : "#aaa",
border: "none",
borderRadius: 6,
padding: "8px 16px",
fontWeight: 700,
fontSize: 13,
cursor: "pointer",
letterSpacing: "0.05em",
transition: "all 0.15s",
}}
>
{[Link]}
</button>
))}
</div>
{/* Active Day Card */}
{current && (
<div style={{
background: "#161616",
borderRadius: 16,
overflow: "hidden",
border: `1px solid #2a2a2a`,
}}>
{/* Day Header */}
<div style={{
padding: "20px 24px",
borderBottom: `3px solid
${[Link]}`,
background: "#1a1a1a",
}}>
<div style={{ display: "flex",
alignItems: "center", gap: 10,
marginBottom: 4 }}>
<span style={{ fontSize: 24
}}>{[Link]}</span>
<span style={{
fontSize: 22,
fontWeight: 900,
letterSpacing: "-0.01em",
color: [Link],
}}>{[Link]} DAY</span>
</div>
<div style={{ fontSize: 13,
color: "#888", marginBottom: 8 }}>
{[Link]}</div>
<div style={{
fontSize: 12,
color: [Link],
background: [Link] +
"15",
padding: "6px 10px",
borderRadius: 6,
display: "inline-block",
}}>
⚡ {[Link]}
</div>
</div>
{/* Exercises */}
<div style={{ padding: "8px 0"
}}>
{[Link]((ex, i)
=> (
<div
key={i}
style={{
padding: "14px 24px",
borderBottom: i <
[Link] - 1 ? "1px solid
#222" : "none",
display: "flex",
alignItems: "flex-start",
gap: 16,
}}
>
{/* Index */}
<div style={{
fontSize: 12,
color: [Link],
fontWeight: 700,
minWidth: 20,
marginTop: 2,
opacity: 0.7,
}}>
{i + 1}
</div>
<div style={{ flex: 1 }}>
<div style={{ fontSize:
15, fontWeight: 600, marginBottom: 4 }}>
{[Link]}</div>
<div style={{ display:
"flex", gap: 8, flexWrap: "wrap" }}>
<span style={{
background:
"#2a2a2a",
borderRadius: 5,
padding: "3px 10px",
fontSize: 12,
fontWeight: 700,
color: "#ccc",
}}>{[Link]}
sets</span>
<span style={{
background:
[Link] + "20",
color: [Link],
borderRadius: 5,
padding: "3px 10px",
fontSize: 12,
fontWeight: 700,
}}>{[Link]}
reps</span>
{[Link] && (
<span style={{
fontSize: 11,
color: "#666",
padding: "3px 0",
fontStyle:
"italic",
}}>{[Link]}</span>
)}
</div>
</div>
</div>
))}
</div>
</div>
)}
{/* Bottom Notes */}
<div style={{
marginTop: 24,
padding: "16px 20px",
background: "#161616",
borderRadius: 12,
border: "1px solid #2a2a2a",
}}>
<div style={{ fontSize: 12, color:
"#E8FF47", fontWeight: 700, marginBottom:
10, letterSpacing: "0.1em" }}>
THE PLAN
</div>
{[
[" 📅 June–Sept", "Cut mode. Train
hard, eat in deficit (~300–500 kcal/day).
Look decent without the hoodie."],
[" 🍂 Oct–March", "Bulk/recomp.
Add muscle while staying lean. Progressive
overload is your religion."],
[" 🌸 April", "Final lean-out.
Slight cut, dial in protein (2g/kg). Remove
hoodie. People stare."],
[" 🥩 Always", "Protein:
160g+/day. Sleep 7–8h. These two do 80% of
the work."],
[" ⬆️ Progressive Overload", "Add
reps or weight every 1–2 weeks. If you're
not progressing, you're just exercising."],
].map(([title, body], i) => (
<div key={i} style={{
marginBottom: 10 }}>
<span style={{ fontSize: 12,
fontWeight: 700, color: "#ccc" }}>{title}
</span>
<span style={{ fontSize: 12,
color: "#777" }}>{body}</span>
</div>
))}
</div>
</div>
);
}