// Template 3 — Case view (complex multi-change) · Coastal Plains Veterinary
// Refined to match source content. Practice brand: slate-blue + warm sand.

const CoastalSite = () => {
  const cp = {
    slate: '#2b3a4f',
    slateDeep: '#1c2a3d',
    slateSoft: '#dfe5ec',
    sand: '#ede4d3',
    sandDeep: '#e4d8c0',
    ink: '#1d242e',
    inkSoft: '#5a6573',
    line: 'rgba(29,36,46,0.10)',
    serif: 'Source Serif 4, Georgia, serif',
  };
  return (
    <div style={{ background: cp.sand, color: cp.ink, fontFamily: 'Inter, sans-serif', minHeight: '100%' }}>
      {/* Nav */}
      <div style={{ borderBottom: `1px solid ${cp.line}`, padding: '18px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 36, height: 36, background: cp.slate, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: cp.serif, fontSize: 14, fontWeight: 500, letterSpacing: 0.5, borderRadius: 2 }}>CP</div>
          <div>
            <div style={{ fontFamily: cp.serif, fontSize: 17, color: cp.slate, lineHeight: 1.1 }}>Coastal Plains Veterinary</div>
            <div style={{ fontSize: 11, color: cp.inkSoft, marginTop: 2 }}>Hampton Roads · since 2003</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 13, color: cp.inkSoft }}>
          <span>Services</span><span>Our Team</span><span>New Patients</span><span>Visit</span>
        </div>
        <span style={{ background: cp.slate, color: 'white', padding: '8px 16px', fontSize: 12, fontWeight: 500, borderRadius: 2 }}>Book an appointment</span>
      </div>

      {/* Team page header */}
      <div style={{ padding: '56px 40px 36px', maxWidth: 980, margin: '0 auto' }}>
        <div style={{ fontSize: 12, color: cp.slate, fontWeight: 500, marginBottom: 12 }}>Our Team</div>
        <h1 style={{ fontFamily: cp.serif, fontSize: 40, lineHeight: 1.1, color: cp.slate, fontWeight: 400, marginBottom: 14 }}>
          The people who'll know your pet by name.
        </h1>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: cp.inkSoft, maxWidth: 600 }}>
          Our veterinarians, technicians, and front-desk team have been caring for Hampton Roads pets together for over twenty years.
        </p>
      </div>

      {/* Veterinarians */}
      <div style={{ padding: '0 40px 40px', maxWidth: 980, margin: '0 auto' }}>
        <div style={{ fontSize: 12, color: cp.slate, fontWeight: 500, marginBottom: 16 }}>Veterinarians</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {/* Dr. Patel — in progress */}
          <div style={{ background: 'white', border: `1px solid ${cp.line}`, padding: 16, borderRadius: 2 }}>
            <div style={{
              height: 180,
              background: `repeating-linear-gradient(135deg, ${cp.sandDeep}, ${cp.sandDeep} 12px, #d9cdb2 12px, #d9cdb2 13px)`,
              marginBottom: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: cp.inkSoft, fontSize: 11, fontFamily: 'ui-monospace, monospace',
              borderRadius: 2,
            }}>
              [Dr. Patel headshot]
            </div>
            <div style={{ fontFamily: cp.serif, fontSize: 17, color: cp.ink, marginBottom: 4 }}>
              <ChangeHighlight>Dr. Anjali Patel</ChangeHighlight>
            </div>
            <div style={{
              fontSize: 12, color: cp.slate,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: cp.slateSoft,
              padding: '3px 8px', borderRadius: 999,
              fontWeight: 500,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: cp.slate }} />
              Bio in progress · photo ready
            </div>
          </div>
          {/* Dr. Reyes */}
          <div style={{ background: 'white', border: `1px solid ${cp.line}`, padding: 16, borderRadius: 2 }}>
            <div style={{
              height: 180,
              background: `repeating-linear-gradient(135deg, ${cp.sandDeep}, ${cp.sandDeep} 12px, #d9cdb2 12px, #d9cdb2 13px)`,
              marginBottom: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: cp.inkSoft, fontSize: 11, fontFamily: 'ui-monospace, monospace',
              borderRadius: 2,
            }}>
              [headshot]
            </div>
            <div style={{ fontFamily: cp.serif, fontSize: 17, color: cp.ink, marginBottom: 2 }}>Dr. Maria Reyes</div>
            <div style={{ fontSize: 13, color: cp.inkSoft }}>Owner · Internal medicine</div>
          </div>
          {/* Dr. Chen */}
          <div style={{ background: 'white', border: `1px solid ${cp.line}`, padding: 16, borderRadius: 2 }}>
            <div style={{
              height: 180,
              background: `repeating-linear-gradient(135deg, ${cp.sandDeep}, ${cp.sandDeep} 12px, #d9cdb2 12px, #d9cdb2 13px)`,
              marginBottom: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: cp.inkSoft, fontSize: 11, fontFamily: 'ui-monospace, monospace',
              borderRadius: 2,
            }}>
              [headshot]
            </div>
            <div style={{ fontFamily: cp.serif, fontSize: 17, color: cp.ink, marginBottom: 2 }}>Dr. Daniel Chen</div>
            <div style={{ fontSize: 13, color: cp.inkSoft }}>Surgery · Soft tissue</div>
          </div>
        </div>
      </div>

      {/* Technicians */}
      <div style={{ padding: '0 40px 64px', maxWidth: 980, margin: '0 auto' }}>
        <div style={{ fontSize: 12, color: cp.slate, fontWeight: 500, marginBottom: 16 }}>Technicians</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {['Sarah K.', 'Tom B.', 'Maya R.', 'Jordan T.'].map(n => (
            <div key={n} style={{ background: 'white', border: `1px solid ${cp.line}`, padding: 14, borderRadius: 2 }}>
              <div style={{
                height: 110,
                background: `repeating-linear-gradient(135deg, ${cp.sandDeep}, ${cp.sandDeep} 12px, #d9cdb2 12px, #d9cdb2 13px)`,
                marginBottom: 10,
                borderRadius: 2,
              }} />
              <div style={{ fontFamily: cp.serif, fontSize: 15, color: cp.ink }}>{n}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const CoastalChecklistRow = ({ state, label, sub }) => {
  const box = {
    done: { bg: 'var(--accent)', border: 'var(--accent)', icon: 'check' },
    'in-progress': { bg: 'transparent', border: 'var(--accent)', icon: 'dot' },
    question: { bg: 'transparent', border: 'var(--accent)', icon: 'q' },
  }[state];
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '3px 0' }}>
      <div style={{
        width: 14, height: 14, borderRadius: '50%',
        background: box.bg,
        border: `1.5px solid ${box.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flex: '0 0 auto',
      }}>
        {box.icon === 'check' && (
          <svg width="8" height="8" viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8 L7 12 L13 4" /></svg>
        )}
        {box.icon === 'dot' && <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--accent)' }} />}
        {box.icon === 'q' && <span style={{ fontSize: 9, color: 'var(--accent)', fontWeight: 700, lineHeight: 1 }}>?</span>}
      </div>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{
          fontSize: 13,
          color: state === 'done' ? 'var(--ink-faint)' : 'var(--ink)',
          textDecoration: state === 'done' ? 'line-through' : 'none',
          textDecorationColor: 'var(--ink-faint)',
          lineHeight: 1.35,
        }}>{label}</span>
        {sub && <span style={{ fontSize: 11, color: 'var(--ink-faint)', flex: '0 0 auto' }}>· {sub}</span>}
      </div>
    </div>
  );
};

const CoastalChecklist = () => (
  <div style={{
    background: 'var(--cream-deeper)',
    borderBottom: '1px solid var(--line)',
    padding: '18px 24px 20px',
  }}>
    <div style={{
      fontSize: 11,
      color: 'var(--ink-faint)',
      fontWeight: 500,
      marginBottom: 14,
      display: 'flex', alignItems: 'center', gap: 6,
    }}>
      <span>Working through 6 items</span>
      <span>·</span>
      <span>3 done</span>
      <span>·</span>
      <span>1 in progress</span>
      <span>·</span>
      <span>2 open</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      <CoastalChecklistRow state="done" label='Fix "acupunture" typo on services page' />
      <CoastalChecklistRow state="done" label="Update emergency phone in footer" />
      <CoastalChecklistRow state="done" label="Reorder team page — newest first" />
      <CoastalChecklistRow state="in-progress" label="Add Dr. Patel's bio + photo" sub="talking now" />
      <CoastalChecklistRow state="question" label='New "Senior Care" page' sub="need Brogan" />
      <CoastalChecklistRow state="question" label='Move "New patients" CTA to hero' sub="judgment call" />
    </div>
  </div>
);

const CoastalChat = () => (
  <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
    {/* Header */}
    <div style={{ padding: '12px 20px', borderBottom: '1px solid var(--line)', flex: '0 0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-faint)', marginBottom: 10 }}>
        <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--ink-faint)', textDecoration: 'none' }}>
          <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 4 L6 8 L10 12" /></svg>
          Queue
        </a>
        <span>·</span>
        <Pill variant="mode" style={{ padding: '2px 8px', fontSize: 11 }}>Practice mode</Pill>
      </div>
      <h2 className="head-22" style={{ fontSize: 22, color: 'var(--ink)', display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', marginBottom: 8 }}>
        Coastal Plains Veterinary
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ opacity: 0.4 }}>
          <path d="M6 4 L11 4 L11 9 M11 4 L4 11" />
        </svg>
      </h2>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-faint)', marginBottom: 6 }}>
        <Avatar kind="user" initial="B" color="#6f8b9a" size={16} />
        <span style={{ color: 'var(--ink-secondary)', fontWeight: 500 }}>Brogan</span>
        <span>·</span>
        <span>1h 24m ago</span>
        <span>·</span>
        <span style={{ color: 'var(--ink-secondary)' }}>6 items</span>
      </div>
      <MetaLine items={['Strategic', '4 yrs', 'Robert touched 2 wks ago — Q3 growth conversation', 'Voice: warm, plain-spoken']} />
    </div>

    {/* Sticky status strip */}
    <CoastalChecklist />

    <div style={{ flex: 1, overflowY: 'auto', padding: '22px 24px 8px', display: 'flex', flexDirection: 'column', gap: 22 }} className="no-scroll-chrome">
      <ChatBubble from="claude">
        The first three are done. Couple of things I need from you before I keep going:
      </ChatBubble>

      <ChatBubble from="claude">
        <strong style={{ fontWeight: 500 }}>Dr. Patel's bio.</strong> Brogan sent the headshot but no copy. Two paths:
        <ul style={{ margin: '10px 0 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <li style={{ display: 'flex', gap: 10 }}>
            <span style={{ flex: '0 0 auto', marginTop: 8, width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-faint)' }} />
            <span>I can draft from her LinkedIn — she's UPenn, prior practice in Norfolk. I'd land it in Coastal Plains's existing voice (warm, plain-spoken, light on credentials).</span>
          </li>
          <li style={{ display: 'flex', gap: 10 }}>
            <span style={{ flex: '0 0 auto', marginTop: 8, width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-faint)' }} />
            <span>Or hold the team-page update until Brogan sends copy — usually faster to write it ourselves than wait.</span>
          </li>
        </ul>
      </ChatBubble>

      <ChatBubble from="claude">
        <strong style={{ fontWeight: 500 }}>"Senior Care" page.</strong> Brogan attached a one-page draft but no photos. I'd ask him for two: a senior dog being examined, a tech with a cat. Want me to send that request now, or wait until you've reviewed his copy?
      </ChatBubble>

      <ChatBubble from="claude">
        <strong style={{ fontWeight: 500 }}>CTA on the hero.</strong> Brogan wants "New patients" prominent on the homepage. Current hero already has "Book an appointment." Two options — replace the existing CTA, or run both. Their hero usually carries one CTA (the brand stays clean). My read: replace, with "New patients" as the primary and a smaller "Existing client? Book here" link below. But this one's a judgment call — Coastal Plains has been deliberate about not crowding the hero.
      </ChatBubble>

      <ChatBubble from="claude">
        Where would you like to start?
      </ChatBubble>

      <ChatBubble from="user">Draft Patel's bio yourself. Show me before you ship.</ChatBubble>

      <ChatBubble from="claude">
        Drafting Dr. Patel's bio<span className="caret" />
      </ChatBubble>
    </div>

    <div style={{ padding: '12px 20px 20px', flex: '0 0 auto' }}>
      <ChatComposer
        placeholder="Reply, or take the next item…"
        footer={<span>⌘+Enter to send · ⌘+Z to roll back · Loop in Robert ↗</span>}
      />
    </div>
  </div>
);

const CaseComplex = () => (
  <div className="de" style={{ width: 1440, height: 900, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
    <TopNav active="queue" />
    <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
      <div style={{ width: 480, flex: '0 0 auto', borderRight: '1px solid var(--line)', background: 'var(--cream)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <CoastalChat />
      </div>
      <div style={{ flex: 1, background: 'var(--paper)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <BrowserChrome url="coastalplains.sandbox.de-internal.com/team" />
        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} className="no-scroll-chrome">
          <CoastalSite />
        </div>
        <div style={{ borderTop: '1px solid var(--line)', padding: '10px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flex: '0 0 auto', background: 'var(--cream)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-faint)' }}>
            <StatusDot kind="good" />
            <span>Team page · 3 of 6 items applied · 1 in progress</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>⌘+R reload · ⌘+Z revert</div>
        </div>
      </div>
    </div>
  </div>
);

window.CaseComplex = CaseComplex;