// components.jsx — Deepstrat brand primitives + small reusable bits.
// Uses the real logo SVG paths inline so it's crisp at any size and can take currentColor.
const { useEffect, useState, useRef } = React;
// ─────────────────────── SquareBtn ───────────────────────
// Palantir-style square CTA with corner brackets + connecting lines.
// Props: children, size ('default' | 'sm'), tone ('dark' | 'light'),
// and any other anchor props (href, onClick, data-cal-*, etc.).
function SquareBtn({ children, size = 'default', tone = 'dark', as = 'a', className = '', ...rest }) {
const sizeClass = size === 'sm' ? 'btn-square--sm' : '';
const toneClass = tone === 'light' ? 'btn-square--light' : '';
const Tag = as;
return (
{children});
}
// ─────────────────────── DSSymbol ───────────────────────
// The 4-arm/star mark, extracted from the official SVG.
// Drives `currentColor`, so just set text color to recolor.
function DSSymbol({ size = 28, className = '', style }) {
return (
);
}
// ─────────────────────── DSWordmark ───────────────────────
// Horizontal lockup: symbol + "deep strat". Uses the official `logo-narrow.png`
// from the brand manual (5761x1484, aspect ~3.88:1) so the symbol/wordmark
// proportions match the brand spec exactly.
function DSWordmark({ height = 28, tone = 'ink' }) {
// `height` is the FULL lockup height. Width auto from the PNG aspect ratio.
// The PNG is black; for use on dark backgrounds, CSS inverts it via the
// `data-tone="paper"` attribute (see custom-styles.css).
return (
);
}
// ─────────────────────── Partner badge (Odoo) ───────────────────────
function PartnerBadge({ compact = false }) {
return (
CertificaçãoOdoo Ready Partner
{!compact && BR}
);
}
// ─────────────────────── Section headings ───────────────────────
function Eyebrow({ children }) {
return (
);
}
// ─────────────────────── Partner badge (Odoo) ───────────────────────
function PartnerBadge({ compact = false }) {
return (