const RKHero = ({ intro }) => (
  <section className="rk-hero">
    <h1>Kitchen Repair Guides</h1>
    <p>{intro}</p>
  </section>
);

const RKTop5 = () => (
  <section className="rk-top5">
    <h2>Top 5 Kitchen Repairs</h2>
    <div className="rk-top5-cards">
      <div className="rk-card">
        <h3><a href="/en/repair/kitchen/leaky-kitchen-faucet/">Fix a Leaky Kitchen Faucet</a></h3>
        <p>Cartridge, ball, or ceramic disk. 15 minutes. Marcus Webb walk-through.</p>
      </div>
      <div className="rk-card">
        <h3><a href="/en/repair/kitchen/garbage-disposal-repair/">Garbage Disposal Troubleshooting</a></h3>
        <p>Unjam, replace seals, test for power. Safety-first approach. Ray Torres field notes.</p>
      </div>
      <div className="rk-card">
        <h3><a href="/en/repair/kitchen/clogged-kitchen-sink/">Unclog a Kitchen Sink</a></h3>
        <p>Plunger, snake, or auger. Drain anatomy. When to call a pro. Dana Cole on prevention.</p>
      </div>
      <div className="rk-card">
        <h3><a href="/en/repair/kitchen/broken-cabinet-hinge/">Repair Broken Cabinet Hinges</a></h3>
        <p>Adjust, tighten, or replace. Soft-close retrofit. How to re-drill stripped holes.</p>
      </div>
      <div className="rk-card">
        <h3><a href="/en/repair/kitchen/dishwasher-water-supply-line/">Replace a Dishwasher Water Line</a></h3>
        <p>Shut off, disconnect, install new hose. Prevent floods. Iris step-by-step.</p>
      </div>
    </div>
  </section>
);

const RKSearch = () => (
  <section className="rk-search">
    <h2>Ask Iris</h2>
    <p>Can't find your repair? Describe the problem and Iris will build a custom guide.</p>
    <input type="text" placeholder="My kitchen sink is..." className="rk-search-input" />
  </section>
);

const RKContributors = () => (
  <section className="rk-contributors">
    <h2>Who's Fixing This</h2>
    <div className="rk-contrib-cards">
      <div className="rk-contrib-card">
        <h3>Marcus Webb</h3>
        <p className="rk-contrib-role">Trade</p>
        <p>Plumbing contractor, 22 years in service work. Speaks from the field.</p>
      </div>
      <div className="rk-contrib-card">
        <h3>Dana Cole</h3>
        <p className="rk-contrib-role">Design</p>
        <p>Kitchen designer. Focuses on prevention through layout and material choice.</p>
      </div>
      <div className="rk-contrib-card">
        <h3>Ray Torres</h3>
        <p className="rk-contrib-role">Inspector</p>
        <p>Building inspector. Spots the patterns that lead to failure.</p>
      </div>
      <div className="rk-contrib-card">
        <h3>Iris</h3>
        <p className="rk-contrib-role">AI</p>
        <p>Draws from repair manuals, brand specs, and field data. Collective kitchen knowledge.</p>
      </div>
    </div>
  </section>
);

const RKToolkit = () => (
  <section className="rk-toolkit">
    <h2>Essential Toolkit</h2>
    <ul>
      <li><strong>Basin Wrench</strong> ($18–25) — Reaches behind a faucet in tight spaces.</li>
      <li><strong>Cartridge Puller</strong> ($12–30) — Removes cartridges without damage.</li>
      <li><strong>Drain Auger</strong> ($18–35) — Hand-crank snake for clogs.</li>
      <li><strong>Voltage Tester</strong> ($8–15) — Confirms power is off before touching wiring.</li>
      <li><strong>Wrench Set</strong> ($20–40) — 6 to 10-inch wrenches.</li>
      <li><strong>Painter's Tape</strong> ($5) — Label supply lines before disconnect.</li>
    </ul>
  </section>
);

const RKMistakes = () => (
  <section className="rk-mistakes">
    <h2>Common Mistakes</h2>
    <ol>
      <li><strong>Ignoring Early Drips</strong> — Slow leaks waste 3,000 gallons per year and damage cabinet wood.</li>
      <li><strong>Forcing Stuck Hinges</strong> — Over-tightening strips screw holes and sags the door permanently.</li>
      <li><strong>Pouring Grease Down the Drain</strong> — #1 reason kitchen sinks back up. Trash it instead.</li>
      <li><strong>Skipping Power-Off for Appliances</strong> — Motors don't stop spinning instantly. Always kill the breaker first.</li>
    </ol>
  </section>
);

const RKSisters = () => (
  <section className="rk-sisters">
    <h2>Other Kitchen & Repair Lanes</h2>
    <p><strong>From Kitchen:</strong> <a href="/en/kitchen/install/">Install</a>, <a href="/en/bathroom/repair/">Bathroom Repair</a>, <a href="/en/laundry/repair/">Laundry Repair</a>, <a href="/en/bedroom/repair/">Bedroom Repair</a>, <a href="/en/living/repair/">Living Room Repair</a>, <a href="/en/outdoor/repair/">Outdoor Repair</a>.</p>
    <p><strong>From Repair:</strong> <a href="/en/repair/bathroom/">Bathroom</a>, <a href="/en/repair/laundry/">Laundry</a>, <a href="/en/repair/bedroom/">Bedroom</a>, <a href="/en/repair/living/">Living Room</a>, <a href="/en/repair/outdoor/">Outdoor</a>, <a href="/en/repair/garage/">Garage</a>.</p>
  </section>
);

const RKColophon = () => (
  <section className="rk-colophon">
    <p><em>Last updated: April 2026. Guides reviewed monthly.</em></p>
  </section>
);

const RKHubPage = ({ form, lane, room, intro }) => (
  <>
    <RKHero intro={intro} />
    <RKTop5 />
    <RKSearch />
    <RKContributors />
    <RKToolkit />
    <RKMistakes />
    <RKSisters />
    <RKColophon />
  </>
);

window.RKHero = RKHero;
window.RKTop5 = RKTop5;
window.RKSearch = RKSearch;
window.RKContributors = RKContributors;
window.RKToolkit = RKToolkit;
window.RKMistakes = RKMistakes;
window.RKSisters = RKSisters;
window.RKColophon = RKColophon;
window.RKHubPage = RKHubPage;