/* HAKURI — AI×Inbound Marketing animation kit
   Shared building blocks for the SNS auto-generation product-demo loops.
   Exposes to window: Mark, Chrome, Cursor, Ripple, PGlyph, Sparkle, Dot, injectCSS */

const { useEffect: useEffectK } = React;

/* Inject a <style> block once (guarded by id) */
function injectCSS(id, css) {
  if (typeof document === 'undefined' || document.getElementById(id)) return;
  const s = document.createElement('style');
  s.id = id; s.textContent = css;
  document.head.appendChild(s);
}

/* ---- base CSS shared by every loop (cursor, ripple, card chrome) ---- */
injectCSS('anim-kit-base', `
.demo {
  position:relative; width:100%; height:100%; overflow:hidden;
  background:var(--paper);
  font-family:'Inter','Noto Sans JP',sans-serif;
  color:var(--ink);
  --loop:8s;
}
.demo, .demo * { box-sizing:border-box; }

/* window chrome */
.dm-chrome {
  height:56px; flex:0 0 56px;
  display:flex; align-items:center; gap:11px;
  padding:0 20px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.dm-chrome .mk { width:30px; height:30px; border-radius:8px; display:block; }
.dm-title { font-family:'Sora','Noto Sans JP',sans-serif; font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.dm-sub   { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.dm-status{ margin-left:auto; display:flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--ok); }
.dm-status i{ width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 4px rgba(43,163,122,.16); display:block;
  animation:dm-pulse 2.4s ease-in-out infinite; }
@keyframes dm-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(43,163,122,.16)} 50%{box-shadow:0 0 0 6px rgba(43,163,122,.05)} }

/* cursor */
.cursor { position:absolute; top:0; left:0; width:24px; height:24px; z-index:60; pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(14,27,44,.28)); }
.ripple { position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,125,225,.42) 0%, rgba(47,125,225,0) 70%); z-index:55; pointer-events:none; opacity:0; }

/* sns post card */
.sns { background:var(--white); border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow-sm); }
.sns .pl { display:flex; align-items:center; gap:8px; }
.sns .pl .nm { font-family:'Inter','Noto Sans JP',sans-serif; font-weight:600; font-size:12px; color:var(--ink); }
.sns .pl .ix { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--ink-3); }
.sns .cap { font-size:12.5px; line-height:1.55; color:var(--ink-2); }
.sns .tags{ font-size:11.5px; color:var(--blue); font-weight:500; }
.sns .mt { display:flex; align-items:center; gap:8px; padding-top:9px; border-top:1px solid var(--line); }
.sns .mt .lab{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; }
.sns .mt .val{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; color:var(--ink); margin-left:auto; }

.skel { background:linear-gradient(100deg,var(--paper-2) 30%,#ffffff 50%,var(--paper-2) 70%);
  background-size:280% 100%; border-radius:5px; animation:skel 1.4s ease-in-out infinite; }
@keyframes skel { 0%{background-position:180% 0} 100%{background-position:-80% 0} }
`);

/* ---- logo mark ---- */
function Mark({ size = 30 }) {
  return <img className="mk" src="assets/logo-mark-blue-bg.png" alt="HAKURI" style={{ width: size, height: size }} />;
}

/* ---- window chrome bar ---- */
function Chrome({ title = 'Marketing AI', sub = 'SNS AUTO-DRAFT', status = '稼働中' }) {
  return (
    <div className="dm-chrome">
      <Mark size={30} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1, lineHeight: 1.15 }}>
        <span className="dm-title">{title}</span>
        <span className="dm-sub">{sub}</span>
      </div>
      <div className="dm-status"><i></i>{status}</div>
    </div>
  );
}

/* ---- animated cursor (className supplies the keyframe motion) ---- */
function Cursor({ cls }) {
  return (
    <svg className={'cursor ' + cls} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 2.5 L5 19 L9.2 14.8 L12 21 L14.4 20 L11.6 13.9 L17.5 13.9 Z"
        fill="#fff" stroke="#0E1B2C" strokeWidth="1.4" strokeLinejoin="round" />
    </svg>
  );
}

/* ---- click ripple (positioned + animated by concept css) ---- */
function Ripple({ cls, style }) { return <span className={'ripple ' + cls} style={style}></span>; }

/* ---- platform glyph: x | insta | line  (calm monochrome) ---- */
function PGlyph({ type, size = 22, color = 'var(--ink)' }) {
  const box = { width: size, height: size, borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' };
  if (type === 'x') return (
    <span style={{ ...box, background: 'var(--ink)' }}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24" fill="#fff"><path d="M18.2 2H21l-6.4 7.3L22 22h-5.6l-4.4-5.8L6.9 22H4l6.9-7.9L3.3 2H9l4 5.3L18.2 2Zm-1 18h1.5L7.9 3.6H6.3L17.2 20Z"/></svg>
    </span>
  );
  if (type === 'insta') return (
    <span style={{ ...box, background: 'var(--ink)' }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.2" fill="#fff" stroke="none"/></svg>
    </span>
  );
  if (type === 'blog' || type === 'doc') return (
    <span style={{ ...box, background: 'var(--blue-100)' }}>
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="none" stroke="var(--blue-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"/><path d="M9 12h6M9 16h4"/></svg>
    </span>
  );
  if (type === 'mail') return (
    <span style={{ ...box, background: 'var(--ink)' }}>
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>
    </span>
  );
  if (type === 'linkedin') return (
    <span style={{ ...box, background: 'var(--blue)' }}>
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="#fff"><path d="M4.98 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM3.3 9h3.4v11.5H3.3V9Zm5.6 0h3.26v1.57h.05c.45-.86 1.56-1.77 3.2-1.77 3.43 0 4.06 2.26 4.06 5.2v6.5h-3.4v-5.76c0-1.37-.02-3.14-1.91-3.14-1.92 0-2.21 1.5-2.21 3.04v5.86H8.9V9Z"/></svg>
    </span>
  );
  if (type === 'phone') return (
    <span style={{ ...box, background: 'var(--ok)' }}>
      <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z"/></svg>
    </span>
  );
  if (type === 'crm') return (
    <span style={{ ...box, background: 'var(--ink)' }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11"/></svg>
    </span>
  );
  if (type === 'line') return (
    <span style={{ ...box, background: 'var(--ok)' }}>
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="#fff"><path d="M12 3C6.5 3 2 6.6 2 11.1c0 4 3.6 7.4 8.4 8 .9.2.8.5.6 1.6 0 .2-.3 1 .9.5 1.2-.5 6.4-3.8 8.8-6.5 1.5-1.6 2.3-3.5 2.3-5.6C23 6.6 18.5 3 12 3Z"/></svg>
    </span>
  );
  // generic fallback — neutral chip
  return (
    <span style={{ ...box, background: 'var(--blue-100)' }}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24" fill="none" stroke="var(--blue-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><path d="M7 7.5 10 10M17 7.5 14 10"/></svg>
    </span>
  );
}

/* ---- sparkle (AI generate icon) ---- */
function Sparkle({ size = 16, color = 'var(--blue)' }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.6 4.6L18 9l-4.4 1.4L12 15l-1.6-4.6L6 9l4.4-1.4L12 3Z"/><path d="M19 14l.7 2 .3.7-2 .7 2 .7"/></svg>;
}

function Dot({ color = 'var(--blue)', size = 7 }) {
  return <span style={{ width: size, height: size, borderRadius: '50%', background: color, flex: '0 0 auto', display: 'inline-block' }}></span>;
}

Object.assign(window, { injectCSS, Mark, Chrome, Cursor, Ripple, PGlyph, Sparkle, Dot });