/* /en/decorate — Production Decorate L1 Hub · Vol. VIII */

const DecorateHero = () => (
  <section className="dec-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=2400&q=85')" }} />
    <div className="cover-masthead">
      <span>HowTo Quarterly · Vol. VIII</span>
      <span className="ctr">The Decorate Issue</span>
      <span className="right">№ 08 / Spring 2026</span>
    </div>
    <div className="cover-content">
      <div>
        <div className="cover-eyebrow">Decorate · A Field Guide</div>
        <h1>The cheapest renovation is paint and a <em>Saturday.</em></h1>
      </div>
      <div>
        <p className="deck">
          142 guides to paint, hardware, textiles, and the small changes that transform a room before lunch.
        </p>
        <div className="cover-meta">
          <div><span className="k">Section</span><span className="v">Decorate</span></div>
          <div><span className="k">Guides</span><span className="v">142 and counting</span></div>
          <div><span className="k">Reading time</span><span className="v">9 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const Essay = ({ dropcap }) => (
  <section className={`essay ${dropcap ? "" : "no-dropcap"}`}>
    <div className="essay-wrap">
      <div className="section-folio">
        <span>Editor's Note · The Decorate Issue</span>
        <span className="pg">PG. 04</span>
      </div>
      <div className="essay-grid">
        <aside className="essay-side">
          <h2>Why we decorate <em>ourselves.</em></h2>
          <div className="by">By the Editors · 9 min read</div>
        </aside>
        <div className="essay-body">
          <p className="dropcap">
            Nobody talks about the Saturday when everything changed. Not a renovation — no demo, no contractor, no five-figure invoice. Just a gallon of warm terracotta, a $22 brush, and about four hours of careful work on one wall. But the room that came out the other side of that Saturday was not the room that went in. It was the room you'd been meaning to have.
          </p>
          <p>
            That's the peculiar magic of the decorate lane — the transformation-to-cost ratio is embarrassingly high. A $60 set of brass cabinet pulls replaces $8 builder-grade hardware and makes a kitchen feel chosen instead of assigned. A gallery wall built from $30 in picture hooks and paper you already own turns an empty rental wall into something that looks like a deliberate, personal collection. Curtain rods hung four inches higher and eight inches wider than the window frame — $40 in hardware, 45 minutes of work — make every room they're in read as taller and more intentional.
          </p>
          <div className="pull">
            "The sample test is not optional. It never is."
          </div>
          <p>
            The guides in this lane are written around one conviction: decorating decisions are mostly reversible, and that reversibility should be used aggressively. You should try the dark accent wall. You should try the warm brass hardware. You should try the gallery wall you've been pinning for two years. The stakes are low. The prep is the hard part. And the worst outcome — a wall you painted that you don't love — costs you $50 and an afternoon to undo.
          </p>
          <p>
            Below, the full menu. By room. By project. With the honest time, cost, and prep requirements the back of the paint can never includes.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const EditorsPick = () => (
  <section className="pick">
    <div className="pick-spread">
      <div className="pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1505409859467-3a796fd5798e?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="pick-text">
        <div className="eyebrow">Featured Decorate · Living Room</div>
        <h3>How to paint an accent <em>wall.</em></h3>
        <p>
          The single highest-impact change in the decorate lane. One wall, one color, one Saturday. Sam covers prep, cut-in technique, and the second-coat timing that most first-timers get wrong — with the before photo to prove how much it matters.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Beginner</span>
          <span><span className="dot"></span>4 hr + dry</span>
          <span><span className="dot"></span>$50 in materials</span>
        </div>
        <a href="/en/living-room/decorate/how-to-paint-an-accent-wall/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const ROOMS = [
  { name: "Living Room",   slug: "living-room",  desc: "Accent walls, gallery walls, curtain placement, and area rug sizing — the flagship decorate room.",      count: 31, img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Bedroom",       slug: "bedroom",      desc: "Accent walls, DIY headboards, curtain height, gallery walls, and the ceiling treatment question.",        count: 24, img: "https://images.unsplash.com/photo-1505693314120-0d443867891c?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden",  desc: "Garden bed color, fence and gate paint, mailbox placement, and seasonal outdoor decoration.",             count: 21, img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Exterior",      slug: "exterior",     desc: "Body color, trim, front door, and the sample-test protocol for a decision visible from the street daily.", count: 14, img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" },
  { name: "Kitchen",       slug: "kitchen",      desc: "Cabinet hardware swaps, open-shelf styling, cabinet paint, and tile refresh.",                           count: 12, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Deck & Patio",  slug: "deck-patio",   desc: "Deck stain, concrete paint, outdoor rug sizing, and string light rigging.",                              count: 12, img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1200&q=80" },
  { name: "Bathroom",      slug: "bathroom",     desc: "Mirror swaps, light fixture changes, grout paint, shower curtains, and the free fix: bulb temperature.",  count: 11, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Basement",      slug: "basement",     desc: "Dark-ceiling logic, concrete floor stain, and the bar-or-media-room finishing touches.",                  count: 8,  img: "https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&q=80" },
  { name: "Attic",         slug: "attic",        desc: "Sloped ceilings, knee walls, dormers, and how to handle three ceiling heights in one room.",              count: 5,  img: "https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80" },
  { name: "Garage",        slug: "garage",       desc: "Floor paint (epoxy vs. latex), workshop wall color, and the one paint question every garage owner asks.", count: 4,  img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
];

const DecorateRooms = () => {
  const total = ROOMS.reduce((s, r) => s + r.count, 0);
  const [accOpen, setAccOpen] = React.useState({ 0: 0, 1: 0 });
  return (
    <section className="rooms-section" id="rooms">
      <div className="rooms-wrap">
        <div className="section-folio" style={{ marginBottom: 0, borderBottom: "none" }}>
          <span>The Menu · Browse by Room</span>
          <span className="pg">PG. 12</span>
        </div>
        <div className="rooms-head">
          <h2>Pick a room. <em>Pick a color.</em></h2>
          <p className="deck">{total} decorate guides across {ROOMS.length} rooms — every one written for the first-time decorator, no experience required.</p>
        </div>

        <div className="rooms-accordion">
          {[0, 1].map(rowIdx => (
            <div className="acc-row" key={rowIdx}>
              {ROOMS.slice(rowIdx * 5, rowIdx * 5 + 5).map((r, i) => {
                const globalIdx = rowIdx * 5 + i;
                const open = accOpen[rowIdx] === i;
                return (
                  <a
                    key={r.name}
                    href={`/en/${r.slug}/decorate/`}
                    className={`acc-panel ${open ? "is-open" : ""}`}
                    onMouseEnter={() => setAccOpen(s => ({ ...s, [rowIdx]: i }))}
                    onClick={e => {
                      if (!open) {
                        e.preventDefault();
                        setAccOpen(s => ({ ...s, [rowIdx]: i }));
                      }
                    }}
                  >
                    <div className="ap-img" style={{ backgroundImage: `url(${r.img})` }} />
                    <div className="ap-num">№ {String(globalIdx + 1).padStart(2, "0")}</div>
                    <div className="ap-vname">{r.name}</div>
                    <div className="ap-content">
                      <h3>{r.name}</h3>
                      <p className="ap-desc">{r.desc}</p>
                      <div className="ap-meta">
                        <span><strong>{r.count}</strong> guides</span>
                        <span className="arrow">Browse  →</span>
                      </div>
                    </div>
                  </a>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const DecorateFilters = () => (
  <section className="filters">
    <div className="filters-grid">
      <div className="filter-block">
        <span className="label">Sort · By Skill Level</span>
        <h3>How much have you painted before?</h3>
        <div className="filter-pills">
          <a href="/en/decorate/" className="pill">Beginner <span className="ct">84</span></a>
          <a href="/en/decorate/" className="pill">Intermediate <span className="ct">47</span></a>
          <a href="/en/decorate/" className="pill">Advanced <span className="ct">11</span></a>
        </div>
      </div>
      <div className="filter-block">
        <span className="label">Sort · By Time</span>
        <h3>How much Saturday do you have?</h3>
        <div className="filter-pills">
          <a href="/en/decorate/" className="pill">Under an hour <span className="ct">38</span></a>
          <a href="/en/decorate/" className="pill">A morning <span className="ct">52</span></a>
          <a href="/en/decorate/" className="pill">A full day <span className="ct">33</span></a>
          <a href="/en/decorate/" className="pill">A weekend <span className="ct">19</span></a>
        </div>
      </div>
    </div>
  </section>
);

const DecorateDecide = () => (
  <section className="decide">
    <div className="section-folio">
      <span>The Decision · Decorate vs. The Other Lanes</span>
      <span className="pg">PG. 24</span>
    </div>
    <div className="decide-head">
      <h2>When this is the right lane, and when it <em>isn't.</em></h2>
      <p className="deck">Decorate is cosmetic, mostly reversible, and doesn't need a permit. If any of those three are false for your project, you're in a different lane.</p>
    </div>
    <div className="decide-cols">
      <div className="decide-col">
        <span className="label">Decorate it · Yourself</span>
        <h3>This lane if you're <em>doing…</em></h3>
        <ul>
          <li>Painting walls, ceilings, trim, cabinets, or exterior surfaces</li>
          <li>Swapping hardware (knobs, pulls, hinges, faucet handles)</li>
          <li>Hanging art, mirrors, curtain rods, or shelves for display</li>
          <li>Changing textiles (rugs, curtains, throw pillows, bedding)</li>
          <li>Staining or sealing a deck surface (no structural changes)</li>
          <li>Garden bed arrangement, fence paint, and ornament placement</li>
        </ul>
      </div>
      <div className="decide-col">
        <span className="label">Different Lane · Out</span>
        <h3>Go elsewhere <em>when…</em></h3>
        <ul>
          <li>Something is broken or failing — that's <a href="/en/repair/">Repair</a></li>
          <li>You're bringing in a new fixture or system — that's <a href="/en/install/">Install</a></li>
          <li>You're building something from raw materials — that's <a href="/en/build/">Build</a></li>
          <li>The project requires a permit</li>
          <li>Floor refinishing with professional equipment is involved</li>
          <li>A licensed trade is required — that's <a href="/en/trades/">Trades</a></li>
        </ul>
      </div>
    </div>
  </section>
);

const DecorateMistakes = () => {
  const items = [
    { h: "Sample patches that are too small",        p: "2 by 2 inches is useless for evaluating a paint color. 12 by 12 inches is the minimum. Paint it on the actual wall, in the actual room, and live with it for 48 hours across three lighting conditions before buying four gallons." },
    { h: "Taping then immediately rolling",          p: "Painter's tape needs 30 minutes to fully adhere before paint goes over it. Press the edge firmly with a putty knife, then wait. Tape applied 5 minutes before rolling is barely better than no tape at all." },
    { h: "Picking color in a hardware store",        p: "Hardware store lighting is calibrated to make every paint chip look good. It is not your home's lighting. Every chip you love in the store needs to be tested on your wall, in your room, in your light — before you commit." },
    { h: "Hanging art too high",                     p: "The center of the piece goes at eye level — 57 to 60 inches from the floor. Most people hang art at or above head height. It makes the room feel ceiling-heavy and disconnects the art from the furniture it's meant to anchor." },
    { h: "Rugs that are too small",                  p: "In a seating area, front legs of all major pieces should sit on the rug. If only the coffee table is on it, or if the rug floats in the center with nothing touching it, size up before you re-order." },
    { h: "Skipping the dark-wall surface prep",      p: "Dark paint amplifies every imperfection light colors hide. Before painting a dark accent wall, fill nail holes, sand the skim coat, and prime with dark-tinted primer. The prep is why dark walls look either stunning or disastrous." },
    { h: "Painting without washing the wall first",  p: "Paint does not adhere well over grease, dust, or residue. Kitchen and bathroom walls especially need a TSP or degreaser wipe-down before any primer or topcoat. Skip it and the paint will peel in the highest-traffic zones within months." },
    { h: "Stopping at 90%",                          p: "Trim the tape before the paint is fully dry — not wet, not dry-dry, but leather-dry. And do the second coat in the corners. The last 10% is what separates a painted room from a decorated one." },
  ];
  return (
    <section className="mistakes">
      <div className="mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · From Our Editors</span>
          <span className="pg">PG. 32</span>
        </div>
        <div className="mistakes-head">
          <h2>Eight decorate mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="mistakes-grid">
          {items.map((m, i) => (
            <div className="mistake" key={i}>
              <div className="n">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h4>{m.h}</h4>
                <p>{m.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const DecorateFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What's the best sheen for living room walls?",
      a: "Eggshell. It has just enough sheen to be wipeable — you can clean fingerprints and scuffs — without reflecting every surface imperfection. Flat matte for ceilings, satin for trim and doors, semi-gloss for kitchens and bathrooms. The sheen rule is as important as the color choice and about half as many people follow it." },
    { q: "Do I really need to prime before painting?",
      a: "Not always. Going from a similar color in the same value range (medium gray to medium gray), a paint-and-primer formula usually covers in two coats. Going from dark to light, or painting over a stain or water mark, primer is not optional — you'll apply six coats of topcoat and still see the old color. Tinted primer to within one shade of your topcoat is the professional move." },
    { q: "How high should I hang curtain rods?",
      a: "4 to 6 inches above the window frame, not on it. And extend the rod 6 to 12 inches past the window on each side. This lets the curtain panels stack outside the glass when open, makes the window look taller, and makes the room look more intentional. It's the single most impactful curtain change and it costs nothing — just rehang what you already have." },
    { q: "What's the right size rug for a living room?",
      a: "The front legs of the sofa, chairs, and any other major seating pieces should all sit on the rug — not just the coffee table, not just the front legs of the sofa. Common living room rug sizes that work: 8×10 for a medium room, 9×12 for a larger one. When in doubt, go up one size. You can always add an underlay to make a slightly large rug work; you can't make a small rug look right." },
    { q: "Can I paint laminate cabinets or IKEA furniture?",
      a: "Yes, with the right prep. The key is the primer: you need a bonding primer specifically formulated for slick, non-porous surfaces. Without it, the topcoat will adhere to the primer, the primer won't adhere to the laminate, and everything peels within six months. With it — degloss, prime with a bonding primer, topcoat with a cabinet enamel — the finish can last years. The guide on kitchen cabinet painting covers this in detail." },
    { q: "How do I fix paint that's bleeding under the tape?",
      a: "Two approaches. Prevention: use FrogTape (not generic blue tape), press the edge firmly with a putty knife, and let the tape adhere for 30 minutes before painting. Correction: if you've already had bleed-through, let the paint dry completely, then use a small artist's brush with the original wall color to touch up the bleed line. Do not try to correct wet paint — you'll make it worse." },
  ];
  return (
    <section className="faq">
      <div className="faq-head">
        <span className="label">Reader Questions · Answered</span>
        <h2>What people ask <em>before they start.</em></h2>
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const DecorateColophon = () => (
  <section className="colophon">
    <h2>Found what you're <em>painting?</em></h2>
    <p>Every guide here is written by someone who has done the project in their own home. Pick a room and start with the prep.</p>
    <a href="#rooms" className="go">Browse all rooms  →</a>
  </section>
);

window.DecorateHero      = DecorateHero;
window.Essay             = Essay;
window.EditorsPick       = EditorsPick;
window.DecorateRooms     = DecorateRooms;
window.DecorateFilters   = DecorateFilters;
window.DecorateDecide    = DecorateDecide;
window.DecorateMistakes  = DecorateMistakes;
window.DecorateFaq       = DecorateFaq;
window.DecorateColophon  = DecorateColophon;