// Template 4 — Case view (strategic redirect) · Hartwell Animal Hospital
// Refined to match source content. Practice brand: warm cream + slate.

const HartwellSite = () => {
  const hw = {
    burgundy: '#5b2a2a',
    amber: '#a8743a',
    cream: '#f5ecd9',
    creamSoft: '#faf3e1',
    ink: '#211a14',
    inkSoft: '#65564a',
    line: 'rgba(33,26,20,0.10)',
    serif: 'Source Serif 4, Georgia, serif',
  };
  return (
    <div style={{ background: hw.creamSoft, color: hw.ink, fontFamily: 'Inter, sans-serif', minHeight: '100%', position: 'relative' }}>
      {/* Nav */}
      <div style={{ borderBottom: `1px solid ${hw.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, borderRadius: '50%', background: hw.burgundy, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: hw.serif, fontSize: 15, fontWeight: 500, letterSpacing: 0.5 }}>HA</div>
          <div>
            <div style={{ fontFamily: hw.serif, fontSize: 17, color: hw.burgundy, lineHeight: 1.1 }}>Hartwell Animal Hospital</div>
            <div style={{ fontSize: 11, color: hw.inkSoft, marginTop: 2 }}>Family veterinary care · Westfield</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 13, color: hw.inkSoft }}>
          <span>Services</span><span>Team</span><span>Visit</span>
        </div>
        <span style={{ background: hw.burgundy, color: 'white', padding: '8px 16px', borderRadius: 2, fontSize: 12, fontWeight: 500 }}>Book online</span>
      </div>

      {/* Hero */}
      <div style={{ padding: '60px 40px 48px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, color: hw.amber, fontWeight: 500, marginBottom: 14 }}>Family-owned since 1994</div>
          <h1 style={{ fontFamily: hw.serif, fontSize: 42, lineHeight: 1.1, color: hw.burgundy, fontWeight: 400, marginBottom: 18 }}>
            Care that's been part of your family for decades.
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: hw.inkSoft, maxWidth: 460, marginBottom: 24 }}>
            Two generations of veterinary care in Westfield. We've cared for our neighbors' pets since 1994 — comprehensive medicine, surgery, dental, and the calm familiarity that comes from knowing a practice that knows you.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <span style={{ background: hw.burgundy, color: 'white', padding: '11px 22px', borderRadius: 2, fontSize: 13, fontWeight: 500 }}>Book online</span>
            <span style={{ background: 'transparent', color: hw.burgundy, padding: '11px 22px', borderRadius: 2, fontSize: 13, fontWeight: 500, border: `1px solid ${hw.burgundy}` }}>Visit us</span>
          </div>
        </div>
        <div style={{
          height: 260,
          borderRadius: 4,
          background: `repeating-linear-gradient(135deg, ${hw.cream}, ${hw.cream} 12px, #ebe0c6 12px, #ebe0c6 13px)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: hw.amber, fontSize: 11, fontFamily: 'ui-monospace, monospace',
          border: `1px solid ${hw.line}`,
        }}>
          [family photo with pet]
        </div>
      </div>

      {/* Service tiles */}
      <div style={{ padding: '0 40px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            ['Wellness', 'Annual exams, preventive care'],
            ['Dental', 'Cleanings and extractions'],
            ['Surgery', 'Soft tissue and orthopedic'],
            ['Senior care', 'Specialized pathways'],
          ].map(([t, b]) => (
            <div key={t} style={{ background: 'white', border: `1px solid ${hw.line}`, padding: '20px 22px', borderRadius: 4 }}>
              <div style={{ fontFamily: hw.serif, fontSize: 17, color: hw.burgundy, marginBottom: 6 }}>{t}</div>
              <div style={{ fontSize: 13, color: hw.inkSoft, lineHeight: 1.55 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Floating "where the pop-up would land" indicator */}
      <div style={{
        position: 'absolute',
        right: 56,
        bottom: 56,
        width: 260,
        height: 150,
        borderRadius: 6,
        border: `1.5px dashed ${hw.burgundy}`,
        background: 'rgba(91, 42, 42, 0.05)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 6,
        padding: 16,
        textAlign: 'center',
      }}>
        <div style={{ fontSize: 12, color: hw.burgundy, fontWeight: 500 }}>Where the pop-up would land</div>
        <div style={{ fontSize: 11, color: hw.inkSoft, fontFamily: 'ui-monospace, monospace' }}>if we built it as asked</div>
      </div>
    </div>
  );
};

const HartwellChat = () => (
  <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 }}>
        Hartwell Animal Hospital
        <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="D" color="#9a7a6f" size={16} />
        <span style={{ color: 'var(--ink-secondary)', fontWeight: 500 }}>Devon</span>
        <span>·</span>
        <span>38 min ago</span>
        <span>·</span>
        <span style={{ color: 'var(--accent)', fontWeight: 500 }}>strategic note</span>
      </div>
      <MetaLine items={['Growth', '22 mo', 'Robert touched 2 mo ago — Q2 banner refresh', 'Open to recommendations']} />
    </div>

    <div style={{ flex: 1, overflowY: 'auto', padding: '22px 24px 8px', display: 'flex', flexDirection: 'column', gap: 22 }} className="no-scroll-chrome">
      <ChatBubble from="claude">
        Devon wants a pop-up for Hartwell's spring vaccine special — runs through June. Before I build it, worth a beat on the format.
      </ChatBubble>

      <ChatBubble from="claude">
        <div style={{
          fontSize: 11,
          fontWeight: 500,
          color: 'var(--accent)',
          marginBottom: 10,
          letterSpacing: 0,
        }}>From the fleet</div>
        <div style={{
          borderLeft: '2px solid var(--accent)',
          paddingLeft: 14,
          marginLeft: -2,
        }}>
          <p style={{ marginBottom: 12 }}>
            Across the fleet, pop-ups underperform a combo of <em style={{ fontStyle: 'italic' }}>banner + landing page + email-to-existing-clients</em> by roughly <strong style={{ fontWeight: 500, color: 'var(--ink)' }}>60 – 70%</strong> on mobile bookings. Pop-ups also drag bounce rate on the homepage — we've seen <strong style={{ fontWeight: 500, color: 'var(--ink)' }}>8 – 12 point jumps</strong> on practices that ran them through Q1.
          </p>
          <p>
            Their actual goal here is "drive vaccine appointments in the spring window" — and the combo is the proven path to that goal.
          </p>
        </div>
      </ChatBubble>

      <ChatBubble from="claude">
        Devon's been open to our recommendations before — Robert's Q2 conversation went well, they trust the direction.
      </ChatBubble>

      <ChatBubble from="claude">
        <strong style={{ fontWeight: 500 }}>Three options:</strong>
        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <OptionCard
            recommended
            emphasis="high"
            title="Send Devon a quick note"
            meta="~3 min to draft"
          >
            Lay out the two paths in plain language — what they asked for vs. what we'd suggest — and let them decide. Devon trusts the team.
          </OptionCard>
          <OptionCard
            title="Build the combo"
            meta="~15 min build, then preview-link gate"
          >
            Banner on homepage + dedicated landing page + email to their client list. Honors the goal, may surprise them by being more than they asked.
          </OptionCard>
          <OptionCard
            emphasis="low"
            title="Build the pop-up as asked"
            meta="~5 min"
          >
            Faster to ship. Customer gets exactly what they requested. Will likely underperform the goal they care about.
          </OptionCard>
        </div>
      </ChatBubble>

      <ChatBubble from="claude">
        My read: send the note. Their goal &gt; their tactic.
      </ChatBubble>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 32, fontSize: 12, color: 'var(--ink-faint)' }}>
        <StatusDot kind="waiting" />
        <span>Waiting on your direction</span>
      </div>
    </div>

    <div style={{ padding: '12px 20px 20px', flex: '0 0 auto' }}>
      <ChatComposer
        placeholder='e.g. "send the note" · "build the combo" · "pop-up as asked"'
        footer={<span>⌘+Enter to send · ⌘+Z to roll back · Loop in Robert ↗</span>}
      />
    </div>
  </div>
);

const CaseStrategic = () => (
  <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 }}>
        <HartwellChat />
      </div>
      <div style={{ flex: 1, background: 'var(--paper)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <BrowserChrome url="hartwellanimal.sandbox.de-internal.com" />
        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, position: 'relative' }} className="no-scroll-chrome">
          <HartwellSite />
        </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="waiting" />
            <span>No changes applied · awaiting direction</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>⌘+R reload</div>
        </div>
      </div>
    </div>
  </div>
);

window.CaseStrategic = CaseStrategic;