// Shared icons + small UI primitives for the Парник screens.
// All icons: 1.5px stroke, currentColor, 24x24 grid.

const I = {
  Sprout: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 21V12"/>
      <path d="M12 12c0-3.5 2.5-6 6-6-0.2 3.5-2.5 6-6 6Z"/>
      <path d="M12 13c0-3-2-5-5-5 0.2 3 2 5 5 5Z"/>
      <path d="M7 21h10"/>
    </svg>
  ),
  Leaf: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 19c0-7 6-14 14-14 0 8-6 14-14 14Z"/>
      <path d="M5 19c4-4 8-7 14-14"/>
    </svg>
  ),
  Branch: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 20C8 14 12 10 20 6"/>
      <path d="M10 14l-1 4"/>
      <path d="M14 10l-1-3"/>
      <path d="M17 9l3-1"/>
    </svg>
  ),
  Check: (p) => (
    <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 12l5 5L20 6"/>
    </svg>
  ),
  Plus: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  Arrow: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  ArrowLeft: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M19 12H5M11 6l-6 6 6 6"/>
    </svg>
  ),
  Telegram: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 4 3 11l6 2 2 6 4-4 5 5 1-16Z"/>
      <path d="m9 13 8-6-6 8"/>
    </svg>
  ),
  Globe: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18M12 3c2.5 3 4 5.8 4 9s-1.5 6-4 9c-2.5-3-4-5.8-4-9s1.5-6 4-9Z"/>
    </svg>
  ),
  Image: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="4" width="18" height="16" rx="0"/>
      <circle cx="9" cy="10" r="1.5"/>
      <path d="m3 18 6-6 5 5 3-3 4 4"/>
    </svg>
  ),
  Channels: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="6" cy="6" r="2.2"/>
      <circle cx="18" cy="6" r="2.2"/>
      <circle cx="6" cy="18" r="2.2"/>
      <circle cx="18" cy="18" r="2.2"/>
      <path d="M8 7l8 10M8 17l8-10"/>
    </svg>
  ),
  Settings: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5h0a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/>
    </svg>
  ),
  Pencil: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M17 3l4 4-11 11-5 1 1-5 11-11Z"/>
    </svg>
  ),
  Chat: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 12c0 4.4-4 8-9 8a10 10 0 0 1-3.3-.6L4 21l1.2-4.4A7.6 7.6 0 0 1 3 12c0-4.4 4-8 9-8s9 3.6 9 8Z"/>
    </svg>
  ),
  X: (p) => (
    <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 5l14 14M19 5 5 19"/>
    </svg>
  ),
  Copy: (p) => (
    <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="8" y="8" width="12" height="12" rx="1"/>
      <path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/>
    </svg>
  ),
  Eye: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/>
      <circle cx="12" cy="12" r="3"/>
    </svg>
  ),
  Send: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z"/>
    </svg>
  ),
  Spark: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6Z"/>
      <path d="M19 17l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7Z"/>
    </svg>
  ),
  Doc: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8l-5-5Z"/>
      <path d="M14 3v5h5M8 13h8M8 17h6"/>
    </svg>
  ),
  Pen: (p) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 21l4-1L19 8l-3-3L4 17l-1 4Z"/>
      <path d="m14 6 3 3"/>
    </svg>
  ),
};

// Botanical mark — small sprout used as section markers
const BotanicalMark = ({size=20, color="var(--moss)"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22V11"/>
    <path d="M12 11c0-3.5 2.6-6.2 6.5-6.5C18.2 8.4 15.5 11 12 11Z"/>
    <path d="M12 13c0-2.7-2-4.8-5-5 0.2 2.8 2.3 5 5 5Z"/>
  </svg>
);

// Stepper for top of onboarding screens
const Stepper = ({current, total, label}) => (
  <div style={{display:'flex', alignItems:'center', gap:14, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--bark)', letterSpacing:'0.1em', textTransform:'uppercase'}}>
    <span style={{color:'var(--forest)', fontWeight:500}}>{String(current).padStart(2,'0')} <span style={{color:'var(--bark-dim)'}}>/ {String(total).padStart(2,'0')}</span></span>
    <span style={{width:120, height:1, background:'var(--hairline)', position:'relative'}}>
      <span style={{position:'absolute', left:0, top:0, height:1, width:`${(current/total)*100}%`, background:'var(--ochre)'}}/>
    </span>
    {label && <span style={{color:'var(--bark)'}}>{label}</span>}
  </div>
);

// Top app bar for onboarding screens (lightweight)
const OnboardingTopbar = ({step, total, stepLabel}) => (
  <div style={{height:56, borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', padding:'0 28px', justifyContent:'space-between', background:'var(--paper)'}}>
    <div style={{display:'flex', alignItems:'center', gap:10}}>
      <BotanicalMark size={18} color="var(--forest)"/>
      <span style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:18, color:'var(--forest)'}}>Парник</span>
      <span style={{color:'var(--bark-dim)', fontFamily:'var(--font-mono)', fontSize:11, marginLeft:8, letterSpacing:'0.1em', textTransform:'uppercase'}}>blogging · sitefarm</span>
    </div>
    <Stepper current={step} total={total} label={stepLabel}/>
    <div style={{display:'flex', alignItems:'center', gap:14}}>
      <span style={{fontSize:12, color:'var(--bark)'}}>Ксюша · ksu@</span>
      <div style={{width:24, height:24, borderRadius:999, background:'var(--ochre-tint)', border:'1px solid var(--ochre-dim)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, color:'var(--forest)', fontFamily:'var(--font-display)'}}>K</div>
    </div>
  </div>
);

// Floating AI assistant button (closed state)
const AssistantFab = ({style}) => (
  <div style={{position:'absolute', right:20, bottom:20, ...style}}>
    <button style={{
      display:'inline-flex', alignItems:'center', gap:8,
      padding:'10px 14px', borderRadius:999,
      background:'var(--forest-soft)', color:'var(--paper)',
      border:'1px solid var(--forest)', fontSize:13, fontWeight:500,
      boxShadow:'0 4px 14px rgba(31,58,40,0.18)',
    }}>
      <I.Chat size={14}/>
      <span>Помощник</span>
      <span style={{width:6, height:6, borderRadius:999, background:'var(--ochre)'}}/>
    </button>
  </div>
);

// Subtle background watermark — botanical engraving feel using thin strokes
const PaperGrain = () => (
  <div aria-hidden style={{
    position:'absolute', inset:0, pointerEvents:'none',
    backgroundImage:
      `radial-gradient(circle at 30% 20%, rgba(110,130,104,0.04), transparent 40%),` +
      `radial-gradient(circle at 80% 80%, rgba(212,165,92,0.04), transparent 35%)`,
  }}/>
);

// Mock external preview frame (for tutorials referencing TG, VK, FB without copying their UI).
// Generic neutral chrome — labelled with the service name in the title bar.
const MockServiceFrame = ({title, host, children, height=200}) => (
  <div style={{border:'1px solid var(--hairline-strong)', background:'#fff', borderRadius:2, overflow:'hidden', boxShadow:'var(--shadow-card)'}}>
    <div style={{height:26, borderBottom:'1px solid var(--hairline)', background:'var(--paper-deep)', display:'flex', alignItems:'center', padding:'0 10px', gap:8}}>
      <span style={{display:'inline-flex', gap:4}}>
        <span style={{width:8, height:8, borderRadius:999, background:'#d3cdb6'}}/>
        <span style={{width:8, height:8, borderRadius:999, background:'#d3cdb6'}}/>
        <span style={{width:8, height:8, borderRadius:999, background:'#d3cdb6'}}/>
      </span>
      <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark-dim)'}}>{host}</span>
      <span style={{marginLeft:'auto', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark)', textTransform:'uppercase', letterSpacing:'0.1em'}}>{title}</span>
    </div>
    <div style={{height, background:'#fff', padding:12, overflow:'hidden', position:'relative'}}>
      {children}
    </div>
  </div>
);

// Make available globally for other babel scripts
Object.assign(window, { I, BotanicalMark, Stepper, OnboardingTopbar, AssistantFab, PaperGrain, MockServiceFrame });
