/* Demo section — swapped from a fake composer to a replica of the
   AutoArchitect kanban board. Title copy stays the same ("LIVE · TRY IT"). */

const KANBAN_PROJECT = {
  name: 'Create a social media...',
  tag: 'UCI social media repurpose',
  active: true,
  taskCount: 7,
  progress: 29,
  hoursLeft: '140 hrs',
};

const KANBAN_COLUMNS = [
  {
    id: 'backlog',
    title: 'BACKLOG',
    count: 2,
    icon: 'inbox',
    cards: [
      {
        id: 1, priority: 'high', agent: 'builder', agentColor: '#34d399',
        title: 'Build: Twitter Posts page',
        desc: '↪ Product Goal · Create a social…',
        size: '1 day',
      },
      {
        id: 2, priority: 'high', agent: 'builder', agentColor: '#34d399',
        title: 'Build: Instagram Posts page',
        desc: '↪ Product Goal · Create a social…',
        size: '1 day',
      },
    ],
  },
  {
    id: 'todo',
    title: 'TODO',
    count: 0,
    icon: 'circleDash',
    cards: [],
  },
  {
    id: 'inprogress',
    title: 'IN PROGRESS',
    count: 2,
    icon: 'spin',
    cards: [
      {
        id: 3, priority: 'high', agent: 'builder', agentColor: '#34d399', active: true,
        title: 'Iterate: add a visible badge at the top of the page with the te…',
        desc: 'ITERATE (patch) · Canvas step sch…',
        badges: [{ kind: 'tag', text: 'iterate' }, { kind: 'tag', text: 'patch' }],
      },
      {
        id: 4, priority: 'high', agent: 'builder', agentColor: '#34d399', active: true,
        title: 'Build: App Shell',
        desc: '↪ Product Goal · Create a social…',
      },
    ],
  },
  {
    id: 'done',
    title: 'DONE',
    count: 2,
    icon: 'check',
    cards: [
      {
        id: 5, priority: 'critical', agent: 'strategist', agentColor: 'var(--info)',
        title: 'Plan: UCI social media repurpose',
        desc: '↪ Product Goal · Create a social…',
        artifact: '1 artifact',
        artifactMeta: 'plan.md · 2.1 KB',
      },
      {
        id: 6, priority: 'critical', agent: 'researcher', agentColor: '#c084fc',
        title: 'PRD: UCI social media repurpose',
        desc: '↪ Product Goal · Create a social…',
        artifact: '1 artifact',
      },
    ],
  },
  {
    id: 'blocked',
    title: 'BLOCKED',
    count: 1,
    icon: 'block',
    cards: [
      {
        id: 7, priority: 'high', agent: 'builder', agentColor: '#34d399', blocked: true,
        title: 'Build: Calendar page',
        desc: '↪ Product Goal · Create a social…',
        size: '1 day',
      },
    ],
  },
];

const DemoSection = () => {
  return (
    <section style={{ paddingTop: 120, paddingBottom: 60, position: 'relative' }}>
      <Container wide>
        <div style={{ maxWidth: 720, marginBottom: 44 }}>
          <SectionLabel index={1} label="HOW IT WORKS" />
          <DisplayTitle size={54}>
            One prompt.<br/>
            <Italic style={{ color: 'var(--accent-2)' }}>Architect.</Italic><br/>
            Production code.
          </DisplayTitle>
          <p style={{
            marginTop: 18, fontSize: 16, color: 'var(--fg-2)',
            maxWidth: 560, lineHeight: 1.55,
          }}>
            Describe any app. Architect plans, decomposes the work into a real
            sprint on the kanban you own, writes the code, and ships a live
            preview — iterating until the build is clean. When the bundle breaks
            it auto-pushes a top-priority blocker and fixes itself before
            anything else.
          </p>
        </div>

        <KanbanBoard />

        {/* Live footer strip under board */}
        <div style={{
          marginTop: 18,
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'var(--fg-3)', letterSpacing: '0.08em',
        }}>
          <span style={{ color: 'var(--fg-3)' }}>PREVIEW · RUNS IN YOUR STUDIO</span>
          <span style={{ color: 'var(--fg-4)' }}>·</span>
          <span>{window.SITE_STATS.agentCount} AGENTS</span>
          <span style={{ color: 'var(--fg-4)' }}>·</span>
          <span>SPRINT · KANBAN · CANVAS</span>
          <a href="/gallery.html" style={{ marginLeft: 'auto', color: 'var(--accent-2)' }}>
            SEE WHAT IT BUILDS →
          </a>
        </div>
      </Container>
    </section>
  );
};

const KanbanBoard = () => {
  const [activeTab, setActiveTab] = React.useState('build');
  return (
    <div style={{
      background: 'var(--bg-1)',
      border: '1px solid var(--line-2)',
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: '0 40px 80px -20px rgba(0,0,0,0.5)',
    }}>
      {/* Header bar — mimic the in-app project toolbar */}
      <BoardHeader activeTab={activeTab} setActiveTab={setActiveTab} />
      <SprintBar />

      {/* Columns */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        gap: 1,
        background: 'var(--line-1)',
        minHeight: 480,
      }} className="kanban-columns">
        {KANBAN_COLUMNS.map((col) => <KanbanColumn key={col.id} col={col} />)}
      </div>
    </div>
  );
};

const BoardHeader = ({ activeTab, setActiveTab }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 14,
    padding: '14px 18px',
    borderBottom: '1px solid var(--line-2)',
    background: 'var(--bg-2)',
  }}>
    {/* Back chevron */}
    <button style={{
      width: 26, height: 26, borderRadius: 7,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--bg-3)', border: '1px solid var(--line-2)',
      color: 'var(--fg-3)', cursor: 'pointer',
    }}>
      <I.chevron size={12} style={{ transform: 'rotate(90deg)' }} />
    </button>

    {/* Studio sub-brand mark — single source of truth in marks.jsx */}
    <window.StudioMark size={16} withWordmark idKey="demo" wordmarkColor="var(--fg-3)" style={{ marginRight: 4 }} />


    {/* Project avatar */}
    <div style={{
      width: 28, height: 28, borderRadius: 8,
      background: 'linear-gradient(135deg, var(--accent), var(--accent-2))',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#0a0b0d', fontWeight: 700, fontSize: 11,
      fontFamily: 'var(--font-mono)',
      flexShrink: 0,
    }}>CR</div>

    <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>
      {KANBAN_PROJECT.name}
    </div>

    {/* Tabs */}
    <div style={{ display: 'flex', gap: 2, marginLeft: 16 }}>
      {[
        { id: 'build',    label: 'Build',    icon: 'scroll',  active: true },
        { id: 'code',     label: 'Code',     icon: 'code' },
        { id: 'delivery', label: 'Delivery', icon: 'check' },
        { id: 'deploy',   label: 'Deploy',   icon: 'bolt' },
        { id: 'preview',  label: 'Preview',  icon: 'external' },
      ].map((t) => {
        const Icn = I[t.icon];
        const isActive = activeTab === t.id;
        return (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '5px 11px',
              fontSize: 12, fontWeight: 500,
              color: isActive ? 'var(--accent-2)' : 'var(--fg-2)',
              background: isActive ? 'var(--accent-soft)' : 'transparent',
              border: `1px solid ${isActive ? 'var(--line-3)' : 'transparent'}`,
              borderRadius: 7, cursor: 'pointer',
            }}>
            <Icn size={11} />
            {t.label}
          </button>
        );
      })}
    </div>

    <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
      <button style={{
        padding: '5px 10px', fontSize: 12,
        color: 'var(--fg-2)',
        background: 'var(--bg-3)',
        border: '1px solid var(--line-2)',
        borderRadius: 6,
        display: 'inline-flex', alignItems: 'center', gap: 5,
        cursor: 'pointer',
      }}>
        <I.plus size={11} />
        New Sprint
      </button>
    </div>
  </div>
);

const SprintBar = () => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 14,
    padding: '10px 18px',
    borderBottom: '1px solid var(--line-2)',
    background: 'var(--bg-1)',
  }}>
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px',
      fontSize: 11.5,
      color: 'var(--ok)',
      background: 'rgba(52,211,153,0.08)',
      border: '1px solid rgba(52,211,153,0.25)',
      borderRadius: 6,
      fontFamily: 'var(--font-mono)',
    }}>
      <I.tag size={10} />
      {KANBAN_PROJECT.tag}
      <I.chevron size={9} style={{ marginLeft: 2 }} />
    </button>

    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '4px 10px',
      fontSize: 11.5, color: 'var(--accent-2)',
      background: 'var(--accent-soft)',
      border: '1px solid var(--line-3)',
      borderRadius: 6,
    }}>
      <I.plus size={10} />
      New Task
    </button>

    <span style={{
      padding: '3px 8px',
      fontSize: 10.5,
      fontFamily: 'var(--font-mono)',
      color: 'var(--accent-2)',
      background: 'var(--accent-soft)',
      borderRadius: 999,
      letterSpacing: '0.08em',
    }}>
      active
    </span>

    <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>
      {KANBAN_PROJECT.taskCount} tasks
    </span>

    {/* Progress bar with gradient */}
    <div style={{ flex: 1, height: 5, background: 'var(--bg-3)', borderRadius: 3, overflow: 'hidden', maxWidth: 320 }}>
      <div style={{
        width: `${KANBAN_PROJECT.progress}%`,
        height: '100%',
        background: 'linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3))',
        boxShadow: '0 0 8px var(--accent)',
      }} />
    </div>

    <span style={{ fontSize: 11, color: 'var(--fg-2)', fontFamily: 'var(--font-mono)' }}>
      {KANBAN_PROJECT.progress}%
    </span>
    <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>
      · {KANBAN_PROJECT.hoursLeft} left
    </span>

    <button style={{
      marginLeft: 'auto',
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '4px 10px',
      fontSize: 11.5,
      color: 'var(--fg-2)',
      background: 'var(--bg-2)',
      border: '1px solid var(--line-2)',
      borderRadius: 6,
    }}>
      <I.package size={10} />
      Deliverables
    </button>
  </div>
);

const KanbanColumn = ({ col }) => {
  const Icn = I[col.icon] || I.circleDash;
  return (
    <div style={{
      background: 'var(--bg-1)',
      padding: '14px 12px',
      display: 'flex', flexDirection: 'column', gap: 10,
      minHeight: 480,
    }}>
      {/* Column header */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        paddingBottom: 10,
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        color: 'var(--fg-3)',
        letterSpacing: '0.14em',
      }}>
        <Icn size={11} style={{ color: 'var(--fg-4)' }} />
        <span>{col.title}</span>
        <span style={{
          marginLeft: 'auto',
          padding: '1px 7px',
          fontSize: 10.5,
          background: 'var(--bg-3)',
          border: '1px solid var(--line-2)',
          borderRadius: 999,
          color: 'var(--fg-2)',
        }}>
          {col.count}
        </span>
      </div>

      {/* Cards */}
      {col.cards.length === 0 ? (
        <div style={{
          flex: 1,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', gap: 6,
          color: 'var(--fg-4)',
          fontFamily: 'var(--font-mono)',
          fontSize: 10.5,
          letterSpacing: '0.1em',
          opacity: 0.7,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            border: '1px dashed var(--line-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <I.circleDash size={11} />
          </div>
          No tasks
        </div>
      ) : (
        col.cards.map((card) => <KanbanCard key={card.id} card={card} />)
      )}
    </div>
  );
};

const KanbanCard = ({ card }) => {
  const [hover, setHover] = React.useState(false);
  const priorityColors = {
    critical: '#f87171',
    high:     '#fbbf24',
    medium:   '#60a5fa',
    low:      'var(--fg-4)',
  };
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--bg-2)',
        border: `1px solid ${card.active ? 'var(--line-3)' : hover ? 'var(--line-3)' : 'var(--line-2)'}`,
        borderRadius: 8,
        padding: '10px 11px',
        display: 'flex', flexDirection: 'column', gap: 8,
        cursor: 'pointer',
        transition: 'border-color 160ms, transform 160ms',
        transform: hover ? 'translateY(-1px)' : 'none',
        position: 'relative',
        overflow: 'hidden',
      }}>
      {/* Left priority indicator bar */}
      {card.active && (
        <div style={{
          position: 'absolute', left: 0, top: 8, bottom: 8, width: 2,
          background: priorityColors[card.priority],
          borderRadius: 2,
        }} />
      )}

      {/* Top row: priority tag + agent tag */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          padding: '1px 7px',
          fontSize: 9.5, fontFamily: 'var(--font-mono)',
          color: priorityColors[card.priority],
          background: `${priorityColors[card.priority]}1a`,
          borderRadius: 3,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          fontWeight: 600,
        }}>
          {card.active && (
            <span style={{
              width: 5, height: 5, borderRadius: '50%',
              background: priorityColors[card.priority],
              boxShadow: `0 0 4px ${priorityColors[card.priority]}`,
            }} />
          )}
          {card.priority}
        </span>
        <span style={{
          padding: '1px 7px',
          fontSize: 9.5, fontFamily: 'var(--font-mono)',
          color: card.agentColor,
          background: 'var(--bg-3)',
          border: `1px solid ${card.agentColor}40`,
          borderRadius: 3,
          letterSpacing: '0.06em',
        }}>
          {card.agent}
        </span>
        <span style={{
          marginLeft: 'auto',
          fontSize: 9.5, fontFamily: 'var(--font-mono)',
          color: 'var(--fg-4)',
          letterSpacing: '0.06em',
        }}>
          #{card.id.toString().padStart(3, '0')}
        </span>
      </div>

      {/* Title */}
      <div style={{
        fontSize: 12.5, lineHeight: 1.35,
        color: 'var(--fg-1)',
        fontWeight: 500,
        letterSpacing: '-0.005em',
        textWrap: 'pretty',
      }}>
        {card.title}
      </div>

      {/* Description line */}
      {card.desc && (
        <div style={{
          fontSize: 10.5,
          color: 'var(--fg-3)',
          lineHeight: 1.4,
          fontFamily: 'var(--font-mono)',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>
          {card.desc}
        </div>
      )}

      {/* Badges row: iterate/patch chips OR artifact chip OR size chip */}
      {(card.badges || card.artifact || card.size) && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 2 }}>
          {card.badges && card.badges.map((b, i) => (
            <span key={i} style={{
              padding: '1px 7px',
              fontSize: 9.5, fontFamily: 'var(--font-mono)',
              color: 'var(--fg-2)',
              background: 'var(--bg-3)',
              border: '1px solid var(--line-2)',
              borderRadius: 3,
              letterSpacing: '0.04em',
            }}>
              {b.text}
            </span>
          ))}
          {card.artifact && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '1px 7px',
              fontSize: 9.5, fontFamily: 'var(--font-mono)',
              color: 'var(--ok)',
              background: 'rgba(52,211,153,0.08)',
              border: '1px solid rgba(52,211,153,0.25)',
              borderRadius: 3,
              letterSpacing: '0.04em',
            }}>
              <I.paperclip size={9} />
              {card.artifact}
            </span>
          )}
          {card.size && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 3,
              padding: '1px 7px',
              fontSize: 9.5, fontFamily: 'var(--font-mono)',
              color: 'var(--fg-3)',
              background: 'var(--bg-3)',
              border: '1px solid var(--line-2)',
              borderRadius: 3,
              letterSpacing: '0.04em',
            }}>
              <I.clock size={9} />
              {card.size}
            </span>
          )}
        </div>
      )}
    </div>
  );
};

window.DemoSection = DemoSection;