// Direction A — "The Calm Practice"
// Editorial & elevated. Deep forest green + ivory + brass.
// Serif display + clean sans. Magazine-like, boutique register.

const A_BG = '#F4F1EA';
const A_INK = '#1F2A24';
const A_GREEN = '#2C3A33';
const A_BRASS = '#A78A52';
const A_RULE = 'rgba(31,42,36,0.18)';
const A_MUTE = 'rgba(31,42,36,0.62)';

const aStyles = {
  root: {
    width: '100%',
    height: '100%',
    background: A_BG,
    color: A_INK,
    fontFamily: '"Inter", system-ui, sans-serif',
    fontFeatureSettings: '"ss01"',
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column',
  },
  serif: {
    fontFamily: '"Cormorant Garamond", "Times New Roman", serif',
    fontWeight: 400,
    letterSpacing: '-0.01em',
  },
  mono: {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    fontSize: 11,
  },
};

function DirectionA() {
  return (
    <div style={aStyles.root}>
      {/* NAV */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '22px 56px', borderBottom: `1px solid ${A_RULE}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <div style={{ ...aStyles.serif, fontSize: 26, fontStyle: 'italic', color: A_GREEN }}>
            Ofman
          </div>
          <div style={{ ...aStyles.mono, color: A_MUTE, fontSize: 10 }}>
            Pediatrics · est. 2026
          </div>
        </div>
        <div style={{ display: 'flex', gap: 36, ...aStyles.mono, color: A_INK }}>
          <span>The Practice</span>
          <span>Dr. Ofman</span>
          <span>Care</span>
          <span>Journal</span>
          <span>Enroll</span>
        </div>
        <div style={{
          ...aStyles.mono, color: A_BG, background: A_GREEN,
          padding: '10px 18px', borderRadius: 999,
        }}>
          Apply for Membership →
        </div>
      </div>

      {/* HERO */}
      <div style={{
        flex: 1, display: 'grid',
        gridTemplateColumns: '1.1fr 0.9fr',
        gap: 0, borderBottom: `1px solid ${A_RULE}`,
      }}>
        <div style={{
          padding: '72px 56px 56px',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          borderRight: `1px solid ${A_RULE}`,
        }}>
          <div style={{ ...aStyles.mono, color: A_BRASS }}>
            № 01 — A Concierge Pediatric Practice
          </div>
          <div>
            <h1 style={{
              ...aStyles.serif, fontSize: 92, lineHeight: 0.98,
              margin: 0, color: A_GREEN,
            }}>
              Unhurried care<br />
              for the <em style={{ color: A_BRASS }}>family</em><br />
              you are <em>becoming</em>.
            </h1>
            <p style={{
              marginTop: 28, maxWidth: 460, fontSize: 16, lineHeight: 1.55,
              color: A_MUTE,
            }}>
              A membership pediatric practice for families who want the
              kind of attention medicine used to offer — and the evidence
              modern medicine has learned since.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{
              padding: '14px 22px', borderRadius: 999,
              background: A_GREEN, color: A_BG, ...aStyles.mono,
            }}>
              Apply for Membership
            </div>
            <div style={{
              padding: '14px 22px', borderRadius: 999,
              border: `1px solid ${A_INK}`, ...aStyles.mono, color: A_INK,
            }}>
              Meet Dr. Ofman
            </div>
          </div>
        </div>

        {/* Editorial photo placeholder */}
        <div style={{
          background: `repeating-linear-gradient(135deg, ${A_GREEN} 0 2px, #34423A 2px 22px)`,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 24,
            border: `1px solid rgba(244,241,234,0.35)`,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            padding: 22, color: A_BG,
          }}>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.8 }}>
              Plate I — The Home Visit
            </div>
            <div>
              <div style={{ ...aStyles.serif, fontSize: 28, fontStyle: 'italic', lineHeight: 1.1 }}>
                "The exam table can be<br />a kitchen counter."
              </div>
              <div style={{ ...aStyles.mono, fontSize: 10, marginTop: 14, opacity: 0.75 }}>
                — Editorial photograph · placeholder
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* TENETS STRIP */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        padding: '0', background: A_BG,
      }}>
        {[
          ['I', 'Time, returned', 'Visits measured in hours, not minutes. A panel small enough to know every name.'],
          ['II', 'A direct line', 'Text Dr. Ofman, 24/7. No portals, no triage trees — your pediatrician, by name.'],
          ['III', 'Evidence, calmly', 'In an era of confident misinformation, careful answers grounded in real research.'],
          ['IV', 'Whole-child view', 'Nutrition, sleep, behavior, and the long arc — not only what brought you in today.'],
        ].map(([num, title, body], i) => (
          <div key={i} style={{
            padding: '40px 32px',
            borderRight: i < 3 ? `1px solid ${A_RULE}` : 'none',
          }}>
            <div style={{ ...aStyles.serif, fontSize: 38, color: A_BRASS, fontStyle: 'italic' }}>
              {num}.
            </div>
            <div style={{ ...aStyles.serif, fontSize: 22, color: A_GREEN, marginTop: 6, lineHeight: 1.15 }}>
              {title}
            </div>
            <div style={{ fontSize: 13.5, lineHeight: 1.55, color: A_MUTE, marginTop: 10 }}>
              {body}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.DirectionA = DirectionA;