// whetstone-content.jsx
// Shared content + small primitives used across all three directions.
// Loaded BEFORE the layouts. Exposes everything on window.

const SERVICES = [
  {
    id: 'workshops',
    n: '01',
    title: 'AI fluency workshops',
    blurb: 'You\'ll leave with a new mental model of how to work with AI, not a random list of prompts. From 1:1 sessions to full-team trainings or keynotes — one method, whatever the size of the room.',
    detail: 'Hands-on with your real work, not toy examples. Common formats: private 1:1 (60–90 min), small-group working session (2–6 people), team workshop (10–40 people), conference talk or offsite keynote.',
  },
  {
    id: 'consulting',
    n: '02',
    title: 'AI consultation',
    blurb: 'Working with leadership on AI strategy. Whether you\'re looking for a one-off audit, ongoing strategic work, or a fractional AI lead, we\'re ready to act as your sounding board and partner.',
    detail: 'Two-week strategy review with a written report and prioritized recommendations, or a monthly retainer where we answer the questions before they become problems. Tool selection, policy, training cadence, build-vs-buy.',
  },
  {
    id: 'implementation',
    n: '03',
    title: 'Custom AI implementation',
    blurb: 'Systems built around your data and your workflows. Completely custom, cloud or local, optimized for your use case and budget.',
    detail: 'Inboxes, documents, agents, multi-step workflows. From scoping to install to training. Human-in-the-loop and full audit trail. Two-week typical timeline. We\'ll recommend local-first when your data demands it, and use the right cloud tools when they\'re the better answer.',
  },
];

const PRINCIPLES = [
  {
    label: 'You are the expert.',
    body: 'AI is the amplifier. It doesn\'t replace your judgment, it helps you act on it. We teach you how to use it to let your expertise compound.',
  },
  {
    label: 'A way of thinking.',
    body: 'Tools change every six months. Habits of mind don\'t. We teach a thought process that will transfer to whatever tools show up next.',
  },
  {
    label: 'Plain English.',
    body: 'No prompt libraries to memorize. No 47-step frameworks. Our approach requires no jargon. The simple but powerful techniques we teach are easy to grasp but powerful once implemented.',
  },
  {
    label: 'Iteration over invocation.',
    body: 'Working with AI successfully means going back and forth, treating it as your collaborator, not a search engine. We teach you how to iterate intelligently and get the most out of AI\'s capabilities.',
  },
];

const PATTERNS = [
  { n: '1', title: 'Make this smaller', sub: 'Summarize, extract, distill.' },
  { n: '2', title: 'Make this bigger',  sub: 'Draft, expand, brainstorm.' },
  { n: '3', title: 'Change the shape',  sub: 'Translate, reformat, adapt.' },
  { n: '4', title: 'Check my work',     sub: 'Review, critique, stress-test.' },
  { n: '5', title: 'Teach me',          sub: 'Explain, walk me through.' },
];

const AUDIENCE = [
  { tag: 'Solo professionals',        ex: 'Experts whose work is based on expertise — lawyers, doctors, consultants, expert witnesses, CPAs, and others like them.' },
  { tag: 'Small teams (2–20)',        ex: 'Practices, firms, and agencies where everyone touches the work.' },
  { tag: 'Mid-market companies',      ex: 'Operations, legal, finance, and customer-facing groups inside larger organizations.' },
  { tag: 'Leadership teams',          ex: 'Executive groups deciding what to do about AI, not yet sure where to start.' },
];

const TEAM = [
  {
    name: 'Chris Parles',
    role: 'Co-founder',
    bio: 'Builds and teaches. Background in software, product, and operations.',
    photo: 'images/team-chris.jpeg',
  },
  {
    name: 'Justin Feldstein',
    role: 'Co-founder',
    bio: 'Builds and teaches. Background in software, product, and operations.',
    photo: 'images/team-justin.jpeg',
  },
];

// ── Small shared primitives ────────────────────────────────────────────────
function Mark({ size = 28, className, style }) {
  // Whetstone mark: chisel on stone, tilted 22.5° left around the chisel body's
  // center of mass so the composition stays horizontally balanced over the stone.
  // viewBox is wider than tall (64x56) — pass size as the height; width auto-scales.
  const w = Math.round(size * (64 / 56));
  return (
    <svg width={w} height={size} viewBox="0 0 64 56" className={className} style={style} aria-hidden="true">
      <rect x="2" y="42" width="60" height="12" rx="1.5" fill="currentColor"/>
      <g transform="rotate(-22.5 32 22)">
        <rect x="28" y="6" width="8" height="28" fill="currentColor"/>
        <path d="M 28 34 L 36 34 L 32 42 Z" fill="currentColor"/>
        <rect x="26" y="2" width="12" height="5" rx="1" fill="currentColor"/>
      </g>
    </svg>
  );
}

function Logo({ size = 22, withGroup = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Mark size={size + 10} style={{ color: 'var(--accent)' }} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{
          fontFamily: 'var(--display)',
          fontSize: size,
          fontWeight: 600,
          letterSpacing: '0.02em',
          color: 'var(--ink)',
        }}>WHETSTONE</span>
        {withGroup && (
          <span style={{
            fontFamily: 'var(--mono)',
            fontSize: size * 0.62,
            color: 'var(--muted)',
            textTransform: 'uppercase',
            letterSpacing: '0.12em',
            fontWeight: 500,
          }}>Group</span>
        )}
      </div>
    </div>
  );
}

function Photo({ src, alt, ratio = '4/3', fallbackLabel }) {
  const [errored, setErrored] = React.useState(false);
  if (errored && fallbackLabel) {
    return <Placeholder label={fallbackLabel} ratio={ratio} />;
  }
  return (
    <div style={{
      aspectRatio: ratio,
      border: '1px solid var(--rule)',
      overflow: 'hidden',
      background: 'var(--panel)',
    }}>
      <img src={src} alt={alt}
        onError={() => setErrored(true)}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>
  );
}

function Placeholder({ label, ratio = '4/3', tone = 'warm' }) {
  // Subtly-striped placeholder, mono label. For workshop / classroom photos.
  const stripes = `repeating-linear-gradient(
    135deg,
    var(--panel) 0 14px,
    color-mix(in oklab, var(--panel), var(--ink) 4%) 14px 28px
  )`;
  return (
    <div style={{
      aspectRatio: ratio,
      background: stripes,
      border: '1px solid var(--rule)',
      position: 'relative',
      display: 'flex',
      alignItems: 'flex-end',
      justifyContent: 'flex-start',
      padding: 14,
      overflow: 'hidden',
    }}>
      <span style={{
        fontFamily: 'var(--mono)',
        fontSize: 11,
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        color: 'var(--muted)',
        background: 'var(--bg)',
        padding: '4px 8px',
        border: '1px solid var(--rule)',
      }}>{label}</span>
    </div>
  );
}

function SectionNo({ n, label }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 14,
      fontFamily: 'var(--mono)',
      fontSize: 12,
      color: 'var(--muted)',
      textTransform: 'uppercase',
      letterSpacing: '0.12em',
    }}>
      <span>§ {n}</span>
      <span style={{ flex: 1, height: 1, background: 'var(--rule)' }}></span>
      <span>{label}</span>
    </div>
  );
}

function Container({ children, style }) {
  return (
    <div style={{ maxWidth: 'var(--max)', margin: '0 auto', width: '100%', ...style }}>
      {children}
    </div>
  );
}

Object.assign(window, {
  SERVICES, PRINCIPLES, PATTERNS, AUDIENCE, TEAM,
  Mark, Logo, Placeholder, Photo, SectionNo, Container,
});