which design strategy?

Hi, I'm new here. This looked like the right place for this question; apologies if I'm mistaken.
This is not a question about how to code. It's about what might be the most effective design strategy for my site, and why. I've done a lot of searching and experimenting and I've found a lot of information for and against each option, so I'm hoping to start a discussion with people more experienced than myself.

Concept: Small business website. Logo and contact info at top of page should always be visible. Below that, five subtopic summaries are all in view in one screenspace with no scrolling. Each of the five subtopic summaries leads to one or more panels of further detail. The various "further detail" panels are intended to be viewed one-at-a-time, and sized to perfectly cover or replace the original five summaries. No scrolling, minimal navigation, one screenful of information at a time. Click a summary paragraph to open the associated detail panel, the detail panel replaces the five summaries until you close it.

Strategy: Multiple HTML files, one for the page of summaries, one for each detail panel.
Pros:
> Seems to be what Google wants, no hidden, off-screen, or otherwise out-of-view content.
> Every last bit gets indexed by search engines; detail panels can be linked to individually in search results.
> Making a sitemap is simple because every panel has a unique url.
Cons:
< Feels 1990s. Click Here to go there!
< At the mercy of the internet for every single click, because each panel is another html file to request & receive.
< Logo and contact links at the top of many different html files run the risk of being penalized for "duplicate content".

Strategy: Single HTML file, detail panels are <div>'s that move into and out of view via JavaScript.
Pros:
> Looks and feels really slick. CSS transitions give a very professional appearance to the opening and closing panels, and also give visual cues to organization as the panels appear to "grow" from the summary they relate to.
> No-wait navigation. Once index.html loads, you have the whole site.
Cons:
< Popular opinion suggests that my extended detail panels will either not be indexed at all, or somehow be indexed with less credibility. With 80-90% of my content in these panels, it would be a bad strategy that leaves it unsearchable.
< Haven't yet worked out a strategy for creating a useful sitemap link for div-based detail panels.

Strategy: iFrames
No.

Strategy: Single HTML file, detail panels NOT hidden, instead placed one below another, below the summary section, available by scrolling. JavaScript controls could be left in place to bring requested panels up to the top of the page, but they are always visible by scrolling too.
Pros: > Makes Google happy, whole site gets indexed.
Cons: < Navigation is not slick and potentially confusing.

Strategy: Something I haven't thought of yet?

I'm not a web designer. I'm a contractor building a site for my own business. I know enough HTML, CSS, & JS to put together working drafts of each of the described options, but I don't have enough live-site experience to know which would provide the best balance between effective SEO and easy, intuitive navigation for visitors.
My primary intended audience is potential customers who have just discovered me by searching for local contractors.
Can anyone contradict any of my assumptions, poke holes in my logic, or provide relevant information I've overlooked?
Any advice or insight would be greatly appreciated.