// Template 2 — Case view (clean) · Fairfax Veterinary Clinic
// Refined to match source content. Practice brand: forest green + warm cream.

const FairfaxSite = () => {
  const fx = {
    green: '#2f4a35',
    greenDeep: '#1e3024',
    greenSoft: '#e8eee2',
    sand: '#f3eee2',
    sandDeep: '#e8dfca',
    ink: '#1a1f1a',
    inkSoft: '#5a6258',
    line: 'rgba(26,31,26,0.10)',
    serif: 'Source Serif 4, Georgia, serif',
  };
  return (
    <div style={{ background: fx.sand, color: fx.ink, fontFamily: 'Inter, sans-serif', minHeight: '100%' }}>
      {/* Top urgent-care strip — the change */}
      <div style={{
        background: fx.greenDeep, color: 'white',
        padding: '10px 40px',
        fontSize: 13,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div>
          <ChangeHighlight>Saturday urgent-care availability: 9am–12pm from May 20–25.</ChangeHighlight>
        </div>
        <div style={{ fontSize: 12, opacity: 0.85, display: 'flex', gap: 16 }}>
          <span>8 Main St, Fairfax VA 22030</span>
          <span>(703) 555-0142</span>
          <span style={{ textDecoration: 'underline' }}>Emergency? Call us anytime.</span>
        </div>
      </div>

      {/* Practice nav */}
      <div style={{ borderBottom: `1px solid ${fx.line}`, padding: '20px 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: fx.green, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: fx.serif, fontSize: 15, fontWeight: 500, letterSpacing: 0.5 }}>FV</div>
          <div>
            <div style={{ fontFamily: fx.serif, fontSize: 17, color: fx.green, lineHeight: 1.1 }}>Fairfax Veterinary Clinic</div>
            <div style={{ fontSize: 11, color: fx.inkSoft, marginTop: 2 }}>Caring for Northern Virginia pets since 1987</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 13, color: fx.inkSoft }}>
          <span>Services</span><span>Our Team</span><span>New Patients</span><span>Visit</span>
        </div>
        <span style={{ background: fx.green, color: 'white', padding: '8px 16px', fontSize: 12, fontWeight: 500, borderRadius: 2 }}>Book an appointment</span>
      </div>

      {/* Hero */}
      <div style={{ padding: '56px 40px 48px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, color: fx.green, fontWeight: 500, marginBottom: 14 }}>Welcome to Fairfax Vet</div>
          <h1 style={{ fontFamily: fx.serif, fontSize: 44, lineHeight: 1.08, color: fx.green, fontWeight: 400, marginBottom: 18, letterSpacing: '-0.005em' }}>
            Care that feels like family.
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: fx.inkSoft, maxWidth: 460, marginBottom: 24 }}>
            General practice, exotics, boarding, grooming, and emergency support — all under one roof. Our team has cared for Northern Virginia pets and the people who love them for over three decades.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <span style={{ background: fx.green, color: 'white', padding: '11px 22px', borderRadius: 2, fontSize: 13, fontWeight: 500 }}>Book an appointment</span>
            <span style={{ background: 'transparent', color: fx.green, padding: '11px 22px', borderRadius: 2, fontSize: 13, fontWeight: 500, border: `1px solid ${fx.green}` }}>Meet the team</span>
          </div>
        </div>
        <div style={{
          height: 280,
          borderRadius: 4,
          background: `repeating-linear-gradient(135deg, ${fx.greenSoft}, ${fx.greenSoft} 12px, #dfe6d8 12px, #dfe6d8 13px)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: fx.green, fontSize: 11, fontFamily: 'ui-monospace, monospace',
          border: `1px solid ${fx.line}`,
        }}>
          [practice hero photo]
        </div>
      </div>

      {/* What we offer + hours */}
      <div style={{ padding: '0 40px 56px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40 }}>
        <div>
          <div style={{ fontSize: 12, color: fx.green, fontWeight: 500, marginBottom: 10 }}>What we offer</div>
          <h2 style={{ fontFamily: fx.serif, fontSize: 28, lineHeight: 1.15, color: fx.green, fontWeight: 400, marginBottom: 14 }}>
            General medicine. Exotics. Surgery. Boarding.
          </h2>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: fx.inkSoft, maxWidth: 540 }}>
            From routine wellness visits to specialty care for rabbits, reptiles, and birds — our team blends decades of experience with calm, modern facilities. <ChangeHighlight>We see urgent cases Saturdays</ChangeHighlight> and Sundays by request.
          </p>
        </div>
        <div style={{ background: 'white', border: `1px solid ${fx.line}`, padding: '22px 26px', borderRadius: 4 }}>
          <div style={{ fontSize: 12, color: fx.green, fontWeight: 500, marginBottom: 14 }}>Hours</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: fx.inkSoft }}>Mon – Fri</span>
              <span style={{ color: fx.ink, fontWeight: 500 }}>7am – 7pm</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: fx.inkSoft }}>Saturday</span>
              <span style={{ color: fx.ink, fontWeight: 500 }}>
                <ChangeHighlight>9am – 12pm (May 20–25)</ChangeHighlight>
              </span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: fx.inkSoft }}>Sunday</span>
              <span style={{ color: fx.ink, fontWeight: 500 }}>Closed</span>
            </div>
            <div style={{ height: 1, background: fx.line, margin: '6px 0' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ color: fx.inkSoft }}>Emergency line</span>
              <span style={{ color: fx.green, fontWeight: 500 }}>24 / 7</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const FairfaxChat = () => (
  <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>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
        <h2 className="head-22" style={{ fontSize: 22, color: 'var(--ink)', display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
          Fairfax Veterinary Clinic
          <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>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-faint)', marginBottom: 6 }}>
        <Avatar kind="user" initial="M" color="#7a8b6f" size={16} />
        <span style={{ color: 'var(--ink-secondary)', fontWeight: 500 }}>Mel</span>
        <span>·</span>
        <span>12 min ago</span>
      </div>
      <MetaLine items={['Growth', '14 mo', 'Alie touched 3 wks ago — brand voice', 'Voice: confident, warm, crisp']} />
    </div>

    <div style={{ flex: 1, overflowY: 'auto', padding: '22px 24px 8px', display: 'flex', flexDirection: 'column', gap: 22 }} className="no-scroll-chrome">
      <ChatBubble from="claude">
        Mel wants a homepage note that Saturday urgent-care is 9am–12pm from May 20–25, then removed after the 26th. She flagged that the services page also references availability, so worth catching that line too.
      </ChatBubble>

      <ChatBubble from="claude">
        Quick read: Mel emails Fairfax's tickets directly — usually short, clean. She tends to prefer copy without exclamation marks (Alie's brand-voice note from March holds). I'll keep this in their existing announcement style.
      </ChatBubble>

      <ChatBubble from="claude">
        Cleanest path: add the announcement on the homepage, update the services page line to match, schedule auto-revert for the 26th. Routine update, no preview gate needed.
        <p style={{ marginTop: 10, color: 'var(--ink-secondary)' }}>Want me to ship both and schedule the cleanup, or adjust the wording first?</p>
      </ChatBubble>

      <ChatBubble from="user">Both. Ship it.</ChatBubble>

      <ChatBubble from="claude">
        Done.
        <ul style={{ margin: '10px 0 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            'Homepage announcement live (preview on the right)',
            'Services page line reconciled to match',
            'Auto-revert scheduled for May 26, 12:01 AM',
          ].map(t => (
            <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <span style={{ flex: '0 0 auto', marginTop: 4, width: 14, height: 14, borderRadius: '50%', background: 'var(--good)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="8" height="8" viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8 L7 12 L13 4" /></svg>
              </span>
              <span style={{ fontSize: 15, color: 'var(--ink)' }}>{t}</span>
            </li>
          ))}
        </ul>
      </ChatBubble>

      <ChatBubble from="claude">
        Here's the reply I'd send Mel:
        <div style={{
          marginTop: 12,
          background: 'var(--cream-deeper)',
          borderRadius: 12,
          padding: '14px 18px',
          fontSize: 14,
          color: 'var(--ink-secondary)',
          lineHeight: 1.65,
        }}>
          <p style={{ marginBottom: 10 }}>Hi Mel,</p>
          <p style={{ marginBottom: 10 }}>Saturday hours are now showing 9–12 for May 20–25 on the homepage and services page. They'll auto-revert on May 26 so you don't have to think about it.</p>
          <p style={{ marginBottom: 10 }}>Let me know if anything else.</p>
          <p style={{ marginBottom: 0 }}>Jeni</p>
        </div>
        <p style={{ marginTop: 10, fontSize: 14, color: 'var(--ink-secondary)' }}>Ship it, or want me to adjust?</p>
      </ChatBubble>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 32, fontSize: 12, color: 'var(--ink-faint)' }}>
        <StatusDot kind="good" />
        <span>Preview updated · 2s ago</span>
      </div>
    </div>

    <div style={{ padding: '12px 20px 20px', flex: '0 0 auto' }}>
      <ChatComposer
        placeholder="Reply, adjust the wording, or ship as-is…"
        footer={<span>⌘+Enter to send · ⌘+Z to roll back · Loop in Alie ↗</span>}
      />
    </div>
  </div>
);

const CaseClean = () => (
  <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 }}>
        <FairfaxChat />
      </div>
      <div style={{ flex: 1, background: 'var(--paper)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <BrowserChrome url="fairfax-vet.sandbox.de-internal.com" />
        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, background: '#f3eee2' }} className="no-scroll-chrome">
          <FairfaxSite />
        </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>Live preview · 2 changes applied · auto-revert May 26</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)' }}>⌘+R reload · ⌘+Z revert</div>
        </div>
      </div>
    </div>
  </div>
);

window.CaseClean = CaseClean;