// Workspace integrations section — Google Workspace today, others coming soon.

const WorkspaceSection = () => {
  return (
    <section className="dirA-workspace">
      <style>{`
.dirA-workspace { padding: 130px 56px; background: #ffffff; }
.dirA-workspace-inner { max-width: 1180px; margin: 0 auto; }
.dirA-workspace-head { text-align: center; margin-bottom: 64px; }
.dirA-workspace-head h2 { font-size: 56px; letter-spacing: -0.03em; font-weight: 600; line-height: 1.04; margin: 0 auto 18px; max-width: 880px; color: #1d1d1f; }
.dirA-workspace-head .lede { font-size: 19px; color: #6e6e73; max-width: 680px; margin: 0 auto; line-height: 1.55; }

.dirA-workspace-stage {
  background: linear-gradient(180deg, #f5f5f7 0%, #ececef 100%);
  border-radius: 28px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 36px;
}
.dirA-workspace-stage-copy h3 { font-size: 32px; letter-spacing: -0.025em; font-weight: 600; line-height: 1.1; margin: 16px 0 14px; color: #1d1d1f; }
.dirA-workspace-stage-copy p { font-size: 16px; color: #424245; line-height: 1.6; margin: 0 0 22px; max-width: 460px; }
.dirA-workspace-stage-bullets { display: flex; flex-direction: column; gap: 12px; }
.dirA-workspace-stage-bullet { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #1d1d1f; line-height: 1.5; }
.dirA-workspace-stage-bullet svg { flex-shrink: 0; margin-top: 3px; color: #5b8def; }

.dirA-workspace-mock {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.18), 0 8px 20px -8px rgba(0,0,0,0.08);
  padding: 22px 22px 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dirA-workspace-mock-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 16px; }
.dirA-workspace-mock-from { font-size: 13px; color: #6e6e73; }
.dirA-workspace-mock-from b { color: #1d1d1f; font-weight: 600; }
.dirA-workspace-mock-tag { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(91,141,239,0.10); color: #5b8def; font-weight: 500; }
.dirA-workspace-mock-subj { font-size: 17px; font-weight: 600; color: #1d1d1f; letter-spacing: -0.01em; margin-bottom: 14px; }
.dirA-workspace-mock-body { font-size: 14px; color: #1d1d1f; line-height: 1.65; }
.dirA-workspace-mock-body p { margin: 0 0 10px; }
.dirA-workspace-mock-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 5px;
  background: rgba(91,141,239,0.10);
  border-radius: 7px;
  color: #4378d6;
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
}
.dirA-workspace-mock-link svg { color: #4378d6; }
.dirA-workspace-mock-chips { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,0.08); flex-wrap: wrap; }
.dirA-workspace-mock-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f5f5f7; border-radius: 8px;
  padding: 7px 11px 7px 9px;
  font-size: 12.5px; color: #1d1d1f;
}
.dirA-workspace-mock-chip-meta { color: #86868b; font-size: 11.5px; }

.dirA-workspace-now-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #86868b; margin-bottom: 16px; }
.dirA-workspace-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dirA-workspace-tile {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.dirA-workspace-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.10); }
.dirA-workspace-tile-icon { width: 38px; height: 38px; display: grid; place-items: center; }
.dirA-workspace-tile-name { font-size: 13.5px; font-weight: 500; color: #1d1d1f; }
.dirA-workspace-tile.soon { background: rgba(0,0,0,0.02); border-style: dashed; }
.dirA-workspace-tile.soon .dirA-workspace-tile-icon { opacity: 0.45; filter: grayscale(0.4); }
.dirA-workspace-tile.soon .dirA-workspace-tile-name { color: #86868b; }
.dirA-workspace-tile-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: #86868b; background: rgba(0,0,0,0.04); padding: 3px 7px; border-radius: 999px;
}

@media (max-width: 900px) {
  .dirA-workspace-stage { grid-template-columns: 1fr; padding: 32px; }
  .dirA-workspace-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .dirA-workspace { padding: 72px 20px !important; }
  .dirA-workspace-head { margin-bottom: 36px; }
  .dirA-workspace-head h2 { font-size: 32px; line-height: 1.08; letter-spacing: -0.025em; }
  .dirA-workspace-head .lede { font-size: 16px; }
  .dirA-workspace-stage { padding: 24px; border-radius: 24px; gap: 32px; }
  .dirA-workspace-stage-copy h3 { font-size: 24px; }
  .dirA-workspace-stage-copy p { font-size: 14.5px; }
  .dirA-workspace-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dirA-workspace-tile { padding: 18px 14px; }
  .dirA-workspace-tile-name { font-size: 12.5px; }
}

@media (max-width: 420px) {
  .dirA-workspace-tiles { grid-template-columns: repeat(2, 1fr); }
}
      `}</style>

      <div className="dirA-workspace-inner">
        <div className="dirA-workspace-head">
          <div className="dirA-eyebrow" style={{ marginBottom: 18, justifyContent: 'center', display: 'inline-flex' }}>Connected context</div>
          <h2>Your team reads<br/>the same docs you do.</h2>
          <p className="lede">Connect Google Workspace once. Now every helper sees the right one-pager, the live financial model, the deck you sent last Tuesday — and drops the link straight into the draft.</p>
        </div>

        <div className="dirA-workspace-stage">
          <div className="dirA-workspace-stage-copy">
            <GoogleWorkspaceLogo />
            <h3>Drive, Docs, Sheets, Calendar — all wired in.</h3>
            <p>Exoteam pulls just enough context to answer the question in front of it. Nothing is copied off your machine. Files are summarized on the fly and linked, not duplicated.</p>
            <div className="dirA-workspace-stage-bullets">
              <div className="dirA-workspace-stage-bullet">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <span>Drafts cite the right deck, memo, or sheet by name — with a real link.</span>
              </div>
              <div className="dirA-workspace-stage-bullet">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <span>Live numbers from Sheets. No copy-pastes, no stale figures.</span>
              </div>
              <div className="dirA-workspace-stage-bullet">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <span>Read-only by default. You choose what each helper can touch.</span>
              </div>
            </div>
          </div>

          <div className="dirA-workspace-mock">
            <div className="dirA-workspace-mock-head">
              <div className="dirA-workspace-mock-from">Draft to <b>Sarah Chen</b>, Bessemer</div>
              <span className="dirA-workspace-mock-tag">Fund</span>
            </div>
            <div className="dirA-workspace-mock-subj">Re: Q3 update + the metrics you asked about</div>
            <div className="dirA-workspace-mock-body">
              <p>Hi Sarah — thanks for the patience. Headline numbers are tracking ahead: ARR at <b>$2.4M</b>, net retention <b>118%</b>, payback under 9 months.</p>
              <p>Full breakdown is in the live model{' '}
                <a className="dirA-workspace-mock-link" href="#" onClick={(e) => e.preventDefault()}>
                  <SheetsLogo size={14} />
                  Q3 Board Metrics
                </a>
                , and the narrative is in the{' '}
                <a className="dirA-workspace-mock-link" href="#" onClick={(e) => e.preventDefault()}>
                  <DocsLogo size={14} />
                  Q3 Memo (v4)
                </a>
                . Happy to walk through Thursday.
              </p>
            </div>
            <div className="dirA-workspace-mock-chips">
              <span className="dirA-workspace-mock-chip">
                <DocsLogo size={14} />
                Q3 Memo (v4)
                <span className="dirA-workspace-mock-chip-meta">· edited 2h ago</span>
              </span>
              <span className="dirA-workspace-mock-chip">
                <SheetsLogo size={14} />
                Q3 Board Metrics
                <span className="dirA-workspace-mock-chip-meta">· live</span>
              </span>
            </div>
          </div>
        </div>

        <div className="dirA-workspace-now-label">Connect today</div>
        <div className="dirA-workspace-tiles">
          <div className="dirA-workspace-tile">
            <div className="dirA-workspace-tile-icon"><GmailLogo /></div>
            <div className="dirA-workspace-tile-name">Gmail</div>
          </div>
          <div className="dirA-workspace-tile">
            <div className="dirA-workspace-tile-icon"><DriveLogo /></div>
            <div className="dirA-workspace-tile-name">Drive</div>
          </div>
          <div className="dirA-workspace-tile">
            <div className="dirA-workspace-tile-icon"><DocsLogo /></div>
            <div className="dirA-workspace-tile-name">Docs</div>
          </div>
          <div className="dirA-workspace-tile">
            <div className="dirA-workspace-tile-icon"><SheetsLogo /></div>
            <div className="dirA-workspace-tile-name">Sheets</div>
          </div>
          <div className="dirA-workspace-tile">
            <div className="dirA-workspace-tile-icon"><CalendarLogo /></div>
            <div className="dirA-workspace-tile-name">Calendar</div>
          </div>
        </div>

        <div className="dirA-workspace-now-label" style={{ marginTop: 28 }}>Coming soon</div>
        <div className="dirA-workspace-tiles">
          <div className="dirA-workspace-tile soon">
            <span className="dirA-workspace-tile-badge">Soon</span>
            <div className="dirA-workspace-tile-icon"><NotionLogo /></div>
            <div className="dirA-workspace-tile-name">Notion</div>
          </div>
          <div className="dirA-workspace-tile soon">
            <span className="dirA-workspace-tile-badge">Soon</span>
            <div className="dirA-workspace-tile-icon"><SlackLogo /></div>
            <div className="dirA-workspace-tile-name">Slack</div>
          </div>
          <div className="dirA-workspace-tile soon">
            <span className="dirA-workspace-tile-badge">Soon</span>
            <div className="dirA-workspace-tile-icon"><LinearLogo /></div>
            <div className="dirA-workspace-tile-name">Linear</div>
          </div>
          <div className="dirA-workspace-tile soon">
            <span className="dirA-workspace-tile-badge">Soon</span>
            <div className="dirA-workspace-tile-icon"><DropboxLogo /></div>
            <div className="dirA-workspace-tile-name">Dropbox</div>
          </div>
          <div className="dirA-workspace-tile soon">
            <span className="dirA-workspace-tile-badge">Soon</span>
            <div className="dirA-workspace-tile-icon"><GithubLogo /></div>
            <div className="dirA-workspace-tile-name">GitHub</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Brand-accurate logos (simplified, SVG) ──

const GoogleWorkspaceLogo = () => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#5f6368', fontWeight: 500 }}>
    <svg width="18" height="18" viewBox="0 0 48 48">
      <path fill="#4285F4" d="M43.6 22.5H42V22H24v8h11.3c-1.6 4.7-6.1 8-11.3 8a12.5 12.5 0 1 1 0-25c3.2 0 6 1.2 8.2 3.1l5.7-5.7A20.5 20.5 0 1 0 24 44.5 20.5 20.5 0 0 0 44 24c0-.5 0-1-.4-1.5z"/>
      <path fill="#34A853" d="M5.3 14.7l6.6 4.8C13.7 15 18.4 12 24 12c3.2 0 6 1.2 8.2 3.1l5.7-5.7A20.5 20.5 0 0 0 5.3 14.7z"/>
      <path fill="#FBBC05" d="M24 44.5c5.5 0 10.4-2 14-5.3l-6.5-5.5c-1.9 1.3-4.4 2.3-7.5 2.3-5.2 0-9.6-3.4-11.2-8.1l-6.5 5A20.5 20.5 0 0 0 24 44.5z"/>
      <path fill="#EA4335" d="M43.6 22.5H42V22H24v8h11.3c-.8 2.3-2.2 4.3-4.1 5.7l6.5 5.5c-.5.5 7-5 7-13.7 0-.5 0-1-.4-1.5z"/>
    </svg>
    Google Workspace
  </div>
);

const GmailLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#4285F4" d="M8 38h8V22.7L4 14v20a4 4 0 0 0 4 4z"/>
    <path fill="#34A853" d="M32 38h8a4 4 0 0 0 4-4V14L32 22.7"/>
    <path fill="#FBBC04" d="M40 10a4 4 0 0 1 4 4l-20 14.7L4 14a4 4 0 0 1 4-4h32z"/>
    <path fill="#EA4335" d="M4 14v20a4 4 0 0 0 4 4h8V22.7"/>
    <path fill="#C5221F" d="M44 14v20a4 4 0 0 1-4 4h-8V22.7"/>
  </svg>
);

const DriveLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#1FA463" d="M16 6h16l16 28-8 14H8z"/>
    <path fill="#FFCD40" d="M16 6L0 34l8 14 16-28z"/>
    <path fill="#4688F1" d="M48 34l-8 14H24l8-14z"/>
    <path fill="#34A853" d="M16 6h16L24 20H8z" opacity="0.85"/>
  </svg>
);

const DocsLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#4285F4" d="M30 4H10a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h28a3 3 0 0 0 3-3V15z"/>
    <path fill="#A1C2FA" d="M30 4v8a3 3 0 0 0 3 3h8z"/>
    <rect x="14" y="22" width="20" height="2" fill="#fff" rx="1"/>
    <rect x="14" y="27" width="20" height="2" fill="#fff" rx="1"/>
    <rect x="14" y="32" width="14" height="2" fill="#fff" rx="1"/>
  </svg>
);

const SheetsLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#1FA463" d="M30 4H10a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h28a3 3 0 0 0 3-3V15z"/>
    <path fill="#A1D7B5" d="M30 4v8a3 3 0 0 0 3 3h8z"/>
    <rect x="13" y="22" width="22" height="14" fill="none" stroke="#fff" strokeWidth="1.5" rx="1"/>
    <line x1="13" y1="27" x2="35" y2="27" stroke="#fff" strokeWidth="1.5"/>
    <line x1="13" y1="32" x2="35" y2="32" stroke="#fff" strokeWidth="1.5"/>
    <line x1="20" y1="22" x2="20" y2="36" stroke="#fff" strokeWidth="1.5"/>
    <line x1="28" y1="22" x2="28" y2="36" stroke="#fff" strokeWidth="1.5"/>
  </svg>
);

const CalendarLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <rect x="6" y="10" width="36" height="32" rx="3" fill="#fff" stroke="#dadce0" strokeWidth="1"/>
    <rect x="6" y="10" width="36" height="8" fill="#4285F4" rx="3"/>
    <text x="24" y="34" textAnchor="middle" fontSize="13" fontWeight="600" fill="#4285F4" fontFamily="-apple-system, sans-serif">21</text>
    <line x1="14" y1="6" x2="14" y2="14" stroke="#4285F4" strokeWidth="2.5" strokeLinecap="round"/>
    <line x1="34" y1="6" x2="34" y2="14" stroke="#4285F4" strokeWidth="2.5" strokeLinecap="round"/>
  </svg>
);

const NotionLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <rect x="6" y="6" width="36" height="36" rx="4" fill="#fff" stroke="#000" strokeWidth="1.5"/>
    <path d="M16 14v20M16 14l16 20V14" stroke="#000" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const SlackLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <rect x="8" y="20" width="13" height="6" rx="3" fill="#36C5F0"/>
    <rect x="22" y="8" width="6" height="13" rx="3" fill="#2EB67D"/>
    <rect x="27" y="22" width="13" height="6" rx="3" fill="#ECB22E"/>
    <rect x="20" y="27" width="6" height="13" rx="3" fill="#E01E5A"/>
    <circle cx="14" cy="14" r="3" fill="#36C5F0"/>
    <circle cx="34" cy="14" r="3" fill="#2EB67D"/>
    <circle cx="34" cy="34" r="3" fill="#ECB22E"/>
    <circle cx="14" cy="34" r="3" fill="#E01E5A"/>
  </svg>
);

const LinearLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <defs>
      <linearGradient id="ln-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#5E6AD2"/>
        <stop offset="100%" stopColor="#8B92E8"/>
      </linearGradient>
    </defs>
    <circle cx="24" cy="24" r="18" fill="url(#ln-grad)"/>
    <path d="M14 14l20 20M18 12l18 18M22 10l16 16M10 18l20 20M10 22l16 16M10 26l12 12" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.9"/>
  </svg>
);

const DropboxLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#0061FF" d="M14 8L4 14.5 14 21l10-6.5z"/>
    <path fill="#0061FF" d="M34 8l-10 6.5L34 21l10-6.5z"/>
    <path fill="#0061FF" d="M4 27.5L14 34l10-6.5L14 21z"/>
    <path fill="#0061FF" d="M34 21l-10 6.5L34 34l10-6.5z"/>
    <path fill="#0061FF" d="M14 36l10 6.5L34 36l-10-6.5z"/>
  </svg>
);

const GithubLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#181717" d="M24 4a20 20 0 0 0-6.3 39c1 .2 1.4-.4 1.4-1v-3.5c-5.6 1.2-6.8-2.7-6.8-2.7-.9-2.3-2.2-3-2.2-3-1.8-1.2.1-1.2.1-1.2 2 .1 3.1 2 3.1 2 1.8 3 4.7 2.2 5.9 1.7.2-1.3.7-2.2 1.3-2.7-4.5-.5-9.2-2.2-9.2-10 0-2.2.8-4 2.1-5.4-.2-.5-.9-2.6.2-5.4 0 0 1.7-.6 5.6 2a19 19 0 0 1 10.2 0c3.9-2.6 5.6-2 5.6-2 1.1 2.8.4 4.9.2 5.4 1.3 1.4 2.1 3.2 2.1 5.4 0 7.8-4.7 9.5-9.2 10 .7.6 1.4 1.9 1.4 3.8V42c0 .6.4 1.2 1.4 1A20 20 0 0 0 24 4z"/>
  </svg>
);

Object.assign(window, {
  WorkspaceSection,
  GmailLogo, DriveLogo, DocsLogo, SheetsLogo, CalendarLogo,
  NotionLogo, SlackLogo, LinearLogo, DropboxLogo, GithubLogo,
});
