// App — orchestrates both scenes, hero, demands, tweaks.

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "kicker": "Network Access · Re-measured",
  "headline1": "Sylvia drives 23 miles. The exhibit says 14.5.",
  "headline2": "Eight pins on a barrier island. Two real dentists.",
  "scene1Default": "real",
  "scene2Default": "unique"
}/*EDITMODE-END*/;

function App(){
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view1, setView1] = useState(tweaks.scene1Default);
  const [view2, setView2] = useState(tweaks.scene2Default);

  useEffect(() => { setView1(tweaks.scene1Default); }, [tweaks.scene1Default]);
  useEffect(() => { setView2(tweaks.scene2Default); }, [tweaks.scene2Default]);

  return (
    <>
      <div className="page">

        {/* Header — minimal */}
        <header className="topbar">
          <div className="brand">
            <div className="brand-mark"></div>
            <div className="brand-text">
              <div className="nm">NC Employees and Members Deserve Better</div>
              <div className="sub">A note on how access gets measured</div>
            </div>
          </div>
          <nav className="nav">
            <a href="#scene-1">The mountains</a>
            <a href="#scene-2">The island</a>
            <a href="#demands" className="cta">What we ask</a>
          </nav>
        </header>

        {/* Hero */}
        <section className="hero">
          <div className="kicker"><span className="dot"></span>{tweaks.kicker}</div>
          <h1 className="serif">
            A mile on paper isn't a mile <em>on the&nbsp;map.</em><br/>
            How <span className="ul">network access</span> gets measured decides who can actually reach a dentist.
          </h1>
          <p className="lede">
            Two stories from North Carolina — one across a mountain ridge, one across a single causeway —
            show why <strong>driving distance</strong> and <strong>unique providers</strong> are the only honest
            way to score a dental network in a state with this much landscape.
          </p>
        </section>

        {/* SCENE 1 */}
        <section id="scene-1" className="scene">
          <header className="scene-head">
            <div className="scene-num">Scenario <strong>01</strong> · Western NC</div>
            <h2 className="scene-title serif">{tweaks.headline1}</h2>
            <div className="scene-toggle" role="tablist" aria-label="View mode">
              <button className={view1==="straight"?"on":""} onClick={()=>setView1("straight")}>As reported</button>
              <button className={view1==="real"?"on":""} onClick={()=>setView1("real")}>As driven</button>
            </div>
          </header>

          <div className="scene-body">
            <MountainMap view={view1} />
            <div className="side">
              <div className="side-card">
                <div className="eyebrow">Why it matters</div>
                <h3 className="serif">A ruler doesn't follow the road.</h3>
                <p>
                  Straight-line distance treats Western North Carolina like a flat sheet of paper.
                  Driving distance treats it like the place where members actually live and drive.
                  In Cullowhee, the two methods <strong>disagree by 60%</strong>.
                </p>
              </div>

              <div className="side-card">
                <div className="eyebrow">Cullowhee → Franklin · NC-23</div>
                <div className="stat-row">
                  <span className="lbl">Straight-line distance</span>
                  <span className="val">14.5 mi</span>
                </div>
                <div className="stat-row flag">
                  <span className="lbl"><strong>Actual drive</strong></span>
                  <span className="val">23 mi · 45 min</span>
                </div>
                <div className="stat-row">
                  <span className="lbl">Difference</span>
                  <span className="val" style={{ color:"var(--rust-deep)" }}>+ 8.5 mi</span>
                </div>
              </div>

              <div className="side-card dark">
                <div className="eyebrow">The fix</div>
                <p>
                  Require <strong style={{color:"#fff"}}>driving distance</strong> as the access standard.
                  It is the closest measurement to the experience of a member in a state with mountains, water, and weather.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* SCENE 2 */}
        <section id="scene-2" className="scene">
          <header className="scene-head">
            <div className="scene-num">Scenario <strong>02</strong> · Outer Banks</div>
            <h2 className="scene-title serif">{tweaks.headline2}</h2>
            <div className="scene-toggle" role="tablist" aria-label="View mode">
              <button className={view2==="listings"?"on":""} onClick={()=>setView2("listings")}>Listings</button>
              <button className={view2==="unique"?"on":""} onClick={()=>setView2("unique")}>Unique providers</button>
            </div>
          </header>

          <div className="scene-body">
            <IslandMap view={view2} />
            <div className="side">
              <div className="side-card">
                <div className="eyebrow">Why it matters</div>
                <h3 className="serif">One dentist with multiple offices is one dentist.</h3>
                <p>
                  Listings count every office address. Unique providers count people who can actually see a patient.
                  On a barrier island connected by one bridge, the difference is the entire story.
                </p>
              </div>

              <div className="side-card">
                <div className="eyebrow">Outer Banks · access points</div>
                <div className="stat-row">
                  <span className="lbl">Network listings shown</span>
                  <span className="val">8</span>
                </div>
                <div className="stat-row flag">
                  <span className="lbl"><strong>Unique providers (NPI)</strong></span>
                  <span className="val">2</span>
                </div>
                <div className="stat-row">
                  <span className="lbl">Bridges on or off the island</span>
                  <span className="val">1</span>
                </div>
              </div>

              <div className="side-card dark">
                <div className="eyebrow">The fix</div>
                <p>
                  Score adequacy by <strong style={{color:"#fff"}}>unique providers</strong>, not access points.
                  Listings inflate counts; unique NPIs reveal whether a member has a real second option.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* DEMANDS */}
        <section id="demands" className="demand">
          <div>
            <div className="demand-eyebrow">What we ask of NC Flex</div>
            <h2 className="serif">
              Measure access the way <em>members live it.</em>
            </h2>
            <p style={{ marginTop:18, fontSize:15, lineHeight:1.6, color:"rgba(250,250,247,.78)", maxWidth:420 }}>
              Two adjustments to the geo-access methodology bring the exhibit closer to what
              members actually experience when they pick up the phone to schedule a dental visit.
            </p>
          </div>
          <div className="demand-list">
            <div className="demand-item">
              <div className="demand-num">i</div>
              <div className="demand-text">
                <strong>Require driving distance.</strong>
                <span>Replace straight-line with door-to-door drive distance and time. It is the only measurement consistent with how a member in a diverse-landscape state — mountains, sounds, barrier islands — actually reaches care.</span>
              </div>
            </div>
            <div className="demand-item">
              <div className="demand-num">ii</div>
              <div className="demand-text">
                <strong>Score by unique providers.</strong>
                <span>Deduplicate provider listings by NPI before computing access percentages. Counting offices instead of dentists overstates choice in geographically isolated areas.</span>
              </div>
            </div>
            <div className="demand-item">
              <div className="demand-num">iii</div>
              <div className="demand-text">
                <strong>Clarify and re-evaluate outliers.</strong>
                <span>Any carrier response that is an outlier or does not meet the stated criteria should be clarified and re-evaluated, ensuring a best-value approach is maintained throughout the selection.</span>
              </div>
            </div>
          </div>
        </section>

        <footer className="footer-mini">
          <span>NC Employees and Members Deserve Better</span>
          <span>Toggle each map · Compare the methods</span>
        </footer>

      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Headlines">
          <TweakText label="Kicker" value={tweaks.kicker} onChange={v=>setTweak("kicker", v)} />
          <TweakText label="Scene 1 headline" value={tweaks.headline1} onChange={v=>setTweak("headline1", v)} />
          <TweakText label="Scene 2 headline" value={tweaks.headline2} onChange={v=>setTweak("headline2", v)} />
        </TweakSection>
        <TweakSection title="Default map view">
          <TweakRadio
            label="Mountains"
            value={tweaks.scene1Default}
            options={[{value:"straight",label:"As reported"},{value:"real",label:"As driven"}]}
            onChange={v=>setTweak("scene1Default", v)}
          />
          <TweakRadio
            label="Outer Banks"
            value={tweaks.scene2Default}
            options={[{value:"listings",label:"Listings"},{value:"unique",label:"Unique"}]}
            onChange={v=>setTweak("scene2Default", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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