/* /en/organize — Production Organize L1 Hub */

const OrganizeHero = () => (
  <section className="org-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?w=2400&q=85')" }} />
    <div className="cover-masthead">
      <span>HowTo Quarterly · Vol. VII</span>
      <span className="ctr">The Organize Issue</span>
      <span className="right">№ 07 / Spring 2026</span>
    </div>
    <div className="cover-content">
      <div>
        <div className="cover-eyebrow">Organize · A Field Guide</div>
        <h1>Every house contains the house you <em>wish you lived in.</em></h1>
      </div>
      <div>
        <p className="deck">
          The organized version of your home is not a renovation away. It is a reorganization away — one room, one zone, one labeled bin at a time.
        </p>
        <div className="cover-meta">
          <div><span className="k">Section</span><span className="v">Organize</span></div>
          <div><span className="k">Guides</span><span className="v">164 and counting</span></div>
          <div><span className="k">Reading time</span><span className="v">8 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 Organize Issue</span>
        <span className="pg">PG. 04</span>
      </div>
      <div className="essay-grid">
        <aside className="essay-side">
          <h2>The house inside <em>the house.</em></h2>
          <div className="by">By the Editors · 8 min read</div>
        </aside>
        <div className="essay-body">
          <p className="dropcap">
            There is a version of your home that is calmer than the one you currently live in. Not a different house — the same rooms, the same square footage, the same morning light through the same window. But the kitchen counter has space to actually cook on. The closet shelf holds things you actually wear. The garage has a path through it that doesn't require a memory of where you left things three weeks ago.
          </p>
          <p>
            That version of your home is not a renovation away. It is a reorganization away. The distance between the house you have and the house you want to live in is almost always smaller than it looks — it is hidden behind a stack of boxes, underneath a counter where the lids never match the containers, inside the closet you have been meaning to deal with since you moved in.
          </p>
          <div className="pull">
            "Organizing is not adding things. It is finding the shape that was always there."
          </div>
          <p>
            This is the distinction that makes the Organize lane different from every other lane on this site. When you install a faucet, you are bringing something new into a room. When you organize a pantry, you are finding what was already there — and putting it in a position where it can actually be used. The pantry had a shape. You are finding it.
          </p>
          <p>
            Below, the menu. Pick the room that is bothering you most. We'll show you where things live.
          </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-1556909114-f6e7ad7d3136?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 Organize · Kitchen</div>
        <h3>How to organize a <em>pantry</em> from scratch.</h3>
        <p>
          Empty it, categorize it, purge the duplicates, decant into clear containers, and label everything. The pantry you can actually see into changes how you cook every single night.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Beginner</span>
          <span><span className="dot"></span>3 hours</span>
          <span><span className="dot"></span>$40 in materials</span>
        </div>
        <a href="/en/kitchen/organize/how-to-organize-a-pantry/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const ORG_ROOMS = [
  { name: "Kitchen",      slug: "kitchen",      desc: "Pantry overhauls, drawer dividers, lid organization, and the counter space you forgot you had.", count: 28, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Bathroom",     slug: "bathroom",     desc: "Under-sink systems, medicine cabinet edits, and the honest purge of every product you bought for a spa that doesn't exist.", count: 15, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Bedroom",      slug: "bedroom",      desc: "Closet systems, nightstand edits, the chair that is not a chair — and the morning that starts without a search.", count: 22, img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80" },
  { name: "Living Room",  slug: "living-room",  desc: "Remote homes, bookshelf logic, media console cable management, and the coffee table you can actually put a coffee on.", count: 14, img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", desc: "Tool storage at point of use, seed organization, hose reels, and the garden shed that you can actually walk into.", count: 16, img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Garage",       slug: "garage",       desc: "Zone systems, vertical storage, sports equipment walls, and the parking spot you haven't used in three years.", count: 28, img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Basement",     slug: "basement",     desc: "The great reckoning: labeled shelves, clear bins, and the honest decision about what has been down here since two moves ago.", count: 18, img: "https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&q=80" },
  { name: "Attic",        slug: "attic",        desc: "Labeled seasonal bins, readable categories, and the attic you can navigate without a headlamp and a map.", count: 9, img: "https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80" },
  { name: "Exterior",     slug: "exterior",     desc: "Hose reels, tool returns, outdoor furniture cushion storage, and the front porch that doesn't look like a staging area.", count: 8, img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" },
  { name: "Deck & Patio", slug: "deck-patio",   desc: "Cushion bins, bar cart setups, and the outdoor supply tote that means you only make one trip from the kitchen.", count: 6, img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1200&q=80" },
];

const OrganizeRooms = () => {
  const total = ORG_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>Find what it needs.</em></h2>
          <p className="deck">{total} organize guides across {ORG_ROOMS.length} rooms — every one written by someone who did the project in their own home, for the first time.</p>
        </div>

        <div className="rooms-accordion">
          {[0, 1].map(rowIdx => (
            <div className="acc-row" key={rowIdx}>
              {ORG_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}/organize/`}
                    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 OrganizeFilters = () => (
  <section className="filters">
    <div className="filters-grid">
      <div className="filter-block">
        <span className="label">Sort · By Skill Level</span>
        <h3>How much have you organized before?</h3>
        <div className="filter-pills">
          <a href="/en/organize/" className="pill">Beginner <span className="ct">74</span></a>
          <a href="/en/organize/" className="pill">Intermediate <span className="ct">66</span></a>
          <a href="/en/organize/" className="pill">Advanced <span className="ct">24</span></a>
        </div>
      </div>
      <div className="filter-block">
        <span className="label">Sort · By Time</span>
        <h3>How much of the weekend can you give it?</h3>
        <div className="filter-pills">
          <a href="/en/organize/" className="pill">Under an hour <span className="ct">38</span></a>
          <a href="/en/organize/" className="pill">Half a day <span className="ct">52</span></a>
          <a href="/en/organize/" className="pill">A full day <span className="ct">44</span></a>
          <a href="/en/organize/" className="pill">Multi-day <span className="ct">30</span></a>
        </div>
      </div>
    </div>
  </section>
);

const OrganizeDecide = () => (
  <section className="decide">
    <div className="section-folio">
      <span>The Decision · DIY vs. Hire a Pro Organizer</span>
      <span className="pg">PG. 24</span>
    </div>
    <div className="decide-head">
      <h2>When to do it <em>yourself</em>, and when to call.</h2>
      <p className="deck">Most organizing is DIY-appropriate. Three situations where a professional organizer earns back their fee in time and energy saved.</p>
    </div>
    <div className="decide-cols">
      <div className="decide-col">
        <span className="label">Do It · Yourself</span>
        <h3>Take it on <em>if you can…</em></h3>
        <ul>
          <li>Organize a single room or zone in a single session</li>
          <li>You have a free weekend and the patience for an honest purge</li>
          <li>The room's problem is containers, not decisions about what belongs</li>
          <li>You're willing to follow the steps in the right order</li>
          <li>The scope is one room and not simultaneously every room</li>
          <li>You find the process satisfying rather than draining</li>
        </ul>
      </div>
      <div className="decide-col">
        <span className="label">Call a Pro · Organizer</span>
        <h3>Hire them <em>when…</em></h3>
        <ul>
          <li>Whole-house resets — a pro crew in two days beats three weekends</li>
          <li>Hoarding situations — this is a clinical specialty, not a DIY project</li>
          <li>Post-divorce or post-loss — decisions are harder when they're also grief</li>
          <li>Every room simultaneously feels impossible to start</li>
          <li>You've started and stopped the same room three or more times</li>
          <li>The cost of a pro is less than the cost of your time and frustration</li>
        </ul>
      </div>
    </div>
  </section>
);

const OrganizeMistakes = () => {
  const orgMistakeItems = [
    { h: "Buying bins before purging",                p: "The containers will be the wrong size for what you actually have, and they'll be full of things that should have been thrown away. Purge first. Measure after. Buy last." },
    { h: "Skipping the complete empty",               p: "A partial empty means you're organizing around unevaluated objects that will re-contaminate the system within weeks. Everything comes out, even the things you're sure about." },
    { h: "Over-engineering kids' systems",            p: "Children's organize systems survive in proportion to their simplicity. One bin, one category, large label. Anything requiring a multi-step sort will not outlast a school week." },
    { h: "Forgetting the label maker",                p: "Unlabeled systems collapse within months. The categories are in your head right now. Your head will forget. A $35 label maker makes the previous 8 hours of work hold for years." },
    { h: "Organizing to a Pinterest ideal",           p: "You are organizing for the life you actually live, not the one in the photograph. If you never decant cereal, don't build a cereal-decanting system. Design for the user, not the image." },
    { h: "Ignoring the chaos drawer principle",       p: "Every house needs a catch-all. The mistake is fighting it. Give it a consistent location, install dividers inside it so it's navigable, and let it be what it is." },
    { h: "Creating systems others won't maintain",    p: "If the system requires your partner or kids to change behavior they've never changed, the system will fail. Design for how people actually use the room, then optimize from there." },
    { h: "Stopping before labeling",                  p: "The label step at the end feels optional because the categories are obvious in the moment. They will not be obvious in six months. Label every bin, zone, and drawer section. No exceptions." },
  ];
  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 organize mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="mistakes-grid">
          {orgMistakeItems.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 OrganizeFaq = () => {
  const [open, setOpen] = React.useState(0);
  const orgFaqs = [
    { q: "Do I need to buy a lot of containers before I start organizing?",
      a: "No — and buying before you purge is one of the most common mistakes. You cannot know what containers you need until you have completed the empty-and-categorize step. After the purge, measure your categories and count your items, then buy exactly what you need. You will spend less money and get better results." },
    { q: "What's the most important organizing principle?",
      a: "Every item has a home. The root cause of most disorganization is not too many items — it is items that don't have an assigned location. When something has no home, it gets put down wherever is convenient, which is always the counter, the chair, or the floor. Assign a specific location to everything that goes back in the space. Everything else is maintenance." },
    { q: "How do I keep an organized space organized after I finish?",
      a: "Two things: labels and friction. Labels mean the system doesn't depend on your memory. Friction means designing returns to be easier than non-returns — hooks instead of bins, open-top baskets instead of lidded boxes, zones placed at point-of-use so returning things is one motion. A well-designed organized space maintains itself mostly automatically." },
    { q: "What is the order of operations for an organize project?",
      a: "Empty everything. Categorize on a table or floor. Purge — throw away expired, duplicate, or misplaced. Assign zones (before anything goes back in). Contain (now buy containers). Label. Photograph the result. Do them in this order. Skipping or reordering any step is the leading cause of failed organize projects." },
    { q: "Is it worth hiring a professional organizer?",
      a: "For most single-room projects, no — the guides on this site will take you through it. A professional organizer is worth hiring for three situations: whole-house resets (pro crew in 2 days beats 3 weekends), hoarding situations (a clinical specialty, not a DIY project), and post-divorce or post-loss reorganization (decisions are harder when grief is also happening)." },
    { q: "How is organizing different from minimalism?",
      a: "Organizing is assigning every item a correct, consistent location and building systems that make that location easy to maintain. Minimalism is a value system about how many items you own. You can have 300 items in a pantry and a perfectly organized pantry. Organizing has nothing to say about how much you own — only where things live and how easily you can return them." },
  ];
  return (
    <section className="faq">
      <div className="faq-head">
        <span className="label">Reader Questions · Answered</span>
        <h2>What people ask <em>before they organize.</em></h2>
      </div>
      <div className="faq-list">
        {orgFaqs.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 OrganizeColophon = () => (
  <section className="colophon">
    <h2>Found what you're <em>organizing?</em></h2>
    <p>Every guide on HowTo is written by someone who did the project in their own home. Pick a room and start finding the house inside the house.</p>
    <a href="#rooms" className="go">Browse all rooms  →</a>
  </section>
);

window.OrganizeHero    = OrganizeHero;
window.Essay           = Essay;
window.EditorsPick     = EditorsPick;
window.OrganizeRooms   = OrganizeRooms;
window.OrganizeFilters = OrganizeFilters;
window.OrganizeDecide  = OrganizeDecide;
window.OrganizeMistakes = OrganizeMistakes;
window.OrganizeFaq     = OrganizeFaq;
window.OrganizeColophon = OrganizeColophon;