// Template 5 — Account Brief · Fairfax Veterinary Clinic
// Refined to match source content.

const QuoteBlock = ({ label, children }) => (
  <div style={{ marginTop: 18 }}>
    <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-faint)', marginBottom: 10 }}>{label}</div>
    <blockquote style={{
      margin: 0,
      paddingLeft: 22,
      borderLeft: '2px solid var(--line-ink)',
      fontFamily: 'var(--serif)',
      fontSize: 18,
      lineHeight: 1.55,
      color: 'var(--ink)',
      fontStyle: 'normal',
    }}>
      {children}
    </blockquote>
  </div>
);

const RecentCase = ({ date, title, status, meta }) => (
  <div style={{
    padding: '16px 0',
    borderTop: '1px solid var(--line)',
  }}>
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, marginBottom: 4 }}>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2 }}>
          {status === 'in-progress' && <Pill variant="accent" style={{ padding: '2px 8px', fontSize: 11 }}>In progress</Pill>}
          <span style={{ fontSize: 15, color: 'var(--ink)' }}>{title}</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-faint)' }}>{meta}</div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--ink-faint)', flex: '0 0 auto', fontVariantNumeric: 'tabular-nums' }}>{date}</div>
    </div>
  </div>
);

const SeniorNote = ({ author, color, date, kicker, children }) => (
  <div style={{ display: 'flex', gap: 18, paddingTop: 22, borderTop: '1px solid var(--line)' }}>
    <Avatar kind="user" initial={author[0]} color={color} size={28} />
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>{author}</span>
        <span style={{ fontSize: 12, color: 'var(--ink-faint)' }}>{date}</span>
        {kicker && <span style={{ fontSize: 12, color: 'var(--ink-faint)' }}>· {kicker}</span>}
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--ink-secondary)' }}>{children}</div>
    </div>
  </div>
);

const FleetStat = ({ label, value, sub, kind = 'neutral' }) => (
  <div style={{
    background: 'var(--cream-deeper)',
    borderRadius: 12,
    padding: '22px 24px',
  }}>
    <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 12 }}>{label}</div>
    <div style={{ fontFamily: 'var(--serif)', fontSize: 30, lineHeight: 1.05, color: 'var(--ink)', marginBottom: 8, fontWeight: 400 }}>{value}</div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-faint)' }}>
      {kind === 'good' && <StatusDot kind="good" />}
      <span>{sub}</span>
    </div>
  </div>
);

const Remember = ({ children }) => (
  <li style={{ display: 'flex', gap: 14, paddingTop: 14, borderTop: '1px solid var(--line)', listStyle: 'none', fontSize: 15, lineHeight: 1.6, color: 'var(--ink-secondary)' }}>
    <span style={{ flex: '0 0 auto', marginTop: 8, width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-faint)' }} />
    <span>{children}</span>
  </li>
);

const AccountBrief = () => (
  <div className="de" style={{ width: 1440, minHeight: 1660, background: 'var(--cream)', display: 'flex', flexDirection: 'column' }}>
    <TopNav active="accounts" />

    {/* Utility bar */}
    <div style={{ borderBottom: '1px solid var(--line)', padding: '12px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flex: '0 0 auto' }}>
      <a href="#" style={{ fontSize: 13, color: 'var(--ink-secondary)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M10 4 L6 8 L10 12" /></svg>
        Back to case
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-faint)' }}>
          <Avatar kind="claude" size={14} />
          <span>Assembled by Claude · 2s ago</span>
        </div>
        <a href="#" style={{ fontSize: 12, color: 'var(--ink-secondary)' }}>Refresh</a>
      </div>
    </div>

    {/* Main reading column */}
    <main style={{ width: '100%', maxWidth: 760 + 96, margin: '0 auto', padding: '64px 48px 96px' }}>
      {/* Header */}
      <header style={{ marginBottom: 56 }}>
        <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 16 }}>Account brief</div>
        <h1 className="display-44" style={{ marginBottom: 18, fontSize: 52, lineHeight: 1.05 }}>Fairfax Veterinary Clinic</h1>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--ink-secondary)' }}>
          <span style={{ fontWeight: 500, color: 'var(--ink)' }}>Growth tier</span>
          <span style={{ color: 'var(--ink-faint)' }}>·</span>
          <span>14 months with DE</span>
          <span style={{ color: 'var(--ink-faint)' }}>·</span>
          <span>Fairfax, VA</span>
          <span style={{ color: 'var(--ink-faint)' }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500, color: 'var(--good)' }}>
            <StatusDot kind="good" />
            Healthy
          </span>
        </div>
      </header>

      {/* Narrative paragraphs */}
      <section style={{ marginBottom: 64 }}>
        <h2 className="head-22" style={{ marginBottom: 22, fontSize: 22 }}>Where we are right now</h2>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.55, color: 'var(--ink)', fontWeight: 400, marginBottom: 22 }}>
          Fairfax is one of the steadier Growth-tier accounts — fourteen months in, no friction, and Dr. Hamish (the owner) trusts DE to make small judgment calls without checking back. Mel runs the front office and sends most of the day-to-day requests. She emails directly, usually short, usually clean. The practice ships changes confidently and rarely asks for previews on routine work.
        </div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.55, color: 'var(--ink)', fontWeight: 400 }}>
          The thing that matters this quarter is the boarding-services expansion — Robert and Dr. Hamish walked through it on the May 8 call. They're aiming for a Q3 launch of expanded overnight boarding, and DE's role is to refresh the site so it can carry the new offering. No work has come in for that yet, but it's the next strategic moment for this account.
        </div>
      </section>

      {/* Voice */}
      <AccountBriefSection title="Voice">
        <p>
          Confident, warm, crisp. No exclamation marks (Alie's brand-voice note from March). No marketing-speak. The practice has a "we've-been-here-thirty-years" quiet authority — copy should match that.
        </p>
        <QuoteBlock label="How Mel writes (recent email)">
          Hey team, can we add a quick note on the homepage that Saturday urgent-care is 9am – 12pm from May 20 – 25, then remove it after the 26th? We also mention availability on the services page, so please make sure it doesn't conflict. Thanks, Mel.
        </QuoteBlock>
        <QuoteBlock label="How DE replies on this account (last shipped)">
          Hi Mel, banner is up on the homepage and matches the services-page wording. They'll auto-revert May 26 so you don't have to think about it. Let me know if anything else. Jeni.
        </QuoteBlock>
      </AccountBriefSection>

      {/* Recent activity */}
      <AccountBriefSection title="Recent activity">
        <RecentCase
          date="12 min ago"
          title="Saturday urgent-care hours"
          status="in-progress"
          meta="Mel · routine update · 9 – 12 May 20 – 25 with auto-revert May 26"
        />
        <RecentCase
          date="Apr 18"
          title="Banner refresh — spring exotic-care promo"
          meta="Mel · shipped same day · banner ran 3 weeks, removed Apr 30"
        />
        <RecentCase
          date="Mar 22"
          title="New patient intake flow update"
          meta="Dr. Hamish · added boarding-history question · shipped after one preview cycle"
        />
        <RecentCase
          date="Feb 14"
          title="Services page reorg"
          meta="Mel · grouped exotics under one card, simplified pricing language"
        />
        <RecentCase
          date="Jan 30"
          title="Homepage hero redesign"
          meta={'Alie-led · brand voice ratification · "Care that feels like family" line'}
        />
        <div style={{ borderTop: '1px solid var(--line)', height: 0 }} />
      </AccountBriefSection>

      {/* Senior team touches */}
      <AccountBriefSection title="Senior team touches">
        <SeniorNote author="Alie" color="#7a8b6f" date="3 weeks ago">
          Brand-voice review on the April banner draft. Direction: tighter, no exclamation marks, lead with what changes (not why). The note holds for current and future copy on this account.
        </SeniorNote>
        <div style={{ height: 28 }} />
        <SeniorNote author="Robert" color="#7a6f9a" date="May 8" kicker="call with Dr. Hamish">
          Quarterly check-in. Dr. Hamish is planning a Q3 launch of expanded overnight boarding services — wants to make sure DE's site work is in sync with the operational rollout. No specific asks yet; the work will come through Mel when they're ready.
        </SeniorNote>
      </AccountBriefSection>

      {/* Fleet position */}
      <AccountBriefSection title="Where Fairfax sits in the fleet">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 4 }}>
          <FleetStat label="Engagement" value="Top 30%" sub="across Growth-tier accounts" />
          <FleetStat label="Ticket cadence" value="~6 / month" sub="routine plus seasonal" />
          <FleetStat label="Churn signal" value="None" sub="healthy, growing relationship" kind="good" />
        </div>
      </AccountBriefSection>

      {/* Things worth remembering */}
      <AccountBriefSection title="Things worth remembering" style={{ marginBottom: 16 }}>
        <ul style={{ margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
          <Remember>Dr. Hamish doesn't need to be looped in on routine work. Mel has full authority on day-to-day updates.</Remember>
          <Remember>The Q3 boarding expansion is the next strategic moment. When work for it comes in, treat it as a real project (not a routine update) and offer a strategic check-in early.</Remember>
          <Remember>Their exotics services is the busiest part of the practice and the part most worth promoting in seasonal pushes (we saw 3x lift on the April banner exotic-care promo).</Remember>
          <Remember>Mel prefers email over Slack. Don't push them toward portals or new tools.</Remember>
        </ul>
      </AccountBriefSection>

      {/* Footer */}
      <div style={{ marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--ink-faint)' }}>
        Brief assembled from Salesforce, Granola, recent case history, and team notes. Refresh to pull latest.
      </div>
    </main>
  </div>
);

window.AccountBrief = AccountBrief;
