// Direction B — "Always On"
// Modern minimal, warm clay + cream + ink.
// Big confident type, emphasizes the human relationship and 24/7 access.

const B_BG = '#F6F1EA';
const B_PAPER = '#FBF8F2';
const B_INK = '#1A1815';
const B_CLAY = '#B8553A';
const B_SAND = '#E7DDC9';
const B_MUTE = 'rgba(26,24,21,0.6)';
const B_RULE = 'rgba(26,24,21,0.12)';

const bStyles = {
  root: {
    width: '100%', height: '100%', background: B_BG, color: B_INK,
    fontFamily: '"Söhne", "Inter", system-ui, sans-serif',
    overflow: 'hidden', display: 'flex', flexDirection: 'column',
    letterSpacing: '-0.01em',
  },
  display: {
    fontFamily: '"GT Sectra", "Tiempos Headline", Georgia, serif',
    fontWeight: 400, letterSpacing: '-0.025em',
  },
  tag: {
    fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
    fontFamily: '"Söhne Mono", ui-monospace, monospace',
  },
};

function DirectionB() {
  return (
    <div style={bStyles.root}>
      {/* NAV */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 48px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 999, background: B_CLAY,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: B_PAPER, fontSize: 14, fontWeight: 600,
          }}>
            o
          </div>
          <div style={{ fontSize: 18, fontWeight: 500 }}>Ofman & Co.</div>
          <div style={{ ...bStyles.tag, color: B_MUTE, marginLeft: 8 }}>Pediatrics</div>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 14, color: B_INK }}>
          <span>Practice</span>
          <span>Dr. Ofman</span>
          <span>What's Included</span>
          <span>FAQ</span>
          <span>Contact</span>
        </div>
        <div style={{
          fontSize: 13, fontWeight: 500, padding: '10px 16px',
          background: B_INK, color: B_PAPER, borderRadius: 999,
        }}>
          Apply →
        </div>
      </div>

      {/* HERO */}
      <div style={{ padding: '40px 48px 0', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ ...bStyles.tag, color: B_CLAY }}>
          ◐ &nbsp; Concierge Pediatric Care · Now Accepting 12 Families
        </div>
        <h1 style={{
          ...bStyles.display, fontSize: 128, lineHeight: 0.92,
          margin: '20px 0 0', color: B_INK, maxWidth: 1100,
        }}>
          Your child's<br />
          pediatrician.<br />
          <span style={{ color: B_CLAY, fontStyle: 'italic' }}>On your phone.</span>
        </h1>

        {/* Bottom row */}
        <div style={{
          marginTop: 'auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
          gap: 0, borderTop: `1px solid ${B_RULE}`, paddingTop: 28, paddingBottom: 36,
        }}>
          <div style={{ paddingRight: 40 }}>
            <p style={{
              fontSize: 18, lineHeight: 1.45, color: B_INK, margin: 0, maxWidth: 460,
            }}>
              Text Dr. Ofman directly — any hour, any day. House calls when
              your child shouldn't leave bed. A small panel, no rushing,
              and a doctor who actually picks up.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <div style={{
                padding: '13px 22px', borderRadius: 999, background: B_CLAY,
                color: B_PAPER, fontSize: 14, fontWeight: 500,
              }}>
                Apply for Membership
              </div>
              <div style={{
                padding: '13px 22px', borderRadius: 999,
                border: `1px solid ${B_INK}`, fontSize: 14, fontWeight: 500,
              }}>
                Read the FAQ
              </div>
            </div>
          </div>

          {/* Faux iMessage */}
          <div style={{
            background: B_PAPER, borderRadius: 18, padding: 16,
            border: `1px solid ${B_RULE}`, display: 'flex', flexDirection: 'column', gap: 8,
            fontSize: 13.5,
          }}>
            <div style={{ ...bStyles.tag, color: B_MUTE, fontSize: 9 }}>
              Today · 11:42 PM
            </div>
            <div style={{
              alignSelf: 'flex-end', background: '#1B7AFF', color: '#fff',
              padding: '8px 12px', borderRadius: 16, maxWidth: '80%',
            }}>
              Mia just spiked a 102 — should we worry?
            </div>
            <div style={{
              alignSelf: 'flex-start', background: B_SAND, color: B_INK,
              padding: '8px 12px', borderRadius: 16, maxWidth: '85%',
            }}>
              Hydration + tepid bath. I'll swing by at 8 if she's still high. — Dr. O
            </div>
            <div style={{ ...bStyles.tag, color: B_MUTE, fontSize: 9, marginTop: 2 }}>
              Read · 11:43 PM
            </div>
          </div>

          {/* Stat block */}
          <div style={{
            paddingLeft: 32, display: 'flex', flexDirection: 'column',
            justifyContent: 'space-between', borderLeft: `1px solid ${B_RULE}`,
          }}>
            <div>
              <div style={{ ...bStyles.display, fontSize: 64, color: B_INK, lineHeight: 1 }}>
                12
              </div>
              <div style={{ fontSize: 13, color: B_MUTE, marginTop: 6 }}>
                Families per panel.<br />Typical pediatrician sees 2,500+.
              </div>
            </div>
            <div style={{ ...bStyles.tag, color: B_INK, marginTop: 24 }}>
              24 / 7 · 365 · No triage line
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.DirectionB = DirectionB;