---
id: 69ea0bb3e7000f44c207bb0e
title: Step 71
challengeType: 0
dashedName: step-71
---

# --description--

To make the localStorage feature work finally, change the state initialization from `defaultPlayer` to `loadPlayer`. This ensures the state starts with any available saved data.

Now test out the localstorage feature. Everything you enter should stick after the preview refreshes or you reload the page.

You can also change the image `src` link to `https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/maradona.png` to see the image change in realtime. Just make sure you change the player name to Maradona.

With that, your football player card builder project is complete!

# --hints--

Your `useState` should be initialized with `loadPlayer` instead of `defaultPlayer`.

```js
assert.match(__helpers.removeJSComments(code), /useState\s*<\s*PlayerData\s*>\s*\(\s*loadPlayer\b/);
```

# --seed--

## --seed-contents--

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Football Player Card Builder</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.tsx"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { FootballPlayerCard } from './index.tsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<FootballPlayerCard />);
    </script>
  </body>
</html>
```

```css
html,
body {
  min-height: 100%;
  font-family: "Lato", system-ui, sans-serif;
  background-color: #0a0a23;
}

.page {
  min-height: 100vh;
  background-color: #0a0a23;
}

.header {
  background-color: #1b1b32;
  border-bottom: 3px solid #f1be32;
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px;
}

.header-title {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f1be32;
}

.header-subtitle {
  font-size: 12px;
  color: #99c9ff;
  margin-top: 2px;
}

.main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

.form-panel {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section-title {
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f2937;
  margin-bottom: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group select {
  padding: 7px 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-panel > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .preview-panel {
    position: sticky;
    top: 32px;
  }
}

.tier-elite { 
  --accent: #dbb8ff; 
}

.tier-gold   { 
  --accent: #f1be32; 
}

.tier-silver { 
  --accent: #99c9ff; 
}

.tier-bronze { 
  --accent: #acd157; 
}

.preview-box {
  width: 100%;
  background-color: #1b1b32;
  border-radius: 12px;
  border: 2px solid var(--accent);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preview-label {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dfdfe2;
}

.preview-hint {
  font-size: 11px;
  color: #99c9ff;
  margin-top: 2px;
}

.card-wrapper {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  background-color: var(--accent);
  padding: 3px;
  display: inline-block;
}

.card {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  width: 260px;
  background-color: #0a0a23;
  font-family: "Lato", sans-serif;
  overflow: hidden;
}

.card-header {
  background-color: #1b1b32;
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-rating {
  font-size: 48px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.card-position {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.card-header-right {
  text-align: right;
}

.card-tier-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0a0a23;
  background-color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.card-club {
  font-size: 13px;
  font-weight: 700;
  color: #dfdfe2;
}

.card-image-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #1b1b32;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.card-name-strip {
  background-color: var(--accent);
  padding: 8px 20px;
  text-align: center;
}

.card-name {
  font-size: 18px;
  font-weight: 900;
  color: #0a0a23;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-stats {
  background-color: #dfdfe2;
  padding: 12px 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 12px;
}

.stat-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-col:last-child {
  padding-left: 28px;
}

.stat-divider {
  background-color: #d0d0d5;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-value {
  font-size: 15px;
  font-weight: 900;
  color: #0a0a23;
  min-width: 24px;
  text-align: right;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #1b1b32;
  letter-spacing: 0.08em;
}
```

```tsx
const { useState, useEffect } = React;

const POSITIONS = [
  "GK",
  "CB",
  "LB",
  "RB",
  "CDM",
  "CM",
  "CAM",
  "LW",
  "RW",
  "ST",
  "CF"
] as const;

type Position = typeof POSITIONS[number];

interface PlayerData {
  name: string;
  overallRating: number;
  position: string;
  club: string;
  imageUrl: string;
  pac: number;
  sho: number;
  pas: number;
  dri: number;
  def: number;
  phy: number;
}

const STORAGE_KEY = "football_player_card";

export function getPlayerTier(rating: number): string {
  if (rating >= 92) return "elite";
  if (rating >= 85) return "gold";
  if (rating >= 75) return "silver";
  return "bronze";
}

export const PlayerCard = ({ player }: { player: PlayerData }) => {
  return (
    <div className={`card-wrapper tier-${getPlayerTier(player.overallRating)}`}>
      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-rating">{player.overallRating}</div>
            <div className="card-position">{player.position}</div>
          </div>
          <div className="card-header-right">
            <div className="card-tier-badge">
              {getPlayerTier(player.overallRating).toUpperCase()}
            </div>
            <div className="card-club">{player.club}</div>
          </div>
        </div>
        <div className="card-image-wrap">
          <img src={player.imageUrl} alt={`${player.name} headshot`} className="card-image" />
        </div>
        <div className="card-name-strip">
          <span className="card-name">{player.name}</span>
        </div>
        <div className="card-stats">
          <div className="stat-col">
            <div className="stat-row">
              <span className="stat-value">{player.pac}</span>
              <span className="stat-label">PAC</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.sho}</span>
              <span className="stat-label">SHO</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.pas}</span>
              <span className="stat-label">PAS</span>
            </div>
          </div>
          <div className="stat-divider" />
          <div className="stat-col">
            <div className="stat-row">
              <span className="stat-value">{player.dri}</span>
              <span className="stat-label">DRI</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.def}</span>
              <span className="stat-label">DEF</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.phy}</span>
              <span className="stat-label">PHY</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const defaultPlayer: PlayerData = {
  name: "PELE",
  overallRating: 98,
  position: "ST",
  club: "Santos FC",
  imageUrl: "https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/pele.jpg",
  pac: 97,
  sho: 98,
  pas: 83,
  dri: 99,
  def: 41,
  phy: 75,
};

function loadPlayer(): PlayerData {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      return {
        ...defaultPlayer, 
        ...JSON.parse(saved) 
      }
    };
  } catch (error) {
    console.log("Failed to load player data, using defaults:", error);
  }
  return defaultPlayer;
}

export const FootballPlayerCard = () => {
--fcc-editable-region--
  const [player, setPlayer] = useState<PlayerData>(defaultPlayer);
--fcc-editable-region--

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(player));
    } catch (error) {
      console.log("Failed to save player data:", error);
    }
  }, [player]);

  return (
    <div className="page">
      <header className="header">
        <div className="header-inner">
          <p className="header-title">Football Card Builder</p>
          <p className="header-subtitle">Customize your player card</p>
        </div>
      </header>
      <main className="main">
        <div className="layout">
          <div className="form-panel">
            <div>
              <p className="form-section-title">Player Info</p>
              <div className="form-group">
                <label className="label" htmlFor="name">
                  Name
                </label>
                <input
                  id="name"
                  className="input"
                  type="text"
                  value={player.name}
                  onChange={(e) =>
                    setPlayer({ ...player, name: e.target.value })
                  }
                />
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="label" htmlFor="position">
                    Position
                  </label>
                  <select
                    id="position"
                    className="input"
                    value={player.position}
                    onChange={(e) => 
                      setPlayer({ ...player, position: e.target.value as Position })}
                  >
                    {POSITIONS.map(
                      (pos) => (
                        <option key={pos} value={pos}>
                          {pos}
                        </option>
                      )
                    )}
                  </select>
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="overallRating">
                    Overall
                  </label>
                  <input
                    id="overallRating"
                    className="input"
                    type="number"
                    value={player.overallRating}
                    onChange={(e) =>
                      setPlayer({
                        ...player,
                        overallRating: Number(e.target.value),
                      })
                    }
                  />
                </div>
              </div>
              <div className="form-group">
                <label className="label" htmlFor="club">
                  Club
                </label>
                <input
                  id="club"
                  className="input"
                  type="text"
                  value={player.club}
                  onChange={(e) =>
                    setPlayer({ ...player, club: e.target.value })
                  }
                />
              </div>
              <div className="form-group">
                <label className="label" htmlFor="imageUrl">
                  Image URL
                </label>
                <input
                  id="imageUrl"
                  className="input"
                  type="text"
                  value={player.imageUrl}
                  onChange={(e) =>
                    setPlayer({ ...player, imageUrl: e.target.value })
                  }
                />
              </div>
            </div>
            <div>
              <p className="form-section-title">Player Stats</p>
              <div className="stats-grid">
                <div className="form-group">
                  <label className="label" htmlFor="pac">
                    PAC
                  </label>
                  <input
                    id="pac"
                    className="input"
                    type="number"
                    value={player.pac}
                    onChange={(e) =>
                      setPlayer({ ...player, pac: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="sho">
                    SHO
                  </label>
                  <input
                    id="sho"
                    className="input"
                    type="number"
                    value={player.sho}
                    onChange={(e) =>
                      setPlayer({ ...player, sho: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="pas">
                    PAS
                  </label>
                  <input
                    id="pas"
                    className="input"
                    type="number"
                    value={player.pas}
                    onChange={(e) =>
                      setPlayer({ ...player, pas: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="dri">
                    DRI
                  </label>
                  <input
                    id="dri"
                    className="input"
                    type="number"
                    value={player.dri}
                    onChange={(e) =>
                      setPlayer({ ...player, dri: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="def">
                    DEF
                  </label>
                  <input
                    id="def"
                    className="input"
                    type="number"
                    value={player.def}
                    onChange={(e) =>
                      setPlayer({ ...player, def: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="phy">
                    PHY
                  </label>
                  <input
                    id="phy"
                    className="input"
                    type="number"
                    value={player.phy}
                    onChange={(e) =>
                      setPlayer({ ...player, phy: Number(e.target.value) })
                    }
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="preview-panel">
            <p className="preview-label">Live Preview</p>
            <p className="preview-hint">Updates as you type</p>
            <div
              className={`preview-box tier-${getPlayerTier(player.overallRating)}`}
            >
              <PlayerCard player={player} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};
```

# --solutions--

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Football Player Card Builder</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.tsx"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { FootballPlayerCard } from './index.tsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<FootballPlayerCard />);
    </script>
  </body>
</html>
```

```css
html,
body {
  min-height: 100%;
  font-family: "Lato", system-ui, sans-serif;
  background-color: #0a0a23;
}

.page {
  min-height: 100vh;
  background-color: #0a0a23;
}

.header {
  background-color: #1b1b32;
  border-bottom: 3px solid #f1be32;
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px;
}

.header-title {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f1be32;
}

.header-subtitle {
  font-size: 12px;
  color: #99c9ff;
  margin-top: 2px;
}

.main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

.form-panel {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section-title {
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f2937;
  margin-bottom: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group select {
  padding: 7px 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-panel > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .preview-panel {
    position: sticky;
    top: 32px;
  }
}

.tier-elite { 
  --accent: #dbb8ff; 
}

.tier-gold   { 
  --accent: #f1be32; 
}

.tier-silver { 
  --accent: #99c9ff; 
}

.tier-bronze { 
  --accent: #acd157; 
}

.preview-box {
  width: 100%;
  background-color: #1b1b32;
  border-radius: 12px;
  border: 2px solid var(--accent);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preview-label {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dfdfe2;
}

.preview-hint {
  font-size: 11px;
  color: #99c9ff;
  margin-top: 2px;
}

.card-wrapper {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  background-color: var(--accent);
  padding: 3px;
  display: inline-block;
}

.card {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  width: 260px;
  background-color: #0a0a23;
  font-family: "Lato", sans-serif;
  overflow: hidden;
}

.card-header {
  background-color: #1b1b32;
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-rating {
  font-size: 48px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.card-position {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.card-header-right {
  text-align: right;
}

.card-tier-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0a0a23;
  background-color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.card-club {
  font-size: 13px;
  font-weight: 700;
  color: #dfdfe2;
}

.card-image-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #1b1b32;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.card-name-strip {
  background-color: var(--accent);
  padding: 8px 20px;
  text-align: center;
}

.card-name {
  font-size: 18px;
  font-weight: 900;
  color: #0a0a23;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-stats {
  background-color: #dfdfe2;
  padding: 12px 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 12px;
}

.stat-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-col:last-child {
  padding-left: 28px;
}

.stat-divider {
  background-color: #d0d0d5;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-value {
  font-size: 15px;
  font-weight: 900;
  color: #0a0a23;
  min-width: 24px;
  text-align: right;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #1b1b32;
  letter-spacing: 0.08em;
}
```

```tsx
const { useState, useEffect } = React;

const POSITIONS = [
  "GK",
  "CB",
  "LB",
  "RB",
  "CDM",
  "CM",
  "CAM",
  "LW",
  "RW",
  "ST",
  "CF"
] as const;

type Position = typeof POSITIONS[number];

interface PlayerData {
  name: string;
  overallRating: number;
  position: string;
  club: string;
  imageUrl: string;
  pac: number;
  sho: number;
  pas: number;
  dri: number;
  def: number;
  phy: number;
}

const STORAGE_KEY = "football_player_card";

export function getPlayerTier(rating: number): string {
  if (rating >= 92) return "elite";
  if (rating >= 85) return "gold";
  if (rating >= 75) return "silver";
  return "bronze";
}

export const PlayerCard = ({ player }: { player: PlayerData }) => {
  return (
    <div className={`card-wrapper tier-${getPlayerTier(player.overallRating)}`}>
      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-rating">{player.overallRating}</div>
            <div className="card-position">{player.position}</div>
          </div>
          <div className="card-header-right">
            <div className="card-tier-badge">
              {getPlayerTier(player.overallRating).toUpperCase()}
            </div>
            <div className="card-club">{player.club}</div>
          </div>
        </div>
        <div className="card-image-wrap">
          <img src={player.imageUrl} alt={`${player.name} headshot`} className="card-image" />
        </div>
        <div className="card-name-strip">
          <span className="card-name">{player.name}</span>
        </div>
        <div className="card-stats">
          <div className="stat-col">
            <div className="stat-row">
              <span className="stat-value">{player.pac}</span>
              <span className="stat-label">PAC</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.sho}</span>
              <span className="stat-label">SHO</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.pas}</span>
              <span className="stat-label">PAS</span>
            </div>
          </div>
          <div className="stat-divider" />
          <div className="stat-col">
            <div className="stat-row">
              <span className="stat-value">{player.dri}</span>
              <span className="stat-label">DRI</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.def}</span>
              <span className="stat-label">DEF</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">{player.phy}</span>
              <span className="stat-label">PHY</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const defaultPlayer: PlayerData = {
  name: "PELE",
  overallRating: 98,
  position: "ST",
  club: "Santos FC",
  imageUrl: "https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/pele.jpg",
  pac: 97,
  sho: 98,
  pas: 83,
  dri: 99,
  def: 41,
  phy: 75,
};

function loadPlayer(): PlayerData {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      return {
        ...defaultPlayer, 
        ...JSON.parse(saved) 
      }
    };
  } catch (error) {
    console.log("Failed to load player data, using defaults:", error);
  }
  return defaultPlayer;
}

export const FootballPlayerCard = () => {
  const [player, setPlayer] = useState<PlayerData>(loadPlayer);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(player));
    } catch (error) {
      console.log("Failed to save player data:", error);
    }
  }, [player]);

  return (
    <div className="page">
      <header className="header">
        <div className="header-inner">
          <p className="header-title">Football Card Builder</p>
          <p className="header-subtitle">Customize your player card</p>
        </div>
      </header>
      <main className="main">
        <div className="layout">
          <div className="form-panel">
            <div>
              <p className="form-section-title">Player Info</p>
              <div className="form-group">
                <label className="label" htmlFor="name">
                  Name
                </label>
                <input
                  id="name"
                  className="input"
                  type="text"
                  value={player.name}
                  onChange={(e) =>
                    setPlayer({ ...player, name: e.target.value })
                  }
                />
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="label" htmlFor="position">
                    Position
                  </label>
                  <select
                    id="position"
                    className="input"
                    value={player.position}
                    onChange={(e) => 
                      setPlayer({ ...player, position: e.target.value as Position })}
                  >
                    {POSITIONS.map(
                      (pos) => (
                        <option key={pos} value={pos}>
                          {pos}
                        </option>
                      )
                    )}
                  </select>
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="overallRating">
                    Overall
                  </label>
                  <input
                    id="overallRating"
                    className="input"
                    type="number"
                    value={player.overallRating}
                    onChange={(e) =>
                      setPlayer({
                        ...player,
                        overallRating: Number(e.target.value),
                      })
                    }
                  />
                </div>
              </div>
              <div className="form-group">
                <label className="label" htmlFor="club">
                  Club
                </label>
                <input
                  id="club"
                  className="input"
                  type="text"
                  value={player.club}
                  onChange={(e) =>
                    setPlayer({ ...player, club: e.target.value })
                  }
                />
              </div>
              <div className="form-group">
                <label className="label" htmlFor="imageUrl">
                  Image URL
                </label>
                <input
                  id="imageUrl"
                  className="input"
                  type="text"
                  value={player.imageUrl}
                  onChange={(e) =>
                    setPlayer({ ...player, imageUrl: e.target.value })
                  }
                />
              </div>
            </div>
            <div>
              <p className="form-section-title">Player Stats</p>
              <div className="stats-grid">
                <div className="form-group">
                  <label className="label" htmlFor="pac">
                    PAC
                  </label>
                  <input
                    id="pac"
                    className="input"
                    type="number"
                    value={player.pac}
                    onChange={(e) =>
                      setPlayer({ ...player, pac: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="sho">
                    SHO
                  </label>
                  <input
                    id="sho"
                    className="input"
                    type="number"
                    value={player.sho}
                    onChange={(e) =>
                      setPlayer({ ...player, sho: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="pas">
                    PAS
                  </label>
                  <input
                    id="pas"
                    className="input"
                    type="number"
                    value={player.pas}
                    onChange={(e) =>
                      setPlayer({ ...player, pas: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="dri">
                    DRI
                  </label>
                  <input
                    id="dri"
                    className="input"
                    type="number"
                    value={player.dri}
                    onChange={(e) =>
                      setPlayer({ ...player, dri: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="def">
                    DEF
                  </label>
                  <input
                    id="def"
                    className="input"
                    type="number"
                    value={player.def}
                    onChange={(e) =>
                      setPlayer({ ...player, def: Number(e.target.value) })
                    }
                  />
                </div>
                <div className="form-group">
                  <label className="label" htmlFor="phy">
                    PHY
                  </label>
                  <input
                    id="phy"
                    className="input"
                    type="number"
                    value={player.phy}
                    onChange={(e) =>
                      setPlayer({ ...player, phy: Number(e.target.value) })
                    }
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="preview-panel">
            <p className="preview-label">Live Preview</p>
            <p className="preview-hint">Updates as you type</p>
            <div
              className={`preview-box tier-${getPlayerTier(player.overallRating)}`}
            >
              <PlayerCard player={player} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};
```
