/* Painting — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "Repaint a tired room, top to bottom",
    why: "The single highest-leverage Saturday in the home. New color, new mood, $80 of paint.",
    img: "https://images.unsplash.com/photo-1562663474-6cbb3eaa4d14?w=1400&q=80",
    time: "1 weekend",
    cost: "~$80",
    slot: "feature",
  },
  {
    rank: 2,
    title: "Cut clean trim lines without tape",
    why: "The skill that separates a paint job from a paint *job*.",
    img: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?w=1000&q=80",
    time: "Skill, 30 min",
    cost: "Brush only",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "Paint cabinets that don't look painted",
    why: "Sand, prime, foam roll, repeat. The whole kitchen for under $200.",
    img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1000&q=80",
    time: "2 weekends",
    cost: "~$180",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "Refresh a front door in an afternoon",
    why: "Curb appeal, real ROI, and you'll be done before the second cup of coffee gets cold.",
    img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&q=80",
    time: "3 hours",
    cost: "~$45",
    slot: "wide",
  },
  {
    rank: 5,
    title: "Patch + touch-up like a pro",
    why: "The 20-minute fix for every nail hole, scuff, and dog-tail mark in the house.",
    img: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1000&q=80",
    time: "20 min",
    cost: "~$15",
    slot: "right2",
  },
];

const HOWTOS = [
  // Walls & ceilings
  { cat: "walls", title: "How to paint a room start to finish",        desc: "The full sequence — prep, prime, cut, roll, cure.",       time: "1 weekend",  unit: "Total",    level: 2, tags: ["Beginner", "Interior"] },
  { cat: "walls", title: "How to cut clean lines along trim",           desc: "Brush technique, the right angle, no tape.",              time: "30 min",     unit: "Skill",    level: 2, tags: ["Skill", "Brush"] },
  { cat: "walls", title: "How to paint a ceiling without back pain",   desc: "Pole, roller cover, and the W-method that saves time.",   time: "2 hours",    unit: "Per room", level: 2, tags: ["Tool: pole"] },

  // Trim & cabinets
  { cat: "trim", title: "How to paint cabinets that look factory",      desc: "Strip hardware, sand, prime, foam roll, recoat.",         time: "2 weekends", unit: "Kitchen",  level: 4, tags: ["Cabinets", "Sprayer optional"] },
  { cat: "trim", title: "How to paint interior doors so they last",     desc: "Lay flat, roll the panels, brush the edges.",             time: "2 hours",    unit: "Per door", level: 2, tags: ["Doors"] },

  // Exterior
  { cat: "exterior", title: "How to repaint a front door in an afternoon", desc: "Remove, sand, prime, two coats, rehang.",              time: "3 hours",    unit: "Total",    level: 1, tags: ["Curb appeal"] },

  // Specialty
  { cat: "specialty", title: "How to paint tile (and have it stick)",    desc: "Etch, prime with bonder, two coats of epoxy enamel.",    time: "1 weekend",  unit: "Per area", level: 4, tags: ["Bath", "Tile"] },

  // Repair / fixes
  { cat: "repair", title: "How to patch nail holes invisibly",           desc: "Spackle, sand smooth, prime the spot, dab to match.",    time: "20 min",     unit: "Per hole", level: 1, tags: ["Quick fix"] },
];

const CATS = [
  { id: "all",       label: "All guides" },
  { id: "walls",     label: "Walls & ceilings" },
  { id: "trim",      label: "Trim & cabinets" },
  { id: "exterior",  label: "Exterior" },
  { id: "specialty", label: "Specialty surfaces" },
  { id: "repair",    label: "Repair & touch-up" },
];

const MISTAKES = [
  {
    title: "Skipping primer because the can says you don't need it",
    body: "Self-priming paint is fine on a clean, similar-color wall. Going over patches, dark colors, glossy trim, or bare drywall? You'll always see the seams.",
    fix: "One coat of bonding primer on anything new, patched, glossy, or stained. Always.",
  },
  {
    title: "Buying the cheapest brush and roller you can find",
    body: "A $4 brush sheds bristles into your second coat. A bargain roller leaves a stippled rind on a flat wall. The brush is the paint job.",
    fix: "$18 angled sash brush + a 9″ microfiber roller. Wash, reuse — they last years.",
  },
  {
    title: "Painting in direct sun or below 50°F",
    body: "Paint flashes too fast in heat (lap lines, brush drag) and cures wrong in cold (peeling, blushing). Both ruin a job that looked perfect on day one.",
    fix: "Chase the shade around the house. 60–80°F, low humidity, no direct sun on the wall.",
  },
  {
    title: "Loading too much paint on the brush or roller",
    body: "Drips, runs, sags, and a coat that takes three times as long to dry — usually with a thumbprint somewhere in the middle.",
    fix: "Brush: dip ⅓ of the bristle, tap (don’t wipe). Roller: load, off-load on the screen until quiet.",
  },
  {
    title: "Recoating before the first coat is actually dry",
    body: "Latex is dry to touch in 1 hr and fully recoatable in 4 — different numbers. Recoating early lifts the first coat and you’ll see roller tracks for the life of the paint.",
    fix: "Read the can. If it says 4 hours, give it 4 hours. Walk away. Come back.",
  },
  {
    title: "Not labeling and saving the leftover for touch-ups",
    body: "Six months from now, that scuff in the hallway needs the exact paint. A mystery half-can in the basement is not it.",
    fix: "Sharpie the room name + date + finish on the lid. Decant a small jar for touch-ups.",
  },
];

const TOOLS = [
  { name: "Angled sash brush, 2½″",             desc: "The one brush. Cuts trim, doors, sashes, everything.",            price: "$18" },
  { name: "Microfiber 9″ roller cover, ⅛″ nap", desc: "Smooth walls, modern paints. Skip the bargain bin.",        price: "$8" },
  { name: "Roller frame + 4-ft pole",               desc: "Saves your back on ceilings. Threaded broom handle works.",           price: "$22" },
  { name: "Drop cloth (canvas)",                    desc: "Plastic slips, paper tears. Canvas catches.",                         price: "$30" },
  { name: "Putty knife + lightweight spackle",      desc: "Patches dry in 30 min, sand smooth, paint over.",                    price: "$12" },
  { name: "120-grit sanding sponge",                desc: "Knocks down patches, scuffs trim, rounds wood edges.",               price: "$6" },
  { name: "Painter’s tape (the blue)",          desc: "Only if you’re new. With practice, the brush is faster.",      price: "$8" },
  { name: "5-in-1 painter’s tool",             desc: "Scrapes, opens cans, cleans rollers, taps lids closed.",             price: "$10" },
];

const COLOR_PICKS = [
  { name: "Hushed Sage",  code: "HE-024", hex: "#9CB07F" },
  { name: "Burnt Linen",  code: "HE-088", hex: "#D9C7A8" },
  { name: "Smoke Cedar",  code: "HE-141", hex: "#5A4737" },
];

/* ---------- Components ---------- */

const Top5Card = ({ item }) => (
  <a className={`top5-card ${item.slot}`} href="#">
    <div className="img" style={{ backgroundImage: `url(${item.img})` }} />
    <span className="rank">{item.rank}</span>
    <div className="meta">
      <h3>{item.title}</h3>
      <p className="why">{item.why}</p>
      <div className="row">
        <span>{item.time}</span>
        <span>{item.cost}</span>
      </div>
    </div>
  </a>
);

const MenuRow = ({ guide, idx }) => (
  <a className="menu-row" href="#">
    <span className="num">№ {String(idx + 1).padStart(2, "0")}</span>
    <div className="title">
      <h4>{guide.title}</h4>
      <p className="desc">{guide.desc}</p>
    </div>
    <div className="tags">
      {guide.tags.map(t => <span key={t} className="tag">{t}</span>)}
    </div>
    <div className="duration">
      {guide.time}
      <span className="l">{guide.unit}</span>
    </div>
    <div className="level" data-level={guide.level >= 4 ? "hard" : "ok"}>
      {[1,2,3,4,5].map(i => (
        <span key={i} className={`pip ${i <= guide.level ? "on" : ""}`}></span>
      ))}
    </div>
    <div className="arrow">&rarr;</div>
  </a>
);

const Painting = ({ category = "all", showMistakes = true, showTools = true, showColor = true }) => {
  const filtered = category === "all" ? HOWTOS : HOWTOS.filter(g => g.cat === category);
  return (
    <div className="paint-page">
      {/* HERO */}
      <section className="paint-hero">
        <div className="wrap-wide">
          <div className="crumbs">
            <a href="/">Home</a>
            <span className="sep">/</span>
            <a href="/en/trades/">Trades</a>
            <span className="sep">/</span>
            <span className="here">Painting</span>
          </div>

          <div className="paint-hero-grid">
            <h1>The most <em>forgiving</em><br/>trade in the home.</h1>
            <div className="right-col">
              <p className="lede">
                A roller, a tray, two coats, and a Saturday &mdash; paint is the highest-leverage thing you can do to a room without a permit. Here&rsquo;s everything we know.
              </p>
            </div>
          </div>

          <div className="paint-stats">
            <div className="stat">
              <span className="n">{HOWTOS.length}</span>
              <span className="l">Guides in this trade</span>
            </div>
            <div className="stat">
              <span className="n"><em>$80</em></span>
              <span className="l">Avg. cost &middot; per room</span>
            </div>
            <div className="stat">
              <span className="n"><em>1 wknd</em></span>
              <span className="l">Median project length</span>
            </div>
            <div className="stat">
              <span className="n"><em>1<span style={{opacity:0.4}}>/5</span></em></span>
              <span className="l"><span className="dot">&bull;</span> DIY-ability</span>
            </div>
          </div>
        </div>
      </section>

      {/* TOP 5 */}
      <section className="paint-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">The Editor&rsquo;s 5</span>
              <h2>Five projects, ranked <em>by what they&rsquo;re worth.</em></h2>
            </div>
            <div className="right">
              <p>If you only ever do five painting projects in your life, do these. Ranked by transformation per dollar, per hour, per drop of paint.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* THE MENU */}
      <section className="paint-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every painting guide, <em>in one list.</em></h2>
            <span className="count">{filtered.length} of {HOWTOS.length} shown</span>
          </div>
          <div className="menu-tabs" role="tablist">
            {CATS.map(c => {
              const n = c.id === "all" ? HOWTOS.length : HOWTOS.filter(g => g.cat === c.id).length;
              return (
                <button key={c.id}
                  className={`menu-tab ${category === c.id ? "on" : ""}`}
                  onClick={() => window.__setPaintCategory && window.__setPaintCategory(c.id)}>
                  {c.label}<span className="num">{String(n).padStart(2,"0")}</span>
                </button>
              );
            })}
          </div>
          <div className="menu-list">
            {filtered.map((g, i) => <MenuRow key={g.title} guide={g} idx={i} />)}
          </div>
        </div>
      </section>

      {/* WHAT NOT TO DO */}
      {showMistakes && (
      <section className="paint-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What not to do</span>
            <h2>Six mistakes <em>everyone makes.</em></h2>
            <p>We&rsquo;ve made every one of these. Some twice. Save yourself the second coat &mdash; and the third trip to the paint store.</p>
          </div>
          <div className="mistakes-grid">
            {MISTAKES.map((m, i) => (
              <div className="mistake" key={m.title}>
                <div className="stamp">
                  <span className="x">&times;</span>
                  <span className="n">№ {String(i + 1).padStart(2,"0")}</span>
                </div>
                <div>
                  <h4>{m.title}</h4>
                  <p>{m.body}</p>
                  <div className="fix">{m.fix}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* TOOLS */}
      {showTools && (
      <section className="paint-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">Tools we actually use</span>
            <h2>Eight things, <em>nothing more.</em></h2>
            <p>The painting aisle is full of gadgets that promise the world and end up in a drawer. This is the kit a 30-year painter still reaches for.</p>
            <div className="pull">
              &ldquo;I&rsquo;ve owned a sprayer for fifteen years. I still cut every wall in the house with a $18 brush.&rdquo;
              <span className="src">&mdash; Sam, contributor</span>
            </div>
          </div>
          <div className="tool-list">
            {TOOLS.map((t, i) => (
              <div className="tool" key={t.name}>
                <span className="n">{String(i + 1).padStart(2,"0")}</span>
                <div>
                  <h5>{t.name}</h5>
                  <p className="desc">{t.desc}</p>
                </div>
                <span className="price">{t.price}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* COLOR OF THE MOMENT */}
      {showColor && (
      <section className="color-moment">
        <div className="wrap-wide color-moment-inner">
          <div>
            <span className="label">Color of the season</span>
            <h2>Three quiet greens for <em>the kind of spring</em> you actually want.</h2>
            <p>Our editors pulled the three colors we keep coming back to this season &mdash; soft, low-saturation, low-stakes. Easy to live with, easier to repaint when you change your mind.</p>
            <div className="picks">
              {COLOR_PICKS.map(c => (
                <div className="color-pick" key={c.code}>
                  <div className="swatch" style={{ background: c.hex }}></div>
                  <div className="name">{c.name}</div>
                  <div className="code">{c.code}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="color-card">
            <div className="img" style={{ backgroundImage: "url(https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80)" }}/>
            <div className="stamp">Shown &middot; Hushed Sage</div>
            <div className="badge">
              <div className="t">Try it in a north-facing bedroom</div>
              <div className="m">EGGSHELL &middot; 1 GAL &middot; ~$58</div>
            </div>
          </div>
        </div>
      </section>
      )}
    </div>
  );
};

window.Painting = Painting;