const DECK_PATIO_L3_PAGES = {
  "repair": {
    "active": "Repair",
    "count": 24,
    "title": "Deck and Patio Repair Guides - Boards, Railings, Pavers, Posts and Stairs",
    "desc": "24 deck and patio repair guides for rotted boards, loose railings, cracked pavers, wobbling posts, sagging gates, failing stain, stairs, joists, and outdoor structure problems.",
    "headline": "Repair what weather keeps taking apart.",
    "deck": "Deck and patio repair is exposure work: rotted boards, loose railings, cracked pavers, wobbling posts, sagging gates, failing stain, soft stairs, shifting base, and the small failures that become rebuilds if ignored.",
    "rule": "Structure first",
    "topLabel": "Top 5 Deck and Patio Repair Searches",
    "photoLabel": "Photo Spread / Outdoor Repair Notes",
    "essayTitle": "The outdoor room fails at the connections.",
    "essay": [
      "Deck and patio repair starts where water sits and people put weight. Board ends, stair treads, ledger flashing, railing posts, paver edges, and buried post bases tell the truth before the surface does.",
      "The outdoor room is forgiving about finish and ruthless about structure. A weathered board can wait; a railing post that moves under the grab test cannot.",
      "Repair outside is not about making old things look new. It is about stopping exposure from turning maintenance into demolition."
    ],
    "top": [
      [
        "01",
        "how to repair rotted deck boards",
        "110,000",
        "Beginner",
        "2 hrs",
        "$25-$120",
        "https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=1500&q=84",
        "Rotted boards fail at fasteners and end grain first. Pull one board, inspect the joist below, match thickness, gap correctly, and fasten into solid wood.",
        "Read the rotted board guide",
        "/en/deck-patio/repair/how-to-repair-rotted-deck-boards/"
      ],
      [
        "02",
        "how to fix a loose deck railing",
        "90,500",
        "Intermediate",
        "2-4 hrs",
        "$20-$180",
        "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=1500&q=84",
        "A railing is a safety system before it is trim. Post connection, blocking, fasteners, height, and the grab test decide the repair.",
        "Read the railing guide",
        "/en/deck-patio/repair/how-to-fix-a-loose-deck-railing/"
      ],
      [
        "03",
        "how to repair cracked patio pavers",
        "74,000",
        "Beginner",
        "1-2 hrs",
        "$10-$80",
        "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1500&q=84",
        "Cracked pavers are usually base or edge problems. Replace the piece, but read the settlement pattern before calling it done.",
        "Read the paver repair guide",
        "/en/deck-patio/repair/how-to-repair-cracked-patio-pavers/"
      ],
      [
        "04",
        "how to repair deck stairs",
        "60,500",
        "Intermediate",
        "half day",
        "$40-$250",
        "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1500&q=84",
        "Deck stairs combine load, water, and movement. Treads, stringers, fasteners, and landing slope all matter.",
        "Read the stair repair guide",
        "/en/deck-patio/repair/how-to-repair-deck-stairs/"
      ],
      [
        "05",
        "how to fix a sagging deck gate",
        "49,500",
        "Beginner",
        "1 hr",
        "$15-$90",
        "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1500&q=84",
        "Sagging gates are geometry. Hinge screws, diagonal brace, latch alignment, and post plumb solve more than new hardware does.",
        "Read the gate guide",
        "/en/deck-patio/repair/how-to-fix-a-sagging-deck-gate/"
      ]
    ],
    "tools": [
      "Impact driver",
      "Speed square",
      "Pry bar",
      "Post level",
      "Joist hanger nails",
      "Exterior screws",
      "Moisture meter",
      "Socket set"
    ],
    "matrix": [
      "Rotted boards",
      "Loose railing",
      "Cracked pavers",
      "Deck stairs",
      "Sagging gate",
      "Ledger flashing",
      "Loose post",
      "Paver base",
      "Stain failure",
      "Joist end rot"
    ],
    "mistakes": [
      "Staining over structural rot",
      "Fixing railing trim instead of post blocking",
      "Replacing pavers without fixing the base",
      "Using interior screws outside",
      "Ignoring ledger flashing",
      "Skipping the grab test after repair"
    ]
  },
  "install": {
    "active": "Install",
    "count": 29,
    "title": "Deck and Patio Install Guides - Pavers, String Lights, Outlets, Post Caps and Gates",
    "desc": "29 deck and patio install guides for pavers, string lights, outdoor outlets, GFCI protection, post-cap lights, gate latches, low-voltage lighting, shade, and patio systems.",
    "headline": "Install the pieces that make outside usable after 7pm.",
    "deck": "Deck and patio install is the high-payoff lane: pavers, string lights, outdoor outlets, GFCI protection, post-cap lights, gate latches, low-voltage transformers, shade sails, and the systems that make the outdoor room work.",
    "rule": "Power safely",
    "topLabel": "Top 5 Deck and Patio Install Searches",
    "photoLabel": "Photo Spread / Outdoor Install Notes",
    "essayTitle": "Installation is how the patio becomes a room.",
    "essay": [
      "The fastest deck and patio upgrades are usually installs, not builds. String lights change the night. A GFCI outlet removes the extension cord. Pavers create a floor where there was mud.",
      "Outdoor installation has two rules: water must move away, and electricity must be protected. Every beautiful install fails if those two ideas are treated as optional.",
      "The right install makes the outdoor room easier to use without asking you to drag something from the garage every time."
    ],
    "top": [
      [
        "01",
        "how to install pavers",
        "165,000",
        "Intermediate",
        "1 weekend",
        "$400-$1,200",
        "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1500&q=84",
        "Pavers are a base project with a pretty surface. Four inches of compacted gravel, one inch of sand, edge restraint, and patience.",
        "Read the paver guide",
        "/en/deck-patio/install/how-to-install-pavers/"
      ],
      [
        "02",
        "how to install string lights on a patio",
        "135,000",
        "Beginner",
        "90 min",
        "$80-$220",
        "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1500&q=84",
        "String lights need attachment height, support, sag, bulb spacing, and a proper outdoor outlet. The angle is the look.",
        "Read the string light guide",
        "/en/deck-patio/install/how-to-install-string-lights-on-a-patio/"
      ],
      [
        "03",
        "how to install an outdoor GFCI outlet",
        "90,500",
        "Intermediate",
        "2-3 hrs",
        "$60-$160",
        "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=1500&q=84",
        "Outdoor power needs weatherproof boxes, in-use covers, GFCI protection, and a circuit that can handle the load.",
        "Read the outlet guide",
        "/en/deck-patio/install/how-to-install-an-outdoor-gfci-outlet/"
      ],
      [
        "04",
        "how to install deck post cap lights",
        "74,000",
        "Beginner",
        "2 hrs",
        "$120-$500",
        "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1500&q=84",
        "Post-cap lights mark the deck edge without flooding it. Solar is easy, low voltage is cleaner, wiring path decides the job.",
        "Read the post cap guide",
        "/en/deck-patio/install/how-to-install-deck-post-cap-lights/"
      ],
      [
        "05",
        "how to install a deck gate latch",
        "49,500",
        "Beginner",
        "45 min",
        "$15-$80",
        "https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=1500&q=84",
        "A latch works only when the gate does not sag. Align hinges first, then latch height, strike plate, and weather clearance.",
        "Read the latch guide",
        "/en/deck-patio/install/how-to-install-a-deck-gate-latch/"
      ]
    ],
    "tools": [
      "Plate compactor",
      "Mason line",
      "Outdoor GFCI tester",
      "Wire stripper",
      "Post level",
      "Rubber mallet",
      "Trenching shovel",
      "Voltage tester"
    ],
    "matrix": [
      "Pavers",
      "String lights",
      "GFCI outlet",
      "Post cap lights",
      "Gate latch",
      "Low-voltage transformer",
      "Shade sail",
      "Outdoor fan",
      "Privacy screen panels",
      "Step lights"
    ],
    "mistakes": [
      "Skipping paver compaction",
      "Running permanent lights on extension cords",
      "Installing outlets without in-use covers",
      "Overlighting the patio",
      "Forgetting drip loops",
      "Ignoring door swing and furniture clearance"
    ]
  },
  "build": {
    "active": "Build",
    "count": 41,
    "title": "Deck and Patio Build Guides - Pergolas, Planter Boxes, Benches, Privacy Screens and Decks",
    "desc": "41 deck and patio build guides for pergolas, planter boxes, built-in benches, privacy screens, fire pit surrounds, potting benches, deck framing, stairs, railings, and outdoor structures.",
    "headline": "Build the outdoor room from the floor up.",
    "deck": "Deck and patio building is the deepest DIY lane outside: pergolas, planter boxes, built-in benches, privacy screens, fire pit surrounds, potting benches, deck framing, stairs, railings, and the structures that make the yard feel designed.",
    "rule": "Footings matter",
    "topLabel": "Top 5 Deck and Patio Build Searches",
    "photoLabel": "Photo Spread / Outdoor Build Notes",
    "essayTitle": "The outdoor room has real structure.",
    "essay": [
      "A deck or patio build looks like furniture until it meets weather, load, frost, and people leaning on it. Then the structure underneath becomes the whole project.",
      "Pergolas, benches, planters, screens, and fire surrounds are all buildable by a capable homeowner, but the details that touch ground or carry load have to be done with discipline.",
      "Build outside with the finish in mind and the inspection details respected. That is how a weekend project becomes permanent."
    ],
    "top": [
      [
        "01",
        "how to build a pergola",
        "135,000",
        "Intermediate",
        "2 days",
        "$500-$1,500",
        "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1500&q=84",
        "Posts, anchors, beams, rafters, shade, and wind. A pergola becomes beautiful only after the post layout is honest.",
        "Read the pergola guide",
        "/en/deck-patio/build/how-to-build-a-pergola/"
      ],
      [
        "02",
        "how to build planter boxes",
        "110,000",
        "Beginner",
        "4 hrs",
        "$50-$180",
        "https://images.unsplash.com/photo-1600566752734-2a0cd5f58e40?w=1500&q=84",
        "Planter boxes are the best first outdoor build. Cedar, drainage, liner, fasteners, and dimensions that match lumber lengths.",
        "Read the planter guide",
        "/en/deck-patio/build/how-to-build-planter-boxes/"
      ],
      [
        "03",
        "how to build a built-in deck bench",
        "90,500",
        "Intermediate",
        "1 weekend",
        "$120-$500",
        "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=1500&q=84",
        "Built-in benches need blocking, comfortable seat depth, drainage gaps, and a back angle that does not feel like punishment.",
        "Read the bench guide",
        "/en/deck-patio/build/how-to-build-a-built-in-deck-bench/"
      ],
      [
        "04",
        "how to build a patio privacy screen",
        "74,000",
        "Intermediate",
        "1 day",
        "$160-$700",
        "https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=1500&q=84",
        "A privacy screen is a wind sail if it is not anchored correctly. Post depth, panel weight, and line of sight decide the design.",
        "Read the privacy screen guide",
        "/en/deck-patio/build/how-to-build-a-patio-privacy-screen/"
      ],
      [
        "05",
        "how to build a fire pit surround",
        "60,500",
        "Intermediate",
        "1 day",
        "$200-$900",
        "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1500&q=84",
        "Fire pit surrounds need noncombustible materials, clearance, air, and a surface that will not trap heat where it should not.",
        "Read the fire pit guide",
        "/en/deck-patio/build/how-to-build-a-fire-pit-surround/"
      ]
    ],
    "tools": [
      "Post-hole digger",
      "Circular saw",
      "Framing square",
      "Impact driver",
      "Clamps",
      "Concrete mixer tub",
      "Level",
      "Exterior fasteners"
    ],
    "matrix": [
      "Pergola",
      "Planter boxes",
      "Built-in bench",
      "Privacy screen",
      "Fire pit surround",
      "Potting bench",
      "Deck stairs",
      "Deck framing",
      "Railing system",
      "Outdoor table"
    ],
    "mistakes": [
      "Burying wood posts directly in soil",
      "Building benches without drainage gaps",
      "Ignoring wind load on screens",
      "Undersizing beams for span",
      "Skipping permits on attached decks",
      "Using untreated cuts without sealing end grain"
    ]
  },
  "clean": {
    "active": "Clean",
    "count": 16,
    "title": "Deck and Patio Cleaning Guides - Mildew, Pollen, Pavers, Composite, Furniture and Grill Areas",
    "desc": "16 deck and patio cleaning guides for mildew, pollen, paver algae, composite stains, wood decks, teak furniture, outdoor rugs, grill grease, cushions, and seasonal washdowns.",
    "headline": "Clean what weather leaves behind.",
    "deck": "Deck and patio cleaning is seasonal maintenance: pollen, mildew, paver algae, composite tannin stains, grill grease, teak furniture, outdoor rugs, cushions, cobwebs, and the washdown that makes the outdoor room feel cared for.",
    "rule": "Gentle first",
    "topLabel": "Top 5 Deck and Patio Clean Searches",
    "photoLabel": "Photo Spread / Outdoor Clean Notes",
    "essayTitle": "Cleaning outside is about restraint.",
    "essay": [
      "The outdoor room gets dirty honestly. Pollen settles, mildew blooms on shade-side boards, grease lands near the grill, and pavers grow algae where water sits.",
      "Cleaning too aggressively can damage the surface faster than dirt does. Pressure washing, bleach, harsh degreasers, and stiff brushes all have a place, but not everywhere.",
      "A clean deck or patio should be safe underfoot, ready for stain when needed, and dry enough that the same problem does not return next week."
    ],
    "top": [
      [
        "01",
        "how to clean a wood deck",
        "135,000",
        "Beginner",
        "2 hrs",
        "$20-$80",
        "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=1500&q=84",
        "Wood needs debris removal, correct cleaner, low pressure, and dry time. Too much pressure raises grain and shortens board life.",
        "Read the wood deck guide",
        "/en/deck-patio/clean/how-to-clean-a-wood-deck/"
      ],
      [
        "02",
        "how to clean patio pavers",
        "110,000",
        "Beginner",
        "2 hrs",
        "$15-$60",
        "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1500&q=84",
        "Pavers need joint protection. Clean the surface without blasting the sand out of the system that keeps them stable.",
        "Read the paver cleaning guide",
        "/en/deck-patio/clean/how-to-clean-patio-pavers/"
      ],
      [
        "03",
        "how to remove mildew from deck boards",
        "90,500",
        "Beginner",
        "1 hr",
        "$12-$45",
        "https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=1500&q=84",
        "Mildew is moisture plus shade. Clean it, dry it, and look at airflow before it becomes a spring ritual.",
        "Read the mildew guide",
        "/en/deck-patio/clean/how-to-remove-mildew-from-deck-boards/"
      ],
      [
        "04",
        "how to clean composite decking",
        "74,000",
        "Beginner",
        "1-2 hrs",
        "$15-$50",
        "https://images.unsplash.com/photo-1600566752734-2a0cd5f58e40?w=1500&q=84",
        "Composite does not mean no cleaning. Tannin stains, grease, mold film, and sunscreen all need the right cleaner.",
        "Read the composite guide",
        "/en/deck-patio/clean/how-to-clean-composite-decking/"
      ],
      [
        "05",
        "how to clean outdoor cushions",
        "60,500",
        "Beginner",
        "1 hr",
        "$10-$40",
        "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1500&q=84",
        "Outdoor cushions fail from trapped moisture. Vacuum, spot clean, rinse lightly, dry completely, and store only when fully dry.",
        "Read the cushion guide",
        "/en/deck-patio/clean/how-to-clean-outdoor-cushions/"
      ]
    ],
    "tools": [
      "Deck brush",
      "Pump sprayer",
      "Low-pressure washer",
      "Paver broom",
      "Mild cleaner",
      "Bucket",
      "Squeegee",
      "Drying rack"
    ],
    "matrix": [
      "Wood deck",
      "Patio pavers",
      "Mildew",
      "Composite decking",
      "Outdoor cushions",
      "Teak furniture",
      "Outdoor rug",
      "Grill grease",
      "Rail caps",
      "Umbrella fabric"
    ],
    "mistakes": [
      "Pressure washing too close",
      "Using bleach near plants",
      "Cleaning cushions and storing them damp",
      "Blasting joint sand from pavers",
      "Staining before full dry time",
      "Ignoring shade and airflow"
    ]
  },
  "organize": {
    "active": "Organize",
    "count": 6,
    "title": "Deck and Patio Organization Guides - Cushions, Grill Tools, Hoses, Planters and Seasonal Gear",
    "desc": "6 deck and patio organization guides for cushion storage, grill stations, hose storage, outdoor tools, planter supplies, furniture zones, and seasonal patio gear.",
    "headline": "Organize the season before it piles by the door.",
    "deck": "Deck and patio organization is smaller but important: cushion storage, grill tools, hose reels, planter supplies, outdoor toys, seasonal covers, furniture zones, and the back-door pile that appears every summer.",
    "rule": "Dry storage",
    "topLabel": "Top 5 Deck and Patio Organization Searches",
    "photoLabel": "Photo Spread / Outdoor Organization Notes",
    "essayTitle": "Outdoor organization is mostly about dry things staying dry.",
    "essay": [
      "The deck and patio does not need kitchen-level organization. It needs a few durable homes: cushions, grill tools, hose, covers, planter supplies, and the things people drop by the door.",
      "The organizing problem outside is exposure. Anything soft needs dry storage, anything metal needs a place that does not collect rain, and anything used weekly needs to be within reach.",
      "Less content is fine in this lane. Thin work is not. The right few systems make the outdoor room easier every single evening."
    ],
    "top": [
      [
        "01",
        "how to store outdoor cushions",
        "90,500",
        "Beginner",
        "30 min",
        "$40-$250",
        "https://images.unsplash.com/photo-1600566752734-2a0cd5f58e40?w=1500&q=84",
        "Cushions need dry, ventilated storage and a habit. If they go away damp, they come back smelling like a basement.",
        "Read the cushion storage guide",
        "/en/deck-patio/organize/how-to-store-outdoor-cushions/"
      ],
      [
        "02",
        "how to organize a grill station",
        "74,000",
        "Beginner",
        "1 hr",
        "$30-$180",
        "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1500&q=84",
        "A grill station needs tools, fuel, cleaning gear, fire safety, and a landing zone. Random hooks are not a system.",
        "Read the grill station guide",
        "/en/deck-patio/organize/how-to-organize-a-grill-station/"
      ],
      [
        "03",
        "how to organize patio furniture covers",
        "49,500",
        "Beginner",
        "30 min",
        "$10-$60",
        "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=1500&q=84",
        "Covers need labels and dry folding. A wet cover balled into a bin is mildew with handles.",
        "Read the cover guide",
        "/en/deck-patio/organize/how-to-organize-patio-furniture-covers/"
      ],
      [
        "04",
        "how to store garden hose on patio",
        "40,500",
        "Beginner",
        "30 min",
        "$25-$140",
        "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1500&q=84",
        "The hose needs a route, a reel, and a winter plan. Kinks usually come from lazy storage, not bad hose.",
        "Read the hose guide",
        "/en/deck-patio/organize/how-to-store-garden-hose-on-patio/"
      ],
      [
        "05",
        "how to organize outdoor planters",
        "33,100",
        "Beginner",
        "1 hr",
        "$0-$80",
        "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1500&q=84",
        "Planters organize by size, drainage, season, and sightline. The empty ones need a home too.",
        "Read the planter organization guide",
        "/en/deck-patio/organize/how-to-organize-outdoor-planters/"
      ]
    ],
    "tools": [
      "Deck box",
      "Weather labels",
      "Hose reel",
      "Grill caddy",
      "Storage hooks",
      "Ventilated bin",
      "Cover straps",
      "Shelf clips"
    ],
    "matrix": [
      "Cushions",
      "Grill station",
      "Furniture covers",
      "Hose",
      "Planters",
      "Outdoor toys",
      "Cleaning kit",
      "Fire pit tools",
      "Umbrella base",
      "Seasonal bins"
    ],
    "mistakes": [
      "Storing cushions damp",
      "Putting grill tools across the patio",
      "Keeping covers unlabeled",
      "Leaving hoses across walking paths",
      "Buying deck boxes that are not ventilated",
      "Letting seasonal gear live by the door"
    ]
  },
  "decorate": {
    "active": "Decorate",
    "count": 12,
    "title": "Deck and Patio Decorating Guides - Stain, Outdoor Rugs, Planters, Lighting and Furniture Layouts",
    "desc": "12 deck and patio decorating guides for stain colors, outdoor rugs, planter arrangements, string light layouts, furniture plans, seasonal decor, privacy, shade, and evening atmosphere.",
    "headline": "Decorate the hour people remember.",
    "deck": "Deck and patio decorating is the atmosphere lane: stain color, outdoor rugs, planter arrangements, string light catenary, furniture layout, shade, privacy, seasonal decor, and the way the outdoor room feels at 7pm.",
    "rule": "Light first",
    "topLabel": "Top 5 Deck and Patio Decorate Searches",
    "photoLabel": "Photo Spread / Outdoor Styling Notes",
    "essayTitle": "At night, the deck becomes lighting.",
    "essay": [
      "The outdoor room is remembered at dusk. Stain color matters, furniture matters, planters matter, but the lighting plan is what makes people stay.",
      "Decorating a deck or patio should not fight the weather. Materials need weight, drainage, fade tolerance, and enough restraint that the space still feels like outside.",
      "The best decoration outside feels less like styling and more like a room discovering its evening version."
    ],
    "top": [
      [
        "01",
        "how to stain a deck",
        "135,000",
        "Beginner",
        "2 days",
        "$80-$250",
        "https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=1500&q=84",
        "Stain is prep work wearing color. Clean, dry, test, apply, back-brush, cure, and do not rush the weather window.",
        "Read the deck stain guide",
        "/en/deck-patio/decorate/how-to-stain-a-deck/"
      ],
      [
        "02",
        "how to choose an outdoor rug size",
        "90,500",
        "Beginner",
        "30 min",
        "$80-$600",
        "https://images.unsplash.com/photo-1600566752734-2a0cd5f58e40?w=1500&q=84",
        "An outdoor rug defines the room only if it is large enough. Tiny rugs make patios look accidental.",
        "Read the rug size guide",
        "/en/deck-patio/decorate/how-to-choose-an-outdoor-rug-size/"
      ],
      [
        "03",
        "how to arrange string lights on a patio",
        "74,000",
        "Beginner",
        "90 min",
        "$80-$220",
        "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1500&q=84",
        "String lights need height, rhythm, and one clear shape. Sag is good; droop is not.",
        "Read the lighting layout guide",
        "/en/deck-patio/decorate/how-to-arrange-string-lights-on-a-patio/"
      ],
      [
        "04",
        "how to arrange patio furniture",
        "60,500",
        "Beginner",
        "1 hr",
        "$0-$2,000",
        "https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=1500&q=84",
        "Furniture layout starts with traffic, conversation, dining, and the door swing. The best pieces are often the ones you remove.",
        "Read the furniture layout guide",
        "/en/deck-patio/decorate/how-to-arrange-patio-furniture/"
      ],
      [
        "05",
        "how to style deck planters",
        "49,500",
        "Beginner",
        "1 hr",
        "$60-$400",
        "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1500&q=84",
        "Planters need scale, repetition, drainage, and one plant that carries height. Everything else is supporting cast.",
        "Read the planter styling guide",
        "/en/deck-patio/decorate/how-to-style-deck-planters/"
      ]
    ],
    "tools": [
      "Stain brush",
      "Color samples",
      "String light guide wire",
      "Outdoor rug tape",
      "Planter risers",
      "Tape measure",
      "Furniture glides",
      "Pruners"
    ],
    "matrix": [
      "Deck stain",
      "Outdoor rug",
      "String lights",
      "Furniture layout",
      "Planters",
      "Privacy screen style",
      "Shade fabric",
      "Pillow storage",
      "Dining zone",
      "Fire pit styling"
    ],
    "mistakes": [
      "Choosing stain without testing on the actual boards",
      "Buying an outdoor rug too small",
      "Lighting every corner equally",
      "Ignoring door and grill clearance",
      "Using indoor pillows outside",
      "Decorating before cleaning the surface"
    ]
  }
};
const DECK_PATIO_L3_ORDER = ["repair","install","build","clean","organize","decorate"];
const DECK_PATIO_L3_COUNTS = {"repair":24,"install":29,"build":41,"clean":16,"organize":6,"decorate":12};
const dplBg = (url) => ({ backgroundImage: 'url("' + url + '")' });

const DeckPatioL3Hero = ({ page }) => (
  <section className="dpl-hero">
    <div className="img" style={dplBg(page.top[0][6].replace('w=1500', 'w=2400'))} />
    <div className="dpl-mast">
      <span className="crumb"><a href="/">Home</a> / <a href="/en/deck-patio/">Deck & Patio</a> / {page.active}</span>
      <span className="ctr">The Deck & Patio {page.active} Edition</span>
      <span className="right">No. 10 / Spring 2026</span>
    </div>
    <div className="dpl-cover">
      <div>
        <div className="eyebrow">{page.active} / Deck and Patio / Field Guide</div>
        <h1>{page.headline}</h1>
      </div>
      <div>
        <p className="deck">{page.deck}</p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Deck/Patio / {page.active}</span></div>
          <div><span className="k">Guides</span><span className="v">{page.count} total</span></div>
          <div><span className="k">First rule</span><span className="v">{page.rule}</span></div>
          <div><span className="k">Updated</span><span className="v">May 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const DeckPatioL3Top5 = ({ page }) => (
  <section className="dpl-top5">
    <div className="dpl-wrap">
      <div className="section-folio"><span>The Charts / {page.topLabel}</span><span className="pg">PG. 02</span></div>
      <div className="dpl-head">
        <div>
          <h2>The five projects that decide the outdoor room.</h2>
          <p className="deck">Outside, the order is structure, water, power, surface, finish. These are the searches with the most intent in this lane.</p>
        </div>
        <div className="legend">
          <span><i style={{ background: 'var(--dplcopper)' }} /> Difficulty</span>
          <span><i style={{ background: 'var(--dplblue)' }} /> Time</span>
          <span><i style={{ background: 'var(--dplmoss)' }} /> Materials</span>
        </div>
      </div>
      <div className="dpl-top-list">
        {page.top.map((t) => (
          <article className="dpl-top-row" key={t[0]}>
            <div className="rank">No. {t[0]}</div>
            <a className="dpl-top-photo" href={t[9]} style={dplBg(t[6])} aria-label={t[1]}></a>
            <div className="query">
              <h3>{t[1]}</h3>
              <p>{t[7]}</p>
              <a href={t[9]} className="read">{t[8]}</a>
            </div>
            <div className="stats">
              <div className="stat"><span className="k">Monthly searches</span><span className="v">{t[2]}</span></div>
              <div className="stat"><span className="k">Difficulty</span><span className="v">{t[3]}</span></div>
              <div className="stat"><span className="k">Time</span><span className="v">{t[4]}</span></div>
              <div className="stat"><span className="k">Materials</span><span className="v">{t[5]}</span></div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioL3PhotoSpread = ({ page }) => (
  <section className="dpl-photo-spread">
    <div className="dpl-wrap">
      <div className="section-folio"><span>{page.photoLabel}</span><span className="pg">PG. 07</span></div>
      <div className="dpl-photo-grid">
        {page.top.slice(0, 4).map((item, i) => (
          <article className={'dpl-photo-card c' + (i + 1)} key={item[0]}>
            <a className="photo" href={item[9]} style={dplBg(item[6].replace('w=1500', 'w=1900'))} aria-label={item[1]}></a>
            <div className="copy">
              <span>{item[1]}</span>
              <h3>{item[8]}</h3>
              <p>{item[7]}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioL3Essay = ({ page }) => (
  <section className="dpl-essay">
    <div className="dpl-essay-wrap">
      <div className="section-folio"><span>Editor's Note / Deck and Patio, {page.active}</span><span className="pg">PG. 08</span></div>
      <div className="dpl-essay-grid">
        <aside className="dpl-essay-side">
          <h2>{page.essayTitle}</h2>
          <div className="by">By the Editors / 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Guides</span><strong>{page.count}</strong></div>
            <div className="row"><span>Most searched</span><strong>{page.top[0][1].replace('how to ', '')}</strong></div>
            <div className="row"><span>First rule</span><strong>{page.rule}</strong></div>
            <div className="row"><span>Room</span><strong>Outside</strong></div>
          </div>
        </aside>
        <div className="dpl-essay-body">
          <p className="dropcap">{page.essay[0]}</p>
          <p>{page.essay[1]}</p>
          <div className="pull">The outdoor room has to survive weather after the page is done being pretty.</div>
          <p>{page.essay[2]}</p>
        </div>
      </div>
    </div>
  </section>
);

const DeckPatioL3Tools = ({ page }) => (
  <section className="dpl-tools">
    <div className="dpl-wrap">
      <div className="section-folio"><span>The Kit / What earns storage space</span><span className="pg">PG. 10</span></div>
      <div className="dpl-tools-head">
        <h2>Eight tools that make deck and patio {page.active.toLowerCase()} work less like guessing.</h2>
        <p>Outdoor-room work fails when water, fasteners, structure, power, or weather exposure gets treated like a finish detail.</p>
      </div>
      <div className="dpl-tools-grid">
        {page.tools.map((tool, i) => (
          <div className="dpl-tool" key={tool}>
            <span>{String(i + 1).padStart(2, '0')}</span>
            <h3>{tool}</h3>
            <p>Useful because deck and patio work depends on load, drainage, exposure, and materials that can take weather.</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioL3Matrix = ({ page }) => (
  <section className="dpl-matrix">
    <div className="dpl-wrap">
      <div className="section-folio"><span>The Menu / Ranked by payoff</span><span className="pg">PG. 12</span></div>
      <div className="dpl-matrix-head">
        <h2>Ten deck and patio {page.active.toLowerCase()} projects, ranked.</h2>
        <p>The first jobs protect structure and water movement. The later jobs add polish, comfort, and atmosphere.</p>
      </div>
      <div className="dpl-matrix-table">
        <div className="dpl-matrix-row head"><span>Project</span><span>Risk</span><span>Time</span><span>Payoff</span><span></span></div>
        {page.matrix.map((project, i) => (
          <div className="dpl-matrix-row" key={project}>
            <span className="proj"><b>{String(i + 1).padStart(2, '0')}</b>{project}</span>
            <span>{i < 3 ? 'High' : i < 7 ? 'Medium' : 'Low'}</span>
            <span>{i < 3 ? 'Today' : i < 7 ? 'Weekend' : 'Later'}</span>
            <span className="dots"><i></i><i></i><i></i><i className={i > 4 ? '' : 'off'}></i><i className={i > 7 ? '' : 'off'}></i></span>
            <span><a href={'/en/deck-patio/' + page.active.toLowerCase() + '/'}>Open</a></span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioL3Mistakes = ({ page }) => (
  <section className="dpl-mistakes">
    <div className="dpl-wrap">
      <div className="section-folio"><span>Do Not Skip / Outdoor-room failure points</span><span className="pg">PG. 14</span></div>
      <div className="dpl-mistakes-head">
        <h2>The mistakes that make the outdoor room worse later.</h2>
        <span>{page.mistakes.length}</span>
      </div>
      <div className="dpl-mistakes-grid">
        {page.mistakes.map((m, i) => (
          <article className="dpl-mistake" key={m}>
            <div className="n">{String(i + 1).padStart(2, '0')}</div>
            <h3>{m}</h3>
            <p>If structure, drainage, fasteners, or weather exposure is ignored, the project becomes seasonal regret with nicer lighting.</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioL3Related = ({ page, lane }) => (
  <section className="dpl-related">
    <div className="dpl-related-wrap">
      <div className="dpl-related-col">
        <h3>Other things to do on the deck and patio.</h3>
        <div className="dpl-related-list">
          {DECK_PATIO_L3_ORDER.map((key, i) => (
            <a href={'/en/deck-patio/' + key + '/'} className={'row ' + (key === lane ? 'current' : '')} key={key}><span className="n">{String(i + 1).padStart(2, '0')}</span><span className="t">{key} deck and patio</span><span className="ct">{DECK_PATIO_L3_COUNTS[key]} guides</span></a>
          ))}
        </div>
      </div>
      <div className="dpl-related-col">
        <h3>{page.active} in other rooms.</h3>
        <div className="dpl-related-list">
          {['kitchen', 'bathroom', 'bedroom', 'living-room', 'garage', 'basement', 'lawn-garden'].map((room, i) => (
            <a href={'/en/' + lane + '/' + room + '/'} className="row" key={room}><span className="n">{String(i + 1).padStart(2, '0')}</span><span className="t">{room.replace('-', ' ')}</span><span className="ct">room lane</span></a>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const DeckPatioL3Colophon = ({ page }) => (
  <section className="dpl-colophon">
    <span>HowTo: Home Edition / Deck and Patio</span>
    <h2>{page.count} ways to {page.active.toLowerCase()} the room between the house and the sky.</h2>
    <p>Built as a static editorial L3 page with a full crawler body, visible photography, and a real outdoor-room menu.</p>
    <a href="/en/deck-patio/" className="go">Back to Deck & Patio</a>
  </section>
);

const DeckPatioL3 = ({ lane }) => {
  const page = DECK_PATIO_L3_PAGES[lane] || DECK_PATIO_L3_PAGES.install;
  return (
    <>
      <DeckPatioL3Hero page={page} />
      <DeckPatioL3Top5 page={page} />
      <DeckPatioL3PhotoSpread page={page} />
      <DeckPatioL3Essay page={page} />
      <DeckPatioL3Tools page={page} />
      <DeckPatioL3Matrix page={page} />
      <DeckPatioL3Mistakes page={page} />
      <DeckPatioL3Related page={page} lane={lane} />
      <DeckPatioL3Colophon page={page} />
    </>
  );
};

window.DeckPatioL3 = DeckPatioL3;
