// 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 (
    <Tag {...rest} className={`btn-square ${sizeClass} ${toneClass} ${className}`.replace(/\s+/g, ' ').trim()}>
      <span className="btn-square-bracket btn-square-bracket-tl" aria-hidden="true"></span>
      <span className="btn-square-bracket btn-square-bracket-tr" aria-hidden="true"></span>
      <span className="btn-square-bracket btn-square-bracket-bl" aria-hidden="true"></span>
      <span className="btn-square-bracket btn-square-bracket-br" aria-hidden="true"></span>
      <span className="btn-square-line btn-square-line-top" aria-hidden="true"></span>
      <span className="btn-square-line btn-square-line-bottom" aria-hidden="true"></span>
      <span className="btn-square-label">{children}</span>
    </Tag>);
}

// ─────────────────────── 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 (
    <svg
      width={size} height={size}
      viewBox="800 220 320 340" fill="currentColor"
      className={className} style={style}
      aria-label="Deepstrat">
      
      <path d="M996.02,392.43s0-.08,0-.12c-.03-1.36-.76-2.58-1.94-3.1-16.02-7.09-26.23-17.91-31.23-33.06-.44-1.35-1.56-2.22-2.84-2.22s-2.39.87-2.84,2.22c-4.99,15.15-15.21,25.97-31.23,33.06-1.18.52-1.91,1.74-1.94,3.1,0,.04,0,.08,0,.12,0,.04,0,.08,0,.12.03,1.36.76,2.58,1.94,3.1,16.02,7.09,26.23,17.91,31.23,33.06.44,1.35,1.56,2.22,2.84,2.22s2.39-.87,2.84-2.22c4.99-15.15,15.21-25.97,31.23-33.06,1.18-.52,1.91-1.74,1.94-3.1,0-.04,0-.08,0-.11Z" />
      <path d="M1045.42,418.97c-8.18-3.48-16.26-5.25-23.97-5.25-9.01,0-17.19,2.39-24.31,7.1-12.51,8.27-19.69,22.96-19.69,40.3l-.18,96.76c10.56-1.12,20.83-3.23,30.71-6.23l.16-90.49c0-6.98,2.1-12.22,5.92-14.74,1.96-1.3,4.47-1.96,7.45-1.96,3.39,0,7.34.88,11.41,2.56l.15.07,65.09,37.42c5.65-8.48,10.55-17.49,14.59-26.96l-66.48-38.18-.86-.39Z" />
      <path d="M980.15,351.17c3.85,7.67,9.78,13.84,17.63,18.34,4.91,2.82,10.47,4.91,16.56,6.25,3.69.81,7.47,1.17,11.24,1.17l99.72.07c-.98-10.58-2.95-20.87-5.82-30.79l-91.72.03c-3.2,0-6.41-.37-9.47-1.32-1.89-.59-3.6-1.31-5.08-2.16-2.6-1.49-4.45-3.32-5.51-5.43-2.06-4.11-1.28-9.72,2.21-15.81l39.5-69.09c-8.62-5.55-17.79-10.31-27.4-14.21l-38.86,67.99c-8.67,15.11-9.77,31.5-3.01,44.96Z" />
      <path d="M874.27,372.14c8.18,3.48,16.26,5.25,23.97,5.25,9.01,0,17.19-2.39,24.31-7.1,12.51-8.27,19.69-22.96,19.69-40.3l.19-103.02c-10.56,1.09-20.83,3.18-30.71,6.16l-.18,96.81c0,6.98-2.1,12.22-5.92,14.74-1.96,1.3-4.47,1.96-7.45,1.96-3.39,0-7.34-.88-11.41-2.56l-.15-.07-68.28-39.25c-5.39,8.65-10.01,17.83-13.75,27.45l68.84,39.53.86.39Z" />
      <path d="M939.54,439.94c-3.85-7.67-9.78-13.84-17.63-18.34-4.91-2.82-10.47-4.91-16.56-6.25-3.69-.81-7.47-1.17-11.24-1.17l-99.41-.07c1.38,10.61,3.78,20.9,7.07,30.79l90.17-.03c3.2,0,6.41.37,9.47,1.32,1.89.59,3.6,1.31,5.08,2.16,2.6,1.49,4.45,3.32,5.51,5.43,2.06,4.11,1.28,9.72-2.21,15.81l-36.98,64.69c8.74,5.37,18.01,9.96,27.72,13.66l36.03-63.04c8.67-15.11,9.77-31.5,3.01-44.96Z" />
    </svg>);

}

// ─────────────────────── 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 (
    <img
      src="assets/logo-narrow.png"
      alt="Deepstrat"
      data-tone={tone}
      style={{ height, width: 'auto', display: 'block' }} />);

}

// ─────────────────────── Partner badge (Odoo) ───────────────────────
function PartnerBadge({ compact = false }) {
  return (
    <div className="inline-flex items-center gap-2.5 pl-1.5 pr-3 py-1.5 rounded-full bg-paper ring-soft">
      <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-ink-900 text-white">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </span>
      <div className="flex flex-col leading-tight">
        <span className="text-[9.5px] uppercase tracking-[0.14em] text-ink-500 font-medium">Certificação</span>
        <span className="text-[12px] font-semibold text-ink-900">Odoo Ready Partner</span>
      </div>
      {!compact && <span className="ml-1 text-[10px] font-mono text-ink-400">BR</span>}
    </div>);

}

// ─────────────────────── Section headings ───────────────────────
function Eyebrow({ children }) {
  return (
    <div className="inline-flex items-center gap-2.5 text-[11px] font-medium uppercase tracking-[0.16em] text-ink-500">
      <DSSymbol size={12} className="text-ink-700" />
      {children}
    </div>);

}

function SectionTitle({ eyebrow, title, sub, align = 'left' }) {
  const a = align === 'center' ? 'text-center mx-auto' : 'text-left';
  return (
    <div className={`max-w-2xl ${a}`}>
      {eyebrow && <div className={align === 'center' ? 'flex justify-center mb-5' : 'mb-5'}>
        <Eyebrow>{eyebrow}</Eyebrow>
      </div>}
      <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] leading-[1.05] font-semibold text-ink-900">
        {title}
      </h2>
      {sub && <p className="mt-5 text-[17px] text-ink-500 leading-[1.55] max-w-xl">{sub}</p>}
    </div>);

}

// ─────────────────────── Icons ───────────────────────
const Icon = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12l4 4L19 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  x: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  sheet: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><rect x="3.5" y="4.5" width="17" height="15" rx="1.5" stroke="currentColor" strokeWidth="1.5" /><path d="M3.5 9.5h17M3.5 14.5h17M9 4.5v15M15 4.5v15" stroke="currentColor" strokeWidth="1.5" /></svg>,
  box: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /><path d="M4 7.5L12 12l8-4.5M12 12v9" stroke="currentColor" strokeWidth="1.5" /></svg>,
  brick: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><rect x="3.5" y="3.5" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.5" /><rect x="13.5" y="3.5" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.5" /><rect x="3.5" y="13.5" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.5" /><rect x="13.5" y="13.5" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1.5" /></svg>,
  bolt: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M13 3L4 14h6l-1 7 9-11h-6l1-7z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></svg>,
  chat: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 5.5A1.5 1.5 0 015.5 4h13A1.5 1.5 0 0120 5.5v9A1.5 1.5 0 0118.5 16H10l-5 4v-4H5.5A1.5 1.5 0 014 14.5v-9z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></svg>,
  plug: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M9 4v5M15 4v5M6 9h12v3a6 6 0 01-12 0V9zM12 18v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  send: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12L19 5l-3 14-4-6-7-1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></svg>,
  mic: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><rect x="9" y="3" width="6" height="11" rx="3" stroke="currentColor" strokeWidth="1.5" /><path d="M6 11a6 6 0 0012 0M12 18v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  // Modules
  cart: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M3 5h2l2 11h11l2-8H7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /><circle cx="9" cy="20" r="1.4" stroke="currentColor" strokeWidth="1.5" /><circle cx="17" cy="20" r="1.4" stroke="currentColor" strokeWidth="1.5" /></svg>,
  users: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="9" cy="9" r="3.2" stroke="currentColor" strokeWidth="1.5" /><circle cx="16.5" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.5" /><path d="M3 19c.7-2.8 3.1-4.5 6-4.5s5.3 1.7 6 4.5M15 19c.6-2 2-3 3.7-3 1.4 0 2.6.7 3.3 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  bag: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 8h14l-1 12H6L5 8z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /><path d="M9 8V6a3 3 0 016 0v2" stroke="currentColor" strokeWidth="1.5" /></svg>,
  ware: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M3 10l9-6 9 6v10H3V10z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /><rect x="9" y="13" width="6" height="7" stroke="currentColor" strokeWidth="1.5" /></svg>,
  coin: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.5" /><path d="M9 14c.5 1 1.6 1.6 3 1.6 1.7 0 3-.8 3-2s-1.3-1.6-3-2-3-.8-3-2 1.3-2 3-2c1.4 0 2.5.6 3 1.6M12 6.5v11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  hr: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 20c.8-3.5 3.7-5.5 7-5.5s6.2 2 7 5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  gear: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.5" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  proj: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><rect x="3.5" y="5.5" width="17" height="13" rx="1.5" stroke="currentColor" strokeWidth="1.5" /><path d="M3.5 9.5h17M7 13h6M7 16h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  shop: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 8l1-3h14l1 3M4 8h16v11H4V8zM9 13h6" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" /></svg>,
  bull: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 10v4l11 5V5L4 10zM4 10H3a1 1 0 00-1 1v2a1 1 0 001 1h1M7 14v3a2 2 0 003.6 1.2" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" /></svg>,
  life: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.5" /><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.5" /><path d="M6.3 6.3l3.4 3.4M14.3 14.3l3.4 3.4M14.3 9.7l3.4-3.4M6.3 17.7l3.4-3.4" stroke="currentColor" strokeWidth="1.5" /></svg>,
  doc: (p) => <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M6 3.5h8l4 4V20a.5.5 0 01-.5.5h-11A.5.5 0 016 20V3.5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /><path d="M14 3.5V8h4M9 12h6M9 16h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
};

// ─────────────────────── Reveal hook ───────────────────────
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.fade-up').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, { DSSymbol, DSWordmark, PartnerBadge, Eyebrow, SectionTitle, Icon, useReveal, SquareBtn });