// Direction C — "Evidence & Care"
// Structured, clinical-authoritative, but warm. Cool sky/ivory/slate
// with a single pop accent. Grid-driven, lots of small typographic detail,
// leans into evidence-based + holistic framing.

const C_BG = '#F2F4F1';
const C_PAPER = '#FAFBF8';
const C_INK = '#0F1A1C';
const C_SLATE = '#3A4A4F';
const C_SKY = '#7FA1A8';
const C_ACCENT = '#D9583B';
const C_RULE = 'rgba(15,26,28,0.14)';
const C_MUTE = 'rgba(15,26,28,0.62)';

const cStyles = {
  root: {
    width: '100%', height: '100%', background: C_BG, color: C_INK,
    fontFamily: '"Neue Haas Grotesk", "Inter", system-ui, sans-serif',
    overflow: 'hidden', display: 'flex', flexDirection: 'column',
  },
  serif: {
    fontFamily: '"Source Serif Pro", "Charter", Georgia, serif',
    fontWeight: 300, letterSpacing: '-0.015em',
  },
  mono: {
    fontFamily: 'ui-monospace, "JetBrains Mono", monospace',
    fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase',
  },
};

function DirectionC() {
  return (
    <div style={cStyles.root}>
      {/* TOP RULE / META BAR */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '10px 32px', borderBottom: `1px solid ${C_RULE}`,
        ...cStyles.mono, color: C_MUTE,
      }}>
        <span>Vol. I — A Pediatric Practice</span>
        <span>26.04.26 · Currently accepting applications</span>
        <span style={{ color: C_ACCENT }}>● Dr. Ofman online</span>
      </div>

      {/* NAV */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 32px', borderBottom: `1px solid ${C_RULE}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>
            ofman/ped
          </div>
        </div>
        <div style={{ display: 'flex', gap: 26, fontSize: 13.5, color: C_INK }}>
          <span>01 / Practice</span>
          <span>02 / Dr. Ofman</span>
          <span>03 / Method</span>
          <span>04 / Journal</span>
          <span>05 / FAQ</span>
        </div>
        <div style={{
          padding: '9px 14px', border: `1px solid ${C_INK}`, borderRadius: 4,
          fontSize: 12.5, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          Apply for Membership <span style={{ color: C_ACCENT }}>↗</span>
        </div>
      </div>

      {/* HERO */}
      <div style={{
        display: 'grid', gridTemplateColumns: '60px 1fr 1fr 60px',
        flex: 1, position: 'relative',
      }}>
        {/* gutters with hash marks */}
        <div style={{ borderRight: `1px solid ${C_RULE}`, ...cStyles.mono, color: C_MUTE,
          padding: '20px 0', display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 18, fontSize: 9 }}>
          <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span>
        </div>

        {/* Headline column */}
        <div style={{ padding: '56px 36px', borderRight: `1px solid ${C_RULE}`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div style={{ ...cStyles.mono, color: C_ACCENT }}>
              ¶ A note from the practice
            </div>
            <h1 style={{
              ...cStyles.serif, fontSize: 76, lineHeight: 1.0,
              margin: '24px 0 0', color: C_INK,
            }}>
              Careful medicine,<br />
              <span style={{ color: C_SKY, fontStyle: 'italic' }}>
                in a noisy decade.
              </span>
            </h1>
            <p style={{
              marginTop: 26, maxWidth: 480, fontSize: 15.5, lineHeight: 1.55,
              color: C_SLATE,
            }}>
              Concierge pediatrics built around three things parents have
              quietly stopped expecting: a doctor with time, evidence
              without arrogance, and a view of health that includes
              dinner, sleep, and the next ten years.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <div style={{
              padding: '12px 18px', background: C_INK, color: C_PAPER,
              borderRadius: 4, fontSize: 13.5, fontWeight: 500,
            }}>
              Apply for Membership →
            </div>
            <div style={{ ...cStyles.mono, color: C_MUTE }}>
              or text Dr. Ofman directly
            </div>
          </div>
        </div>

        {/* Method column — typographic diagram */}
        <div style={{ padding: '56px 36px', position: 'relative',
          background: C_PAPER }}>
          <div style={{ ...cStyles.mono, color: C_MUTE }}>Fig. 01 — Method</div>
          <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              ['01', 'Time', 'Visits unrushed. Panel intentionally small.'],
              ['02', 'Access', 'Direct text to Dr. Ofman. 24 / 7 / 365.'],
              ['03', 'Place', 'Home visits when home is the right place.'],
              ['04', 'Evidence', 'Plain-language guidance, sourced and revisited.'],
              ['05', 'Whole', 'Nutrition, behavior, sleep — the long view.'],
            ].map(([n, k, v], i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '36px 110px 1fr',
                gap: 16, padding: '14px 0',
                borderTop: `1px solid ${C_RULE}`,
                alignItems: 'baseline',
              }}>
                <span style={{ ...cStyles.mono, color: C_ACCENT }}>{n}</span>
                <span style={{ ...cStyles.serif, fontSize: 24, fontWeight: 400 }}>
                  {k}
                </span>
                <span style={{ fontSize: 13.5, color: C_SLATE, lineHeight: 1.45 }}>
                  {v}
                </span>
              </div>
            ))}
            <div style={{ borderTop: `1px solid ${C_RULE}` }} />
          </div>
          <div style={{
            position: 'absolute', right: 36, bottom: 36,
            ...cStyles.mono, color: C_MUTE, textAlign: 'right',
          }}>
            See full method →
          </div>
        </div>

        <div style={{ borderLeft: `1px solid ${C_RULE}` }} />
      </div>
    </div>
  );
}

window.DirectionC = DirectionC;