// ============================================================
// DEMIURGE — CONNECTED CHANNELS + CAPABILITIES
// Broadcast / messaging bots / creator-platform (session-based)
// AI generation · account warmup · proxy · workflow engine
// ============================================================

// Stylized brass monogram glyphs — neo-steampunk approximation
// (not pixel-replicas of the official logos)
const ChannelGlyph = ({ kind }) => {
  const common = { viewBox: '0 0 40 40', xmlns: 'http://www.w3.org/2000/svg' };
  const s = '#c9a674';
  const cy = '#4be8ff';
  const map = {
    tiktok: (
      <svg {...common}>
        <path d="M 14 8 L 14 26 A 4 4 0 1 1 10 22" fill="none" stroke={s} strokeWidth="2"/>
        <path d="M 14 8 Q 18 14 24 14" fill="none" stroke={cy} strokeWidth="2"/>
      </svg>
    ),
    instagram: (
      <svg {...common}>
        <rect x="8" y="8" width="24" height="24" rx="6" fill="none" stroke={s} strokeWidth="1.5"/>
        <circle cx="20" cy="20" r="6" fill="none" stroke={s} strokeWidth="1.5"/>
        <circle cx="27" cy="13" r="1.4" fill={s}/>
      </svg>
    ),
    youtube: (
      <svg {...common}>
        <rect x="6" y="12" width="28" height="16" rx="3" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 17 16 L 25 20 L 17 24 Z" fill={s}/>
      </svg>
    ),
    facebook: (
      <svg {...common}>
        <circle cx="20" cy="20" r="13" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 22 12 L 22 16 L 19 16 L 19 19 L 22 19 L 22 30" fill="none" stroke={s} strokeWidth="2" strokeLinecap="square"/>
        <line x1="17" y1="22" x2="24" y2="22" stroke={s} strokeWidth="2"/>
      </svg>
    ),
    linkedin: (
      <svg {...common}>
        <rect x="7" y="7" width="26" height="26" rx="3" fill="none" stroke={s} strokeWidth="1.5"/>
        <circle cx="13" cy="14" r="1.6" fill={s}/>
        <line x1="13" y1="18" x2="13" y2="27" stroke={s} strokeWidth="2"/>
        <path d="M 18 27 L 18 18 M 18 22 Q 18 17 23 17 Q 27 17 27 22 L 27 27" fill="none" stroke={s} strokeWidth="2"/>
      </svg>
    ),
    x: (
      <svg {...common}>
        <path d="M 10 9 L 30 31 M 30 9 L 10 31" stroke={s} strokeWidth="2.6" strokeLinecap="square"/>
      </svg>
    ),
    threads: (
      <svg {...common}>
        <path d="M 28 14 Q 25 9 20 9 Q 11 9 11 20 Q 11 31 20 31 Q 26 31 28 26" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 16 20 Q 16 16 20 16 Q 24 16 24 20 Q 24 24 20 24" fill="none" stroke={s} strokeWidth="1.5"/>
        <circle cx="20" cy="20" r="1.6" fill={cy}/>
      </svg>
    ),
    bluesky: (
      <svg {...common}>
        <path d="M 10 12 Q 14 8 20 14 Q 26 8 30 12 Q 26 22 20 24 Q 14 22 10 12 Z" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 10 20 Q 14 26 20 28 Q 26 26 30 20" fill="none" stroke={cy} strokeWidth="1.2" opacity="0.7"/>
      </svg>
    ),
    pinterest: (
      <svg {...common}>
        <circle cx="20" cy="20" r="13" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 17 32 L 20 19 M 20 19 Q 20 13 25 13 Q 28 13 28 17 Q 28 22 23 22 Q 19 22 19 19" fill="none" stroke={s} strokeWidth="1.5"/>
      </svg>
    ),
    telegram: (
      <svg {...common}>
        <circle cx="20" cy="20" r="13" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 11 19 L 29 13 L 25 28 L 19 23 L 16 27 L 17 22 L 25 13" fill="none" stroke={s} strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    ),
    whatsapp: (
      <svg {...common}>
        <path d="M 9 31 L 11 25 Q 8 21 8 17 Q 8 9 17 9 Q 26 9 26 17 Q 26 25 17 25 Q 14 25 12 24 L 9 31 Z" fill="none" stroke={s} strokeWidth="1.5"/>
        <path d="M 13 16 Q 13 21 18 21" fill="none" stroke={cy} strokeWidth="1.4"/>
      </svg>
    ),
    onlyfans: (
      <svg {...common}>
        <circle cx="20" cy="20" r="13" fill="none" stroke={s} strokeWidth="1.5"/>
        <circle cx="17" cy="20" r="5" fill="none" stroke={s} strokeWidth="1.8"/>
        <path d="M 24 14 Q 28 14 28 18" fill="none" stroke={s} strokeWidth="1.4"/>
        <circle cx="27" cy="15" r="1.2" fill={s}/>
      </svg>
    ),
    fanvue: (
      <svg {...common}>
        <path d="M 10 10 L 16 10 L 16 30 L 12 30 L 12 22 L 22 22" fill="none" stroke={s} strokeWidth="2"/>
        <path d="M 22 10 L 30 30 L 26 30 L 22 18 Z" fill="none" stroke={s} strokeWidth="1.6"/>
      </svg>
    )
  };
  return map[kind] || null;
};

const CHANNEL_GROUPS = [
  {
    label: 'Broadcast posting',
    sub: 'native publishing · scheduling · cross-platform',
    items: [
      { key: 'tiktok',    name: 'TikTok',     cap: 'video · trends' },
      { key: 'instagram', name: 'Instagram',  cap: 'reels · stories · posts' },
      { key: 'youtube',   name: 'YouTube',    cap: 'shorts · long-form' },
      { key: 'facebook',  name: 'Facebook',   cap: 'pages · groups' },
      { key: 'linkedin',  name: 'LinkedIn',   cap: 'personal · company' },
      { key: 'x',         name: 'X',          cap: 'threads · DMs' },
      { key: 'threads',   name: 'Threads',    cap: 'replies · threads' },
      { key: 'bluesky',   name: 'Bluesky',    cap: 'posts · feeds' },
      { key: 'pinterest', name: 'Pinterest',  cap: 'pins · boards' }
    ]
  },
  {
    label: 'Messaging bots',
    sub: 'inbound + outbound · always-on',
    items: [
      { key: 'telegram',  name: 'Telegram',   cap: 'bot · channels · groups' },
      { key: 'whatsapp',  name: 'WhatsApp',   cap: 'business · broadcast' }
    ]
  },
  {
    label: 'Creator platforms',
    sub: 'session-based · creator-managed',
    note: 'Creator-platform connectors run inside the creator\u2019s own authenticated session — Demiurge orchestrates only what the creator is permitted to do under each platform\u2019s ToS.',
    flagged: true,
    items: [
      { key: 'onlyfans',  name: 'OnlyFans',   cap: 'session · creator-managed' },
      { key: 'fanvue',    name: 'Fanvue',     cap: 'session · creator-managed' }
    ]
  }
];

const CAPABILITIES = [
  {
    name: 'AI Content Generator',
    sub: 'Calliope · in-app',
    desc: 'Long-form copy, captions, hooks, image generation in your brand voice. Optional video synthesis and AI avatar / voice clone for native creator content.',
    tags: ['Text', 'Image', 'Video (opt)', 'Avatar / clone (opt)']
  },
  {
    name: 'Account Warmup',
    sub: 'Atlas · stealth posture',
    desc: 'Graduates fresh accounts through human-shaped activity curves — view, like, follow, post — before any outbound. Protects deliverability and account health.',
    tags: ['Activity curves', 'Per-account schedule', 'Risk-aware']
  },
  {
    name: 'Proxy & Identity',
    sub: 'Network · infrastructure',
    desc: 'Residential proxy per account, fingerprint isolation per session, geo-pinned to the audience you\u2019re posting to. Rotation policies tuned per platform.',
    tags: ['Residential', 'Per-account', 'Geo-pinned']
  },
  {
    name: 'Workflow Engine',
    sub: 'Programmable orchestration',
    desc: 'Chain triggers, conditions, content generation, posting, replies, and human checkpoints. Visual builder for owners; YAML for power users.',
    tags: ['Triggers', 'Branches', 'Approvals', 'YAML']
  }
];

const ChannelsSection = () => {
  return (
    <section className="lp-section" id="channels">
      <div className="lp">
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48, flexWrap: 'wrap'}}>
          <div style={{maxWidth: 820}}>
            <div className="lp-eyebrow">/ 03 · Connected channels</div>
            <h2 className="lp-h2" style={{marginTop: 18}}>
              Every channel your<br/>
              market <em className="lp-brass">lives on</em>.
            </h2>
          </div>
          <p className="lp-lede" style={{maxWidth: 380, fontSize: 15.5}}>
            Calliope ships. Atlas reaches. Hermes calls. The operators publish, message, and respond
            natively across every surface — on schedule, in your voice.
          </p>
        </div>

        {CHANNEL_GROUPS.map((g, gi) => (
          <div className="lp-ch-group" key={gi}>
            <div className="lp-ch-group-hd">
              <div>
                <div className="lp-ch-group-lbl">/ {g.label}</div>
                <div className="lp-ch-group-sub">{g.sub}</div>
              </div>
              {g.flagged ? (
                <div className="lp-ch-flag">
                  <span className="pip"></span>
                  <span>Session-based · ToS-aware</span>
                </div>
              ) : (
                <div className="lp-ch-count">
                  {g.items.length} platforms · all bi-directional
                </div>
              )}
            </div>
            <div className={`lp-ch-grid ${g.flagged ? 'flagged' : ''}`}>
              {g.items.map(it => (
                <div className={`lp-ch-card ${g.flagged ? 'session' : ''}`} key={it.key}>
                  <div className="lp-ch-glyph"><ChannelGlyph kind={it.key}/></div>
                  <div className="lp-ch-info">
                    <div className="lp-ch-name">{it.name}</div>
                    <div className="lp-ch-cap">{it.cap}</div>
                  </div>
                  <div className="lp-ch-pip"></div>
                </div>
              ))}
            </div>
            {g.note ? <div className="lp-ch-note">{g.note}</div> : null}
          </div>
        ))}

        <div className="lp-cap-grid">
          {CAPABILITIES.map((c, i) => (
            <div className="lp-cap-card" key={i}>
              <div className="lp-cap-ix">/ {String(i + 1).padStart(2, '0')}</div>
              <div className="lp-cap-name">{c.name}</div>
              <div className="lp-cap-sub">{c.sub}</div>
              <div className="lp-cap-desc">{c.desc}</div>
              <div className="lp-cap-tags">
                {c.tags.map((t, ti) => <span key={ti} className="lp-cap-tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.ChannelsSection = ChannelsSection;