// Science / parent trust — interactive risk meter + scoring formula + clinic partner
function Science() {
  const { Icon, SectionHead } = window.RMS;

  // Live risk meter
  const [traits, setTraits] = React.useState({
    sugar: 70, acid: 50, sticky: 60, residue: 40, starch: 50, crunch: 30
  });

  const starchCling = Math.max(traits.residue / 100, Math.min(traits.starch / 100 + 0.05, 1));

  const score = Math.round(
    100 * (
    0.38 * (traits.sugar / 100) +
    0.22 * (traits.acid / 100) +
    0.15 * (traits.sticky / 100) +
    0.15 * starchCling +
    0.05 * (traits.crunch / 100) +
    0.05 * (traits.starch / 100))

  );

  const mode = score < 30 ? 'celebrate' : 'roast';
  const tier =
  score < 30 ? { label: 'GLOW-UP', color: 'var(--mint)' } :
  score < 60 ? { label: 'WATCH IT', color: 'var(--sun)' } :
  score < 80 ? { label: 'SMILE THREAT', color: 'var(--flame)' } :
  { label: 'YIKES', color: 'var(--hot)' };

  const TRAITS = [
  { key: 'sugar', label: 'Added sugar', weight: 0.38, hint: 'Feeds mouth bacteria; more sugar means more acid time.' },
  { key: 'acid', label: 'Acidity', weight: 0.22, hint: 'Softens enamel, especially when sipped or repeated.' },
  { key: 'sticky', label: 'Stickiness', weight: 0.15, hint: "Clings to teeth, stretching the snack's contact time." },
  { key: 'residue', label: 'Residue / starch cling', weight: 0.15, hint: 'Crumbs left in grooves keep feeding plaque after chewing.' },
  { key: 'starch', label: 'Starch factor', weight: 0.05, hint: 'Starchy crumbs can linger even when sugar is low.' },
  { key: 'crunch', label: 'Crunch hardness', weight: 0.05, hint: 'Very hard bites can stress teeth.' }];


  return (
    <section id="science" className="section" style={{
      background: 'var(--paper)',
      borderTop: '2px solid var(--ink)'
    }}>
      <div className="wrap">
        <SectionHead
          eyebrow="FOR THE PARENTS · NOT BORING"
          title="WE ROAST THE SNACK. NEVER THE KID."
          kicker="Risk scoring uses deterministic math, not vibes. Dr. Hawley's tone follows the selected audience and allergen filters. Built for entertainment, informed by pediatric dentistry guidance. Drag the dials to see how the score moves." />
        

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 28,
          alignItems: 'start'
        }} className="science-grid">

          {/* LEFT: live formula */}
          <div className="card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--mute)' }}>LIVE FORMULA</div>
                <div className="title-l" style={{ marginTop: 6 }}>DENTAL RISK · 0–100</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 64, lineHeight: 0.9,
                  color: tier.color,
                  textShadow: '3px 3px 0 var(--ink)'
                }}>{score}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--mute)', marginTop: 6 }}>
                  → {tier.label}
                </div>
              </div>
            </div>

            <div className="risk-track" style={{ height: 16 }}>
              <span className="risk-pin" style={{ left: score + '%', height: 28, top: -6 }} />
            </div>
            <div className="mono" style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, marginTop: 8, letterSpacing: '0.18em', color: 'var(--mute)' }}>
              <span>SAFE · 0</span><span>WATCH · 50</span><span>YIKES · 100</span>
            </div>

            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {TRAITS.map((t) =>
              <div key={t.key}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 7 }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 14 }}>{t.label}</div>
                      <div style={{
                        marginTop: 2,
                        maxWidth: 430,
                        fontSize: 11.5,
                        lineHeight: 1.28,
                        color: 'var(--mute)'
                      }}>{t.hint}</div>
                    </div>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--mute)', whiteSpace: 'nowrap', paddingTop: 2 }}>
                      weight {Math.round(t.weight * 100)}%
                      <span style={{ marginLeft: 10, color: 'var(--ink)', fontWeight: 700 }}>{traits[t.key]}</span>
                    </span>
                  </div>
                  <input
                  type="range"
                  min="0" max="100"
                  value={traits[t.key]}
                  onChange={(e) => setTraits((prev) => ({ ...prev, [t.key]: +e.target.value }))}
                  style={{
                    width: '100%',
                    accentColor: 'var(--flame)'
                  }} />
                
                </div>
              )}
            </div>
          </div>

          {/* RIGHT: trust card stack */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

            {/* Verdict preview */}
            <div className={mode === 'roast' ? 'halftone-ink' : 'halftone-mint'} style={{
              border: '2px solid var(--ink)',
              borderRadius: 22,
              boxShadow: '4px 4px 0 var(--ink)',
              padding: 22,
              color: mode === 'roast' ? 'var(--paper)' : 'var(--ink)',
              position: 'relative',
              minHeight: 200,
              overflow: 'hidden'
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', opacity: 0.7 }}>HAWLEY SAYS</div>
              <div className="title-l" style={{
                marginTop: 6,
                color: mode === 'roast' ? 'var(--flame)' : 'var(--ink)',
                fontSize: 'clamp(28px, 3.4vw, 40px)',
                lineHeight: 0.95,
                maxWidth: 280,
              }}>
                {mode === 'roast' ? (
                  <>"NOT TODAY,<br/>SNACK."</>
                ) : (
                  <>"GLOW-UP<br/>APPROVED."</>
                )}
              </div>
              <p className="body-sm" style={{ marginTop: 8, maxWidth: 280, opacity: 0.92 }}>
                {mode === 'roast' ?
                'High sugar + sticky residue = enamel under siege. Try fresh fruit or sparkling water instead.' :
                'Calcium, protein, fiber. The molars filed a thank-you note.'}
              </p>
              <img src={mode === 'roast' ? 'images/Roast_Mode_Variation.png' : 'images/Chill_Variation.png'}
              alt="" style={{
                position: 'absolute', right: 6, bottom: 6, width: 150, height: 200, objectFit: 'contain',
              }} />
            </div>

            {/* Safeguards card — proof shot from Settings */}
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '160px 1fr',
                gap: 0,
                alignItems: 'stretch',
              }} className="safeguards-grid">
                {/* Phone screenshot column */}
                <div style={{
                  background: 'var(--paper-2)',
                  borderRight: '1.5px solid var(--ink)',
                  padding: '18px 14px',
                  display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center',
                  gap: 10,
                  position: 'relative',
                }}>
                  <div className="mono" style={{
                    position: 'absolute', top: 10, left: 14,
                    fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--mute)',
                  }}>PROOF SHOT</div>
                  <div style={{
                    width: 110,
                    aspectRatio: '9 / 19.5',
                    background: 'var(--ink)',
                    border: '2.5px solid var(--ink)',
                    borderRadius: 18,
                    padding: 3,
                    boxShadow: '3px 3px 0 var(--flame)',
                    position: 'relative',
                    marginTop: 12,
                  }}>
                    <div style={{
                      position: 'absolute', top: 5, left: '50%', transform: 'translateX(-50%)',
                      width: 38, height: 8, background: 'var(--ink)', borderRadius: 999, zIndex: 5,
                    }}/>
                    <div style={{
                      width: '100%', height: '100%',
                      borderRadius: 14,
                      overflow: 'hidden',
                      background: 'var(--paper)',
                    }}>
                      <img src="images/screens/03_settings.png" alt="Settings: audience, comic style, and allergens" style={{
                        width: '100%', height: '100%',
                        objectFit: 'cover', objectPosition: 'top center',
                      }}/>
                    </div>
                  </div>
                  <div className="mono" style={{
                    fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--mute)',
                    textAlign: 'center', marginTop: 4,
                  }}>→ SETTINGS</div>
                </div>

                {/* Bullets column */}
                <div style={{ padding: 20 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--mute)' }}>GUARDRAILS</div>
                  <div className="title-m" style={{ marginTop: 6, fontSize: 18 }}>BUILT TO BE KID-SAFE</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {[
                    'No account, no profile, no social feed, no ads.',
                    'Audience presets tune the roast for kids, tweens, or teens; comic style changes art only.',
                    'Allergen filters: dairy, nuts, peanuts, eggs, gluten, soy, sesame.',
                    'Photos auto-delete on next snack; backup cleanup within 24 hours.',
                    'Tracking SDKs: zero.'].
                    map((s) =>
                    <li key={s} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14 }}>
                        <span style={{
                        width: 18, height: 18, flexShrink: 0,
                        borderRadius: 999, background: 'var(--mint)', border: '1.5px solid var(--ink)',
                        display: 'grid', placeItems: 'center', marginTop: 2
                      }}>{Icon.check(10)}</span>
                        <span>{s}</span>
                      </li>
                    )}
                  </ul>
                </div>
              </div>
            </div>

            {/* Clinic partner — split into clinic credit + Dr. Andrea pull-out */}
            <a
              href="https://www.poppykidsdental.com"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Poppy Kids Pediatric Dentistry (opens in new tab)"
              className="halftone-mint clinic-card"
              style={{
                display: 'block',
                textDecoration: 'none',
                color: 'inherit',
                border: '2px solid var(--ink)',
                borderRadius: 22,
                boxShadow: '4px 4px 0 var(--ink)',
                padding: 18,
                position: 'relative',
                transition: 'transform 140ms ease, box-shadow 140ms ease',
                cursor: 'pointer',
              }}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 132px',
                gap: 16,
                alignItems: 'stretch',
              }} className="clinic-grid">
                {/* LEFT — clinic credit */}
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>CLINIC-INFORMED</div>
                    <div style={{
                      width: 30, height: 30, flexShrink: 0,
                      background: 'var(--ink)', color: 'var(--mint)',
                      borderRadius: 999,
                      display: 'grid', placeItems: 'center',
                      border: '2px solid var(--ink)',
                      boxShadow: '2px 2px 0 var(--ink)',
                    }}>
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M7 17L17 7M9 7h8v8"/>
                      </svg>
                    </div>
                  </div>
                  <div className="title-m" style={{ marginTop: 6, fontSize: 18, lineHeight: 1.05 }}>
                    DEVELOPED WITH INPUT FROM<br />POPPY KIDS PEDIATRIC DENTISTRY
                  </div>
                  <p className="body-sm" style={{ marginTop: 8, flex: 1 }}>
                    Snack traits are informed by pediatric dentistry guidance. The roast is the wrapper. For entertainment only. Not dental, medical, or nutritional advice.
                  </p>
                  <div className="mono" style={{
                    marginTop: 10, fontSize: 11, letterSpacing: '0.18em',
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    borderBottom: '1.5px solid var(--ink)', paddingBottom: 2,
                    alignSelf: 'flex-start',
                  }}>
                    VISIT POPPYKIDSDENTAL.COM →
                  </div>
                </div>

                {/* RIGHT — Dr. Andrea pull-out (character credit) */}
                <div style={{
                  background: 'var(--paper)',
                  border: '2px solid var(--ink)',
                  borderRadius: 16,
                  padding: 10,
                  display: 'flex', flexDirection: 'column',
                  alignItems: 'center', gap: 8,
                  boxShadow: '3px 3px 0 var(--ink)',
                  position: 'relative',
                  transform: 'rotate(1.5deg)',
                  alignSelf: 'center',
                }}>
                  <div className="mono" style={{
                    position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)',
                    background: 'var(--ink)', color: 'var(--mint)',
                    fontSize: 9, letterSpacing: '0.18em',
                    padding: '3px 8px', borderRadius: 999,
                    border: '1.5px solid var(--ink)',
                    whiteSpace: 'nowrap',
                  }}>ADVISOR</div>

                  {/* portrait — halftone frame */}
                  <div className="halftone-orange" style={{
                    width: '100%',
                    aspectRatio: '1 / 1.05',
                    borderRadius: 10,
                    border: '1.5px solid var(--ink)',
                    overflow: 'hidden',
                    position: 'relative',
                    marginTop: 4,
                  }}>
                    <img src="images/dr_andrea.jpg" alt="Dr. Andrea Aduna, DMD" style={{
                      width: '100%', height: '100%',
                      objectFit: 'cover', objectPosition: 'center top',
                      display: 'block',
                    }}/>
                  </div>

                  <div style={{ textAlign: 'center', lineHeight: 1.1 }}>
                    <div style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 13, letterSpacing: '0.01em',
                    }}>DR. ANDREA<br/>ADUNA, DMD</div>
                    <div className="mono" style={{
                      marginTop: 4, fontSize: 9, color: 'var(--mute)',
                      letterSpacing: '0.16em',
                    }}>ADVISOR · PEDIATRIC DENTIST</div>
                  </div>
                </div>
              </div>

              {/* Disclaimer ribbon under both columns */}
              <div style={{
                marginTop: 14,
                background: 'var(--ink)',
                color: 'var(--paper)',
                borderRadius: 12,
                padding: '10px 14px',
                display: 'flex', alignItems: 'center', gap: 10,
                border: '1.5px solid var(--ink)',
              }}>
                <span className="mono" style={{
                  fontSize: 10, letterSpacing: '0.2em', color: 'var(--flame)',
                  whiteSpace: 'nowrap',
                }}>FYI</span>
                <span style={{ fontSize: 12.5, fontWeight: 500, flex: 1, lineHeight: 1.4, color: 'var(--paper-2)' }}>
                  Roast My Snack is for entertainment only. It is not dental, medical, or nutritional advice. Talk to a licensed clinician about real health questions.
                </span>
              </div>
            </a>

          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .science-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 520px) {
          .safeguards-grid { grid-template-columns: 1fr !important; }
          .clinic-grid { grid-template-columns: 1fr !important; }
        }
        .clinic-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink) !important; }
        .clinic-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink) !important; }
        input[type=range] {
          height: 22px; background: transparent;
        }
      `}</style>
    </section>);

}

window.RMS.Science = Science;