// Home page sections — Ofman Pediatrics, Direction A
// Real photography, neonatology + PDHI angles, deeper philosophy.

function Hero(){
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'1fr 1fr',
      borderBottom:'1px solid var(--rule)',
    }}>
      <div style={{
        padding:'88px 56px 64px', display:'flex', flexDirection:'column',
        justifyContent:'space-between', borderRight:'1px solid var(--rule)',
        minHeight: 760,
      }}>
        <Kicker>№ 01 — A Concierge Pediatric Practice</Kicker>

        <div style={{ marginTop: 40 }}>
          <h1 className="serif" style={{
            fontSize: 104, lineHeight: 0.96, margin: 0, color:'var(--green)',
            letterSpacing:'-0.02em',
          }}>
            Unhurried care<br/>
            for the <em className="italic" style={{ color:'var(--brass)' }}>family</em><br/>
            you are <em className="italic">becoming</em>.
          </h1>
          <p style={{
            marginTop: 32, maxWidth: 540, fontSize: 17, lineHeight: 1.6,
            color:'var(--mute)',
          }}>
            A membership pediatric practice for South Florida families,
            led by <b style={{ color:'var(--ink)', fontWeight: 500 }}>Gaston Ofman, MD</b> —
            double board-certified in Pediatrics and Neonatology, founder of the
            Pediatric Developmental Health Institute, and a published clinical
            researcher. One physician. A small panel. A direct line, day or night.
          </p>
        </div>

        <div style={{ display:'flex', gap: 12, alignItems:'center', marginTop: 40 }}>
          <a className="cta-solid" href="home.html#apply">Apply for Membership →</a>
          <a className="cta-outline" href="about.html">Meet Dr. Ofman</a>
        </div>
      </div>

      <Photo
        src="assets/exam-color-stethoscope.jpg"
        label="Plate I — A visit, in practice."
        ratio="auto"
        style={{ minHeight: 760, height:'100%' }}
        objectPosition="center 25%"
        labelPosition="bottom-right"
      />
    </div>
  );
}

function Tenets(){
  const items = [
    ['I',   'Time, returned to you',     'Visits measured in hours, not minutes. A panel small enough that I know every name myself — not a portal, not a colleague covering my schedule.'],
    ['II',  'You\u2019ll have my number',  'Text me, day or night. No triage tree, no after-hours stranger. The physician who knows your child is the one who answers.'],
    ['III', 'Calm answers in a noisy decade', 'In a moment when every screen offers a confident opinion, I read the actual research, name what is uncertain, and translate it into something you can use tonight.'],
    ['IV',  'Care for the whole child',  'Not just the cough that brought you in this morning. Sleep, nutrition, behavior, friendships, the long arc of who your child is becoming — all of it is part of the visit.'],
  ];
  return (
    <div className="section">
      <div style={{
        display:'grid', gridTemplateColumns:'repeat(4, 1fr)',
        maxWidth: 1320, margin:'0 auto',
      }}>
        {items.map(([num, title, body], i) => (
          <div key={num} style={{
            padding:'56px 32px',
            borderRight: i < 3 ? '1px solid var(--rule)' : 'none',
          }}>
            <div className="serif italic" style={{ fontSize: 44, color:'var(--brass)' }}>{num}.</div>
            <div className="serif" style={{
              fontSize: 26, color:'var(--green)', marginTop: 8, lineHeight: 1.15,
            }}>{title}</div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color:'var(--mute)', marginTop: 14 }}>
              {body}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PullQuote(){
  return (
    <div className="section" style={{ background:'var(--paper)' }}>
      <div className="inner" style={{ textAlign:'center', padding:'120px 56px' }}>
        <Kicker>¶ A note from the practice</Kicker>
        <p className="serif italic" style={{
          fontSize: 56, lineHeight: 1.1, color:'var(--green)', maxWidth: 1100,
          margin: '28px auto 0', letterSpacing:'-0.015em',
        }}>
          We built this practice on a simple inspiration &mdash; to
          connect with parents in service of their children&rsquo;s
          fullest health, and to be, for each child, a safe and steady
          pediatrician worth trusting.
        </p>
        <div className="mono" style={{ color:'var(--mute)', marginTop: 36 }}>
          — The Practice
        </div>
      </div>
    </div>
  );
}

// Philosophy / Method spread — inspired structurally by the iwoolf "engineered
// outcomes" idea, but pediatric-specific and editorial in voice.
function Philosophy(){
  const pillars = [
    ['01', 'A neonatologist\u2019s eye',
      'Training that begins in the NICU teaches a particular kind of attention — to subtle changes, to the slow accumulation of evidence, to the questions parents are afraid to ask. That training does not stop at discharge. It shapes every well-visit and every late-night text.'],
    ['02', 'Evidence over confidence',
      'Parents arrive with screenshots, podcasts, and the well-meant advice of a hundred strangers. The work is not to dismiss any of it, but to read it carefully — and answer it carefully back. The practice keeps a small, living set of guidance notes; each cites its sources, names what is uncertain, and is revisited as the literature changes.'],
    ['03', 'The whole child, the whole arc',
      'Health is not a chart. It is sleep, food, attention, friendship, school, and a body that keeps changing rules. One physician across the most plastic years of a child\u2019s life — birth through college, the same hand on the chart.'],
  ];

  return (
    <div className="section">
      <div className="inner" style={{ padding:'100px 56px' }}>
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 80, alignItems:'flex-start',
        }}>
          <div style={{ position:'sticky', top: 100 }}>
            <SectionLabel num="II" title="The Philosophy" />
            <h2 className="serif" style={{
              fontSize: 64, lineHeight: 1.0, margin: 0, color:'var(--green)',
              letterSpacing:'-0.02em',
            }}>
              Pediatrics,<br/>
              <em className="italic" style={{ color:'var(--brass)' }}>practiced carefully.</em>
            </h2>
            <p style={{
              marginTop: 28, fontSize: 16, lineHeight: 1.65, color:'var(--mute)',
              maxWidth: 380,
            }}>
              Three commitments that shape how the practice actually works,
              day to day. Each is a deliberate choice about what we do —
              and what we leave for someone else.
            </p>
            <a className="cta-outline" style={{ marginTop: 28 }} href="services.html">
              Read what&rsquo;s included →
            </a>
          </div>

          <div>
            {pillars.map(([n, title, body], i) => (
              <div key={n} style={{
                display:'grid', gridTemplateColumns:'48px 1fr',
                gap: 24, padding:'28px 0',
                borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule)',
              }}>
                <span className="mono" style={{ color:'var(--brass)' }}>{n}</span>
                <div>
                  <div className="serif" style={{
                    fontSize: 32, color:'var(--green)', lineHeight: 1.1,
                    letterSpacing:'-0.015em',
                  }}>{title}</div>
                  <p style={{
                    margin:'12px 0 0', fontSize: 15.5, lineHeight: 1.65, color:'var(--ink)',
                  }}>{body}</p>
                </div>
              </div>
            ))}
            <div style={{ borderTop:'1px solid var(--ink)' }} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Doctor(){
  const credentials = [
    ['Education & Training', [
      'Neonatology Fellowship — Northwestern University, Chicago',
      'Pediatric Residency — UT Southwestern, Dallas',
      'Research Internship — Cincinnati Children\u2019s, Pulmonary Biology',
      'Doctor of Medicine, Diploma of Honor — Favaloro University, Buenos Aires',
    ]],
    ['Board Certifications', [
      'American Board of Pediatrics',
      'Neonatal–Perinatal Medicine',
      'Neonatal Resuscitation Program (NRP) Provider',
    ]],
    ['Academic & Research', [
      'Assistant Professor — University of Oklahoma Health Sciences Center',
      'Founder & Executive Director — Pediatric Developmental Health Institute',
      'Principal Investigator — Thrasher Research Fund · Oklahoma Nathan Shock Center',
      'Member, Society for Pediatric Research (Lung Biology Cohort)',
    ]],
    ['Selected Publications', [
      'New England Journal of Medicine — Early High-Titer Plasma Therapy (2021)',
      'Journal of Infectious Diseases — Maternal-Fetal Immunologic Response to SARS-CoV-2 (2021)',
      'Journal of Infectious Diseases — Respiratory Failure in Vulnerable Premature Children (2020)',
      'Free Radical Biology & Medicine — Antioxidants & Bronchopulmonary Dysplasia (2019)',
      'BMC Pediatrics — The Discovery BPD Program (2019)',
      'Full list — PubMed: Ofman G',
    ]],
  ];

  return (
    <div className="section" style={{ background:'var(--green)', color:'var(--on-green)' }}>
      <div className="inner" style={{ padding:'120px 56px' }}>
        <div style={{
          display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap: 72,
          alignItems:'flex-start',
        }}>
          <div style={{ position:'sticky', top: 100 }}>
            <Photo
              src="assets/portrait-studio.jpg"
              label="Plate II — Gaston Ofman, MD"
              ratio="3/4"
              style={{ background:'#1F2A24' }}
            />
            <div className="mono" style={{
              marginTop: 18, opacity:.7, color:'var(--brass-2)',
            }}>
              Pediatrician & Neonatologist · Miami, FL
            </div>
          </div>

          <div>
            <div className="kicker" style={{ color:'var(--brass-2)' }}>§ III · The Physician</div>
            <h2 className="serif" style={{
              fontSize: 76, lineHeight: 1.0, margin:'18px 0 0',
              color:'var(--on-green)', letterSpacing:'-0.02em',
            }}>
              Gaston Ofman, MD<br/>
              <em className="italic" style={{ color:'var(--brass-2)' }}>
                In my own words.
              </em>
            </h2>
            <p style={{
              marginTop: 28, fontSize: 17, lineHeight: 1.7, opacity:.92, maxWidth: 620,
            }}>
              I&rsquo;m a double board-certified pediatrician and
              neonatologist. Before I see your child for an ear infection
              or a school physical, I spent more than a decade in the
              rooms where medicine asks its hardest questions —
              neonatal intensive care units, research labs, and the
              long quiet of follow-up clinics. I trained at Northwestern
              in Chicago and at UT Southwestern in Dallas, after earning
              my medical degree with a Diploma of Honor from Favaloro
              University in Buenos Aires, where I grew up.
            </p>
            <p style={{
              marginTop: 16, fontSize: 17, lineHeight: 1.7, opacity:.92, maxWidth: 620,
            }}>
              I&rsquo;m a Society for Pediatric Research Fellow, have
              served as Assistant Professor of Neonatal–Perinatal Medicine
              at the University of Oklahoma Health Sciences Center, and
              founded the <a href="https://pdhi.org/" target="_blank" rel="noopener" style={{ color:'var(--brass-2)', textDecoration:'underline', textUnderlineOffset:'3px' }}>Pediatric Developmental Health Institute</a> (pdhi.org).
              My peer-reviewed work has appeared in the{' '}
              <i>New England Journal of Medicine</i>, the{' '}
              <i>Journal of Infectious Diseases</i>, and{' '}
              <i>Free Radical Biology &amp; Medicine</i>, among others.
            </p>
            <p style={{
              marginTop: 16, fontSize: 17, lineHeight: 1.7, opacity:.92, maxWidth: 620,
            }}>
              I built this practice because the kind of attention I learned
              in the NICU — slow, careful, evidence-based, and honest about
              uncertainty — belongs on the ordinary days, too. For the
              parents who keep a list of questions on their phone, and for
              the children who deserve a doctor patient enough to be trusted.
            </p>

            {/* From the NICU — image strip */}
            <div style={{
              marginTop: 56,
              paddingTop: 40,
              borderTop:'1px solid rgba(244,241,234,.32)',
            }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'var(--brass-2)', marginBottom: 18,
              }}>
                § From the NICU
              </div>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18,
              }}>
                <Photo
                  src="assets/nicu-family.jpg"
                  label="Plate II — With a NICU family, at discharge."
                  ratio="3/4"
                  objectPosition="center 30%"
                />
                <Photo
                  src="assets/nicu-mother.jpg"
                  label="Plate III — A newborn, his mother, and the practice that begins here."
                  ratio="3/4"
                  objectPosition="center 30%"
                />
              </div>
              <p className="serif italic" style={{
                marginTop: 22, fontSize: 18, lineHeight: 1.55, opacity: .85,
                maxWidth: 620, color: 'var(--cream)',
              }}>
                Years of practice, in the rooms where the smallest signs matter
                most. The same attention now belongs to the ordinary days.
              </p>
            </div>

            {/* Credentials grid — iwoolf-style */}
            <div style={{
              display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0,
              marginTop: 48, borderTop:'1px solid rgba(244,241,234,.32)',
            }}>
              {credentials.map(([title, items], i) => (
                <div key={title} style={{
                  padding:'28px 28px 28px 0',
                  paddingLeft: i % 2 === 1 ? 28 : 0,
                  paddingRight: i % 2 === 0 ? 28 : 0,
                  borderRight: i % 2 === 0 ? '1px solid rgba(244,241,234,.32)' : 'none',
                  borderBottom: i < 2 ? '1px solid rgba(244,241,234,.32)' : 'none',
                }}>
                  <div className="mono" style={{
                    color:'var(--brass-2)', marginBottom: 14, opacity:.9,
                  }}>{title}</div>
                  <ul style={{
                    listStyle:'none', padding: 0, margin: 0,
                    display:'flex', flexDirection:'column', gap: 10,
                  }}>
                    {items.map((x, j) => (
                      <li key={j} style={{
                        fontSize: 14, lineHeight: 1.5, opacity:.9,
                        paddingLeft: 14, position:'relative',
                      }}>
                        <span style={{
                          position:'absolute', left: 0, top: 8, width: 5, height: 5,
                          background:'var(--brass-2)', borderRadius:'50%',
                        }} />
                        {x}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>

            <div style={{
              display:'flex', gap: 16, alignItems:'center', marginTop: 40,
              flexWrap:'wrap',
            }}>
              <a className="cta-outline" style={{
                color:'var(--on-green)', borderColor:'var(--on-green)',
              }} href="about.html">Read more about Dr. Ofman →</a>
              <a className="mono" style={{ color:'var(--brass-2)' }}
                 href="https://pubmed.ncbi.nlm.nih.gov/?term=Ofman+G&cauthor_id=33799529"
                 target="_blank" rel="noopener">
                Publications · PubMed →
              </a>
              <a className="mono" style={{ color:'var(--brass-2)' }}
                 href="https://pdhi.org/" target="_blank" rel="noopener">
                PDHI · pdhi.org →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HouseCalls(){
  return (
    <div className="section">
      <div className="inner" style={{ padding:'100px 56px' }}>
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80,
        }}>
          <div>
            <SectionLabel num="IV" title="The House Call" />
            <h2 className="serif" style={{
              fontSize: 64, lineHeight: 1.05, margin: 0, color:'var(--green)',
              letterSpacing:'-0.02em',
            }}>
              Care that travels<br/>
              <em className="italic" style={{ color:'var(--brass)' }}>to where your family lives.</em>
            </h2>
            <p style={{
              marginTop: 28, fontSize: 16, lineHeight: 1.65, color:'var(--mute)',
              maxWidth: 540,
            }}>
              When a child shouldn&rsquo;t leave bed — and on the
              ordinary days when leaving bed simply isn&rsquo;t worth it —
              the practice comes to you. From Coral Gables to Key Biscayne,
              South Beach to Coconut Grove, the house call is part of the
              membership, not an upcharge.
            </p>
            <div style={{
              display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24, marginTop: 36,
            }}>
              {[
                ['Newborn check-ins', 'Weekly, in your home, for the first ninety days.'],
                ['Sick visits at home', 'When fevers and the carpool line don\u2019t mix.'],
                ['Travel medicine',  'Pre-trip plans, in-trip telehealth, time-zone aware.'],
                ['School & sports',  'Physicals, 504s, IEPs — coordinated, not chased.'],
              ].map(([t, d]) => (
                <div key={t} style={{ borderTop:'1px solid var(--rule)', paddingTop: 14 }}>
                  <div className="serif" style={{ fontSize: 22, color:'var(--green)' }}>{t}</div>
                  <div style={{ fontSize: 13.5, color:'var(--mute)', marginTop: 6, lineHeight: 1.5 }}>
                    {d}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <Photo src="assets/hero-exam-girl-v2.jpg" label="Plate III — A heartbeat, listened to." ratio="4/5" objectPosition="center 30%" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Evidence(){
  return (
    <div className="section" style={{ background:'var(--paper)' }}>
      <div className="inner" style={{ padding:'120px 56px' }}>
        <div style={{ textAlign:'center', maxWidth: 900, margin:'0 auto 64px' }}>
          <Kicker>§ V · A guide through the noise</Kicker>
          <h2 className="serif" style={{
            fontSize: 76, lineHeight: 1.02, margin:'24px 0 0', color:'var(--green)',
            letterSpacing:'-0.025em',
          }}>
            In a decade of misinformation,<br/>
            <em className="italic" style={{ color:'var(--brass)' }}>
              a physician who reads the research.
            </em>
          </h2>
          <p style={{
            marginTop: 28, fontSize: 19, lineHeight: 1.55, color:'var(--mute)',
            maxWidth: 720, margin:'28px auto 0',
          }}>
            Parenting today means navigating an avalanche of advice — podcasts,
            group chats, headlines, and a thousand strangers with confident
            opinions. The work of the practice is to help you separate signal
            from noise, and to make the best decision possible for your child.
          </p>
        </div>

        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 80, alignItems:'flex-start',
          borderTop:'1px solid var(--ink)', paddingTop: 60,
        }}>
          <div style={{ position:'sticky', top: 100 }}>
            <div className="serif italic" style={{
              fontSize: 38, lineHeight: 1.2, color:'var(--green)',
              borderLeft:'2px solid var(--brass)', paddingLeft: 24, margin: 0,
            }}>
              "Curious before<br/>certain. Sourced<br/>before said."
            </div>
            <p style={{
              marginTop: 28, fontSize: 14.5, lineHeight: 1.65, color:'var(--mute)',
              maxWidth: 360,
            }}>
              Dr. Ofman&rsquo;s peer-reviewed research is indexed on PubMed.
              The same standard of reading travels into every conversation
              with a member family.
            </p>
            <a className="mono" style={{
              color:'var(--brass)', marginTop: 22, display:'inline-block',
            }} href="https://pubmed.ncbi.nlm.nih.gov/?term=Ofman+G&cauthor_id=33799529" target="_blank" rel="noopener">
              View publications on PubMed →
            </a>
          </div>

          <div>
            <p className="serif" style={{
              fontSize: 24, lineHeight: 1.45, color:'var(--ink)',
              fontWeight: 400, margin: 0, maxWidth: 640,
            }}>
              <span style={{
                fontFamily:'Cormorant Garamond, serif',
                float:'left', fontSize: 84, lineHeight: 0.85, marginRight: 10,
                marginTop: 8, color:'var(--brass)',
              }}>P</span>
              arents arrive with screenshots, podcasts, and the well-meant
              advice of a hundred strangers. The work of the modern
              pediatrician is not to dismiss any of it — but to read it
              carefully, and to answer it carefully back.
            </p>

            <p style={{
              marginTop: 24, fontSize: 16, lineHeight: 1.7, color:'var(--ink)',
              maxWidth: 640,
            }}>
              Dr. Ofman&rsquo;s years as a clinical and translational
              researcher mean the practice doesn&rsquo;t hand you headlines —
              it hands you the underlying study, the limits of what it
              shows, and a plain-language read of what to actually do.
              That habit is the difference between an opinion and a
              decision you can stand behind.
            </p>

            <div style={{
              borderTop:'1px solid var(--rule)', marginTop: 36, paddingTop: 28,
              display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32,
            }}>
              {[
                ['We read the source.',     'Not the headline. Not the algorithm. The actual paper, with its sample size and limitations named.'],
                ['We say what is uncertain.','Some answers are not yet known. Saying so honestly is part of the practice.'],
                ['We translate, plainly.',   'No jargon, no condescension. The reasoning is yours to hold.'],
                ['We revisit.',              'Guidance is not static. As the literature changes, so does what we recommend.'],
              ].map(([t, d], i) => (
                <div key={i}>
                  <div className="serif italic" style={{
                    fontSize: 24, color:'var(--brass)', lineHeight: 1.2,
                  }}>{t}</div>
                  <div style={{
                    fontSize: 14, lineHeight: 1.6, color:'var(--ink)', marginTop: 8,
                  }}>{d}</div>
                </div>
              ))}
            </div>

            <div style={{
              borderTop:'1px solid var(--rule)', marginTop: 40, paddingTop: 22,
              display:'grid', gridTemplateColumns:'auto 1fr', gap: 24,
            }}>
              <div className="mono" style={{ color:'var(--brass)' }}>1.</div>
              <div className="mono" style={{ color:'var(--mute)', lineHeight: 1.7 }}>
                AAP Clinical Reports · Cochrane Reviews · NEJM ·
                BMJ Paediatrics Open · Dr. Ofman&rsquo;s peer-reviewed
                publications (PubMed: Ofman G)
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// New: PDHI section — the broader work
function PDHI(){
  return (
    <div className="section">
      <div className="inner" style={{ padding:'100px 56px' }}>
        <div style={{
          display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 80, alignItems:'flex-end',
          borderBottom:'1px solid var(--ink)', paddingBottom: 40,
        }}>
          <div>
            <Kicker>§ VI · The Wider Work</Kicker>
            <h2 className="serif" style={{
              fontSize: 64, lineHeight: 1.02, margin:'18px 0 0', color:'var(--green)',
              letterSpacing:'-0.02em',
            }}>
              Founder of the<br/>
              <em className="italic" style={{ color:'var(--brass)' }}>
                Pediatric Developmental Health Institute.
              </em>
            </h2>
          </div>
          <div className="mono" style={{ color:'var(--mute)', textAlign:'right' }}>
            pdhi.org · 501(c)(3)
          </div>
        </div>

        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 60, marginTop: 40,
        }}>
          <p style={{ fontSize: 16, lineHeight: 1.65, color:'var(--ink)', margin: 0 }}>
            PDHI is a non-profit Dr. Ofman founded to serve the children he
            first met in the NICU — and the families who carry them home.
            It provides comprehensive developmental follow-up for high-risk
            infants and children.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color:'var(--ink)', margin: 0 }}>
            He continues to lead studies on neonatal and developmental
            outcomes, with results published in the peer-reviewed
            literature. The practice inherits this disposition:
            medicine that is curious before it is certain.
          </p>
          <div>
            <div className="mono" style={{ color:'var(--mute)', marginBottom: 14 }}>
              At PDHI
            </div>
            <ul style={{
              listStyle:'none', padding: 0, margin: 0,
              display:'flex', flexDirection:'column', gap: 10,
              fontSize: 14.5, lineHeight: 1.5, color:'var(--ink)',
            }}>
              <li>· Founder & Executive Director</li>
              <li>· NICU follow-up & developmental care</li>
            </ul>
            <a className="mono" style={{ color:'var(--brass)', marginTop: 16, display:'inline-block' }}>
              Visit pdhi.org →
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function MembershipBlock(){
  return (
    <div className="section" style={{ background:'var(--paper)' }}>
      <div className="inner" style={{ padding:'120px 56px' }}>
        <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto' }}>
          <Kicker>§ VII · Membership</Kicker>
          <h2 className="serif" style={{
            fontSize: 76, lineHeight: 1.02, margin:'24px 0 0', color:'var(--green)',
            letterSpacing:'-0.02em',
          }}>
            Membership is by<br/>
            <em className="italic" style={{ color:'var(--brass)' }}>application and conversation.</em>
          </h2>
          <p style={{
            marginTop: 28, fontSize: 17, lineHeight: 1.65, color:'var(--mute)',
            maxWidth: 600, margin:'28px auto 0',
          }}>
            Membership is by annual fee, paid alongside your existing
            commercial insurance. The fee covers what insurance has never
            covered well — time, attention, access, and the long view.
            Pricing is shared in conversation.
          </p>
          <div style={{ display:'flex', gap: 12, justifyContent:'center', marginTop: 40 }}>
            <a className="cta-solid" href="home.html#apply">Apply for Membership →</a>
            <a className="cta-outline" href="services.html">What&rsquo;s included</a>
          </div>

          <div style={{
            marginTop: 80, display:'grid', gridTemplateColumns:'repeat(3, 1fr)',
            borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)',
          }}>
            {[
              ['Limited', 'Families per panel'],
              ['24/7', 'Direct text to Dr. Ofman'],
              ['0', 'Waiting rooms'],
            ].map(([n, l], i) => (
              <div key={i} style={{
                padding:'40px 24px',
                borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
              }}>
                <div className="serif" style={{
                  fontSize: 64, color:'var(--green)', lineHeight: 1, letterSpacing:'-0.02em',
                }}>{n}</div>
                <div className="mono" style={{ color:'var(--mute)', marginTop: 14 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactForm(){
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');
  const handleSubmit = async (e) => {
    e.preventDefault();
    const f = e.currentTarget;
    const data = Object.fromEntries(new FormData(f).entries());
    // Honeypot — bots fill hidden field; humans don't
    if (data.website) return;
    setStatus('sending');
    setErrorMsg('');
    try {
      const r = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (!r.ok) {
        const t = await r.text().catch(() => '');
        throw new Error(t || `Request failed (${r.status})`);
      }
      setStatus('sent');
      f.reset();
    } catch (err) {
      setStatus('error');
      setErrorMsg(err.message || 'Something went wrong.');
    }
  };
  const field = {
    background:'transparent', border:'none', borderBottom:'1px solid var(--rule)',
    padding:'14px 0', fontSize: 16, fontFamily:'inherit', color:'var(--ink)',
    outline:'none', width:'100%',
  };
  const lbl = {
    fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.08em',
    textTransform:'uppercase', color:'var(--mute)', display:'block', marginBottom: 4,
  };
  return (
    <div className="section" id="apply" style={{ background:'var(--paper)', borderTop:'1px solid var(--rule)' }}>
      <div className="inner" style={{ padding:'120px 56px', maxWidth: 1240, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 96, alignItems:'flex-start' }}>
          <div style={{ position:'sticky', top: 100 }}>
            <Kicker>§ IX · Contact</Kicker>
            <h2 className="serif" style={{
              fontSize: 64, lineHeight: 1.0, margin:'18px 0 0', color:'var(--green)',
              letterSpacing:'-0.02em',
            }}>
              Begin with<br/>
              <em className="italic" style={{ color:'var(--brass)' }}>a conversation.</em>
            </h2>
            <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.65, color:'var(--mute)', maxWidth: 380 }}>
              Tell me a little about your family and what brings you here.
              I read every note personally and reply within one business day.
            </p>
          </div>

          <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap: 28 }}>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32 }}>
              <div><label style={lbl}>Parent / Guardian Name</label><input style={field} name="parentName" type="text" required /></div>
              <div><label style={lbl}>Child(ren) Name(s)</label><input style={field} name="childName" type="text" required /></div>
              <div><label style={lbl}>Child(ren) Age(s)</label><input style={field} name="childAge" type="text" placeholder="e.g. 6 mo, 4 yr" required /></div>
              <div><label style={lbl}>Phone</label><input style={field} name="phone" type="tel" required /></div>
              <div style={{ gridColumn:'1 / -1' }}><label style={lbl}>Email</label><input style={field} name="email" type="email" required /></div>
              <div style={{ gridColumn:'1 / -1' }}>
                <label style={lbl}>What brings you to the practice?</label>
                <textarea style={{ ...field, minHeight: 120, resize:'vertical', borderBottom:'1px solid var(--rule)' }}
                          name="message" rows={5}
                          placeholder="Newborn on the way, looking for continuity, a specific concern, second opinion, etc." required />
              </div>
              {/* Honeypot field — hidden from humans, bots will fill it */}
              <div style={{ position:'absolute', left:'-9999px', width:1, height:1, overflow:'hidden' }} aria-hidden="true">
                <label>Website<input type="text" name="website" tabIndex={-1} autoComplete="off" /></label>
              </div>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap: 18, marginTop: 12, flexWrap:'wrap' }}>
              <button type="submit" className="cta-solid" disabled={status === 'sending'}
                      style={{ border:'none', cursor: status === 'sending' ? 'wait' : 'pointer', opacity: status === 'sending' ? 0.6 : 1 }}>
                {status === 'sending' ? 'Sending…' : 'Send Inquiry →'}
              </button>
              <div className="mono" style={{ color: status === 'error' ? '#9a3a2a' : 'var(--mute)', fontSize: 11, letterSpacing:'0.05em', maxWidth: 420 }}>
                {status === 'sent' && 'Received. Dr. Ofman will reply within one business day.'}
                {status === 'error' && `Couldn’t send — ${errorMsg}. Please email Office@OfmanPeds.com.`}
                {status === 'idle' && 'Goes directly to Dr. Ofman’s inbox.'}
                {status === 'sending' && 'Sending your note…'}
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

function Journal(){
  const all = (window.PAPERS_DATA && window.PAPERS_DATA.papers) || [];
  const featured = all.filter(p => p.featured).slice(0, 4);
  const lastUpdated = (window.PAPERS_DATA && window.PAPERS_DATA.lastUpdated) || '';
  // Format "2026-05" -> "May 2026"
  const fmtMonth = (s) => {
    if (!s) return '';
    const [y, m] = s.split('-');
    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    return `${months[parseInt(m,10)-1]} ${y}`;
  };
  return (
    <div className="section">
      <div className="inner" style={{ padding:'100px 56px' }}>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'flex-end',
          borderBottom:'1px solid var(--ink)', paddingBottom: 24, marginBottom: 40,
          gap: 40, flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: 720 }}>
            <Kicker>§ VIII · Pediatric Research, for Parents</Kicker>
            <h2 className="serif" style={{
              fontSize: 56, lineHeight: 1.0, margin:'12px 0 0', color:'var(--green)',
              letterSpacing:'-0.02em',
            }}>
              The studies that should<br/>
              <em className="italic" style={{ color:'var(--brass)' }}>change how you think.</em>
            </h2>
            <p style={{
              marginTop: 18, fontSize: 15.5, lineHeight: 1.6, color:'var(--mute)',
              maxWidth: 640,
            }}>
              A small, regularly rotating selection of recent peer-reviewed
              pediatric publications — chosen because they meaningfully
              affect parenting decisions, with the takeaway summarized
              in plain language. Updated monthly.
            </p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="mono" style={{ color:'var(--mute)', fontSize: 11, letterSpacing:'0.08em', textTransform:'uppercase' }}>
              Featured · {fmtMonth(lastUpdated)}
            </div>
            <a className="mono" style={{ color:'var(--brass)', display:'block', marginTop: 10 }}
               href="research.html">
              Browse the full library →
            </a>
          </div>
        </div>

        <div style={{
          display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 0,
        }}>
          {featured.map((p, i) => (
            <a key={p.id} href={p.url} target="_blank" rel="noopener" style={{
              textDecoration: 'none', color: 'inherit',
              borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
              borderBottom: i < 2 ? '1px solid var(--rule)' : 'none',
              paddingLeft: i % 2 === 0 ? 0 : 36,
              paddingRight: i % 2 === 0 ? 36 : 0,
              paddingTop: i < 2 ? 0 : 36,
              paddingBottom: i < 2 ? 36 : 0,
              display: 'flex', flexDirection: 'column',
              transition: 'opacity .2s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.opacity = '0.72'}
            onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}>
              <div className="mono" style={{
                color:'var(--brass)', fontSize: 11, letterSpacing: '0.08em',
                textTransform: 'uppercase',
              }}>{p.tag}</div>
              <div className="serif italic" style={{
                color:'var(--mute)', fontSize: 14, marginTop: 6,
              }}>{p.journal}</div>
              <h3 className="serif" style={{
                fontSize: 26, lineHeight: 1.2, color:'var(--green)', margin:'18px 0 14px',
                letterSpacing: '-0.01em',
              }}>{p.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color:'var(--ink)', margin: 0 }}>
                {p.summary}
              </p>
              <div className="mono" style={{
                marginTop: 22, color: 'var(--brass)', fontSize: 12,
              }}>
                Read the paper →
              </div>
            </a>
          ))}
        </div>

        <div style={{
          marginTop: 56, paddingTop: 28, borderTop: '1px solid var(--rule)',
          fontSize: 13, color:'var(--mute)', maxWidth: 820, lineHeight: 1.55,
          fontStyle: 'italic',
        }}>
          A note on these summaries: each is my reading of a published paper,
          written for parents — not a substitute for clinical judgment about
          your specific child. Bring questions to a visit, and we&rsquo;ll
          read the literature together.
        </div>
      </div>
    </div>
  );
}

function Closing(){
  // Quiet outro — single italic line, no CTAs (Membership above carries those).
  return (
    <div style={{
      background:'var(--bg)', borderTop:'1px solid var(--rule)',
      padding:'120px 56px', textAlign:'center',
    }}>
      <p className="serif italic" style={{
        fontSize: 30, lineHeight: 1.4, margin: 0,
        color:'var(--green)', maxWidth: 720, marginInline:'auto',
        letterSpacing:'-0.005em',
      }}>
        \u201cFor the small, steady work of raising a child.\u201d
      </p>
      <div className="mono" style={{
        marginTop: 18, color:'var(--mute)', fontSize: 11, letterSpacing:'0.12em', textTransform:'uppercase',
      }}>
        — Dr. Ofman
      </div>
    </div>
  );
}

Object.assign(window, {
  Hero, Tenets, PullQuote, Philosophy, Doctor, HouseCalls,
  Evidence, PDHI, MembershipBlock, ContactForm, Journal, Closing,
});
