/* Sam's article — The Weekend Project Worth Doing Together (Father's Day 2026)
 * Lighter editorial cut of Sam's template: Crumbs, Hero, Lede, ThreeProjects, Signoff.
 * Copy is Sam's, lifted from the Father's Day draft.
 */

const heroImage = "cover.jpg";

const Crumbs = () => (
  <nav className="sa-crumbs" aria-label="Breadcrumb">
    <div className="l">
      <a href="/">Home</a>
      <span>/</span>
      <a href="/en/contributors/sam/">Sam</a>
      <span>/</span>
      <span>Father's Day</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>The weekend project</span>
    </div>
    <div className="r">
      <span>Father's Day | 2026</span>
      <span className="by">written by Sam</span>
    </div>
  </nav>
);

const Hero = () => (
  <section className="sa-hero">
    <div className="img" style={{ backgroundImage: `url('${heroImage}')` }} />
    <div className="sa-hero-wrap">
      <div>
        <div className="sa-hero-kicker">
          <span>Father's Day 2026</span>
          <span className="dot">*</span>
          <span>An Essay</span>
          <span className="dot">*</span>
          <span className="sig">written by Sam</span>
        </div>
        <h1>
          The weekend project worth <em>doing together.</em>
        </h1>
        <p className="standfirst">
          Father's Day is this weekend. Here's how to actually spend it — a real project that takes a day, produces something visible and lasting, and gives you time together that isn't just sitting at a restaurant trying to think of things to say.
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>When</span>
          <span className="v">This weekend</span>
        </div>
        <div className="row">
          <span>Time</span>
          <span className="v">A day</span>
        </div>
        <div className="row">
          <span>Crew</span>
          <span className="v">Two people</span>
        </div>
        <div className="row">
          <span>Makes</span>
          <span className="v">Something lasting</span>
        </div>
        <div className="row">
          <span>Filed</span>
          <span className="v">Father's Day '26</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble">
      the project is <u>the gift.</u>
      <svg viewBox="0 0 60 30" fill="none">
        <path d="M2 22 C 12 8, 28 4, 56 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        <path d="M48 6 L 56 12 L 50 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </div>
  </section>
);

const Lede = () => (
  <section className="sa-lede">
    <div className="sa-lede-wrap">
      <aside className="sa-lede-side">
        <div className="marker">In this one</div>
        <ul>
          <li>Why a project beats a restaurant</li>
          <li>His specific thing first</li>
          <li>Build for the yard</li>
          <li>Fix what's broken</li>
          <li>Organize the garage</li>
          <li>The actual gift</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          Most Father's Day projects I see online fall into two categories.
        </p>
        <p>
          Either they're so simple they feel like an afterthought — a card, a candle, a thing in a box — or they're so ambitious they require three weeks of prep and a contractor's license. I want to suggest something in between. A real project. One that takes a day, produces something visible and lasting, and gives you time together that isn't just trying to think of things to say across a table.
        </p>
        <div className="sa-pullquote">
          <p>
            The best Father's Day project is one your dad actually wants done.
          </p>
        </div>
        <p>
          You probably already know what it is. There's something in his house, or in yours, that he mentions when he visits. A thing on his list that keeps not getting done. That's your project — not a generic suggestion, his specific thing, done this weekend, with help. But if you need a starting point, here are three that work well as a pair.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Sam's note</span>
        <h4>The good conversations</h4>
        <p>
          You spend most of a project next to each other with something to focus on. That's when the good conversations happen — not across a table, but over a board you're both trying to get level.
        </p>
      </aside>
    </div>
  </section>
);

const ThreeProjects = () => (
  <section className="sa-hottakes">
    <div className="sa-hottakes-wrap">
      <header className="sa-hottakes-head">
        <span className="lab">If you need a starting point</span>
        <h2>
          Three that work <em>as a pair</em>
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>Build something for the yard</h3>
          <p>
            A raised garden bed is the right level of complexity for a day project. Two people, basic tools, lumber from a home improvement store, an afternoon. The cuts are straight lines; the assembly is screws and corner brackets. Four to six hours including the supply run — and you spend most of it side by side, which is when the good conversations happen. No garden? A large planter box on a deck does the same thing at a smaller scale.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>Fix the thing that's been broken</h3>
          <p>
            Every house has one. The door that doesn't hang right. The faucet that drips. The drawer that comes off the track. The thing he looks at, sighs about, and walks past. Pick one. Fix it together. If neither of you knows how, look it up together — half the value isn't the fix, it's the two of you figuring something out. It doesn't have to be perfect. It has to be better than it was. That's enough.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>Organize the garage or the shed</h3>
          <p>
            Least skill, one of the best results. Garages accumulate for years until nothing is findable. One day, two people, some basic shelving, and a willingness to throw things away. The key is letting him lead on what stays and what goes — he knows what's in there and why. Your job is labor and company, not editing. The result is a space he can actually use, organized in a way that makes sense to him because he was there making the decisions.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          The project <em>is the gift.</em>
        </h2>
        <p>
          Not the object it produces — the day. The time. The thing you built or fixed or sorted out together. That's worth more than whatever is in the box at the store. He knows it. You know it. Go do something this weekend.
        </p>
        <div className="sig">- Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            Send a photo
          </a>
          <a href="/en/contributors/sam/" className="btn ghost">
            More from Sam
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">Read next</span>
        <a href="/en/contributors/jt/the-repairs-he-did-you-never-noticed/">
          <span>The repairs he did that you never noticed</span>
          <span className="m">JT</span>
        </a>
        <a href="/en/contributors/sam/the-90-minute-backyard/">
          <span>The 90-minute backyard</span>
          <span className="m">SAM</span>
        </a>
        <a href="/en/contributors/sam/floating-shelves-look-hard-theyre-not/">
          <span>Floating shelves look hard. They're not.</span>
          <span className="m">SAM</span>
        </a>
        <a href="/en/contributors/sam/">
          <span>All of Sam's guides</span>
          <span className="m">PROFILE</span>
        </a>
      </div>
    </div>
  </section>
);

const Article = () => (
  <div className="sa">
    <Crumbs />
    <Hero />
    <Lede />
    <ThreeProjects />
    <Signoff />
  </div>
);

ReactDOM.createRoot(document.getElementById("root")).render(<Article />);
